ducoterra
6be692d999
TODO.md L9 (owner permission 2026-08-27, roadmap A5): "The navbar on
mobile is way too squished. Make it a hamburger dropdown menu with a
nice animation." At <=640px the nav links leave the bar — a 44px
#nav-toggle opens #app-nav as an animated (180ms slide+fade)
edge-to-edge dropdown with comfortable rows and the auth visibility
contract intact inside the menu; at >640px the bar is byte-identical
to pre-phase-46 (hamburger absent, inline pills as before).
- frontend/*.html (all six pages): the shared bar gains the
#nav-toggle button (type=button, aria-expanded=false,
aria-controls="app-nav", aria-label="Menu", aria-hidden 3-line
SVG icon) immediately before the nav, and the nav gains
id="app-nav" — one <nav>, no duplicated links, so the whoami reveal
works inside the menu unchanged (phase-34 same-bar contract intact).
- frontend/assets/styles.css: .nav-toggle is display:none outside media
queries (desktop untouched); the <=640px block adds the 44px toggle
(+hover in the .steering-toggle:hover family, sized 20px icon), turns
.app-nav into the dropdown (absolute top:100% edge-to-edge under the
sticky header, surface + hairline + --shadow-lg, z-index 21 =
header+1, closed state invisible + non-interactive with the 180ms
opacity/transform/visibility-delayed pair, .is-open the only
opener), and comfortable 1rem/0.75rem menu rows — superseding the
phase-34/35 pill-squeeze rules for .nav-link/.app-nav (the 900px
tablet block, action pills, and 58px bar height untouched). The
reduced-motion block stills BOTH the closed and .is-open states: the
.is-open rule (0,2,0) out-specifies a bare .app-nav (0,1,0), so the
override must name both — verified live in Chromium (task 03).
- frontend/assets/header.js: ONE module-owned binding (import-time,
null-safe like the sign-out binding): click toggles .is-open +
aria-expanded in sync, a delegated nav-link click closes, Esc closes
and refocuses the toggle, and matchMedia("(max-width: 640px)")
change drops the state on resize back to desktop. The binding
touches only the container — ship-hidden whoami links stay hidden.
- tests/unit/test_hamburger_nav.py (new): the markup/CSS/JS contract
pins (six identical toggles in the shared row, desktop byte-
identical, dropdown + .is-open + 180ms + reduced-motion rules, the
superseded squeeze rules gone, the one-binding behavior).
- tests/e2e/test_shared_header.py: assert_shared_bar gains mobile=True
(at <=640px the bar shows the hamburger + the closed nav; the
per-role menu contents are pinned by the story suite).
- tests/e2e/test_mobile_hamburger_nav.py (new, story suite, 375x812):
toggle is a visible >=44px target, menu closed (opacity 0 /
visibility hidden), no horizontal overflow; anonymous menu shows
exactly "Chat" (admin-only links stay hidden inside); admin menu
shows all four links (whoami reveal inside the menu); a link click
navigates + the arrival page ships closed; Esc closes and refocuses
the toggle (outside click does NOT close — accepted: the locked
close set is Esc + link + resize, no backdrop); the 180ms
opacity/transform pair is live and reducedMotion:reduce stills both
states with open/close still working; 1280x800 regression — toggle
display:none, all four inline links inside the header band.
Gates: unit+integration 773 passed; app/ coverage TOTAL 99%
(unchanged — frontend-only phase); story E2E 7 passed in isolation
(mock LLM, DB up); regression suites test_nav_consistency (6) /
test_header_consistency (3) / test_shared_header (6) /
test_responsive_polish (7) / test_tuning_nav_link (4) all pass in
isolation; ruff check + pyright clean. A11 honored: no CDN, no new
assets.
Also records the 46_mobile_hamburger_nav todo/ -> complete/ move.
246 lines
15 KiB
HTML
246 lines
15 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="Documents indexed in Brain of Reese.">
|
||
<title>Sources · 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%23121a2e%22%20stroke=%22%236d78f2%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%3Ccircle%20cx=%2232%22%20cy=%2232%22%20r=%226.5%22%20fill=%22%236d78f2%22/%3E%3Cpath%20d=%22M32%2025.5V16M32%2048v-9.5M25.5%2032H16M48%2032h-9.5%22%20stroke=%22%2322d3ee%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="#121a2e" stroke="#6d78f2" stroke-width="4" stroke-linejoin="round"/><circle cx="32" cy="32" r="6.5" fill="#6d78f2"/><path d="M32 25.5V16M32 48v-9.5M25.5 32H16M48 32h-9.5" stroke="#22d3ee" 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">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 is-active" aria-current="page" id="nav-sources" hidden>Sources</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>Git 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>
|
||
</nav>
|
||
<!-- Phase 15 (now every page — phase 34, owner confirmation
|
||
2026-08-26): open the tuning-notes panel (stored in
|
||
Postgres, read into every system prompt). The behavior is
|
||
owned by the shared header module (assets/header.js); the
|
||
#steering-panel section ships in every page's <main>. -->
|
||
<button type="button" class="steering-toggle" id="steering-toggle" hidden
|
||
aria-expanded="false" aria-controls="steering-panel">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="15.5" cy="7" r="2.2"/><circle cx="9.5" cy="17" r="2.2"/></svg>
|
||
<span class="steering-label">Tuning</span>
|
||
<span class="steering-count" id="steering-count">0</span>
|
||
</button>
|
||
<!-- Phase 32 (now every page — phase 34, owner confirmation
|
||
2026-08-26): the admin-only "Sync sources" button — SHIPS
|
||
hidden (anonymous-safe), header.js reveals it for the admin
|
||
on the SAME cached whoami that reveals #nav-sources /
|
||
#nav-tuning. The §7.4 "never stale" lifecycle is
|
||
module-owned (assets/header.js); the Sources page's
|
||
#sync-result line + #sync-error-banner render off the
|
||
module's "bor:sync-status" event. -->
|
||
<button type="button" class="sync-btn" id="sync-btn" hidden aria-label="Sync sources">
|
||
<svg class="sync-icon" 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 class="sync-label" id="sync-label">Sync sources</span>
|
||
</button>
|
||
<!-- #sync-result is the aria-live announcer for the last sync
|
||
result ("N added · …"), sources-page-specific — it renders
|
||
off the module's "bor:sync-status" event (sources.js). -->
|
||
<span class="sync-result" id="sync-result" role="status" aria-live="polite"></span>
|
||
<!-- Phase 14 (now every page — phase 34, owner confirmation
|
||
2026-08-26; module-owned since phase 34 task 02): on the
|
||
chat page "New chat" resets the local (localStorage)
|
||
conversation; on every other page it means "go to the
|
||
chat, fresh" (the module clears the key + navigates). -->
|
||
<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 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" 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" 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">
|
||
<!-- 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>
|
||
<div class="container sources-shell">
|
||
<!-- Phase 32: the sync failure banner — the chat error-banner
|
||
markup style (kb-banner + is-error), role="alert" so a failed
|
||
sync is announced. sources.js fills #sync-error-text and
|
||
un-hides it on a failed run (the button re-enables,
|
||
retry-ready); a new sync hides it again. -->
|
||
<div class="kb-banner is-error" id="sync-error-banner" role="alert" 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="sync-error-text"></span>
|
||
</div>
|
||
|
||
<div class="page-head">
|
||
<h1>Knowledge base</h1>
|
||
<p class="page-sub">
|
||
Every <code>*.md</code> file indexed from <code>~/Homelab</code> and
|
||
<code>~/Deployments</code>. Re-run the import to refresh — or hit
|
||
<strong>Sync sources</strong> in the header to clone the repos and
|
||
re-import.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Phase 16: anonymous sign-in gate. The catalog is what the
|
||
login locks — the document viewer itself stays public (soft
|
||
rule), so the copy says what stays open. -->
|
||
<section class="sources-gate" id="sources-gate" aria-labelledby="sources-gate-title" hidden>
|
||
<div class="sources-gate-glyph" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/><circle cx="12" cy="14.5" r="1.4" fill="currentColor" stroke="none"/><path d="M12 16v2"/></svg>
|
||
</div>
|
||
<h2 id="sources-gate-title">Sign in to view the full catalog</h2>
|
||
<p class="sources-gate-sub">
|
||
The complete list of indexed documents is admin-only. Chat — and
|
||
any document an answer cites — stays open to everyone.
|
||
</p>
|
||
<a class="sources-gate-link" href="/login.html?next=/sources.html">Sign in</a>
|
||
</section>
|
||
|
||
<div class="stat-cards" id="stat-cards">
|
||
<div class="stat-card" role="group" aria-label="Document statistics">
|
||
<span class="stat-value" id="stat-docs">–</span>
|
||
<span class="stat-label">documents</span>
|
||
</div>
|
||
<div class="stat-card" role="group" aria-label="Chunk statistics">
|
||
<span class="stat-value" id="stat-chunks">–</span>
|
||
<span class="stat-label">chunks</span>
|
||
</div>
|
||
<div class="stat-card" role="group" aria-label="Last indexed">
|
||
<span class="stat-value stat-value-sm" id="stat-last">–</span>
|
||
<span class="stat-label">last indexed</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-wrap" role="region" aria-label="Indexed documents" tabindex="0">
|
||
<table class="docs-table" id="docs-table">
|
||
<caption class="visually-hidden">Indexed markdown documents</caption>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Source</th>
|
||
<th scope="col">Path</th>
|
||
<th scope="col">Title</th>
|
||
<th scope="col">Chunks</th>
|
||
<th scope="col">Indexed</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="docs-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="empty-state" id="sources-empty" hidden>
|
||
<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="M6 12a4 4 0 0 1 4-4h10l4 5h14a4 4 0 0 1 4 4v17a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4Z"/><path d="M6 20h36"/><path d="M15 28h9M15 33h14"/></svg>
|
||
</div>
|
||
<h2 class="empty-state-title">Nothing indexed yet</h2>
|
||
<p class="empty-state-sub">
|
||
Run the import to pull in the markdown docs:
|
||
<code>uv run python -m scripts.import_docs</code>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="app-footer">
|
||
<div class="container footer-inner">
|
||
<span>Powered by Reese's self-hosted models</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 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.
|
||
Phase 26: markdown.js (the classic global renderMarkdown) loads
|
||
BEFORE the module script — the document modal renders md
|
||
documents through it on this page too. -->
|
||
<!-- Phase 39: the brand layer — classic script, first on the page:
|
||
window.BOR_BRAND at parse time, refreshed from /api/config. -->
|
||
<script src="assets/brand.js"></script>
|
||
<script src="assets/markdown.js"></script>
|
||
<script type="module" src="/assets/sources.js"></script>
|
||
|
||
<!-- Phase 26: the almost-fullscreen document modal — SAME skeleton as
|
||
the chat page (index.html): Sources-table path links open documents
|
||
here (same-page overlay, no new tab) instead of navigating to
|
||
/document.html, which stays the no-JS / direct-link fallback,
|
||
unchanged. The page script fetches /api/documents/content and
|
||
renders into #doc-modal-content through the shared renderDocument
|
||
(document.js); the hidden attribute keeps the skeleton inert until
|
||
JS opens it. #doc-modal-open points at the same
|
||
/document.html?source=…&path=… URL the link carries, 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>
|