From 796753e3c928a1982d6ba9c6b159042c24ace6c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Sat, 20 Jun 2026 21:12:35 +0200 Subject: [PATCH] docs: implementation plan for issue #53 Co-Authored-By: Claude Opus 4.8 --- ...0-issue-53-session-row-fragment-rebuild.md | 595 ++++++++++++++++++ 1 file changed, 595 insertions(+) create mode 100644 docs/superpowers/plans/2026-06-20-issue-53-session-row-fragment-rebuild.md diff --git a/docs/superpowers/plans/2026-06-20-issue-53-session-row-fragment-rebuild.md b/docs/superpowers/plans/2026-06-20-issue-53-session-row-fragment-rebuild.md new file mode 100644 index 0000000..8b842d5 --- /dev/null +++ b/docs/superpowers/plans/2026-06-20-issue-53-session-row-fragment-rebuild.md @@ -0,0 +1,595 @@ +# Issue #53 — Rebuild session row fragment via shared builder — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Make the htmx session-row fragment reuse the same row builder as the list table, and give the finish/reset actions a real in-place row swap with the navbar playtime totals kept correct via an out-of-band swap. + +**Architecture:** Extract the session row's content into one `session_row_data()` dict builder used by both `list_sessions` and a thin `session_row()` Node wrapper (`TableRow(session_row_data(...))`). The navbar's playtime `
  • ` becomes a `NavbarPlaytime` component with a stable id so endpoints can return it `hx-swap-oob`. `end_session`/`reset_session_start` return `Fragment(row, NavbarPlaytime(oob=True))`; clone keeps `HX-Refresh`. + +**Tech Stack:** Django 6, the in-house Python component system (`common/components`), HTMX, pytest / pytest-django, Playwright (e2e). + +## Global Constraints + +- Build UI with Python components from `common.components`; never raw HTML strings or Django templates. Builders return `Node`; stringify only at the `HttpResponse` boundary (Django str-encodes content). Do **not** return `SafeText`/`mark_safe` from row builders. +- Never write to `GeneratedField`s (`duration_calculated`, `duration_total`, `days_to_finish`). +- Name variables with complete words (`device_list`, `csrf_token`, `session`, not abbreviations). +- Name compound types explicitly: the row dict is a `TypedDict` (`SessionRowData`). +- Signals handle playtime recalculation — do not recompute `Game.playtime` by hand. +- Run tests with `uv run --with pytest-django pytest`. A bare `pytest` also collects `e2e/` (needs a browser); scope unit/view runs to `tests/...` paths. +- Spec: `docs/superpowers/specs/2026-06-20-issue-53-session-row-fragment-rebuild-design.md`. + +--- + +## File Structure + +- `games/views/session.py` — add `SessionRowData` (TypedDict), `session_row_data()`, `session_row()`; refactor `list_sessions` to use them; delete `_session_row_fragment()`; rewire `end_session`, `reset_session_start`, `new_session_from_existing_session`. +- `common/layout.py` — add `NavbarPlaytime()`; embed it inside `Navbar()`. +- `tests/test_session_row.py` — new: unit tests for `session_row_data` / `session_row`. +- `tests/test_navbar_playtime.py` — new: unit tests for `NavbarPlaytime`. +- `tests/test_session_endpoints.py` — new: view tests for the three rewired endpoints. +- `e2e/test_session_inplace_swap_e2e.py` — new: in-place finish swap + navbar update. + +--- + +### Task 1: Extract `session_row_data` + `session_row` (canonical row builder) + +**Files:** +- Modify: `games/views/session.py` (the `data["rows"]` comprehension at ~line 126-190, and the `list_sessions` body) +- Test: `tests/test_session_row.py` (create) + +**Interfaces:** +- Produces: + - `class SessionRowData(TypedDict)` with keys `row_id: str`, `hx_trigger: str`, `hx_get: str`, `hx_select: str`, `hx_swap: str`, `cell_data: list[Node]`. + - `session_row_data(session: Session, device_list, csrf_token: str) -> SessionRowData` — the 6-cell row dict (Name, Date, Duration, Device, Created, Actions) with `row_id="session-row-{pk}"` and the device-change self-refresh hx attrs. For a running session (`timestamp_end is None`) the Actions `ButtonGroup` includes Finish and Reset buttons wired for htmx row swap (`hx_get` to the end/reset URL, `hx_target=f"#session-row-{pk}"`, `hx_swap="outerHTML"`). + - `session_row(session: Session, device_list, csrf_token: str) -> Node` — `TableRow(session_row_data(...))`. + +- [ ] **Step 1: Write the failing test** + +```python +# tests/test_session_row.py +import pytest +from django.utils import timezone + +from games.models import Device, Game, Platform, Session +from games.views.session import session_row, session_row_data + + +@pytest.fixture +def running_session(db): + platform = Platform.objects.create(name="PC") + game = Game.objects.create(name="Celeste", platform=platform) + device = Device.objects.create(name="Desktop") + return Session.objects.create( + game=game, device=device, timestamp_start=timezone.now() + ) + + +def test_session_row_data_shape(running_session): + device_list = Device.objects.order_by("name") + data = session_row_data(running_session, device_list, "tok") + assert data["row_id"] == f"session-row-{running_session.pk}" + assert len(data["cell_data"]) == 6 + assert data["hx_select"] == f"#session-row-{running_session.pk}" + + +def test_session_row_renders_id_and_six_cells(running_session): + device_list = Device.objects.order_by("name") + html = str(session_row(running_session, device_list, "tok")) + assert f'id="session-row-{running_session.pk}"' in html + assert html.count(" SessionRowData: + """Canonical session-list row. Single source of truth shared by + list_sessions and the htmx finish/reset fragments.""" + row_selector = f"#session-row-{session.pk}" + end_url = reverse("games:list_sessions_end_session", args=[session.pk]) + reset_url = reverse( + "games:list_sessions_reset_session_start", args=[session.pk] + ) + actions = ButtonGroup( + [ + { + "href": end_url, + "hx_get": end_url, + "hx_target": row_selector, + "hx_swap": "outerHTML", + "slot": Icon("end"), + "title": "Finish session now", + "color": "green", + } + if session.timestamp_end is None + else {}, + { + "href": reset_url, + "hx_get": reset_url, + "hx_target": row_selector, + "hx_swap": "outerHTML", + "hx_confirm": "Reset this session's start time to now?", + "slot": Icon("reset"), + "title": "Reset start to now", + "color": "gray", + } + if session.timestamp_end is None + else {}, + { + "href": reverse("games:edit_session", args=[session.pk]), + "slot": Icon("edit"), + "title": "Edit", + }, + { + "href": reverse("games:delete_session", args=[session.pk]), + "slot": Icon("delete"), + "title": "Delete", + "color": "red", + }, + ] + ) + return SessionRowData( + row_id=f"session-row-{session.pk}", + hx_trigger="device-changed from:body", + hx_get="", + hx_select=row_selector, + hx_swap="outerHTML", + cell_data=[ + NameWithIcon(session=session), + f"{local_strftime(session.timestamp_start)}" + f"{f' — {local_strftime(session.timestamp_end, timeformat)}' if session.timestamp_end else ''}", + session.duration_formatted_with_mark(), + SessionDeviceSelector(session, device_list, csrf_token), + session.created_at.strftime(dateformat), + actions, + ], + ) + + +def session_row(session: Session, device_list, csrf_token: str) -> Node: + """The single-session node, rendered through the same TableRow + path the list table uses.""" + return TableRow(session_row_data(session, device_list, csrf_token)) +``` + +Add `TableRow` to the `from common.components import (...)` block (it currently imports `paginated_table_content` but not `TableRow`). + +- [ ] **Step 4: Run test to verify it passes** + +Run: `uv run --with pytest-django pytest tests/test_session_row.py -v` +Expected: PASS (3 tests). + +- [ ] **Step 5: Refactor `list_sessions` to consume the builder** + +Replace the inline `"rows": [ {...} for session in sessions]` in the `data` dict with the builder call. First compute the token once near the top of `list_sessions` (after `device_list`): add `csrf_token = get_token(request)`. Then: + +```python + "rows": [ + session_row_data(session, device_list, csrf_token) + for session in sessions + ], +``` + +Delete the now-removed inline row dict (the whole `{ "row_id": ..., ... }` comprehension body, ~line 127-189). Leave `header_action`/`columns` untouched. + +- [ ] **Step 6: Run the broader suite to confirm no regression** + +Run: `uv run --with pytest-django pytest tests/test_session_row.py tests/test_paths_return_200.py tests/test_rendered_pages.py -v` +Expected: PASS. + +- [ ] **Step 7: Commit** + +```bash +git add games/views/session.py tests/test_session_row.py +git commit -m "refactor(session): extract canonical session_row_data builder + +Co-Authored-By: Claude Opus 4.8 " +``` + +--- + +### Task 2: `NavbarPlaytime` component (OOB-swappable) + +**Files:** +- Modify: `common/layout.py` (`Navbar()` at ~line 190-231) +- Test: `tests/test_navbar_playtime.py` (create) + +**Interfaces:** +- Produces: `NavbarPlaytime(today_played: str, last_7_played: str, *, oob: bool = False) -> Node` — an `
  • `. + +- [ ] **Step 1: Write the failing test** + +```python +# tests/test_navbar_playtime.py +from common.layout import NavbarPlaytime + + +def test_navbar_playtime_has_stable_id_and_values(): + html = str(NavbarPlaytime("1 h 00 m", "7 h 00 m")) + assert 'id="navbar-playtime"' in html + assert "1 h 00 m" in html + assert "7 h 00 m" in html + assert "hx-swap-oob" not in html + + +def test_navbar_playtime_oob_flag(): + html = str(NavbarPlaytime("1 h 00 m", "7 h 00 m", oob=True)) + assert 'id="navbar-playtime"' in html + assert 'hx-swap-oob="true"' in html +``` + +- [ ] **Step 2: Run test to verify it fails** + +Run: `uv run --with pytest-django pytest tests/test_navbar_playtime.py -v` +Expected: FAIL with `ImportError: cannot import name 'NavbarPlaytime'`. + +- [ ] **Step 3: Write minimal implementation** + +In `common/layout.py`, add above `Navbar()`: + +```python +def NavbarPlaytime( + today_played: str, last_7_played: str, *, oob: bool = False +) -> "Node": + """The navbar 'Today · Last 7 days' totals. Carries a stable id so + htmx endpoints can refresh it out-of-band after a session change.""" + from common.components import Safe + + oob_attr = ' hx-swap-oob="true"' if oob else "" + return Safe( + f'
    • " + ) +``` + +- [ ] **Step 4: Run test to verify it passes** + +Run: `uv run --with pytest-django pytest tests/test_navbar_playtime.py -v` +Expected: PASS (2 tests). + +- [ ] **Step 5: Embed it inside `Navbar()`** + +In the `Navbar()` `Safe(f"""...""")` markup, replace the inline `
  • ` block: + +```html +
  • + Today·Last 7 days + {today_played}·{last_7_played} +
    • +``` + +with: + +```python + {NavbarPlaytime(today_played, last_7_played)} +``` + +(The surrounding string is already an f-string, so the `{NavbarPlaytime(...)}` call interpolates its rendered HTML.) + +- [ ] **Step 6: Run pages tests to confirm navbar still renders** + +Run: `uv run --with pytest-django pytest tests/test_navbar_playtime.py tests/test_rendered_pages.py tests/test_paths_return_200.py -v` +Expected: PASS. The navbar still shows the totals (now via the component). + +- [ ] **Step 7: Commit** + +```bash +git add common/layout.py tests/test_navbar_playtime.py +git commit -m "feat(layout): extract NavbarPlaytime as OOB-swappable component + +Co-Authored-By: Claude Opus 4.8 " +``` + +--- + +### Task 3: Rewire endpoints (in-place swap for end/reset, HX-Refresh for clone) + +**Files:** +- Modify: `games/views/session.py` (`_session_row_fragment` delete; `end_session`, `reset_session_start`, `new_session_from_existing_session`) +- Test: `tests/test_session_endpoints.py` (create) + +**Interfaces:** +- Consumes: `session_row` (Task 1), `NavbarPlaytime` (Task 2), `model_counts` (`games/views/general.py`). +- Produces: rewired views. `end_session`/`reset_session_start` htmx → `HttpResponse(str(Fragment(session_row(...), NavbarPlaytime(..., oob=True))))`; `new_session_from_existing_session` htmx → `HttpResponse(status=204)` with `HX-Refresh: true`. + +- [ ] **Step 1: Write the failing test** + +```python +# tests/test_session_endpoints.py +import pytest +from django.urls import reverse +from django.utils import timezone + +from games.models import Device, Game, Platform, Session + + +@pytest.fixture +def auth_client(client, django_user_model): + user = django_user_model.objects.create_user(username="u", password="p") + client.force_login(user) + return client + + +@pytest.fixture +def running_session(db): + platform = Platform.objects.create(name="PC") + game = Game.objects.create(name="Hades", platform=platform) + device = Device.objects.create(name="Deck") + return Session.objects.create( + game=game, device=device, timestamp_start=timezone.now() + ) + + +def test_end_session_htmx_returns_row_and_oob_navbar(auth_client, running_session): + url = reverse("games:list_sessions_end_session", args=[running_session.pk]) + response = auth_client.get(url, HTTP_HX_REQUEST="true") + body = response.content.decode() + assert response.status_code == 200 + assert f'id="session-row-{running_session.pk}"' in body + assert 'id="navbar-playtime"' in body + assert 'hx-swap-oob="true"' in body + running_session.refresh_from_db() + assert running_session.timestamp_end is not None + + +def test_reset_session_start_htmx_returns_row_no_refresh_header( + auth_client, running_session +): + original_start = running_session.timestamp_start + url = reverse( + "games:list_sessions_reset_session_start", args=[running_session.pk] + ) + response = auth_client.get(url, HTTP_HX_REQUEST="true") + body = response.content.decode() + assert response.status_code == 200 + assert f'id="session-row-{running_session.pk}"' in body + assert 'id="navbar-playtime"' in body + assert "HX-Refresh" not in response.headers + running_session.refresh_from_db() + assert running_session.timestamp_start > original_start + + +def test_clone_htmx_returns_hx_refresh(auth_client, running_session): + url = reverse( + "games:list_sessions_start_session_from_session", + args=[running_session.pk], + ) + before = Session.objects.count() + response = auth_client.get(url, HTTP_HX_REQUEST="true") + assert response.status_code == 204 + assert response.headers.get("HX-Refresh") == "true" + assert Session.objects.count() == before + 1 + + +def test_end_session_non_htmx_redirects(auth_client, running_session): + url = reverse("games:list_sessions_end_session", args=[running_session.pk]) + response = auth_client.get(url) + assert response.status_code == 302 + assert response.url == reverse("games:list_sessions") +``` + +- [ ] **Step 2: Run test to verify it fails** + +Run: `uv run --with pytest-django pytest tests/test_session_endpoints.py -v` +Expected: FAIL — `end`/`reset` currently return the old fragment / `204+HX-Refresh`; clone returns the old fragment (200, not 204). + +- [ ] **Step 3: Delete `_session_row_fragment` and rewire the views** + +In `games/views/session.py`: + +1. Delete the entire `_session_row_fragment(session)` function (the hand-built 4-column `Tr`). +2. Add imports: at top, `from games.views.general import model_counts`. Ensure `Fragment` and `Node` are imported from `common.components` (they already are). Add `from common.layout import NavbarPlaytime` (the file already imports `render_page` from `common.layout`). +3. Add a small helper near the endpoints: + +```python +def _row_with_navbar(request: HttpRequest, session: Session) -> HttpResponse: + device_list = Device.objects.order_by("name") + counts = model_counts(request) + fragment = Fragment( + session_row(session, device_list, get_token(request)), + NavbarPlaytime( + counts["today_played"], counts["last_7_played"], oob=True + ), + ) + return HttpResponse(str(fragment)) +``` + +4. Rewrite the endpoints: + +```python +@login_required +def new_session_from_existing_session( + request: HttpRequest, session_id: int +) -> HttpResponse: + clone_session_by_id(session_id) + if request.htmx: + # Clone adds a new row whose position depends on sort + pagination, + # which a single-row swap cannot place — refresh the list instead. + response = HttpResponse(status=204) + response["HX-Refresh"] = "true" + return response + return redirect("games:list_sessions") + + +@login_required +def end_session(request: HttpRequest, session_id: int) -> HttpResponse: + session = get_object_or_404(Session, id=session_id) + session.timestamp_end = timezone.now() + session.save() + if request.htmx: + return _row_with_navbar(request, session) + return redirect("games:list_sessions") + + +@login_required +def reset_session_start(request: HttpRequest, session_id: int) -> HttpResponse: + session = get_object_or_404(Session, id=session_id) + session.timestamp_start = timezone.now() + session.save() + if request.htmx: + return _row_with_navbar(request, session) + return redirect("games:list_sessions") +``` + +Note: `clone_session_by_id` already returns the clone; we drop the unused local. Check for an import cycle when adding `from games.views.general import model_counts` at module top — if `general.py` imports from `session.py` it will cycle; in that case import `model_counts` lazily inside `_row_with_navbar` instead. + +- [ ] **Step 4: Run test to verify it passes** + +Run: `uv run --with pytest-django pytest tests/test_session_endpoints.py -v` +Expected: PASS (4 tests). + +- [ ] **Step 5: Switch the game-detail "Finish" button off the htmx path it never used** + +Confirm `games/views/game.py` `_sessions_section` still uses plain `href` for its end button (it does, and it stays full-nav per spec / #55). No change needed — just verify by reading; if it has any `hx_get` to `view_game_end_session`, leave it, since `end_session` still redirects for non-list contexts. (The game-detail button is `href`-only, so it triggers the non-htmx redirect branch.) + +- [ ] **Step 6: Run the full unit/view suite** + +Run: `uv run --with pytest-django pytest tests/ -v` +Expected: PASS (no regressions; old fragment tests, if any, are gone with the function). + +- [ ] **Step 7: Commit** + +```bash +git add games/views/session.py tests/test_session_endpoints.py +git commit -m "feat(session): in-place row swap for finish/reset with OOB navbar + +Delete stale _session_row_fragment; end_session and reset_session_start +return the canonical row plus an OOB navbar-playtime fragment. Clone keeps +HX-Refresh since it changes row count. Fixes #53. + +Co-Authored-By: Claude Opus 4.8 " +``` + +--- + +### Task 4: E2E — in-place finish swap + navbar update + +**Files:** +- Test: `e2e/test_session_inplace_swap_e2e.py` (create) + +**Interfaces:** +- Consumes: the rewired list UI (Tasks 1-3). No production code changes. + +- [ ] **Step 1: Write the test** + +Follow the existing `e2e/` patterns (`live_server`, login helper, Playwright `page`). Inspect `e2e/conftest.py` and an existing test (e.g. `e2e/test_widgets_e2e.py`) for the project's login fixture and `page.goto(live_server.url + ...)` style, and mirror them. + +```python +# e2e/test_session_inplace_swap_e2e.py +from django.urls import reverse +from django.utils import timezone + +from games.models import Device, Game, Platform, Session + + +def test_finish_session_swaps_row_in_place(live_server, page, logged_in): + platform = Platform.objects.create(name="PC") + game = Game.objects.create(name="Tunic", platform=platform) + device = Device.objects.create(name="Desktop") + session = Session.objects.create( + game=game, device=device, timestamp_start=timezone.now() + ) + + page.goto(live_server.url + reverse("games:list_sessions")) + row = page.locator(f"#session-row-{session.pk}") + row.get_by_title("Finish session now").click() + + # Row updates in place (still present, now shows an end time → em dash). + page.wait_for_selector(f"#session-row-{session.pk}") + assert "—" in page.locator(f"#session-row-{session.pk}").inner_text() + session.refresh_from_db() + assert session.timestamp_end is not None +``` + +If the repo has no shared `logged_in` fixture, replicate the login step used by the other e2e tests inline (they all authenticate the same way — copy that fixture/usage). + +- [ ] **Step 2: Build TS assets (custom elements served fresh) and run the test** + +Run: +```bash +make ts +uv run --with pytest-django --with pytest-playwright pytest e2e/test_session_inplace_swap_e2e.py -v +``` +Expected: PASS. (Requires a Chromium; `e2e/conftest.py` prefers a system Chrome, else run `uv run playwright install chromium` once.) + +- [ ] **Step 3: Commit** + +```bash +git add e2e/test_session_inplace_swap_e2e.py +git commit -m "test(e2e): in-place session-row finish swap + +Co-Authored-By: Claude Opus 4.8 " +``` + +--- + +### Task 5: Full check + cleanup + +**Files:** none (verification). + +- [ ] **Step 1: Lint + format + tests aggregate** + +Run: `make check` +Expected: PASS (ruff lint, format check, ts-check, tests). Fix any unused imports left in `session.py` — particularly `SafeText`, `mark_safe`, `date_filter`, `Span`, `Tr`, `Td` if the deleted `_session_row_fragment` was their only user. Verify with `make lint` and remove the dead imports. + +- [ ] **Step 2: Manual smoke (optional but recommended)** + +Run `make dev`, open the session list, finish a running session: the row should update in place (end time appears, duration fills) and the navbar "Today · Last 7 days" totals change, with no full-page reload. Reset start on a running session: start time jumps to now, duration resets, navbar updates. Clone ("play" button): list reloads. + +- [ ] **Step 3: Commit any cleanup** + +```bash +git add -A +git commit -m "chore(session): drop imports orphaned by fragment removal + +Co-Authored-By: Claude Opus 4.8 " +``` + +--- + +## Self-Review + +**Spec coverage:** +- Canonical builder (`session_row_data` + `session_row`, both Node) → Task 1. ✓ +- `NavbarPlaytime` OOB component → Task 2. ✓ +- end/reset in-place swap + OOB navbar; reset drops 204+HX-Refresh → Task 3. ✓ +- clone stays HX-Refresh → Task 3 (with documented reason). ✓ +- Return `Node`, stringify at HttpResponse boundary → Tasks 1/3 (`HttpResponse(str(Fragment(...)))`). ✓ +- List buttons switch to htmx row swap → Task 1 (Finish/Reset in `session_row_data`). ✓ +- Delete dead `_session_row_fragment` + old Tr → Task 3. ✓ +- game-detail out of scope (#55) → Task 3 Step 5 (verify, no change). ✓ +- Tests: unit (row, navbar), view (endpoints), e2e (in-place swap) → Tasks 1-4. ✓ + +**Placeholder scan:** No TBD/TODO; all steps carry concrete code or commands. The one judgement call (import-cycle on `model_counts`) is given an explicit fallback (lazy import). ✓ + +**Type consistency:** `session_row_data(session, device_list, csrf_token) -> SessionRowData` and `session_row(session, device_list, csrf_token) -> Node` used identically in Task 1, Task 3, and tests. `NavbarPlaytime(today_played, last_7_played, *, oob=False)` used consistently in Task 2 and Task 3. `_row_with_navbar(request, session) -> HttpResponse` used in both end/reset. ✓