@proflandrigan/shards 1.1.0

package/src/ui/js/guide.js

@@ -0,0 +1,198 @@
+// ═══════════════════════════════════════════════════════════════
+// Shards Developer Guide panel — sidebar TOC + markdown content
+// ═══════════════════════════════════════════════════════════════
+
+var guideState = {
+  manifest: null,      // { version, sections: [{id, title, pages: [{id, title, file}]}] }
+  currentFile: null,   // active page file (relative to docs root)
+  pageCache: {},       // file -> markdown text
+  searchIndex: null,   // [{ sectionId, pageId, title, file, body }]
+  searchQuery: '',
+};
+
+var GUIDE_LS_KEY = 'shards.guide.lastPage';
+
+function openGuidePanel() {
+  var sidebar = document.getElementById('explorer-sidebar');
+  if (sidebar && !sidebar.classList.contains('collapsed')) {
+    sidebar.classList.add('collapsed');
+    if (typeof saveLayout === 'function') saveLayout();
+  }
+  openPanelTab('guide-main', {
+    panel: 'guide',
+    title: 'Developer Guide',
+    data: null,
+  });
+}
+
+function cleanupGuide(panel) {
+  // nothing to tear down — state is persistent across re-renders
+}
+
+function renderGuidePanel(container, panel) {
+  container.classList.add('guide-panel');
+  container.innerHTML =
+    '<div class="guide-layout">' +
+      '<div class="guide-toc">' +
+        '<div class="guide-search-wrap">' +
+          '<input type="text" id="guide-search-input" placeholder="Search guide..." value="' + esc(guideState.searchQuery) + '">' +
+        '</div>' +
+        '<div id="guide-toc-tree"></div>' +
+      '</div>' +
+      '<div class="guide-content" id="guide-content">' +
+        '<div class="guide-loading">Loading…</div>' +
+      '</div>' +
+    '</div>';
+
+  var input = document.getElementById('guide-search-input');
+  input.addEventListener('input', function(e) {
+    guideState.searchQuery = e.target.value;
+    renderGuideToc();
+  });
+
+  if (guideState.manifest) {
+    renderGuideToc();
+    var file = guideState.currentFile || getLastPageFile() || firstPageFile();
+    if (file) loadGuidePage(file);
+  } else {
+    fetchGuideManifest().then(function() {
+      renderGuideToc();
+      var file = getLastPageFile() || firstPageFile();
+      if (file) loadGuidePage(file);
+    }).catch(function(err) {
+      document.getElementById('guide-content').innerHTML =
+        '<div class="guide-error">Failed to load guide: ' + esc(String(err && err.message || err)) + '</div>';
+    });
+  }
+}
+
+function getLastPageFile() {
+  try { return localStorage.getItem(GUIDE_LS_KEY) || null; } catch(e) { return null; }
+}
+
+function setLastPageFile(file) {
+  try { localStorage.setItem(GUIDE_LS_KEY, file); } catch(e) {}
+}
+
+function firstPageFile() {
+  var m = guideState.manifest;
+  if (!m || !m.sections || !m.sections.length) return null;
+  for (var i = 0; i < m.sections.length; i++) {
+    var pages = m.sections[i].pages || [];
+    if (pages.length) return pages[0].file;
+  }
+  return null;
+}
+
+function fetchGuideManifest() {
+  return fetch('/docs/manifest').then(function(r) {
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    return r.json();
+  }).then(function(json) {
+    guideState.manifest = json;
+    return json;
+  });
+}
+
+function renderGuideToc() {
+  var tree = document.getElementById('guide-toc-tree');
+  if (!tree) return;
+  var m = guideState.manifest;
+  if (!m) { tree.innerHTML = ''; return; }
+
+  var q = (guideState.searchQuery || '').trim().toLowerCase();
+  var html = '';
+  for (var i = 0; i < m.sections.length; i++) {
+    var s = m.sections[i];
+    var pages = (s.pages || []).filter(function(p) {
+      if (!q) return true;
+      if ((p.title || '').toLowerCase().indexOf(q) !== -1) return true;
+      if ((s.title || '').toLowerCase().indexOf(q) !== -1) return true;
+      var body = guideState.pageCache[p.file];
+      return body && body.toLowerCase().indexOf(q) !== -1;
+    });
+    if (!pages.length) continue;
+    html += '<div class="guide-section">';
+    html += '<div class="guide-section-title">' + esc(s.title) + '</div>';
+    html += '<ul class="guide-page-list">';
+    for (var j = 0; j < pages.length; j++) {
+      var p = pages[j];
+      var active = p.file === guideState.currentFile ? ' active' : '';
+      html += '<li class="guide-page-item' + active + '" data-file="' + esc(p.file) + '">' + esc(p.title) + '</li>';
+    }
+    html += '</ul></div>';
+  }
+  if (!html) html = '<div class="guide-empty">No matches</div>';
+  tree.innerHTML = html;
+
+  var items = tree.querySelectorAll('.guide-page-item');
+  for (var k = 0; k < items.length; k++) {
+    items[k].addEventListener('click', function() {
+      var file = this.getAttribute('data-file');
+      loadGuidePage(file);
+    });
+  }
+}
+
+function loadGuidePage(file) {
+  guideState.currentFile = file;
+  setLastPageFile(file);
+  renderGuideToc();
+  var content = document.getElementById('guide-content');
+  if (!content) return;
+
+  if (guideState.pageCache[file]) {
+    renderGuideMarkdown(content, guideState.pageCache[file], file);
+    return;
+  }
+
+  content.innerHTML = '<div class="guide-loading">Loading…</div>';
+  fetch('/docs/page?file=' + encodeURIComponent(file)).then(function(r) {
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    return r.text();
+  }).then(function(md) {
+    guideState.pageCache[file] = md;
+    renderGuideMarkdown(content, md, file);
+  }).catch(function(err) {
+    content.innerHTML = '<div class="guide-error">Failed to load ' + esc(file) + ': ' + esc(String(err && err.message || err)) + '</div>';
+  });
+}
+
+function renderGuideMarkdown(container, md, file) {
+  var html = renderMarkdown(md);
+  container.innerHTML = '<div class="guide-prose">' + html + '</div>';
+  container.scrollTop = 0;
+
+  // Intercept relative links between guide pages
+  var links = container.querySelectorAll('a[href]');
+  for (var i = 0; i < links.length; i++) {
+    var href = links[i].getAttribute('href');
+    if (!href || /^(https?:|mailto:|#)/.test(href)) continue;
+    links[i].addEventListener('click', function(e) {
+      e.preventDefault();
+      var target = this.getAttribute('href');
+      // Resolve relative to current file's directory
+      var resolved = resolveGuidePath(file, target);
+      if (resolved) loadGuidePage(resolved);
+    });
+  }
+}
+
+function resolveGuidePath(currentFile, target) {
+  // target may be "../02-agents/syn.md" or "panels.md" etc.
+  // Resolve against the directory of currentFile.
+  var parts = currentFile.split('/');
+  parts.pop(); // drop filename
+  var targetParts = target.split('/');
+  for (var i = 0; i < targetParts.length; i++) {
+    var seg = targetParts[i];
+    if (seg === '.' || seg === '') continue;
+    if (seg === '..') { parts.pop(); continue; }
+    parts.push(seg);
+  }
+  var resolved = parts.join('/');
+  // Strip any anchor
+  var hashIdx = resolved.indexOf('#');
+  if (hashIdx !== -1) resolved = resolved.slice(0, hashIdx);
+  return resolved;
+}

package/src/ui/js/hud.js

@@ -0,0 +1,75 @@
+// ═══════════════════════════════════════════════════════════════
+// Environment HUD — bottom status bar
+// ═══════════════════════════════════════════════════════════════
+
+function renderHud() {
+  // ── Git section (left side) ──
+  var branchEl = document.getElementById('hud-git-branch');
+  var dirtyEl = document.getElementById('hud-git-dirty');
+  var gitSepEl = document.getElementById('hud-git-sep');
+  if (branchEl) {
+    var showGit = !!gitCurrentBranch;
+    branchEl.parentElement.style.display = showGit ? '' : 'none';
+    if (gitSepEl) gitSepEl.style.display = showGit ? '' : 'none';
+    if (showGit) {
+      branchEl.textContent = gitCurrentBranch;
+      branchEl.title = 'Current git branch: ' + gitCurrentBranch;
+    }
+  }
+  if (dirtyEl) {
+    var dirtyCount = gitChanges ? gitChanges.length : 0;
+    if (dirtyCount > 0) {
+      dirtyEl.textContent = dirtyCount + ' changed';
+      dirtyEl.className = 'hud-dirty hud-dirty-active';
+      dirtyEl.title = dirtyCount + ' file(s) with uncommitted changes';
+    } else {
+      dirtyEl.textContent = 'clean';
+      dirtyEl.className = 'hud-dirty hud-dirty-clean';
+      dirtyEl.title = 'Working tree is clean';
+    }
+  }
+
+  // ── Pinned context count (center-left) ──
+  var pinsEl = document.getElementById('hud-pins');
+  if (pinsEl) {
+    var pinCount = pinnedItems ? pinnedItems.length : 0;
+    pinsEl.textContent = pinCount + ' pinned';
+    pinsEl.title = pinCount + ' context item(s) pinned';
+  }
+
+  // ── Context usage indicator (right side, prominent) ──
+  var session = getActiveSession();
+  var ctxEl = document.getElementById('hud-context');
+  if (ctxEl && session) {
+    var usage = session.contextUsage;
+    if (usage && typeof usage.inputTokens === 'number') {
+      // Model context window. We key a small table off the session model, but
+      // no model field exists in session state yet, so default to 200K (the
+      // Claude Code default for current Claude models). Conservative and clear.
+      var CONTEXT_WINDOW = 200000;
+      var totalInput = usage.inputTokens + (usage.cacheReadTokens || 0) + (usage.cacheCreationTokens || 0);
+      var pct = Math.min(100, Math.round((totalInput / CONTEXT_WINDOW) * 100));
+      ctxEl.textContent = pct + '%';
+      var guidance = '';
+      if (pct >= 80) {
+        guidance = ' Context is high — run /compact, or ask Syn to delegate the next task to a subagent.';
+      } else if (pct >= 50) {
+        guidance = ' Watch this — consider /compact or a subagent for heavier tasks.';
+      }
+      ctxEl.title = 'Context: ~' + pct + '% of the model window used\n' +
+        'Input: ' + usage.inputTokens + ' + cache-read ' + (usage.cacheReadTokens || 0) +
+        ' + cache-create ' + (usage.cacheCreationTokens || 0) + ' tokens.' + guidance;
+      // Color coding: green < 50%, yellow 50-80%, red > 80%
+      ctxEl.className = 'hud-context-value' +
+        (pct >= 80 ? ' hud-ctx-high' : pct >= 50 ? ' hud-ctx-mid' : ' hud-ctx-low');
+    } else {
+      ctxEl.textContent = '\u2014';
+      ctxEl.title = 'Context usage unavailable — waiting for the first turn';
+      ctxEl.className = 'hud-context-value';
+    }
+  } else if (ctxEl) {
+    ctxEl.textContent = '\u2014';
+    ctxEl.title = 'No active session';
+    ctxEl.className = 'hud-context-value';
+  }
+}

package/src/ui/js/init.js

@@ -0,0 +1,351 @@
+// ═══════════════════════════════════════════════════════════════
+// Theme toggle
+// ═══════════════════════════════════════════════════════════════
+
+(function initTheme() {
+  var saved = localStorage.getItem('shards-theme') || 'dark';
+  if (saved === 'light') document.documentElement.setAttribute('data-theme', 'light');
+  updateThemeIcon();
+})();
+
+function toggleTheme() {
+  var isLight = document.documentElement.getAttribute('data-theme') === 'light';
+  if (isLight) {
+    document.documentElement.removeAttribute('data-theme');
+    localStorage.setItem('shards-theme', 'dark');
+  } else {
+    document.documentElement.setAttribute('data-theme', 'light');
+    localStorage.setItem('shards-theme', 'light');
+  }
+  updateThemeIcon();
+  // Update Monaco editors if loaded
+  if (typeof monaco !== 'undefined') {
+    monaco.editor.setTheme(currentMonacoTheme());
+  }
+  // Re-render active diagram panel so Mermaid picks up new theme
+  rerenderActiveDiagramPanel();
+}
+
+function updateThemeIcon() {
+  var btn = document.getElementById('theme-toggle');
+  if (!btn) return;
+  var isLight = document.documentElement.getAttribute('data-theme') === 'light';
+  btn.innerHTML = isLight ? '☀' : '☾';
+  btn.title = isLight ? 'Switch to dark mode' : 'Switch to light mode';
+}
+
+// ═══════════════════════════════════════════════════════════════
+// DOM event listeners
+// ═══════════════════════════════════════════════════════════════
+
+// Track edits in textarea
+document.getElementById('code-edit').addEventListener('input', function(e) {
+  var key = getCurrentFileKey();
+  if (!key || !openFiles[key]) return;
+  var f = openFiles[key];
+  f.content = e.target.value;
+  f.modified = f.content !== f.originalContent;
+  updateLineGutter(f.content);
+  renderWsTabs();
+});
+
+// Ctrl+S to save, Escape, Ctrl+Enter, and additional keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+    var key = getCurrentFileKey();
+    if (key && key !== 'chat' && openFiles[key] && (openFiles[key].editMode || openFiles[key].modified)) {
+      e.preventDefault();
+      saveCurrentFile();
+    }
+  }
+  // Cmd+B — toggle explorer sidebar
+  if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
+    e.preventDefault();
+    toggleExplorer();
+  }
+  // Cmd+W — close current file tab
+  if ((e.ctrlKey || e.metaKey) && e.key === 'w') {
+    e.preventDefault();
+    var closeKey = getCurrentFileKey();
+    if (closeKey && closeKey !== 'chat') closeFileTab(closeKey);
+  }
+  // Cmd+\ — toggle split view
+  if ((e.ctrlKey || e.metaKey) && e.key === '\\') {
+    e.preventDefault();
+    toggleSplit();
+  }
+  // Cmd+1/2/3 — switch tabs
+  if ((e.ctrlKey || e.metaKey) && e.key === '1') {
+    e.preventDefault();
+    switchTab('chat');
+  }
+  if ((e.ctrlKey || e.metaKey) && e.key === '2') {
+    e.preventDefault();
+    if (fileTabOrder.length > 0) switchTab(fileTabOrder[0]);
+  }
+  if ((e.ctrlKey || e.metaKey) && e.key === '3') {
+    e.preventDefault();
+    if (fileTabOrder.length > 1) switchTab(fileTabOrder[1]);
+  }
+  // Cmd+P — quick file picker
+  if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
+    e.preventDefault();
+    toggleQuickOpen();
+  }
+  // Cmd+K — command palette
+  if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+    e.preventDefault();
+    toggleCommandPalette();
+  }
+  // Cmd+G — go to line (Monaco)
+  if ((e.ctrlKey || e.metaKey) && e.key === 'g') {
+    if (activeMonacoInstance) {
+      e.preventDefault();
+      activeMonacoInstance.getAction('editor.action.gotoLine').run();
+    }
+  }
+  // Cmd+F — chat search when chat is focused
+  if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+    var chatPane = document.getElementById('chat-pane');
+    var isInChat = chatPane && (chatPane.contains(document.activeElement) || (!splitMode && activeTabId === 'chat'));
+    if (isInChat && !activeMonacoInstance) {
+      e.preventDefault();
+      toggleChatSearch();
+    }
+  }
+  // Cmd+, — settings
+  if ((e.ctrlKey || e.metaKey) && e.key === ',') {
+    e.preventDefault();
+    toggleSettings();
+  }
+  // Cmd+Shift+O — go to symbol
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'o' || e.key === 'O')) {
+    e.preventDefault();
+    if (typeof openSymbolSearch === 'function') openSymbolSearch();
+  }
+  // Ctrl+Shift+[ / ] — cycle session tabs
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === '[') {
+    e.preventDefault();
+    cycleSessionTab(-1);
+  }
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === ']') {
+    e.preventDefault();
+    cycleSessionTab(1);
+  }
+  // Escape — exit notebook cell edit, close overlays
+  if (e.key === 'Escape') {
+    // Close overlays first
+    if (document.getElementById('quick-open-overlay').classList.contains('visible')) {
+      document.getElementById('quick-open-overlay').classList.remove('visible');
+      return;
+    }
+    if (document.getElementById('command-palette-overlay').classList.contains('visible')) {
+      document.getElementById('command-palette-overlay').classList.remove('visible');
+      return;
+    }
+    if (document.getElementById('settings-overlay').classList.contains('visible')) {
+      document.getElementById('settings-overlay').classList.remove('visible');
+      return;
+    }
+    var chatSearchBar = document.getElementById('chat-search-bar');
+    if (chatSearchBar && chatSearchBar.classList.contains('visible')) {
+      chatSearchBar.classList.remove('visible');
+      return;
+    }
+    var key2 = getCurrentFileKey();
+    if (key2 && openFiles[key2] && openFiles[key2].notebookData) {
+      if (activeNotebookCellMonaco) {
+        disposeNotebookCellMonaco();
+        activeCellIdx = null;
+        renderNotebookView(key2);
+      }
+    }
+  }
+  // Ctrl+Enter — finish editing, move to next cell
+  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+    var key3 = getCurrentFileKey();
+    if (key3 && openFiles[key3] && openFiles[key3].notebookData && activeNotebookCellIdx !== null) {
+      e.preventDefault();
+      var nextIdx = activeNotebookCellIdx + 1;
+      disposeNotebookCellMonaco();
+      if (nextIdx < openFiles[key3].notebookData.cells.length) {
+        renderNotebookView(key3);
+        setTimeout(function() { nbCellClick(key3, nextIdx); }, 50);
+      } else {
+        activeCellIdx = null;
+        renderNotebookView(key3);
+      }
+    }
+  }
+});
+
+// Tab key in textarea inserts 4 spaces
+document.getElementById('code-edit').addEventListener('keydown', function(e) {
+  if (e.key === 'Tab') {
+    e.preventDefault();
+    var ta = e.target;
+    var start = ta.selectionStart;
+    var end = ta.selectionEnd;
+    ta.value = ta.value.substring(0, start) + '    ' + ta.value.substring(end);
+    ta.selectionStart = ta.selectionEnd = start + 4;
+    ta.dispatchEvent(new Event('input'));
+  }
+});
+
+// Sync scroll between gutter and content
+document.getElementById('file-view-area').addEventListener('scroll', function() {
+  document.getElementById('line-gutter').scrollTop = this.scrollTop;
+});
+
+// Enter key to send chat; Shift+Enter inserts newline; Shift+Tab cycles mode; arrow keys navigate suggestions
+document.getElementById('chat-input').addEventListener('keydown', function(e) {
+  if (slashSuggestionKeydown(e)) return;
+  if (e.key === 'Tab' && e.shiftKey) {
+    e.preventDefault();
+    if (typeof cyclePermissionMode === 'function') cyclePermissionMode(1);
+    return;
+  }
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendChatMessage();
+  }
+});
+
+// Auto-resize textarea as user types; update slash suggestions
+document.getElementById('chat-input').addEventListener('input', function() {
+  this.style.height = 'auto';
+  this.style.height = Math.min(this.scrollHeight, 160) + 'px';
+  updateSlashSuggestions();
+});
+
+// Hide suggestions when input loses focus (delay allows mousedown on item to fire first)
+document.getElementById('chat-input').addEventListener('blur', function() {
+  setTimeout(hideSlashSuggestions, 150);
+});
+
+// Image paste & drag-drop on the chat input
+document.getElementById('chat-input').addEventListener('paste', handleChatInputPaste);
+(function() {
+  var inputArea = document.getElementById('chat-input-area');
+  if (!inputArea) return;
+  inputArea.addEventListener('dragover', handleChatInputDragOver);
+  inputArea.addEventListener('dragleave', handleChatInputDragLeave);
+  inputArea.addEventListener('drop', handleChatInputDrop);
+})();
+
+// Capture selection context when user finishes selecting in file pane
+document.getElementById('file-pane').addEventListener('mouseup', function() {
+  setTimeout(function() {
+    var ctx = captureSelectionContext();
+    if (ctx) {
+      setSelectionContext(ctx);
+    }
+  }, 10);
+});
+
+// ═══════════════════════════════════════════════════════════════
+// Initial load
+// ═══════════════════════════════════════════════════════════════
+
+async function loadInitial() {
+  try {
+    var results = await Promise.all([
+      authFetch('/files'),
+      authFetch('/chat/status'),
+    ]);
+    var fRes = results[0], cRes = results[1];
+    var result = await fRes.json();
+    var chatStatus = await cRes.json();
+
+    // Restore sessions FIRST so artifacts open in the active session's workspace
+    var activeSessions = chatStatus.sessions || [];
+    if (activeSessions.length > 0) {
+      for (var si = 0; si < activeSessions.length; si++) {
+        var s = activeSessions[si];
+        var sess = createSessionState(s.sessionId, s.agent);
+        sess.title = s.title || null;
+        sess.messages = s.transcript || [];
+        sess.hasMessages = sess.messages.length > 0;
+        sess.projectName = s.projectName || null;
+        sess.projectDir = s.projectDir || null;
+        sess.contextUsage = s.contextUsage || null;
+      }
+      // Activate the last (most recent) session and load its workspace
+      var lastSession = activeSessions[activeSessions.length - 1];
+      activeSessionId = lastSession.sessionId;
+      loadSessionWorkspace(chatSessions[activeSessionId]);
+      activateAgent(lastSession.agent);
+      showChatView();
+      rebuildMessages(chatSessions[activeSessionId].messages);
+      renderSessionTabs();
+    } else {
+      showAgentPicker();
+      renderSessionTabs();
+    }
+
+    // Now process artifacts (they open in the active session's workspace)
+    var filesMap = result.files || result;
+    var serverSessionFiles = result.sessionFiles || [];
+    for (var i = 0; i < serverSessionFiles.length; i++) sessionTouchedFiles.add(serverSessionFiles[i]);
+    for (var p in filesMap) {
+      if (filesMap.hasOwnProperty(p)) {
+        handleArtifactUpdate(p, filesMap[p], sessionTouchedFiles.has(p));
+      }
+    }
+  } catch(e) {
+    showAgentPicker();
+    renderSessionTabs();
+  }
+
+  renderWsTabs();
+  showActiveContent();
+}
+
+// ═══════════════════════════════════════════════════════════════
+// Init
+// ═══════════════════════════════════════════════════════════════
+
+loadInitial().then(function() {
+  if (typeof restoreLayout === 'function') restoreLayout();
+  if (typeof renderSessionFiles === 'function') renderSessionFiles();
+  if (typeof initBookmarks === 'function') initBookmarks();
+  if (typeof fetchGitRepos === 'function') fetchGitRepos();
+  if (typeof fetchGitStatus === 'function') fetchGitStatus();
+  if (typeof fetchPRInfo === 'function') fetchPRInfo();
+  if (typeof renderHud === 'function') renderHud();
+  if (typeof switchSidebarView === 'function') switchSidebarView(activeSidebarView);
+  if (typeof renderModeIndicator === 'function') renderModeIndicator();
+  if (typeof updateEndChatButton === 'function') updateEndChatButton();
+
+  // Honor URL hash/query for direct-open panels (e.g. /shards-guide → #guide).
+  try {
+    var hash = (window.location.hash || '').replace(/^#/, '');
+    var params = new URLSearchParams(window.location.search || '');
+    var panel = hash || params.get('panel');
+    if (panel === 'guide' && typeof openGuidePanel === 'function') openGuidePanel();
+    else if (panel === 'knowledge' && typeof openKnowledgeMapPanel === 'function') openKnowledgeMapPanel();
+  } catch(e) {}
+});
+connect();
+startGatePoller();
+
+// R2/R3 — periodic refresh so "idle 12s → 1m" relative-time text and timeline
+// status pills update even when no events are firing. 15s is a reasonable
+// floor: short enough to feel current, long enough to be cheap.
+setInterval(function() {
+  if (typeof renderSessionTabs === 'function') renderSessionTabs();
+  if (typeof renderTimeline === 'function') renderTimeline();
+}, 15000);
+browseDir();
+initExplorerResize();
+initSplitResize();
+initFileAutoRefresh();
+initCtxMenu();
+if (typeof initPinboardDropZone === 'function') initPinboardDropZone();
+
+// Request notification permission on first interaction or load
+if (window.Notification && Notification.permission === 'default') {
+  document.addEventListener('click', function() {
+    Notification.requestPermission();
+  }, { once: true });
+}