diff --git a/cortex/static/app.js b/cortex/static/app.js
index 3d3af78..99004b7 100644
--- a/cortex/static/app.js
+++ b/cortex/static/app.js
@@ -17,6 +17,12 @@
const settings_btn_el = document.getElementById('settings-btn');
const settings_dd_el = document.getElementById('settings-dropdown');
+ // ── Lucide icon helpers ───────────────────────────────────────
+ function icon_html(name, size = 16) {
+ return ``;
+ }
+ function render_icons() { if (window.lucide) lucide.createIcons(); }
+
// User/persona injected by the server at /{user}/{persona}
const CORTEX_USER = (window.CORTEX_CONFIG || {}).user || 'scott';
const CORTEX_PERSONA = (window.CORTEX_CONFIG || {}).persona || 'inara';
@@ -69,12 +75,17 @@
// ── Input mode — dropdown select with MRU ordering ──────────
const MODES = {
- chat: { icon: '💬', label: 'Chat' },
- note: { icon: '📝', label: 'Note' },
- otr: { icon: '🔒', label: 'OTR' },
- agent: { icon: '🥸', label: 'Agent' },
+ chat: { icon: 'message-circle', label: 'Chat' },
+ note: { icon: 'pencil', label: 'Note' },
+ otr: { icon: 'lock', label: 'OTR' },
+ agent: { icon: 'bot', label: 'Agent' },
+ };
+ const send_defs = {
+ chat: { icon: 'arrow-up', label: 'Send' },
+ note: { icon: 'pencil', label: 'Note' },
+ otr: { icon: 'arrow-up', label: 'Send' },
+ agent: { icon: 'zap', label: 'Run' },
};
- const send_labels = { chat: '↑ Send', note: '📝 Note', otr: '↑ Send', agent: '⚡ Run' };
let current_mode = localStorage.getItem('current_mode') || 'chat';
let note_public = false;
@@ -105,12 +116,13 @@
const btn = document.createElement('button');
btn.className = 'mode-option' + (mode === current_mode ? ' current' : '');
btn.innerHTML =
- `${m.icon}${m.label}`
+ `${icon_html(m.icon, 15)}${m.label}`
+ (mode === current_mode ? '✓' : '');
btn.addEventListener('click', () => set_mode(mode));
mode_dropdown_el.appendChild(btn);
});
mode_dropdown_el.classList.add('open');
+ render_icons();
}
function close_mode_dropdown() {
@@ -130,10 +142,11 @@
});
function update_mode_ui() {
- const m = MODES[current_mode];
+ const m = MODES[current_mode];
+ const sd = send_defs[current_mode] || send_defs.chat;
// Update trigger button
- mode_icon_el.textContent = m.icon;
+ mode_icon_el.innerHTML = icon_html(m.icon, 15);
mode_label_el.textContent = m.label;
mode_select_btn_el.className = current_mode === 'chat'
? '' : `mode-${current_mode}`;
@@ -150,9 +163,10 @@
inputEl.classList.toggle('mode-otr', current_mode === 'otr');
inputEl.classList.toggle('mode-agent', current_mode === 'agent');
- // Send button label
- sendBtn.textContent = send_labels[current_mode] || 'Send';
+ // Send button label + icon
+ sendBtn.innerHTML = icon_html(sd.icon) + ' ' + sd.label;
+ render_icons();
updateInputPlaceholder();
}
@@ -716,7 +730,7 @@
inputEl.value = '';
syncHeight();
sendBtn.style.display = 'none';
- stopBtn.style.display = 'block';
+ stopBtn.style.display = 'flex';
headerEmoji.classList.add('processing');
activeController = new AbortController();
@@ -808,7 +822,7 @@
inputEl.value = '';
syncHeight();
sendBtn.style.display = 'none';
- stopBtn.style.display = 'block';
+ stopBtn.style.display = 'flex';
headerEmoji.classList.add('processing');
activeController = new AbortController();
@@ -1286,3 +1300,9 @@
checkAuthStatus();
// Re-check every 30 minutes
setInterval(checkAuthStatus, 30 * 60 * 1000);
+
+ // ── Initial render ────────────────────────────────────────────
+ // Process all static Lucide SVGs in the header + stop button,
+ // and seed the mode UI (which also calls render_icons internally).
+ update_mode_ui();
+ render_icons();
diff --git a/cortex/static/index.html b/cortex/static/index.html
index 19f1ea7..85c2732 100644
--- a/cortex/static/index.html
+++ b/cortex/static/index.html
@@ -21,6 +21,7 @@
+
@@ -32,20 +33,35 @@
@@ -149,7 +165,7 @@
-
+
diff --git a/cortex/static/style.css b/cortex/static/style.css
index 44f5f22..e0cb91c 100644
--- a/cortex/static/style.css
+++ b/cortex/static/style.css
@@ -183,7 +183,13 @@
.persona-dropdown .pd-add:hover { color: var(--text); }
+ /* Lucide SVG icon alignment */
+ .btn-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; pointer-events: none; }
+
.hdr-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
@@ -224,7 +230,9 @@
.hdr-dropdown.open { display: block; }
.hdr-dd-item {
- display: block;
+ display: flex;
+ align-items: center;
+ gap: 8px;
width: 100%;
text-align: left;
padding: 0.55rem 0.85rem;
@@ -538,7 +546,7 @@
#mode-select-btn.mode-otr { border-color: rgba(120,80,160,0.6); color: #a87fd4; }
#mode-select-btn.mode-agent { border-color: rgba(80,140,200,0.6); color: #7cb9e8; }
- #mode-icon { font-size: 1rem; line-height: 1; }
+ #mode-icon { display: flex; align-items: center; }
.mode-arrow { font-size: 0.55rem; color: var(--muted); margin-left: 2px; opacity: 0.5; }
/* Dropdown — opens upward; MRU at bottom = closest to button */
@@ -573,7 +581,7 @@
}
.mode-option:hover { background: var(--border); color: var(--text); }
.mode-option.current { color: var(--text); font-weight: 500; }
- .mode-option .opt-icon { font-size: 1rem; line-height: 1; }
+ .mode-option .opt-icon { display: flex; align-items: center; }
.mode-option .opt-check { margin-left: auto; font-size: 0.7rem; opacity: 0.7; }
/* Note visibility sub-button — shown below mode-select when note is active */
@@ -630,6 +638,10 @@
/* Send button */
#send {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
background: var(--user-bg);
border: 1px solid var(--user-border);
color: var(--text);
@@ -649,11 +661,14 @@
/* Stop button */
#stop {
display: none;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
background: var(--error-bg);
border: 1px solid var(--error-border);
color: var(--error-text);
border-radius: 8px;
- padding: 10px 0;
+ padding: 10px 14px;
cursor: pointer;
font-size: 0.9rem;
text-align: center;