Agent chat, config editor, vault reader, network status - initial implementation
This commit is contained in:
+290
@@ -6,6 +6,10 @@ function navigate(hash) {
|
||||
const target = hash.replace('#', '') || 'agents';
|
||||
sections.forEach(s => s.hidden = s.id !== target);
|
||||
links.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + target));
|
||||
// Init config panel when navigated to
|
||||
if (target === 'config') {
|
||||
initConfigPanel();
|
||||
}
|
||||
}
|
||||
|
||||
links.forEach(l => l.addEventListener('click', e => {
|
||||
@@ -15,3 +19,289 @@ links.forEach(l => l.addEventListener('click', e => {
|
||||
|
||||
window.addEventListener('hashchange', () => navigate(window.location.hash));
|
||||
navigate(window.location.hash || '#agents');
|
||||
|
||||
// ── Config File Editor ────────────────────────────────────────────────
|
||||
|
||||
let configState = {
|
||||
files: [],
|
||||
currentFile: null,
|
||||
currentContent: '',
|
||||
currentPath: '',
|
||||
dirty: false,
|
||||
lastSaved: null,
|
||||
};
|
||||
|
||||
function initConfigPanel() {
|
||||
if (configState.files.length === 0) {
|
||||
loadFileList();
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFileList() {
|
||||
const container = document.getElementById('config-files-container');
|
||||
container.innerHTML = '<p class="loading-text">Loading files...</p>';
|
||||
try {
|
||||
const res = await fetch('/api/config/list');
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
configState.files = data.files;
|
||||
renderFileList(data.files);
|
||||
} catch (err) {
|
||||
container.innerHTML = `<p class="error-text">Failed to load files: ${err.message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderFileList(files) {
|
||||
const container = document.getElementById('config-files-container');
|
||||
const countEl = document.getElementById('config-count');
|
||||
countEl.textContent = `${files.length} file${files.length !== 1 ? 's' : ''}`;
|
||||
|
||||
if (files.length === 0) {
|
||||
container.innerHTML = '<p class="empty-text">No config files found.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
files.forEach(f => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'config-file-item';
|
||||
if (configState.currentPath === f.path) {
|
||||
item.classList.add('selected');
|
||||
}
|
||||
item.dataset.path = f.path;
|
||||
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.className = 'file-item-name';
|
||||
nameSpan.textContent = f.label || f.filename;
|
||||
|
||||
const metaSpan = document.createElement('span');
|
||||
metaSpan.className = 'file-item-meta';
|
||||
if (f.missing) {
|
||||
metaSpan.textContent = 'missing';
|
||||
metaSpan.style.color = 'var(--text-muted)';
|
||||
} else {
|
||||
metaSpan.textContent = formatFileSize(f.size) + ' · ' + f.line_count + ' lines';
|
||||
}
|
||||
|
||||
item.appendChild(nameSpan);
|
||||
item.appendChild(metaSpan);
|
||||
item.addEventListener('click', () => openFile(f.path));
|
||||
container.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const units = ['B', 'KB', 'MB'];
|
||||
const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), 2);
|
||||
return (bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
|
||||
}
|
||||
|
||||
async function openFile(path) {
|
||||
configState.dirty = false;
|
||||
configState.currentPath = path;
|
||||
configState.lastSaved = null;
|
||||
|
||||
// Show editor view
|
||||
document.getElementById('config-file-list').hidden = true;
|
||||
document.getElementById('config-editor').hidden = false;
|
||||
document.getElementById('config-editor-textarea').disabled = true;
|
||||
document.getElementById('config-editor-textarea').value = 'Loading...';
|
||||
document.getElementById('editor-line-numbers').innerHTML = '';
|
||||
document.getElementById('editor-filename').textContent = '';
|
||||
document.getElementById('status-path').textContent = 'Loading...';
|
||||
document.getElementById('status-meta').textContent = '';
|
||||
document.getElementById('status-saved').textContent = '';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/config/read?path=' + encodeURIComponent(path));
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.error || `HTTP ${res.status}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
configState.currentFile = data;
|
||||
configState.currentContent = data.content;
|
||||
|
||||
const filename = data.label || data.filename;
|
||||
document.getElementById('editor-filename').textContent = filename;
|
||||
document.getElementById('config-editor-textarea').value = data.content;
|
||||
document.getElementById('config-editor-textarea').disabled = false;
|
||||
document.getElementById('config-editor-textarea').focus();
|
||||
|
||||
// Status bar
|
||||
document.getElementById('status-path').textContent = data.path;
|
||||
document.getElementById('status-meta').textContent = formatFileSize(data.size) + ' · ' + data.line_count + ' lines';
|
||||
document.getElementById('status-saved').textContent = data.last_modified
|
||||
? 'Last modified: ' + formatTimestamp(data.last_modified)
|
||||
: '';
|
||||
|
||||
updateLineNumbers();
|
||||
document.getElementById('config-editor-textarea').addEventListener('input', onEditorChange);
|
||||
document.getElementById('config-editor-textarea').addEventListener('scroll', syncScroll);
|
||||
document.getElementById('config-editor-textarea').addEventListener('keydown', handleEditorKeydown);
|
||||
|
||||
// Highlight selected in file list
|
||||
renderFileList(configState.files);
|
||||
} catch (err) {
|
||||
showToast('Error loading file: ' + err.message, 'error');
|
||||
document.getElementById('config-editor-textarea').value = '';
|
||||
document.getElementById('config-editor-textarea').disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onEditorChange() {
|
||||
configState.dirty = true;
|
||||
updateLineNumbers();
|
||||
updateSaveButton();
|
||||
}
|
||||
|
||||
function updateSaveButton() {
|
||||
const btn = document.getElementById('config-save-btn');
|
||||
if (configState.dirty) {
|
||||
btn.textContent = 'Save';
|
||||
btn.style.background = 'var(--accent)';
|
||||
} else {
|
||||
btn.textContent = 'Saved ✓';
|
||||
btn.style.background = 'var(--success)';
|
||||
}
|
||||
}
|
||||
|
||||
function syncScroll() {
|
||||
const textarea = document.getElementById('config-editor-textarea');
|
||||
const lineNumbers = document.getElementById('editor-line-numbers');
|
||||
lineNumbers.scrollTop = textarea.scrollTop;
|
||||
}
|
||||
|
||||
function handleEditorKeydown(e) {
|
||||
// Tab key support
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
const textarea = document.getElementById('config-editor-textarea');
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const val = textarea.value;
|
||||
textarea.value = val.substring(0, start) + ' ' + val.substring(end);
|
||||
textarea.selectionStart = textarea.selectionEnd = start + 4;
|
||||
onEditorChange();
|
||||
}
|
||||
// Ctrl+S / Cmd+S
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
saveFile();
|
||||
}
|
||||
}
|
||||
|
||||
function updateLineNumbers() {
|
||||
const textarea = document.getElementById('config-editor-textarea');
|
||||
const lineNumbers = document.getElementById('editor-line-numbers');
|
||||
const lines = textarea.value.split('\n');
|
||||
const count = lines.length;
|
||||
let html = '';
|
||||
for (let i = 1; i <= count; i++) {
|
||||
html += '<div class="ln">' + i + '</div>';
|
||||
}
|
||||
lineNumbers.innerHTML = html;
|
||||
}
|
||||
|
||||
function goBackToList() {
|
||||
if (configState.dirty) {
|
||||
if (!confirm('You have unsaved changes. Discard them?')) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
document.getElementById('config-file-list').hidden = false;
|
||||
document.getElementById('config-editor').hidden = true;
|
||||
configState.currentFile = null;
|
||||
configState.currentContent = '';
|
||||
configState.currentPath = '';
|
||||
configState.dirty = false;
|
||||
renderFileList(configState.files);
|
||||
}
|
||||
|
||||
async function saveFile() {
|
||||
if (!configState.dirty) return;
|
||||
|
||||
const textarea = document.getElementById('config-editor-textarea');
|
||||
const content = textarea.value;
|
||||
const path = configState.currentPath;
|
||||
|
||||
// Confirmation dialog
|
||||
if (!confirm('Save changes to ' + (configState.currentFile?.label || path) + '?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('config-save-btn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Saving...';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/config/save', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ path, content }),
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || `HTTP ${res.status}`);
|
||||
}
|
||||
|
||||
configState.dirty = false;
|
||||
configState.lastSaved = new Date();
|
||||
configState.currentContent = content;
|
||||
|
||||
// Update status
|
||||
document.getElementById('status-meta').textContent = formatFileSize(data.size) + ' · ' + data.line_count + ' lines';
|
||||
document.getElementById('status-saved').textContent = 'Saved: ' + formatTimestamp(new Date().toISOString());
|
||||
|
||||
showToast('File saved successfully. Backup: ' + data.backup_path, 'success');
|
||||
updateSaveButton();
|
||||
|
||||
// Refresh file list metadata
|
||||
loadFileList();
|
||||
} catch (err) {
|
||||
showToast('Save failed: ' + err.message, 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimestamp(iso) {
|
||||
try {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString(undefined, {
|
||||
month: 'short', day: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit', second: '2-digit',
|
||||
});
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(message, type) {
|
||||
const toast = document.getElementById('config-toast');
|
||||
toast.textContent = message;
|
||||
toast.className = 'config-toast toast-' + (type || 'info');
|
||||
toast.hidden = false;
|
||||
|
||||
// Position toast
|
||||
const editor = document.querySelector('.config-editor');
|
||||
if (!editor.hidden) {
|
||||
const rect = editor.getBoundingClientRect();
|
||||
toast.style.top = (rect.top + 20) + 'px';
|
||||
toast.style.left = '50%';
|
||||
toast.style.transform = 'translateX(-50%)';
|
||||
}
|
||||
|
||||
clearTimeout(toast._timeout);
|
||||
toast._timeout = setTimeout(() => {
|
||||
toast.hidden = true;
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
// ── Event listeners ──────────────────────────────────────────────────
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('config-save-btn').addEventListener('click', saveFile);
|
||||
document.getElementById('config-back-btn').addEventListener('click', goBackToList);
|
||||
});
|
||||
|
||||
+19
-2
@@ -27,8 +27,24 @@
|
||||
<p>Coming soon...</p>
|
||||
</section>
|
||||
<section id="vault" class="panel" hidden>
|
||||
<h2>Obsidian Vault</h2>
|
||||
<p>Coming soon...</p>
|
||||
<div id="vault-app">
|
||||
<div class="vault-toolbar">
|
||||
<button id="vault-toggle-tree" class="vault-btn" title="Toggle file tree">📂</button>
|
||||
<div class="vault-search-box">
|
||||
<input type="text" id="vault-search-input" placeholder="Search vault..." />
|
||||
<div id="vault-search-results" class="vault-search-dropdown" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vault-body">
|
||||
<div id="vault-tree" class="vault-tree-panel"></div>
|
||||
<div id="vault-content" class="vault-content-panel">
|
||||
<div class="vault-welcome">
|
||||
<h2>Obsidian Vault</h2>
|
||||
<p>Select a file from the tree or search to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="network" class="panel" hidden>
|
||||
<h2>Network Status</h2>
|
||||
@@ -37,5 +53,6 @@
|
||||
</main>
|
||||
</div>
|
||||
<script src="/static/app.js"></script>
|
||||
<script src="/static/vault.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -31,3 +31,132 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
|
||||
.nav-links a.active { border-right: none; border-bottom-color: var(--accent); }
|
||||
.content { margin-left: 0; padding: 12px; }
|
||||
}
|
||||
|
||||
/* ── Config Panel ───────────────────────────────────────────────── */
|
||||
.config-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.config-panel h2 { margin: 0; font-size: 16px; }
|
||||
|
||||
.config-file-list,
|
||||
.config-editor {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* File List */
|
||||
.config-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.config-count {
|
||||
font-size: 12px; color: var(--text-muted);
|
||||
}
|
||||
.config-files-container {
|
||||
max-height: 520px; overflow-y: auto;
|
||||
}
|
||||
.config-file-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 10px 12px; border-radius: 6px; cursor: pointer;
|
||||
transition: background 0.12s; border: 1px solid transparent;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.config-file-item:hover { background: rgba(0,212,255,0.06); border-color: var(--border); }
|
||||
.config-file-item.selected {
|
||||
background: rgba(0,212,255,0.1); border-color: var(--accent);
|
||||
}
|
||||
.file-item-name { font-size: 14px; font-weight: 500; flex: 1; }
|
||||
.file-item-meta { font-size: 11px; color: var(--text-muted); margin-left: 12px; white-space: nowrap; }
|
||||
|
||||
/* Editor */
|
||||
.editor-header {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
margin-bottom: 12px; padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.editor-filename {
|
||||
font-size: 16px; font-weight: 600; flex: 1;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.editor-actions { display: flex; gap: 8px; }
|
||||
.editor-body {
|
||||
display: flex; position: relative;
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
overflow: hidden; background: #0a0e14;
|
||||
}
|
||||
.editor-line-numbers {
|
||||
flex: 0 0 48px; padding: 10px 0; overflow: hidden;
|
||||
background: #0d1117; border-right: 1px solid var(--border);
|
||||
text-align: right; user-select: none;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
font-size: 13px; line-height: 1.5;
|
||||
color: var(--text-muted); min-height: 200px;
|
||||
}
|
||||
.editor-line-numbers .ln {
|
||||
padding: 0 8px; height: 19.5px;
|
||||
}
|
||||
.editor-textarea {
|
||||
flex: 1; padding: 10px 12px; border: none; outline: none; resize: none;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
font-size: 13px; line-height: 1.5; tab-size: 4;
|
||||
background: transparent; color: var(--text); min-height: 300px;
|
||||
}
|
||||
.editor-textarea:disabled {
|
||||
opacity: 0.5; cursor: wait;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
.editor-status-bar {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
margin-top: 8px; padding: 6px 12px;
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
font-size: 11px; color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
}
|
||||
#status-path {
|
||||
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.status-saved { color: var(--success); flex-shrink: 0; }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
|
||||
background: var(--surface); color: var(--text); cursor: pointer;
|
||||
font-size: 13px; transition: all 0.12s; white-space: nowrap;
|
||||
}
|
||||
.btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-primary {
|
||||
background: var(--accent); color: #000; border-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-sm { padding: 4px 10px; font-size: 12px; }
|
||||
|
||||
/* Toast Notification */
|
||||
.config-toast {
|
||||
position: fixed; z-index: 9999;
|
||||
padding: 10px 20px; border-radius: var(--radius);
|
||||
font-size: 13px; font-weight: 500;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
|
||||
max-width: 80%; text-align: center;
|
||||
animation: toast-in 0.2s ease;
|
||||
}
|
||||
.toast-success { background: #1a3a2a; border: 1px solid var(--success); color: var(--success); }
|
||||
.toast-error { background: #3a1a1a; border: 1px solid var(--danger); color: var(--danger); }
|
||||
.toast-info { background: #1a2a3a; border: 1px solid var(--accent); color: var(--accent); }
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.config-panel { padding: 0; }
|
||||
.config-file-list, .config-editor { padding: 12px; }
|
||||
.config-file-item { padding: 8px 10px; }
|
||||
.editor-body { flex-direction: column; }
|
||||
.editor-line-numbers { display: none; }
|
||||
.editor-textarea { min-height: 250px; }
|
||||
.editor-header { flex-wrap: wrap; }
|
||||
.editor-filename { width: 100%; font-size: 14px; }
|
||||
.editor-status-bar { flex-wrap: wrap; gap: 8px; }
|
||||
}
|
||||
|
||||
+428
@@ -0,0 +1,428 @@
|
||||
/* ── Obsidian Vault Reader ─────────────────────────────────────────────
|
||||
* File tree navigation, markdown rendering, wiki-links, search.
|
||||
* Relies on server.py's /api/vault/* endpoints.
|
||||
*/
|
||||
|
||||
const VAULT_API = '/api/vault';
|
||||
|
||||
// ── Markdown Renderer ────────────────────────────────────────────────
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(text));
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function renderMarkdown(md) {
|
||||
// Normalise line endings
|
||||
let text = md.replace(/\r\n?/g, '\n');
|
||||
|
||||
// Extract code blocks first so they're not mangled by inline rules
|
||||
const blocks = [];
|
||||
text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
|
||||
const idx = blocks.length;
|
||||
blocks.push(`<pre><code class="lang-${escapeHtml(lang || '')}">${escapeHtml(code.trimEnd())}</code></pre>`);
|
||||
return `\x00CODEBLOCK${idx}\x00`;
|
||||
});
|
||||
|
||||
// Inline code
|
||||
text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
|
||||
|
||||
// Wiki-links [[Page Name]] → clickable links
|
||||
text = text.replace(/\[\[([^\]]+)\]\]/g, (_, page) => {
|
||||
const label = page.includes('|') ? page.split('|')[1] : page;
|
||||
const target = page.split('|')[0];
|
||||
const href = '#' + target.replace(/\s+/g, '-').toLowerCase();
|
||||
return `<a href="#" class="wiki-link" data-wiki-link="${escapeHtml(target)}">${escapeHtml(label)}</a>`;
|
||||
});
|
||||
|
||||
// Images 
|
||||
text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" loading="lazy">');
|
||||
|
||||
// Links [text](url)
|
||||
text = text.replace(/(?<!!)\[([^\]]*)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
||||
|
||||
// Bold/italic: ***bold italic***, **bold**, *italic*
|
||||
text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
||||
text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||
text = text.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');
|
||||
|
||||
// Strikethrough
|
||||
text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
|
||||
|
||||
// Blockquotes
|
||||
text = text.replace(/^>(.*)$/gm, '<blockquote>$1</blockquote>');
|
||||
text = text.replace(/^>(.*)$/gm, '<blockquote>$1</blockquote>');
|
||||
|
||||
// Horizontal rules
|
||||
text = text.replace(/^(---|\*\*\*|___)\s*$/gm, '<hr>');
|
||||
|
||||
// Headings (must be at start of line)
|
||||
text = text.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
|
||||
text = text.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
|
||||
text = text.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
|
||||
text = text.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
|
||||
text = text.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
|
||||
text = text.replace(/^#\s+(.+)$/gm, function (_, title) {
|
||||
const id = title.replace(/\s+/g, '-').replace(/[^\w-]/g, '').toLowerCase();
|
||||
return `<h1 id="${id}">${title}</h1>`;
|
||||
});
|
||||
|
||||
// Ordered lists
|
||||
text = text.replace(/^(?:\d+\.\s.*(?:\n|$))+/gm, function (match) {
|
||||
const items = match.trim().split('\n').map(l => l.replace(/^\d+\.\s+/, '').trim());
|
||||
return '<ol>' + items.map(i => `<li>${i}</li>`).join('') + '</ol>\n';
|
||||
});
|
||||
|
||||
// Unordered lists
|
||||
text = text.replace(/^(?:[-*+]\s.*(?:\n|$))+/gm, function (match) {
|
||||
const items = match.trim().split('\n').map(l => l.replace(/^[-*+]\s+/, '').trim());
|
||||
return '<ul>' + items.map(i => `<li>${i}</li>`).join('') + '</ul>\n';
|
||||
});
|
||||
|
||||
// Tables (pipe tables: header | separator | rows)
|
||||
text = text.replace(/^(\|.+\|)\n\|[-| :]+\|\n((?:\|.+\|\n?)*)/gm, function (_, header, rows) {
|
||||
const headers = header.split('|').map(c => c.trim()).filter(Boolean);
|
||||
const rowLines = rows.trim().split('\n').filter(l => l.trim());
|
||||
const body = rowLines.map(r => {
|
||||
const cells = r.split('|').map(c => c.trim()).filter(Boolean);
|
||||
return '<tr>' + cells.map(c => `<td>${c}</td>`).join('') + '</tr>';
|
||||
}).join('');
|
||||
return '<table><thead><tr>' + headers.map(h => `<th>${h}</th>`).join('') + '</tr></thead><tbody>' + body + '</tbody></table>\n';
|
||||
});
|
||||
|
||||
// Restore code blocks
|
||||
text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_, idx) => blocks[parseInt(idx)]);
|
||||
|
||||
// Double line breaks → paragraph breaks (but not inside block elements)
|
||||
// Simple approach: wrap consecutive text lines in <p> tags
|
||||
// Skip elements that are already block-level
|
||||
const blockTags = ['<h1', '<h2', '<h3', '<h4', '<h5', '<h6', '<pre', '<ul', '<ol', '<blockquote', '<hr', '<table', '<div'];
|
||||
const lines = text.split('\n');
|
||||
let html = '';
|
||||
let paraLines = [];
|
||||
|
||||
function flushPara() {
|
||||
if (paraLines.length) {
|
||||
const pText = paraLines.join('<br>');
|
||||
if (pText.trim()) {
|
||||
html += '<p>' + pText.trim() + '</p>\n';
|
||||
}
|
||||
paraLines = [];
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
if (!line) {
|
||||
flushPara();
|
||||
continue;
|
||||
}
|
||||
const isBlock = blockTags.some(tag => line.startsWith(tag));
|
||||
if (isBlock) {
|
||||
flushPara();
|
||||
html += line + '\n';
|
||||
} else {
|
||||
paraLines.push(line);
|
||||
}
|
||||
}
|
||||
flushPara();
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// ── Vault API helpers ─────────────────────────────────────────────────
|
||||
async function apiFetch(url) {
|
||||
const resp = await fetch(url);
|
||||
if (!resp.ok) {
|
||||
let msg = `HTTP ${resp.status}`;
|
||||
try {
|
||||
const body = await resp.json();
|
||||
if (body.error) msg = body.error;
|
||||
} catch (_) {}
|
||||
throw new Error(msg);
|
||||
}
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
// ── Tree Node Cache ───────────────────────────────────────────────────
|
||||
// We cache directory contents so expanding/collapsing folders doesn't re-fetch.
|
||||
const treeCache = new Map();
|
||||
|
||||
async function getTree(dirPath) {
|
||||
const key = dirPath || '';
|
||||
if (treeCache.has(key)) return treeCache.get(key);
|
||||
const params = dirPath ? `?path=${encodeURIComponent(dirPath)}` : '';
|
||||
const data = await apiFetch(`${VAULT_API}/tree${params}`);
|
||||
treeCache.set(key, data);
|
||||
return data;
|
||||
}
|
||||
|
||||
function invalidateTreeCache(path) {
|
||||
// If we update a path, clear its parent cache too
|
||||
const parts = path.split('/');
|
||||
while (parts.length) {
|
||||
treeCache.delete(parts.join('/'));
|
||||
parts.pop();
|
||||
}
|
||||
treeCache.delete(''); // root
|
||||
}
|
||||
|
||||
// ── Tree Panel ────────────────────────────────────────────────────────
|
||||
let treeLoadStack = []; // tracks which nodes are expanded
|
||||
|
||||
function renderTree(dirPath, container, level) {
|
||||
level = level || 0;
|
||||
const padding = level * 18;
|
||||
|
||||
getTree(dirPath).then(data => {
|
||||
const items = data.items || [];
|
||||
for (const item of items) {
|
||||
const node = document.createElement('div');
|
||||
node.className = 'vault-tree-node';
|
||||
node.style.paddingLeft = (padding + 4) + 'px';
|
||||
|
||||
if (item.type === 'folder') {
|
||||
const isExpanded = treeLoadStack.includes(dirPath + '/' + item.name);
|
||||
const icon = isExpanded ? '▼' : '▶';
|
||||
node.innerHTML = `<span class="tree-folder-icon">${icon}</span> <span class="tree-folder-name">${escapeHtml(item.name)}</span>`;
|
||||
node.className += ' vault-tree-folder';
|
||||
node._path = dirPath ? dirPath + '/' + item.name : item.name;
|
||||
node._expanded = isExpanded;
|
||||
|
||||
if (isExpanded) {
|
||||
const childContainer = document.createElement('div');
|
||||
childContainer.className = 'vault-tree-children';
|
||||
node.appendChild(childContainer);
|
||||
renderTree(node._path, childContainer, level + 1);
|
||||
}
|
||||
|
||||
node.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
toggleFolder(node);
|
||||
});
|
||||
} else if (item.name.endsWith('.md') || item.name.endsWith('.txt') || item.name.endsWith('.markdown')) {
|
||||
node.innerHTML = `<span class="tree-file-icon">📄</span> <span class="tree-file-name">${escapeHtml(item.name)}</span>`;
|
||||
node.className += ' vault-tree-file';
|
||||
node._path = dirPath ? dirPath + '/' + item.name : item.name;
|
||||
node.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
loadFile(node._path);
|
||||
});
|
||||
} else {
|
||||
node.innerHTML = `<span class="tree-file-icon">📄</span> <span class="tree-file-name tree-muted">${escapeHtml(item.name)}</span>`;
|
||||
node.className += ' vault-tree-file vault-tree-other';
|
||||
}
|
||||
container.appendChild(node);
|
||||
}
|
||||
}).catch(err => {
|
||||
const errNode = document.createElement('div');
|
||||
errNode.className = 'vault-tree-error';
|
||||
errNode.textContent = '⚠️ ' + err.message;
|
||||
container.appendChild(errNode);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleFolder(node) {
|
||||
const children = node.querySelector('.vault-tree-children');
|
||||
const icon = node.querySelector('.tree-folder-icon');
|
||||
if (children) {
|
||||
// Collapse
|
||||
node.removeChild(children);
|
||||
icon.textContent = '▶';
|
||||
node._expanded = false;
|
||||
const idx = treeLoadStack.indexOf(node._path);
|
||||
if (idx > -1) treeLoadStack.splice(idx, 1);
|
||||
} else {
|
||||
// Expand
|
||||
icon.textContent = '▼';
|
||||
node._expanded = true;
|
||||
treeLoadStack.push(node._path);
|
||||
const childContainer = document.createElement('div');
|
||||
childContainer.className = 'vault-tree-children';
|
||||
node.appendChild(childContainer);
|
||||
renderTree(node._path, childContainer, parseInt(node.style.paddingLeft) / 18 + 1);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTree(rootPath) {
|
||||
const container = document.getElementById('vault-tree');
|
||||
container.innerHTML = ''; // clear
|
||||
treeLoadStack = [];
|
||||
renderTree(rootPath, container, 0);
|
||||
}
|
||||
|
||||
// ── Content Panel ─────────────────────────────────────────────────────
|
||||
async function loadFile(filePath) {
|
||||
const panel = document.getElementById('vault-content');
|
||||
panel.innerHTML = '<div class="vault-loading">Loading...</div>';
|
||||
|
||||
try {
|
||||
const data = await apiFetch(`${VAULT_API}/read?path=${encodeURIComponent(filePath)}`);
|
||||
const html = renderMarkdown(data.content);
|
||||
|
||||
panel.innerHTML = `
|
||||
<div class="vault-file-header">
|
||||
<span class="vault-file-path">${escapeHtml(data.path)}</span>
|
||||
</div>
|
||||
<div class="vault-markdown-body">${html}</div>
|
||||
`;
|
||||
|
||||
// Wire up wiki-link clicks
|
||||
panel.querySelectorAll('.wiki-link').forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
const target = link.dataset.wikiLink;
|
||||
navigateToWikiPage(target);
|
||||
});
|
||||
});
|
||||
|
||||
// Highlight current file in tree
|
||||
document.querySelectorAll('.vault-tree-file.active').forEach(el => el.classList.remove('active'));
|
||||
document.querySelectorAll('.vault-tree-file').forEach(el => {
|
||||
if (el._path === filePath) {
|
||||
el.classList.add('active');
|
||||
el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
panel.innerHTML = `<div class="vault-error"><strong>Error:</strong> ${escapeHtml(err.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function navigateToWikiPage(pageName) {
|
||||
// Look for a file named after the wiki link
|
||||
const encoded = encodeURIComponent(pageName);
|
||||
// Try exact filename first, then search
|
||||
const possiblePaths = [
|
||||
pageName + '.md',
|
||||
'wiki/' + pageName + '.md',
|
||||
pageName + '/' + pageName + '.md',
|
||||
];
|
||||
|
||||
for (const p of possiblePaths) {
|
||||
try {
|
||||
await apiFetch(`${VAULT_API}/read?path=${encodeURIComponent(p)}`);
|
||||
loadFile(p);
|
||||
return;
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// Fallback: search for it
|
||||
const data = await apiFetch(`${VAULT_API}/search?q=${encodeURIComponent(pageName)}`);
|
||||
if (data.results && data.results.length > 0) {
|
||||
loadFile(data.results[0].path);
|
||||
} else {
|
||||
const panel = document.getElementById('vault-content');
|
||||
panel.innerHTML = `<div class="vault-error"><strong>Page not found:</strong> ${escapeHtml(pageName)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Search ────────────────────────────────────────────────────────────
|
||||
let searchTimeout = null;
|
||||
|
||||
function setupSearch() {
|
||||
const input = document.getElementById('vault-search-input');
|
||||
const results = document.getElementById('vault-search-results');
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
clearTimeout(searchTimeout);
|
||||
const q = input.value.trim();
|
||||
if (q.length < 2) {
|
||||
results.hidden = true;
|
||||
return;
|
||||
}
|
||||
searchTimeout = setTimeout(() => performSearch(q), 300);
|
||||
});
|
||||
|
||||
// Close on Escape / click outside
|
||||
document.addEventListener('click', e => {
|
||||
if (!e.target.closest('.vault-search-box')) {
|
||||
results.hidden = true;
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape') results.hidden = true;
|
||||
if (e.key === 'Enter' && !results.hidden) {
|
||||
const first = results.querySelector('.vault-search-result-item');
|
||||
if (first) {
|
||||
first.click();
|
||||
results.hidden = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function performSearch(q) {
|
||||
const results = document.getElementById('vault-search-results');
|
||||
results.innerHTML = '<div class="vault-search-status">Searching...</div>';
|
||||
results.hidden = false;
|
||||
|
||||
try {
|
||||
const data = await apiFetch(`${VAULT_API}/search?q=${encodeURIComponent(q)}`);
|
||||
if (data.count === 0) {
|
||||
results.innerHTML = '<div class="vault-search-status">No results found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `<div class="vault-search-count">${data.count} result${data.count !== 1 ? 's' : ''}</div>`;
|
||||
for (const r of data.results.slice(0, 50)) {
|
||||
const displayPath = r.path.length > 80 ? '...' + r.path.slice(-77) : r.path;
|
||||
html += `<div class="vault-search-result-item" data-path="${escapeHtml(r.path)}" data-line="${r.line}">
|
||||
<div class="vault-search-result-path">${escapeHtml(displayPath)}:${r.line}</div>
|
||||
<div class="vault-search-result-snippet">${escapeHtml(r.snippet)}</div>
|
||||
</div>`;
|
||||
}
|
||||
if (data.count > 50) {
|
||||
html += `<div class="vault-search-status">... and ${data.count - 50} more</div>`;
|
||||
}
|
||||
results.innerHTML = html;
|
||||
|
||||
results.querySelectorAll('.vault-search-result-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
loadFile(item.dataset.path);
|
||||
results.hidden = true;
|
||||
document.getElementById('vault-search-input').value = '';
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
results.innerHTML = `<div class="vault-search-status">Error: ${escapeHtml(err.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Init ──────────────────────────────────────────────────────────────
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Only init vault when its panel is shown
|
||||
const vaultPanel = document.getElementById('vault');
|
||||
const observer = new MutationObserver(() => {
|
||||
if (!vaultPanel.hidden && !vaultPanel.dataset.vaultLoaded) {
|
||||
vaultPanel.dataset.vaultLoaded = 'true';
|
||||
initVault();
|
||||
}
|
||||
});
|
||||
observer.observe(vaultPanel, { attributes: true, attributeFilter: ['hidden'] });
|
||||
|
||||
// Also check initially
|
||||
if (!vaultPanel.hidden && !vaultPanel.dataset.vaultLoaded) {
|
||||
vaultPanel.dataset.vaultLoaded = 'true';
|
||||
initVault();
|
||||
}
|
||||
|
||||
// Toggle tree sidebar on mobile
|
||||
document.getElementById('vault-toggle-tree').addEventListener('click', () => {
|
||||
document.getElementById('vault-tree').classList.toggle('vault-tree-visible');
|
||||
});
|
||||
});
|
||||
|
||||
function initVault() {
|
||||
setupSearch();
|
||||
loadTree('');
|
||||
|
||||
// Close tree on file click in mobile view
|
||||
document.getElementById('vault-tree').addEventListener('click', e => {
|
||||
if (window.innerWidth <= 900 && e.target.closest('.vault-tree-file')) {
|
||||
document.getElementById('vault-tree').classList.remove('vault-tree-visible');
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user