294 lines
19 KiB
HTML
294 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="description" content="Ask Brain of Reese anything about the homelab and deployments.">
|
|
<title>Brain of Reese</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22%3E%3Cpath%20d=%22M32%204%2055%2018v28L32%2060%209%2046V18Z%22%20fill=%22%231a0f0f%22%20stroke=%22%23f43f5e%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%3Ccircle%20cx=%2232%22%20cy=%2232%22%20r=%226.5%22%20fill=%22%23f43f5e%22/%3E%3Cpath%20d=%22M32%2025.5V16M32%2048v-9.5M25.5%2032H16M48%2032h-9.5%22%20stroke=%22%23fca5a5%22%20stroke-width=%223%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E">
|
|
<link rel="stylesheet" href="/assets/styles.css">
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main">Skip to content</a>
|
|
|
|
<header class="app-header">
|
|
<div class="container header-inner">
|
|
<span class="brand">
|
|
<svg class="brand-mark" aria-hidden="true" viewBox="0 0 64 64"><path d="M32 4 55 18v28L32 60 9 46V18Z" fill="#1a0f0f" stroke="#f43f5e" stroke-width="4" stroke-linejoin="round"/><circle cx="32" cy="32" r="6.5" fill="#f43f5e"/><path d="M32 25.5V16M32 48v-9.5M25.5 32H16M48 32h-9.5" stroke="#fca5a5" stroke-width="3" stroke-linecap="round"/></svg>
|
|
<span class="brand-text">Brain of <strong>Reese</strong></span>
|
|
</span>
|
|
<!-- Phase 46 (owner permission 2026-08-27, `TODO.md` L9): the
|
|
mobile hamburger — visible ≤640px only (CSS); opens the nav as
|
|
an animated dropdown. Behavior: assets/header.js. -->
|
|
<button type="button" class="nav-toggle" id="nav-toggle"
|
|
aria-expanded="false" aria-controls="app-nav" aria-label="Menu">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
|
</button>
|
|
<nav class="app-nav" id="app-nav" aria-label="Primary">
|
|
<a href="/" class="nav-link is-active" aria-current="page">Chat</a>
|
|
<!-- Phase 19 (now every page — phase 34, owner confirmation
|
|
2026-08-26): the Sources link is admin-only (owner
|
|
permission 2026-08-23) — hidden by default, header.js
|
|
reveals it once whoami says admin. The soft-gated page
|
|
itself is unchanged. -->
|
|
<a href="/sources.html" class="nav-link" id="nav-sources" hidden>RAG</a>
|
|
<!-- Phase 35 (owner permission 2026-08-26): the Git sources
|
|
link is admin-only — hidden by default, header.js
|
|
reveals it once whoami says admin, exactly like the
|
|
Sources link above. -->
|
|
<a href="/git-sources.html" class="nav-link" id="nav-git-sources" hidden>Sources</a>
|
|
<!-- Phase 29 (now every page — phase 34, owner confirmation
|
|
2026-08-26): the Global Tuning link is admin-only (owner
|
|
permission 2026-08-25) — hidden by default, header.js
|
|
reveals it once whoami says admin, exactly like the
|
|
Sources link above. -->
|
|
<a href="/tuning.html" class="nav-link" id="nav-tuning" hidden>Tuning</a>
|
|
<!-- Phase 50 (owner permission 2026-08-29, `TODO.md` L5): the
|
|
History link is admin-only — hidden by default, header.js
|
|
reveals it once whoami says admin, exactly like the
|
|
Tuning link above. -->
|
|
<a href="/history.html" class="nav-link" id="nav-history" hidden>History</a>
|
|
<!-- Phase 46 (mobile dropdown copy: sign-in — desktop bar copy is
|
|
outside the nav; see styles.css .sign-in-mobile rules). -->
|
|
<a href="/login.html?next=/" class="auth-link sign-in-link sign-in-mobile" id="sign-in-link-mobile" hidden>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-8"/><path d="M4 12h11"/><path d="m12 9 3 3-3 3"/></svg>
|
|
<span class="auth-label">Sign in</span>
|
|
</a>
|
|
<!-- Phase 46 (mobile dropdown copy — desktop bar copy is
|
|
outside the nav; see styles.css .sign-out-mobile rules). -->
|
|
<button type="button" class="auth-link sign-out-btn sign-out-mobile" id="sign-out-btn-mobile" aria-label="Sign out" hidden>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8"/><path d="M9 12h11"/><path d="m17 9 3 3-3 3"/></svg>
|
|
<span class="auth-label">Sign out</span>
|
|
</button>
|
|
</nav>
|
|
<!-- Phase 15: the tuning-notes panel (stored in Postgres, read
|
|
into every system prompt) — owned by the shared header
|
|
module (assets/header.js); the #steering-panel section
|
|
ships in every page's <main>. The navbar toggle was
|
|
removed at owner request (2026-08-28): note management
|
|
lives on /tuning.html. -->
|
|
<!-- Phase 16: single-admin auth — exactly one of Sign in / Sign
|
|
out is visible; /api/whoami decides at load (the shared
|
|
header module). Icon-only below 640px (aria-labels keep the
|
|
accessible names). -->
|
|
<a href="/login.html?next=/sources.html" class="auth-link sign-in-link" id="sign-in-link" hidden>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-8"/><path d="M4 12h11"/><path d="m12 9 3 3-3 3"/></svg>
|
|
<span class="auth-label">Sign in</span>
|
|
</a>
|
|
<button type="button" class="auth-link sign-out-btn" id="sign-out-btn" aria-label="Sign out" hidden>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8"/><path d="M9 12h11"/><path d="m17 9 3 3-3 3"/></svg>
|
|
<span class="auth-label">Sign out</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main" class="app-main" tabindex="-1">
|
|
<div class="container chat-shell" data-state="empty">
|
|
<div class="kb-banner" id="kb-banner" role="status" hidden>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.6 22.2 20.4H1.8Z"/><path d="M12 9.5v4.6"/><path d="M12 17.4h.01"/></svg>
|
|
<span id="kb-banner-text"></span>
|
|
</div>
|
|
|
|
<!-- Phase 53 (task 05): the stale-saved-chat banner. The /?chat=<id>
|
|
boot load reveals it ONLY when the fetched row reports
|
|
stale: true (the server computes it — the row's sources stamp
|
|
is behind the current generation, task 03; the client never
|
|
does staleness math). Regenerate (the exact brand-pill family
|
|
of the Save/Share pair; the redo glyph is the phase-49 Retry
|
|
asset) re-asks the last question against the new index via
|
|
retryLastTurn and re-saves the linked row (the server
|
|
re-stamps sources_version → stale: false), clearing the
|
|
banner. A stale chat with no brain answer is revealed
|
|
text-only — app.js removes the button, so retryLastTurn is
|
|
never called. Stacks directly below #kb-banner when both are
|
|
visible (kb-banner keeps the top slot; the .chat-shell flex
|
|
gap spaces them). -->
|
|
<section class="kb-banner stale-banner" id="stale-banner" role="status" hidden>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
|
|
<span>The sources have been updated since this chat was saved.</span>
|
|
<button type="button" class="stale-regenerate" id="stale-regenerate">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
|
|
<span>Regenerate</span>
|
|
</button>
|
|
</section>
|
|
|
|
<!-- Phase 15 (now every page — phase 34, owner confirmation
|
|
2026-08-26): the tuning-notes panel (stored notes, newest
|
|
first) — rendered + driven by assets/header.js (shared), not
|
|
the page script. First child of <main> on the non-chat
|
|
pages; the chat page keeps it after #kb-banner. -->
|
|
<section class="steering-panel" id="steering-panel" role="region"
|
|
aria-label="Tuning notes" hidden>
|
|
<div class="steering-panel-head">
|
|
<h2 class="steering-panel-title">Tuning notes</h2>
|
|
<p class="steering-panel-sub">Every note below steers all future answers.</p>
|
|
</div>
|
|
<ul class="steering-list" id="steering-list"></ul>
|
|
<p class="steering-empty" id="steering-empty">No tuning notes yet — press “Tune” under any answer to add one.</p>
|
|
</section>
|
|
<p class="visually-hidden" id="steering-announcer" role="status" aria-live="polite" aria-atomic="true"></p>
|
|
|
|
<!-- Phase 55 (task 05, 2026-08-31, TODO.md L6, owner-locked A5):
|
|
the chat-actions row — New chat + Share share ONE
|
|
.chat-actions wrapper (a normal .chat-shell column child,
|
|
replacing the two pills as its direct children): a
|
|
HORIZONTAL row on desktop (side by side, left-aligned, each
|
|
pill at its intrinsic width — the row's align-items: center
|
|
beats the column's stretch) and a VERTICAL stack at the
|
|
existing ≤640px breakpoint (New chat above Share,
|
|
full-width). DOM order New chat → Share in both
|
|
orientations; the 46rem column contract is untouched
|
|
(PLAN §7). The kb-banner / stale-banner / steering /
|
|
announcer structure around the row is unchanged.
|
|
|
|
Phase 14 (module-owned since phase 34 task 02): "New chat"
|
|
resets the local (localStorage) conversation and clears the
|
|
rendered list. The binding lives in header.js — dispatches
|
|
"bor:new-chat" which app.js acts on (it owns the
|
|
in-flight-turn guard + list reset). -->
|
|
<div class="chat-actions">
|
|
<button type="button" class="new-chat-btn" id="new-chat-btn" aria-label="New chat">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
<span class="new-chat-label">New chat</span>
|
|
</button>
|
|
|
|
<!-- Phase 55 (owner-locked A2, 2026-08-31): there is NO Save
|
|
control — every conversation auto-saves itself (app.js
|
|
persistConversation at the phase-14/20 save points). The
|
|
History page is the visible proof; a failed auto-save leaves
|
|
only a one-line status note (never a button, never a banner).
|
|
|
|
Phase 55 (owner-locked A1, 2026-08-31): the "Share" pill is
|
|
STATIC, ALWAYS-VISIBLE markup — there is no reveal step
|
|
(phase 51's admin-only ship-hidden gate is gone with it; task
|
|
01 opened the save/share write surface to every visitor).
|
|
|
|
Phase 51 (owner-locked 2026-08-29, `TODO.md` L6): "Share"
|
|
turns the current conversation into a PUBLIC read-only link —
|
|
/shared/<token> (a 128-bit uuid4 on the saved_chats row,
|
|
migration 0009). The save-then-share contract: an UNSAVED
|
|
(unlinked) conversation is saved AND shared in ONE action —
|
|
app.js POSTs /api/chats with { messages, share: true } (the
|
|
server sets the token in the same commit) and links the
|
|
conversation to the created row; a saved (linked) one just
|
|
POSTs /api/chats/<id>/share (idempotent — the existing token
|
|
comes back unchanged). On success the ABSOLUTE link is
|
|
copied to the clipboard; a non-secure (http) homelab origin
|
|
that rejects the clipboard gets the inline link-field
|
|
fallback instead (owner-locked — app.js renders
|
|
.share-link-fallback near the status line). app.js binds the
|
|
click to shareCurrentChat. Unsharing lives on the History
|
|
page's Share column (admin-only). -->
|
|
<button type="button" class="share-chat-btn" id="share-chat-btn" aria-label="Share chat">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|
<span class="share-chat-label">Share</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Phase 49 (2026-08-29, TODO.md L4): the meta row under a brain
|
|
bubble can carry JS-injected actions (app.js) — Tune (admin
|
|
only, phase 15) and Retry (every visitor; the LAST brain
|
|
bubble only, redo-in-place). No static markup: both are
|
|
injected like the source chips. -->
|
|
<section class="messages" id="messages" aria-live="polite" aria-label="Conversation with Brain of Reese">
|
|
<div class="empty-state" id="empty-state">
|
|
<div class="empty-state-glyph" aria-hidden="true">
|
|
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10 8h28a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H24l-9 8v-8h-5a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4Z"/><path d="m15 17 5 4-5 4"/><path d="M24 25h8"/></svg>
|
|
</div>
|
|
<h1 class="empty-state-title">Hey! I'm Brain of Reese.</h1>
|
|
<p class="empty-state-sub">
|
|
I've read through the homelab and deployment notes — ask me anything,
|
|
and I'll point you at the exact doc. You've got this.
|
|
</p>
|
|
<div class="suggestions" id="suggestions" role="list" aria-label="Suggested questions">
|
|
<!-- suggestion chips rendered by app.js from /api/suggestions -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Composer (phase 48, 2026-08-29, TODO.md L3): one button, two
|
|
roles — #send-btn reads "Send" when idle and morphs into the
|
|
enabled "Stop" control (.is-stop, rose treatment) while a turn
|
|
is in flight; a click or Enter in flight aborts the fetch
|
|
(AbortController in app.js) and the partial is kept + persisted
|
|
with the optional `stopped` marker, rendered as the .stopped-note
|
|
meta-row note by app.js — live and on restore. The spinner span
|
|
stays in the markup (contract marker, reduced-motion pin) but
|
|
never shows: the Stop label + treatment carry the in-flight
|
|
state.
|
|
`novalidate`: the input is cleared after send, so a `required`
|
|
constraint would silently block the Stop click/Enter — the
|
|
browser's constraint validation runs before the `submit` event
|
|
and would never reach handleSend's in-flight guard. The
|
|
`!text` guard in app.js is the real empty-input check (same
|
|
precedent as the tuning form's noValidate). -->
|
|
<form class="composer" id="composer" novalidate>
|
|
<label class="visually-hidden" for="message-input">Ask Brain of Reese a question</label>
|
|
<textarea
|
|
id="message-input"
|
|
name="message"
|
|
rows="1"
|
|
placeholder="Ask me about the homelab…"
|
|
autocomplete="off"
|
|
></textarea>
|
|
<button type="submit" class="send-btn" id="send-btn">
|
|
<span class="spinner" aria-hidden="true" hidden></span>
|
|
<span class="btn-label" id="send-label">Send</span>
|
|
<span class="visually-hidden" aria-live="polite" id="send-status"></span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="app-footer">
|
|
<div class="container footer-inner">
|
|
<span>Powered by Reese's self-hosted models</span>
|
|
<span class="footer-version" id="app-version"></span>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Phase 39: the brand layer — a CLASSIC script, first on every
|
|
page: window.BOR_BRAND is set at parse time (before the module
|
|
scripts evaluate) and refreshed from /api/config (a byte-
|
|
identical no-op for the default name). -->
|
|
<script src="assets/brand.js"></script>
|
|
<script src="assets/markdown.js"></script>
|
|
<!-- Phase 19: the shared header module loads through the page script's
|
|
own `import "./header.js"` — a hoisted import that is evaluated
|
|
before the page script body calls initSharedHeader() at boot. -->
|
|
<script type="module" src="/assets/app.js"></script>
|
|
|
|
<!-- Phase 26: the almost-fullscreen document modal. Source chips and
|
|
Sources-table path links open documents here (same-page overlay,
|
|
no new tab) instead of navigating to /document.html — that page
|
|
stays as the no-JS / direct-link fallback, unchanged. The page
|
|
scripts fetch /api/documents/content and render into
|
|
#doc-modal-content; the hidden attribute keeps the skeleton inert
|
|
until JS opens it. #doc-modal-open points at the same
|
|
/document.html?source=…&path=… URL the modal builds, so the
|
|
dedicated page is always one click away. -->
|
|
<div class="doc-modal" id="doc-modal" hidden>
|
|
<div class="doc-modal-backdrop" id="doc-modal-backdrop" aria-hidden="true"></div>
|
|
<div class="doc-modal-panel" id="doc-modal-panel" role="dialog" aria-modal="true" aria-labelledby="doc-modal-title" aria-describedby="doc-modal-desc">
|
|
<header class="doc-modal-header">
|
|
<h2 class="doc-modal-title" id="doc-modal-title">Loading…</h2>
|
|
<div class="doc-modal-actions">
|
|
<a class="doc-modal-open" id="doc-modal-open" target="_blank" rel="noopener" hidden aria-label="Open in full page">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></svg>
|
|
<span>Full page</span>
|
|
</a>
|
|
<button type="button" class="doc-modal-close" id="doc-modal-close" aria-label="Close document">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="doc-modal-meta" id="doc-modal-meta" aria-live="polite"></div>
|
|
<p class="visually-hidden" id="doc-modal-desc" role="status">Document content is loading.</p>
|
|
<main class="doc-modal-content" id="doc-modal-content" tabindex="-1">
|
|
<p class="doc-modal-loading" role="status">Loading document…</p>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|