Scott.Idem/Cortex-Inara
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: last-used persona cookie, emoji dropdown, theme support, auth status move

Browse Source 
- cx_last_persona cookie set on serve_ui; root/login/help/settings
  redirects use preferred persona from cookie instead of alphabetically first
- /api/personas returns [{name, emoji}] objects; persona switcher dropdown
  renders emoji + name with flex layout and .pd-emoji span
- Help, Settings, Model Registry pages apply localStorage theme on load
  (no flash); CSS variables for dark/light replacing all hardcoded hex values
- Claude CLI auth status moved from prominent chat banner to Anthropic
  provider block in Model Registry — live dot indicator (ok/warn/err)
- Auth banner removed from main chat UI (index.html, app.js, style.css)
- Add Model collapsed into Models section as <details> to shorten page
- Light-mode overrides for provider icons, model badges, ctx-badge, tags
  (Anthropic/Google/local colors now readable in both themes)
- Help page gains table, pre/code, hr styles for HELP.md rendered content

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-04-28 22:52:34 -04:00
parent 1222f806ce
commit 66cb197de0
9 changed files with 305 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
cortex/static/help.html
View File

@@ -8,17 +8,33 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>(function(){var t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',t);})();</script>
<style>
:root {
--pg-bg: #0f1117; --pg-surface: #1a1d27;
--pg-border: #2d3148;
--pg-text: #e2e8f0; --pg-muted: #94a3b8;
--pg-dim: #64748b; --pg-dimmer: #475569;
--pg-bright: #cbd5e1; --pg-nav-hover: rgba(255,255,255,0.05);
}
[data-theme="light"] {
--pg-bg: #f4f2fa; --pg-surface: #ffffff;
--pg-border: #d0c8e8;
--pg-text: #1a1228; --pg-muted: #5a5478;
--pg-dim: #7a7290; --pg-dimmer: #9e98b0;
--pg-bright: #1a1228; --pg-nav-hover: rgba(0,0,0,0.05);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
min-height: 100vh;
background: #0f1117;
background: var(--pg-bg);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-weight: 450;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #e2e8f0;
color: var(--pg-text);
padding: 2rem 1.5rem;
}
@@ -41,32 +57,32 @@
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
color: #64748b;
color: var(--pg-dim);
text-decoration: none;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.nav-link:hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }
.nav-link:hover { color: var(--pg-bright); background: var(--pg-nav-hover); }
.nav-link.active { color: #a78bfa; }
.nav-spacer { flex: 1; min-width: 0.5rem; }
.nav-link.nav-logout { color: #475569; }
.nav-link.nav-logout:hover { color: #94a3b8; background: none; }
.nav-link.nav-logout { color: var(--pg-dimmer); }
.nav-link.nav-logout:hover { color: var(--pg-muted); background: none; }
header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #2d3148;
border-bottom: 1px solid var(--pg-border);
}
header h1 { font-size: 1.5rem; font-weight: 700; color: #a78bfa; }
header p { font-size: 0.85rem; color: #94a3b8; margin-top: 0.25rem; }
header p { font-size: 0.85rem; color: var(--pg-muted); margin-top: 0.25rem; }
#help-body { line-height: 1.7; }
/* Collapsible sections */
details {
margin-bottom: 0.75rem;
background: #1a1d27;
border: 1px solid #2d3148;
background: var(--pg-surface);
border: 1px solid var(--pg-border);
border-radius: 8px;
overflow: hidden;
}
@@ -74,7 +90,7 @@
padding: 0.85rem 1rem;
font-weight: 600;
font-size: 0.95rem;
color: #cbd5e1;
color: var(--pg-bright);
cursor: pointer;
list-style: none;
display: flex;
@@ -84,7 +100,7 @@
summary::before {
content: '▶';
font-size: 0.65rem;
color: #94a3b8;
color: var(--pg-muted);
transition: transform 0.15s;
}
details[open] summary::before { transform: rotate(90deg); }
@@ -94,13 +110,13 @@
padding: 0 1rem 1rem;
}
#help-body p { margin: 0.5rem 0; font-size: 0.9rem; color: #cbd5e1; }
#help-body p { margin: 0.5rem 0; font-size: 0.9rem; color: var(--pg-bright); }
#help-body ul { margin: 0.5rem 0 0.5rem 1.25rem; }
#help-body li { font-size: 0.9rem; color: #cbd5e1; margin-bottom: 0.25rem; }
#help-body strong { color: #e2e8f0; }
#help-body li { font-size: 0.9rem; color: var(--pg-bright); margin-bottom: 0.25rem; }
#help-body strong { color: var(--pg-text); }
#help-body code {
background: #0f1117;
border: 1px solid #2d3148;
background: var(--pg-bg);
border: 1px solid var(--pg-border);
border-radius: 4px;
padding: 0.1em 0.4em;
font-size: 0.85em;
@@ -111,13 +127,21 @@
#help-body h3 {
font-size: 0.8rem;
font-weight: 600;
color: #94a3b8;
color: var(--pg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0.75rem 0 0.25rem;
}
#loading { color: #94a3b8; font-size: 0.9rem; padding: 1rem 0; }
#loading { color: var(--pg-muted); font-size: 0.9rem; padding: 1rem 0; }
#help-body table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.5rem 0 0.75rem; }
#help-body th, #help-body td { padding: 0.45rem 0.7rem; text-align: left; border-bottom: 1px solid var(--pg-border); }
#help-body th { color: var(--pg-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
#help-body td { color: var(--pg-bright); }
#help-body pre { background: var(--pg-bg); border: 1px solid var(--pg-border); border-radius: 6px; padding: 0.75rem 1rem; overflow-x: auto; margin: 0.5rem 0; }
#help-body pre code { background: none; border: none; padding: 0; font-size: 0.85em; color: var(--pg-muted); }
#help-body hr { border: none; border-top: 1px solid var(--pg-border); margin: 0.5rem 0; }
</style>
</head>
<body>