rune/oai-web
0
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Made Jarvis more mobile friendly

Browse Source
This commit is contained in:
Rune Olsen
2026-04-21 11:00:39 +02:00
parent a72eef4b82
commit eaea8d94b1
14 changed files with 604 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/web/templates/settings.html
+32 -17
View File
@@ -13,7 +13,7 @@
{% if current_user.is_admin %}
<!-- ── Admin Tabs ── -->
<div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:28px">
<div class="tab-bar" style="border-bottom:1px solid var(--border);margin-bottom:28px">
<button type="button" class="tab-btn active" id="stab-general" onclick="switchSettingsTab('general')">General</button>
<button type="button" class="tab-btn" id="stab-whitelists" onclick="switchSettingsTab('whitelists')">Whitelists</button>
<button type="button" class="tab-btn" id="stab-credentials" onclick="switchSettingsTab('credentials')">Credentials</button>
@@ -32,7 +32,7 @@
</div>
{% else %}
<!-- ── User Tabs ── -->
<div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:28px">
<div class="tab-bar" style="border-bottom:1px solid var(--border);margin-bottom:28px">
<button type="button" class="tab-btn active" id="ustab-apikeys" onclick="switchUserTab('apikeys')">API Keys</button>
<button type="button" class="tab-btn" id="ustab-personality" onclick="switchUserTab('personality')">Personality</button>
<button type="button" class="tab-btn" id="ustab-inbox" onclick="switchUserTab('inbox')">Inbox</button>
@@ -1934,18 +1934,18 @@
</div>
<!-- ── Email Handling Account modal ── -->
<div class="modal-overlay" id="email-account-modal" style="display:none">
<div class="modal" style="max-width:820px;width:100%">
<h3 id="eam-title">Add Handling Account</h3>
<div class="modal-overlay" id="email-account-modal" style="display:none;align-items:flex-start;padding:32px 16px;overflow-y:auto">
<div class="modal" style="max-width:1100px;width:100%">
<h3 id="eam-title" style="margin-bottom:16px">Add Handling Account</h3>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px">
<div style="display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:24px">
<!-- Left column: IMAP account -->
<!-- Column 1: IMAP account -->
<div>
<p style="font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:14px;font-weight:600">Account</p>
<div class="form-group"><label>Label</label>
<input type="text" id="eam-label" class="form-input" placeholder="e.g. Work Email"></div>
<div style="display:grid;grid-template-columns:2fr 1fr;gap:10px">
<div style="display:grid;grid-template-columns:2fr 1fr;gap:8px">
<div class="form-group"><label>IMAP Host</label>
<input type="text" id="eam-imap-host" class="form-input" placeholder="imap.example.com"></div>
<div class="form-group"><label>Port</label>
@@ -1955,7 +1955,7 @@
<input type="text" id="eam-imap-username" class="form-input" placeholder="user@example.com"></div>
<div class="form-group"><label>Password</label>
<input type="password" id="eam-imap-password" class="form-input" placeholder="Leave blank to keep existing"></div>
<div class="form-group"><label>Initial load limit <span style="color:var(--text-dim);font-size:11px">(emails on first connect)</span></label>
<div class="form-group"><label>Initial load limit <span style="color:var(--text-dim);font-size:11px">(on first connect)</span></label>
<input type="number" id="eam-initial-load-limit" class="form-input" value="200" min="0" max="5000"></div>
<div class="form-group">
<label>Monitored folders</label>
@@ -1963,26 +1963,41 @@
<span id="eam-folders-display" style="font-size:13px;color:var(--text-dim)">INBOX</span>
<button type="button" class="btn btn-ghost btn-small" id="eam-load-folders-btn" onclick="loadEamFolders()">Load folders</button>
</div>
<div id="eam-folders-checklist" style="display:none;max-height:160px;overflow-y:auto;background:var(--bg2);padding:8px 12px;border-radius:var(--radius);border:1px solid var(--border)"></div>
<div id="eam-folders-checklist" style="display:none;max-height:140px;overflow-y:auto;background:var(--bg2);padding:8px 12px;border-radius:var(--radius);border:1px solid var(--border)"></div>
<input type="hidden" id="eam-folders-hidden" value='["INBOX"]'>
</div>
</div>
<!-- Right column: Handling agent -->
<!-- Column 2: Agent prompt + model -->
<div>
<p style="font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:14px;font-weight:600">Handling Agent</p>
<p style="font-size:12px;color:var(--text-dim);margin-bottom:14px;line-height:1.5">
A dedicated agent is created for this account. It can use email tools plus any notification tools you enable below.
</p>
<div class="form-group"><label>Model</label>
<select id="eam-agent-model" class="form-input"><option value="">Loading…</option></select>
</div>
<div class="form-group" style="display:flex;flex-direction:column;flex:1">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
<div class="form-group">
<label>Max tool calls <span style="color:var(--text-dim);font-size:11px">(blank = default)</span></label>
<input type="number" id="eam-max-tool-calls" class="form-input" min="1" max="50" placeholder="e.g. 6">
</div>
<div class="form-group">
<label>Prompt mode</label>
<select id="eam-prompt-mode" class="form-input">
<option value="combined">Combined (full personality)</option>
<option value="agent_only">Agent only (cheaper)</option>
</select>
</div>
</div>
<div class="form-group" style="display:flex;flex-direction:column">
<label>Agent prompt</label>
<textarea id="eam-agent-prompt" class="form-input" rows="8"
style="resize:vertical;font-size:13px;line-height:1.5"
<textarea id="eam-agent-prompt" class="form-input" rows="10"
style="resize:vertical;font-size:13px;line-height:1.5;flex:1"
placeholder="Describe how the agent should handle incoming emails…"></textarea>
</div>
</div>
<!-- Column 3: Options -->
<div>
<p style="font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:14px;font-weight:600">Options</p>
<div class="form-group">
<label>Notification tools <span style="font-size:11px;color:var(--text-dim)">(optional)</span></label>
<div id="eam-extra-tools-area" style="margin-top:6px;display:flex;flex-direction:column;gap:8px">