Files

T

ducoterra 4b0f53c499 chore(agent): phase roadmap from TODO.md, 2 phases

Convert the two TODO items into append-mode phases (Protocol B):
18_nav_hamburger (TODO L3) and 19_ups_events_expandable (TODO L4),
numbered after the existing todo phases. TODO.md is cleared to an
empty list; its items now live in .agents/phases/todo/.

LLM-Generated: true

2026-10-20 10:37:30 -04:00

3.0 KiB

Raw Blame History

Task 01 — The hamburger button markup

Phase: 18_nav_hamburger · Source: TODO.md:3 — "The nav bar needs to collapse into a hamburger like brain of reese does" Story: n/a

Objective

The seven pages that carry the tab nav each gain the hamburger button and the nav id, so the (later task's) CSS and binding have stable anchors to work on. The markup is identical on every page, and /login — which deliberately renders only the brand link and the theme toggle — stays untouched.

Work

src/dashboards/web/pages/index.html · system.html · disks.html · llm.html · ups.html · settings.html · certs.html — in each masthead, immediately before nav class="tabs", add the toggle:
```
<button class="ghost nav-toggle" id="nav-toggle" type="button"
        aria-expanded="false" aria-controls="nav-tabs" aria-label="Toggle navigation">☰</button>
```
and give the nav its id: <nav class="tabs" id="nav-tabs" aria-label="Dashboards">. The button sits between .brand and nav.tabs, inside the same <header class="masthead"> — one element per page, no script changes in this task.
src/dashboards/web/static/dash.css — add the one base rule beside the other button.ghost, a.ghost family (the masthead section): .nav-toggle { display: none; } — the button is invisible on every width until task 02's ≤640px block shows it, so the project stays exactly as it looks today after this task.
src/dashboards/web/pages/login.html — no change. Verify by grep -c 'id="nav-toggle"' returning 0 (the pin lands in task 04).
ASSUMPTION: the TODO named brain of reese's behaviour, not its breakpoint or glyph. This task takes the 640px breakpoint (brain's (max-width: 640px) and dash.css's existing 640px block) and the ☰ glyph with aria-label="Toggle navigation"; the CSS task owns the visual.
ASSUMPTION: only the tab nav collapses on phones. The masthead-right cluster (#nav-status dots, pause, ⚷ Certs, ⚙ Account, theme toggle) stays visible; the masthead wraps to two rows at ≤640px (task 02).

Testing & Quality

Integration: the served pages still pass the untouched masthead pins (test_the_disks_tab_is_in_the_masthead_of_every_page, test_every_page_links_to_both_admin_pages) and the orphan-id audit — #nav-toggle is referenced by the (task 02) stylesheet rule and aria-controls, so the audit must not flag it
Coverage: >90% on modified code (HTML only — the gate's node --check and pytest suite are the checks)

Completion Criteria

grep -l 'id="nav-toggle"' src/dashboards/web/pages/*.html lists exactly the seven tabbed pages, never login.html
every one of the seven carries the identical button block and the nav id (diff of the blocks across pages is empty)
uv run pytest -q green; bash .agents/validate.sh green
no behavior change: at every width the pages render exactly as before after this task (the button is display:none from the base rule shipped with it)

3.0 KiB Raw Blame History