Made Jarvis more mobile friendly

2026-04-21 11:00:39 +02:00
parent a72eef4b82
commit eaea8d94b1
14 changed files with 604 additions and 97 deletions
@@ -140,6 +140,53 @@ let _skipNextRestore = false;  // true when snapshot was just restored — skip
 let _cachedModels = null;  // { models, default, capabilities } — cached from WS "models" message
 let _modelCapabilities = {};  // { "provider:model-id": { vision, tools, online } }

+/* ── PWA install ─────────────────────────────────────────────────────────── */
+let _deferredInstallPrompt = null;
+
+window.addEventListener("beforeinstallprompt", e => {
+  e.preventDefault();
+  _deferredInstallPrompt = e;
+  const btn = document.getElementById("pwa-install-btn");
+  if (btn) btn.style.display = "flex";
+});
+
+function handleInstall() {
+  const isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);
+  const isStandalone = window.navigator.standalone === true;
+  if (isStandalone) return;
+
+  if (_deferredInstallPrompt) {
+    _deferredInstallPrompt.prompt();
+    _deferredInstallPrompt.userChoice.then(() => { _deferredInstallPrompt = null; });
+  } else if (isIOS) {
+    alert("To add to your Home Screen:\n1. Tap the Share button (\u25a1\u2191) in Safari's toolbar\n2. Tap \"Add to Home Screen\"");
+  }
+}
+
+(function _initPWA() {
+  const isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);
+  const isStandalone = window.navigator.standalone === true || window.matchMedia("(display-mode: standalone)").matches;
+  if (isIOS && !isStandalone) {
+    const btn = document.getElementById("pwa-install-btn");
+    if (btn) btn.style.display = "flex";
+  }
+})();
+
+function toggleSidebar() {
+  const sidebar = document.getElementById("sidebar");
+  const overlay = document.getElementById("sidebar-overlay");
+  if (!sidebar) return;
+  const isOpen = sidebar.classList.toggle("open");
+  overlay && overlay.classList.toggle("visible", isOpen);
+}
+
+function closeSidebar() {
+  const sidebar = document.getElementById("sidebar");
+  const overlay = document.getElementById("sidebar-overlay");
+  sidebar && sidebar.classList.remove("open");
+  overlay && overlay.classList.remove("visible");
+}
+
 function initNav() {
  _setActiveNav(location.pathname);

@@ -149,6 +196,7 @@ function initNav() {
      const href = el.getAttribute("href");
      if (!href || href.startsWith("http")) return;  // external links: normal
      e.preventDefault();
+      closeSidebar();
      navigateTo(href);
    });
  });
@@ -344,6 +392,10 @@ async function fileBrowserNavigate(path) {
      nameTd.style.cssText = "cursor:pointer;color:var(--accent)";
      nameTd.textContent = entry.name;
      nameTd.onclick = (function(p) { return function() { fileBrowserNavigate(p); }; })(entry.path);
+    } else if (_fbIsTextFile(entry.name)) {
+      nameTd.style.cssText = "cursor:pointer;color:var(--accent)";
+      nameTd.textContent = entry.name;
+      nameTd.onclick = (function(p, n) { return function() { fileBrowserViewFile(p, n); }; })(entry.path, entry.name);
    } else {
      nameTd.textContent = entry.name;
    }
@@ -359,16 +411,6 @@ async function fileBrowserNavigate(path) {
    const actionTd = document.createElement("td");
    actionTd.style.cssText = "text-align:right;display:flex;justify-content:flex-end;gap:6px;align-items:center";

-    // View button — text files only
-    if (!entry.is_dir && _fbIsTextFile(entry.name)) {
-      const viewBtn = document.createElement("button");
-      viewBtn.className = "btn btn-ghost btn-small";
-      viewBtn.title = "View file";
-      viewBtn.textContent = "View";
-      viewBtn.onclick = (function(p, n) { return function(e) { e.stopPropagation(); fileBrowserViewFile(p, n); }; })(entry.path, entry.name);
-      actionTd.appendChild(viewBtn);
-    }
-
    const btn = document.createElement("button");
    btn.className = "btn btn-ghost btn-small";
    if (entry.is_dir) {
@@ -785,7 +827,10 @@ function openModelPicker() {
  _mpFocusIdx = -1;
  modal.classList.remove("hidden");
  const s = document.getElementById("model-picker-search");
-  if (s) { s.value = ""; s.focus(); }
+  if (s) {
+    s.value = "";
+    if (window.innerWidth > 768) s.focus();
+  }
  _renderModelPicker("");
 }

@@ -1548,6 +1593,45 @@ function closeAuditDetail() {
   SETTINGS PAGE
 ══════════════════════════════════════════════════════════════════════════ */

+/* ── Mobile settings tab select ──────────────────────────────────────────── */
+function _initMobileTabSelect(switchFn) {
+  if (window.innerWidth > 768) return;
+  const bar = document.querySelector(".tab-bar");
+  if (!bar || bar.dataset.selectBuilt) return;
+  bar.dataset.selectBuilt = "1";
+
+  const buttons = [...bar.querySelectorAll(".tab-btn")];
+  if (!buttons.length) return;
+
+  const wrap = document.createElement("div");
+  wrap.className = "tab-select-wrap";
+
+  const sel = document.createElement("select");
+  sel.className = "tab-select";
+  buttons.forEach(btn => {
+    const opt = document.createElement("option");
+    opt.value = btn.id.replace(/^[us]tab-|^stab-/, "");
+    opt.textContent = btn.textContent.trim();
+    if (btn.classList.contains("active")) opt.selected = true;
+    sel.appendChild(opt);
+  });
+  sel.addEventListener("change", () => switchFn(sel.value));
+
+  const arrow = document.createElement("span");
+  arrow.className = "tab-select-arrow";
+  arrow.textContent = "▾";
+
+  wrap.appendChild(sel);
+  wrap.appendChild(arrow);
+  bar.parentNode.insertBefore(wrap, bar);
+  bar.style.display = "none";
+}
+
+function _syncTabSelect(name) {
+  const sel = document.querySelector(".tab-select");
+  if (sel) sel.value = name;
+}
+
 function switchSettingsTab(name) {
  ["general", "whitelists", "credentials", "caldav", "pushover", "inbox", "emailaccounts", "telegram", "system", "brain", "mcp", "security", "branding", "webhooks", "mfa"].forEach(t => {
    const pane = document.getElementById(`spane-${t}`);
@@ -1555,6 +1639,7 @@ function switchSettingsTab(name) {
    if (pane) pane.style.display = t === name ? "" : "none";
    if (btn)  btn.classList.toggle("active", t === name);
  });
+  _syncTabSelect(name);
  if (name === "inbox") { loadInboxStatus(); }
  if (name === "emailaccounts") { loadEmailAccounts(); }
  if (name === "brain") { loadBrainKey("brain-mcp-key", "brain-mcp-cmd"); loadBrainAutoApprove(); }
@@ -1698,6 +1783,7 @@ function switchUserTab(name) {
  const pane = document.getElementById("uspane-" + name);
  if (tab) tab.classList.add("active");
  if (pane) pane.style.display = "";
+  _syncTabSelect(name);
  if (name === "mcp") loadMyMcpServers();
  if (name === "inbox") { loadMyInboxConfig(); loadMyInboxTriggers(); }
  if (name === "emailaccounts") { loadEmailAccounts(); }
@@ -2187,6 +2273,10 @@ function openEmailAccountModal(id) {
  document.getElementById("eam-folders-display").textContent = (acct?.monitored_folders || ["INBOX"]).join(", ");
  document.getElementById("eam-folders-hidden").value = JSON.stringify(acct?.monitored_folders || ["INBOX"]);
  document.getElementById("eam-agent-prompt").value = acct?.agent_prompt || "";
+  const mtc = document.getElementById("eam-max-tool-calls");
+  if (mtc) mtc.value = acct?.agent_max_tool_calls != null ? acct.agent_max_tool_calls : "";
+  const pm = document.getElementById("eam-prompt-mode");
+  if (pm) pm.value = acct?.agent_prompt_mode || "combined";
  _populateEamModelSelect(acct?.agent_model);
  _loadEamExtraTools(acct?.extra_tools || [], acct?.telegram_chat_id || "", acct?.telegram_keyword || "");

@@ -2347,6 +2437,9 @@ async function saveEmailAccount() {
  const imap_password = document.getElementById("eam-imap-password").value;
  const agent_model = document.getElementById("eam-agent-model").value;
  const agent_prompt = document.getElementById("eam-agent-prompt").value.trim();
+  const _mtcRaw = document.getElementById("eam-max-tool-calls")?.value;
+  const agent_max_tool_calls = _mtcRaw ? parseInt(_mtcRaw) : null;
+  const agent_prompt_mode = document.getElementById("eam-prompt-mode")?.value || "combined";
  const initial_load_limit = parseInt(document.getElementById("eam-initial-load-limit").value || "200");
  const monitored_folders = JSON.parse(document.getElementById("eam-folders-hidden").value || '["INBOX"]');
  const extra_tools = Array.from(document.querySelectorAll("#eam-extra-tools-area input[type=checkbox]:checked")).map(c => c.value);
@@ -2364,7 +2457,8 @@ async function saveEmailAccount() {
  if (extra_tools.includes("telegram") && !telegram_keyword) { showFlash("Please enter a reply keyword for Telegram (e.g. 'work')."); return; }

  const payload = { label, imap_host, imap_port, imap_username, imap_password,
-    agent_model, agent_prompt, initial_load_limit, monitored_folders, extra_tools,
+    agent_model, agent_prompt, agent_max_tool_calls, agent_prompt_mode,
+    initial_load_limit, monitored_folders, extra_tools,
    telegram_chat_id, telegram_keyword };

  const url = _editingAccountId ? `/api/my/email-accounts/${_editingAccountId}` : "/api/my/email-accounts";
@@ -2668,6 +2762,7 @@ function togglePasswordVisibility(inputId, btn) {
 }

 function initUserSettings() {
+  _initMobileTabSelect(switchUserTab);
  const tab = new URLSearchParams(window.location.search).get("tab") || "apikeys";
  switchUserTab(tab);
  loadMyProviderKeys();
@@ -2688,6 +2783,7 @@ function initSettings() {
  }
  if (!document.getElementById("limits-form")) return;

+  _initMobileTabSelect(switchSettingsTab);
  loadApiKeyStatus();
  loadProviderKeys();
  loadUsersBaseFolder();
@@ -4848,7 +4944,46 @@ async function editCurrentAgent() {
  if (!agentId) return;
  const r = await fetch(`/api/agents/${agentId}`);
  const agent = await r.json();
-  showAgentModal(agent);
+  openPromptEditor(agent.name, agent.prompt);
+}
+
+function openPromptEditor(name, prompt) {
+  const overlay = document.getElementById("prompt-editor-overlay");
+  if (!overlay) return;
+  document.getElementById("pe-agent-name").textContent = name || "";
+  const ta = document.getElementById("pe-textarea");
+  ta.value = prompt || "";
+  overlay.style.display = "flex";
+  ta.focus();
+  // Place cursor at start
+  ta.setSelectionRange(0, 0);
+  ta.scrollTop = 0;
+}
+
+function closePromptEditor() {
+  const overlay = document.getElementById("prompt-editor-overlay");
+  if (overlay) overlay.style.display = "none";
+}
+
+async function savePromptEditor() {
+  const agentId = window.AGENT_ID;
+  if (!agentId) return;
+  const prompt = document.getElementById("pe-textarea").value;
+  const btn = document.getElementById("pe-save-btn");
+  if (btn) { btn.disabled = true; btn.textContent = "Saving…"; }
+  const r = await fetch(`/api/agents/${agentId}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ prompt }),
+  });
+  if (btn) { btn.disabled = false; btn.textContent = "Save"; }
+  if (r.ok) {
+    closePromptEditor();
+    loadAgentDetail();
+  } else {
+    const d = await r.json().catch(() => ({}));
+    alert("Save failed: " + (d.detail || r.statusText));
+  }
 }

 async function runCurrentAgent() {
@@ -4876,6 +5011,13 @@ async function saveAgentAndReload() {
 function initAgentDetail() {
  if (!document.getElementById("agent-detail-container")) return;
  _loadAvailableModels().then(() => loadAgentDetail());
+  // Keyboard shortcuts for the prompt editor
+  document.addEventListener("keydown", function _detailKeys(e) {
+    const overlay = document.getElementById("prompt-editor-overlay");
+    if (!overlay || overlay.style.display === "none") return;
+    if (e.key === "Escape") { e.preventDefault(); closePromptEditor(); }
+    if ((e.ctrlKey || e.metaKey) && e.key === "s") { e.preventDefault(); savePromptEditor(); }
+  });
 }

 async function loadAgentDetail() {
@@ -5257,6 +5399,23 @@ function initHelp() {
  // Disconnect any previous observer (SPA re-navigation)
  if (_helpObserver) { _helpObserver.disconnect(); _helpObserver = null; }

+  // Mobile: add collapsible TOC toggle
+  if (window.innerWidth <= 768) {
+    const toc = document.querySelector(".help-toc");
+    if (toc && !toc.querySelector(".toc-toggle")) {
+      toc.classList.add("toc-collapsed");
+      const btn = document.createElement("button");
+      btn.className = "toc-toggle";
+      btn.innerHTML = "Contents <span class='toc-arrow'>▾</span>";
+      btn.addEventListener("click", () => {
+        toc.classList.toggle("toc-collapsed");
+        btn.querySelector(".toc-arrow").textContent =
+          toc.classList.contains("toc-collapsed") ? "▾" : "▴";
+      });
+      toc.insertBefore(btn, toc.firstChild);
+    }
+  }
+
  const tocLinks = document.querySelectorAll(".toc-list a[href^='#']");
  const sections = document.querySelectorAll("section[data-section]");

@@ -5279,6 +5438,15 @@ function initHelp() {
      e.preventDefault();
      const target = document.querySelector(a.getAttribute("href"));
      if (target) target.scrollIntoView({ behavior: "smooth" });
+      // On mobile: collapse TOC after selecting a section
+      if (window.innerWidth <= 768) {
+        const toc = document.querySelector(".help-toc");
+        if (toc) {
+          toc.classList.add("toc-collapsed");
+          const arrow = toc.querySelector(".toc-arrow");
+          if (arrow) arrow.textContent = "▾";
+        }
+      }
    });
  });
 }