Experimental/brain-of-reese
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): dark tech theme — emoji-free chrome, subtle animated CSS background, WCAG AA dark palette

Browse Source
This commit is contained in:
ducoterra
2026-08-21 23:34:36 -04:00
parent 1b29b1cf9d
commit 2f738a7f19
11 changed files with 748 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/app.js
+13 -2
View File
@@ -107,13 +107,24 @@ export function renderMarkdown(md) {
return text.replace(/\u0000CODE(\d+)\u0000/g, (_m, i) => codeBlocks[Number(i)]);
}
/* ---------- avatar glyphs (phase 08: emoji-free chrome) ----------
* Inline SVG as string constants so the message renderer and the typing
* indicator share exactly the same marks. currentColor lets the CSS theme
* the stroke (brand-ink for Brain, ink-soft for the user — see styles.css).
*/
const BRAIN_AVATAR =
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6.5" y="6.5" width="11" height="11" rx="2.5"/><circle cx="12" cy="12" r="1.9" fill="currentColor" stroke="none"/><path d="M9.5 6.5V3.8M14.5 6.5V3.8M9.5 20.2v-2.7M14.5 20.2v-2.7M6.5 9.5H3.8M6.5 14.5H3.8M20.2 9.5h-2.7M20.2 14.5h-2.7"/></svg>';
const USER_AVATAR =
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="3.6"/><path d="M4.8 20.2c.9-3.9 3.8-6 7.2-6s6.3 2.1 7.2 6"/></svg>';
/* ---------- messages ---------- */
function addMessage(who, html) {
if (emptyState) emptyState.hidden = true;
const wrap = document.createElement("div");
wrap.className = `msg ${who}`;
wrap.innerHTML = `
<span class="avatar" aria-hidden="true">${who === "brain" ? "🧠" : "🧑"}</span>
<span class="avatar" aria-hidden="true">${who === "brain" ? BRAIN_AVATAR : USER_AVATAR}</span>
<div class="msg-body">
<div class="bubble">${html}</div>
</div>`;
@@ -129,7 +140,7 @@ function addTyping() {
wrap.className = "msg brain";
wrap.id = "typing-indicator";
wrap.innerHTML = `
<span class="avatar" aria-hidden="true">🧠</span>
<span class="avatar" aria-hidden="true">${BRAIN_AVATAR}</span>
<div class="msg-body">
<div class="bubble typing" role="status" aria-label="${TYPING_LABEL}">
<span></span><span></span><span></span>