0.9.0 - Added Trilium ETAPI integration.

Lyra can now: Search trilium notes and create new notes. with proper ETAPI auth.
2025-12-29 01:58:20 -05:00
parent 64429b19e6
commit 794baf2a96
14 changed files with 2063 additions and 39 deletions
--- a/core/ui/index.html
+++ b/core/ui/index.html
@@ -13,9 +13,44 @@

 </head>
 <body>
+  <!-- Mobile Menu Overlay -->
+  <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>
+
+  <!-- Mobile Slide-out Menu -->
+  <div class="mobile-menu" id="mobileMenu">
+    <div class="mobile-menu-section">
+      <h4>Mode</h4>
+      <select id="mobileMode">
+        <option value="standard">Standard</option>
+        <option value="cortex">Cortex</option>
+      </select>
+    </div>
+
+    <div class="mobile-menu-section">
+      <h4>Session</h4>
+      <select id="mobileSessions"></select>
+      <button id="mobileNewSessionBtn">➕ New Session</button>
+      <button id="mobileRenameSessionBtn">✏️ Rename Session</button>
+    </div>
+
+    <div class="mobile-menu-section">
+      <h4>Actions</h4>
+      <button id="mobileThinkingStreamBtn">🧠 Show Work</button>
+      <button id="mobileSettingsBtn">⚙ Settings</button>
+      <button id="mobileToggleThemeBtn">🌙 Toggle Theme</button>
+      <button id="mobileForceReloadBtn">🔄 Force Reload</button>
+    </div>
+  </div>
+
  <div id="chat">
    <!-- Mode selector -->
    <div id="model-select">
+      <!-- Hamburger menu (mobile only) -->
+      <button class="hamburger-menu" id="hamburgerMenu" aria-label="Menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
      <label for="mode">Mode:</label>
      <select id="mode">
        <option value="standard">Standard</option>
@@ -33,7 +68,7 @@
      <select id="sessions"></select>
      <button id="newSessionBtn">➕ New</button>
      <button id="renameSessionBtn">✏️ Rename</button>
-      <button id="thinkingStreamBtn" title="Show thinking stream in new window">🧠 Show Work</button>
+      <button id="thinkingStreamBtn" title="Show thinking stream panel">🧠 Show Work</button>
    </div>

    <!-- Status -->
@@ -45,6 +80,24 @@
    <!-- Chat messages -->
    <div id="messages"></div>

+    <!-- Thinking Stream Panel (collapsible) -->
+    <div id="thinkingPanel" class="thinking-panel collapsed">
+      <div class="thinking-header" id="thinkingHeader">
+        <span>🧠 Thinking Stream</span>
+        <div class="thinking-controls">
+          <span class="thinking-status-dot" id="thinkingStatusDot"></span>
+          <button class="thinking-clear-btn" id="thinkingClearBtn" title="Clear events">🗑️</button>
+          <button class="thinking-toggle-btn" id="thinkingToggleBtn">▼</button>
+        </div>
+      </div>
+      <div class="thinking-content" id="thinkingContent">
+        <div class="thinking-empty" id="thinkingEmpty">
+          <div class="thinking-empty-icon">🤔</div>
+          <p>Waiting for thinking events...</p>
+        </div>
+      </div>
+    </div>
+
    <!-- Input box -->
    <div id="input">
      <input id="userInput" type="text" placeholder="Type a message..." autofocus />
@@ -124,7 +177,9 @@

 	async function renderSessions() {
 	  const select = document.getElementById("sessions");
+	  const mobileSelect = document.getElementById("mobileSessions");
 	  select.innerHTML = "";
+	  mobileSelect.innerHTML = "";

 	  sessions.forEach(s => {
 		const opt = document.createElement("option");
@@ -132,6 +187,10 @@
 		opt.textContent = s.name || s.id;
 		if (s.id === currentSession) opt.selected = true;
 		select.appendChild(opt);
+
+		// Clone for mobile menu
+		const mobileOpt = opt.cloneNode(true);
+		mobileSelect.appendChild(mobileOpt);
 	  });
 	}

@@ -268,6 +327,97 @@
    }

    document.addEventListener("DOMContentLoaded", () => {
+      // Mobile Menu Toggle
+      const hamburgerMenu = document.getElementById("hamburgerMenu");
+      const mobileMenu = document.getElementById("mobileMenu");
+      const mobileMenuOverlay = document.getElementById("mobileMenuOverlay");
+
+      function toggleMobileMenu() {
+        mobileMenu.classList.toggle("open");
+        mobileMenuOverlay.classList.toggle("show");
+        hamburgerMenu.classList.toggle("active");
+      }
+
+      function closeMobileMenu() {
+        mobileMenu.classList.remove("open");
+        mobileMenuOverlay.classList.remove("show");
+        hamburgerMenu.classList.remove("active");
+      }
+
+      hamburgerMenu.addEventListener("click", toggleMobileMenu);
+      mobileMenuOverlay.addEventListener("click", closeMobileMenu);
+
+      // Sync mobile menu controls with desktop
+      const mobileMode = document.getElementById("mobileMode");
+      const desktopMode = document.getElementById("mode");
+
+      // Sync mode selection
+      mobileMode.addEventListener("change", (e) => {
+        desktopMode.value = e.target.value;
+        desktopMode.dispatchEvent(new Event("change"));
+      });
+
+      desktopMode.addEventListener("change", (e) => {
+        mobileMode.value = e.target.value;
+      });
+
+      // Mobile theme toggle
+      document.getElementById("mobileToggleThemeBtn").addEventListener("click", () => {
+        document.getElementById("toggleThemeBtn").click();
+        updateMobileThemeButton();
+      });
+
+      function updateMobileThemeButton() {
+        const isDark = document.body.classList.contains("dark");
+        document.getElementById("mobileToggleThemeBtn").textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode";
+      }
+
+      // Mobile settings button
+      document.getElementById("mobileSettingsBtn").addEventListener("click", () => {
+        closeMobileMenu();
+        document.getElementById("settingsBtn").click();
+      });
+
+      // Mobile thinking stream button
+      document.getElementById("mobileThinkingStreamBtn").addEventListener("click", () => {
+        closeMobileMenu();
+        document.getElementById("thinkingStreamBtn").click();
+      });
+
+      // Mobile new session button
+      document.getElementById("mobileNewSessionBtn").addEventListener("click", () => {
+        closeMobileMenu();
+        document.getElementById("newSessionBtn").click();
+      });
+
+      // Mobile rename session button
+      document.getElementById("mobileRenameSessionBtn").addEventListener("click", () => {
+        closeMobileMenu();
+        document.getElementById("renameSessionBtn").click();
+      });
+
+      // Sync mobile session selector with desktop
+      document.getElementById("mobileSessions").addEventListener("change", async (e) => {
+        closeMobileMenu();
+        const desktopSessions = document.getElementById("sessions");
+        desktopSessions.value = e.target.value;
+        desktopSessions.dispatchEvent(new Event("change"));
+      });
+
+      // Mobile force reload button
+      document.getElementById("mobileForceReloadBtn").addEventListener("click", async () => {
+        if (confirm("Force reload the app? This will clear cache and reload.")) {
+          // Clear all caches if available
+          if ('caches' in window) {
+            const cacheNames = await caches.keys();
+            await Promise.all(cacheNames.map(name => caches.delete(name)));
+          }
+
+          // Force reload from server (bypass cache)
+          window.location.reload(true);
+        }
+      });
+
      // Dark mode toggle - defaults to dark
      const btn = document.getElementById("toggleThemeBtn");

@@ -286,8 +436,12 @@
        const isDark = document.body.classList.contains("dark");
        btn.textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode";
        localStorage.setItem("theme", isDark ? "dark" : "light");
+        updateMobileThemeButton();
      });

+      // Initialize mobile theme button
+      updateMobileThemeButton();
+
      // Sessions - Load from server
 	  (async () => {
 		await loadSessionsFromServer();
@@ -529,6 +683,236 @@
      document.getElementById("userInput").addEventListener("keypress", e => {
        if (e.key === "Enter") sendMessage();
      });
+
+      // ========== THINKING STREAM INTEGRATION ==========
+      const thinkingPanel = document.getElementById("thinkingPanel");
+      const thinkingHeader = document.getElementById("thinkingHeader");
+      const thinkingToggleBtn = document.getElementById("thinkingToggleBtn");
+      const thinkingClearBtn = document.getElementById("thinkingClearBtn");
+      const thinkingContent = document.getElementById("thinkingContent");
+      const thinkingStatusDot = document.getElementById("thinkingStatusDot");
+      const thinkingEmpty = document.getElementById("thinkingEmpty");
+
+      let thinkingEventSource = null;
+      let thinkingEventCount = 0;
+      const CORTEX_BASE = "http://10.0.0.41:7081";
+
+      // Load thinking panel state from localStorage
+      const isPanelCollapsed = localStorage.getItem("thinkingPanelCollapsed") === "true";
+      if (!isPanelCollapsed) {
+        thinkingPanel.classList.remove("collapsed");
+      }
+
+      // Toggle thinking panel
+      thinkingHeader.addEventListener("click", (e) => {
+        if (e.target === thinkingClearBtn) return; // Don't toggle if clicking clear
+        thinkingPanel.classList.toggle("collapsed");
+        localStorage.setItem("thinkingPanelCollapsed", thinkingPanel.classList.contains("collapsed"));
+      });
+
+      // Clear thinking events
+      thinkingClearBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        clearThinkingEvents();
+      });
+
+      function clearThinkingEvents() {
+        thinkingContent.innerHTML = '';
+        thinkingContent.appendChild(thinkingEmpty);
+        thinkingEventCount = 0;
+        // Clear from localStorage
+        if (currentSession) {
+          localStorage.removeItem(`thinkingEvents_${currentSession}`);
+        }
+      }
+
+      function connectThinkingStream() {
+        if (!currentSession) return;
+
+        // Close existing connection
+        if (thinkingEventSource) {
+          thinkingEventSource.close();
+        }
+
+        // Load persisted events
+        loadThinkingEvents();
+
+        const url = `${CORTEX_BASE}/stream/thinking/${currentSession}`;
+        console.log('Connecting thinking stream:', url);
+
+        thinkingEventSource = new EventSource(url);
+
+        thinkingEventSource.onopen = () => {
+          console.log('Thinking stream connected');
+          thinkingStatusDot.className = 'thinking-status-dot connected';
+        };
+
+        thinkingEventSource.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            addThinkingEvent(data);
+            saveThinkingEvent(data); // Persist event
+          } catch (e) {
+            console.error('Failed to parse thinking event:', e);
+          }
+        };
+
+        thinkingEventSource.onerror = (error) => {
+          console.error('Thinking stream error:', error);
+          thinkingStatusDot.className = 'thinking-status-dot disconnected';
+
+          // Retry connection after 2 seconds
+          setTimeout(() => {
+            if (thinkingEventSource && thinkingEventSource.readyState === EventSource.CLOSED) {
+              console.log('Reconnecting thinking stream...');
+              connectThinkingStream();
+            }
+          }, 2000);
+        };
+      }
+
+      function addThinkingEvent(event) {
+        // Remove empty state if present
+        if (thinkingEventCount === 0 && thinkingEmpty.parentNode) {
+          thinkingContent.removeChild(thinkingEmpty);
+        }
+
+        const eventDiv = document.createElement('div');
+        eventDiv.className = `thinking-event thinking-event-${event.type}`;
+
+        let icon = '';
+        let message = '';
+        let details = '';
+
+        switch (event.type) {
+          case 'connected':
+            icon = '✓';
+            message = 'Stream connected';
+            details = `Session: ${event.session_id}`;
+            break;
+
+          case 'thinking':
+            icon = '🤔';
+            message = event.data.message;
+            break;
+
+          case 'tool_call':
+            icon = '🔧';
+            message = event.data.message;
+            if (event.data.args) {
+              details = JSON.stringify(event.data.args, null, 2);
+            }
+            break;
+
+          case 'tool_result':
+            icon = '📊';
+            message = event.data.message;
+            if (event.data.result && event.data.result.stdout) {
+              details = `stdout: ${event.data.result.stdout}`;
+            }
+            break;
+
+          case 'done':
+            icon = '✅';
+            message = event.data.message;
+            if (event.data.final_answer) {
+              details = event.data.final_answer;
+            }
+            break;
+
+          case 'error':
+            icon = '❌';
+            message = event.data.message;
+            break;
+
+          default:
+            icon = '•';
+            message = JSON.stringify(event.data);
+        }
+
+        eventDiv.innerHTML = `
+          <span class="thinking-event-icon">${icon}</span>
+          <span>${message}</span>
+          ${details ? `<div class="thinking-event-details">${details}</div>` : ''}
+        `;
+
+        thinkingContent.appendChild(eventDiv);
+        thinkingContent.scrollTop = thinkingContent.scrollHeight;
+        thinkingEventCount++;
+      }
+
+      // Persist thinking events to localStorage
+      function saveThinkingEvent(event) {
+        if (!currentSession) return;
+
+        const key = `thinkingEvents_${currentSession}`;
+        let events = JSON.parse(localStorage.getItem(key) || '[]');
+
+        // Keep only last 50 events to avoid bloating localStorage
+        if (events.length >= 50) {
+          events = events.slice(-49);
+        }
+
+        events.push({
+          ...event,
+          timestamp: Date.now()
+        });
+
+        localStorage.setItem(key, JSON.stringify(events));
+      }
+
+      // Load persisted thinking events
+      function loadThinkingEvents() {
+        if (!currentSession) return;
+
+        const key = `thinkingEvents_${currentSession}`;
+        const events = JSON.parse(localStorage.getItem(key) || '[]');
+
+        // Clear current display
+        thinkingContent.innerHTML = '';
+        thinkingEventCount = 0;
+
+        // Replay events
+        events.forEach(event => addThinkingEvent(event));
+
+        // Show empty state if no events
+        if (events.length === 0) {
+          thinkingContent.appendChild(thinkingEmpty);
+        }
+      }
+
+      // Update the old thinking stream button to toggle panel instead
+      document.getElementById("thinkingStreamBtn").addEventListener("click", () => {
+        thinkingPanel.classList.remove("collapsed");
+        localStorage.setItem("thinkingPanelCollapsed", "false");
+      });
+
+      // Mobile thinking stream button
+      document.getElementById("mobileThinkingStreamBtn").addEventListener("click", () => {
+        closeMobileMenu();
+        thinkingPanel.classList.remove("collapsed");
+        localStorage.setItem("thinkingPanelCollapsed", "false");
+      });
+
+      // Connect thinking stream when session loads
+      if (currentSession) {
+        connectThinkingStream();
+      }
+
+      // Reconnect thinking stream when session changes
+      const originalSessionChange = document.getElementById("sessions").onchange;
+      document.getElementById("sessions").addEventListener("change", () => {
+        setTimeout(() => {
+          connectThinkingStream();
+        }, 500); // Wait for session to load
+      });
+
+      // Cleanup on page unload
+      window.addEventListener('beforeunload', () => {
+        if (thinkingEventSource) {
+          thinkingEventSource.close();
+        }
+      });
    });
  </script>
 </body>