The tar override lives in pnpm-workspace.yaml, which pnpm-lock.yaml
records. Copying only package.json + pnpm-lock.yaml left pnpm without
the overrides config, causing ERR_PNPM_LOCKFILE_CONFIG_MISMATCH on
frozen install.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
TestCase wraps each test in a savepoint — when scrub_staging deletes
all django_session rows inside that savepoint, the rollback restores
any sessions committed by earlier tests (e.g. force_login in
test_paths_return_200). Those restored rows then leaked into the e2e
live-server tests, causing intermittent Session.MultipleObjectsReturned
errors.
TransactionTestCase flushes the DB before each test instead of using
savepoints, giving scrub_staging a clean slate and removing the leakage.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Address issue #20 and the CI divergence between Gitea and GitHub.
Issue #20 (staging seeded from a prod snapshot):
- Read SECRET_KEY from the environment with the insecure dev key as
fallback, so each deployment can have its own key.
- Add a `scrub_staging` management command that clears django_session and
the django-q schedule/queue/results, removing copied prod sessions and
the inherited convert_prices() schedule.
- Run the scrub from entrypoint.sh when STAGING=true, and wire STAGING plus
a per-branch SECRET_KEY into the Gitea staging deploy.
CI parity (both systems kept, independent):
- Add the Node/pnpm/TypeScript build steps to the Gitea build workflow to
match the GitHub test job.
- Add a GitHub staging workflow that deploys per-branch ephemeral instances
to Fly.io (*.fly.dev) with a fresh database seeded from sample fixtures
and its own SECRET_KEY, never production data. Tears the app down on
branch delete and comments the URL on the open PR via github-script.
- Add fly.staging.toml and a LOAD_SAMPLE_DATA entrypoint hook for the
fresh-database public staging.
https://claude.ai/code/session_01KYjUcNjLfZ8Hq1GAC8J4oZ
Replace the npm-based pnpm bootstrap in the Docker assets stage with
Corepack (ships with Node, no npm needed) and pin the pnpm version via
package.json's packageManager field for reproducible builds.
pnpm v11 (installed in CI via `npm install -g pnpm`) no longer reads the
`pnpm.overrides` field from package.json, which caused
ERR_PNPM_LOCKFILE_CONFIG_MISMATCH during the frozen install. Move the
override to pnpm-workspace.yaml, the new home for the setting, so CI's
pnpm reads it and matches the lockfile.
https://claude.ai/code/session_01NPQ9AiNNnapeoTQFAR1ShY
tar@6.2.1 was pulled in transitively via npm-check-updates' toolchain
(cacache, node-gyp, pacote). Add a pnpm override forcing tar >=7.5.11
to resolve the security advisory. Now resolves to tar@7.5.16.
https://claude.ai/code/session_01NPQ9AiNNnapeoTQFAR1ShY
_GET_SESSION_COUNT_SCRIPT was a mark_safe string used as a child of the
view_game content tree. Under the "only Safe nodes render unescaped" rule, a
mark_safe *string* child is escaped — so the <script> showed as literal text
on the page. Make it a Safe node (and drop the now-unused mark_safe import).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Selector menu options were bare <button>s with no padding, so the open
dropdown items were cramped. Add a shared option class (block w-full
text-left px-4 py-2 + hover), matching the original <a> list items.
- The played-row's relative menu wrapper was a block div, so in the inline-flex
button group the chevron toggle sat lower than the count button. Make the
wrapper inline-flex and the group items-stretch so the two buttons align into
one rounded group again.
- Rebuild base.css for the newly-used utilities.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Two visual regressions from the custom-element port:
1. The played-row nested its dropdown menu (which contains <button> options)
inside the toggle <button>. A <button> may not contain another <button>;
the HTML parser force-closes the toggle on the nested button, and the
source's explicit </div> tags then close ancestors early — ejecting the
Purchases/Sessions/etc. sections out of the centered max-w container
(they rendered full-width). Make the menu a sibling of the toggle, wrapped
in a relative div so it still anchors under the toggle.
2. Both selector toggles dropped the original
`flex flex-row gap-4 justify-between items-center` wrapper around their
content, so the chevron stacked under the label (the GameStatus label is a
display:flex block). Restore the wrapper — chevron sits on the right with
proper spacing again.
Verified by screenshot: sections back inside the centered container; both
dropdowns render correctly.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The Game status dropdown is now a <game-status-selector> light-DOM custom
element: the Python builder emits the tag + kebab attrs htpy-style, behavior
lives in ts/elements/{dropdown,game-status-selector}.ts wired by the native
connectedCallback, and GameStatusSelectorProps is the codegen'd contract. The
~70-line inline-Alpine f-string is gone.
Also fix SimpleTable to collect and re-attach the media of its row/header
nodes: it stringifies cells into the table markup, which silently dropped each
cell component's declared Media — so a <game-status-selector> in a cell never
got its <script> emitted. Now Page() emits it.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bite-sized TDD plan for the design spec: TS toolchain scaffold, htpy-style
Element sugar, custom-element registry + codegen, then the three exemplar
conversions (GameStatusSelector, SessionDeviceSelector, played-row) retiring
their inline Alpine/@@TOKEN@@ f-strings, plus CI/Docker/docs wiring.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Brainstormed design for replacing the trusted HTML/JS f-strings (Alpine
selectors, @@TOKEN@@ played-row) with three composing layers:
- htpy-style sugar on the existing Element (kwargs attrs + [] children),
additive, keeps Media/collect_media — no build step.
- Custom Elements (light DOM, TypeScript) for behavior, with the native
connectedCallback lifecycle replacing the onSwap shim.
- A typed contract: one Python Props type per component, codegen'd into a TS
interface + attribute reader, so server↔client drift fails `tsc`.
Toolchain: tsc per-module (no bundler, preserves per-component Media),
build-only/gitignored output, wired into make + Docker. Exemplars:
GameStatusSelector, SessionDeviceSelector, played-row. Alpine retired for
those three; existing .js migrated later.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Navbar is static chrome (a few reverse() URLs in otherwise-fixed markup), so
it now returns a single Safe node wrapping that markup instead of a mark_safe
string — consistent with "trusted HTML is a Safe node," and a full element
tree would be ~80 lines of nesting for no gain (it owns no component JS).
Page() interpolates it via str() exactly as before.
filter_presets.list_presets returned HttpResponse(mark_safe(...)); HttpResponse
never escapes its body, so the mark_safe was pure noise — dropped.
The mark_safe calls that remain are all load-bearing and not tree children:
the node engine itself (core: how a node emits its SafeString), the
script-tag / scripts= string helpers, and Page()'s final document string.
Full suite green (445).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Tightens the child model so the type is honest end to end. Previously a
``SafeText``/``mark_safe`` string passed as a child rendered unescaped — a
trusted-HTML-as-string backdoor that ``Child = Node | str`` couldn't express
(every ``SafeText`` is a ``str``). Now ``_child_key`` escapes *every* string
child; the only way to put trusted pre-rendered HTML into the tree is a
``Safe`` node. So a ``str`` child is always untrusted text — which is exactly
what the renderer escapes.
Converted the trusted-HTML children that relied on the old passthrough:
- ``CsrfInput`` and the Alpine selectors (``GameStatusSelector`` /
``SessionDeviceSelector``) now return ``Safe`` nodes instead of ``mark_safe``
strings — they are always tree children.
- ``popover_content`` is now a ``Child`` (it is rendered as a child); the one
HTML caller (``LinkedPurchase``) passes ``Safe(...)``.
- View-side children that were ``mark_safe`` strings → ``Safe(...)``:
``_played_row`` (game detail), the stat SVGs and `` `` spacer (game),
the login table (auth), the manual session-form field/label markup
(session), and ``_purchase_name`` (stats).
- ``SimpleTable.header_action`` typed ``Child``.
The script-tag string helpers (``ModuleScript`` / ``StaticScript`` /
``ExternalScript``) stay ``SafeText`` strings: they are only ever joined into
the ``scripts=`` string, never used as tree children.
``Children`` regains a bare ``Node`` member (a single node child is valid);
the one ``*children`` site (``Popover``) normalises via ``as_children`` first.
Tests that asserted the old SafeText-passthrough now assert the new rule
(mark_safe child escaped; ``Safe`` node passes through). Full suite green
(445; +2 new escaping tests).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Twin of the children fix: builders annotated ``attributes`` as
``list[HTMLAttribute] | None``, and ``list`` is invariant, so passing the
``list[tuple[str, str]]`` a caller naturally writes was a type error.
Add ``Attributes = Sequence[HTMLAttribute]`` (covariant) and use it for the
``attributes`` parameter of every builder. Locals that get appended/concatenated
stay a concrete ``list[HTMLAttribute]`` via the new ``as_attributes()``
normaliser, mirroring ``as_children()`` — builders call it once up front so
``attributes + [...]`` keeps working on a real list.
Pyright on common/components drops 45 → 42; the remaining errors are all
pre-existing and unrelated (django-stubs model access, the ``mark_safe``
``_Wrapped`` return type, and the separate ``FilterSelect`` options-list
invariance). Full suite green (443).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The builders annotated their ``children`` parameter as
``list[HTMLTag] | HTMLTag | None`` where ``HTMLTag = str``. ``list[str]`` is
invariant, so passing ``list[Element]`` / ``list[Node]`` — the normal case —
was a type error everywhere a component nested children.
Introduce a proper child type in core:
Child = Node | str
Children = Sequence[Child] | str | None
``Sequence`` is covariant, so ``list[Element]`` / ``list[Node]`` are accepted;
``Child`` includes ``Node`` so node children are no longer rejected. ``Element``
itself also accepts a bare ``Node`` (it wraps one), typed ``Children | Node``.
Replace the ``list[HTMLTag] | HTMLTag | None`` annotations across primitives /
domain with ``Children``, and add ``as_children()`` to normalise a ``children``
argument to a ``list[Child]`` — retiring the repeated
``children if isinstance(children, list) else [children]`` dance that defeated
type narrowing. Inline ``mark_safe(...)`` SVG/markup children become ``Safe(...)``
nodes (a ``Node`` child instead of a stub-typed string).
Pyright on the component package drops from 43 to 22 errors; the remaining 22
are pre-existing and unrelated (django-stubs model access, the ``mark_safe``
``_Wrapped`` return type, and ``list[HTMLAttribute]`` attribute invariance).
Full suite green (443).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The legacy back-compat ``Component(tag_name=...)`` function (a thin
string-returning wrapper over ``Element``) was the last piece of the
pre-node-tree API. Migrate its ~18 call sites across the views to the node
builders and remove it:
- stats_content.py: the table helpers now use the whitelisted ``Td`` / ``Th``
/ ``Tr`` builders and ``Element`` for table/tbody/thead/h1; helper return
types are ``Node``.
- auth.py / statuschange.py / game.py / purchase.py: the hand-built
``<form>`` / ``<button>`` / ``<h1>`` / ``<h2>`` / ``<table>`` markup now uses
``Element("tag", ...)``.
- core.py: drop the ``Component()`` function and its back-compat note;
``common/components/__init__`` no longer exports it.
- Tests that exercised the shim now target ``Element`` directly
(test_components cache/escaping/edge-case classes; test_node_tree drops the
legacy-parity and legacy-bridge cases, which ``Element`` coverage subsumes).
- CLAUDE.md: drop the "legacy Component retained for back-compat" notes.
Full suite green (443; one obsolete legacy-bridge test removed).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The component tests rendered lazy nodes to HTML through two competing pieces
of scaffolding: a magic ``_RenderingComponents.__getattr__`` proxy that
auto-str()'d any capitalized builder, plus separate ``str()`` wrapper
functions for Checkbox / Radio (test_components) and SearchSelect /
FilterSelect / Pill (test_search_select).
Replace both with one explicit convention: import the real components and
wrap node-returning calls in ``str(...)`` at the call site. ``Node.__str__``
returns a ``SafeText``, so the ``assertIsInstance(..., SafeText)`` checks stay
meaningful and every string assertion is unchanged. Non-node helpers
(``randomid``, ``_resolve_name_with_icon``, ``_render_element``, the legacy
string ``Component()``) are called directly.
No production code touched; 141 component/search-select tests and the full
444-test suite pass.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Cleanup of hacky leftovers from the node-tree migration (no behaviour
change):
- Return annotations: the component builders return Node subtrees, not
SafeText strings, but ~40 functions still declared `-> SafeText`. Correct
them to `-> Node` across filters / search_select / date_range_picker /
domain. The genuine string returners keep `-> SafeText`: the Alpine
selectors (GameStatusSelector / SessionDeviceSelector, which build f-string
markup) and the script-tag helpers (CsrfInput / ModuleScript /
ExternalScript / StaticScript).
- layout.render_page / layout.Page / AddForm now accept `Node` in their
`content` / `scripts` / `fields` parameters (TYPE_CHECKING import in
layout to avoid the components import cycle), matching what views already
pass.
- session._session_fields builds a `Fragment(*rows, separator="\n")` instead
of `mark_safe("\n".join(str(row) ...))` — keeps the tree intact so media
could bubble, per the Fragment convention.
- Inline SVG icon children use `Safe(...)` nodes instead of `mark_safe(...)`
strings (filters mode-toggle + collapse icons, date_range_picker calendar
icon).
- _filter_field reads the widget's own id from its node `.attributes`
(`_widget_id`) for the label's `for`, dropping the superfluous `for_widget`
argument that always rendered `for="None"`. Removes the two TODOs whose
premise ("the Component function can't expose the id") the class/node
refactor retired, plus RangeSlider's dead commented-out Label block.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The *FilterBar family (FilterBar / SessionFilterBar / PurchaseFilterBar /
DeviceFilterBar / PlatformFilterBar / PlayEventFilterBar) previously shared
the collapsible chrome through a free `_filter_bar(fields, ...)` helper that
each function called at the end. Replace that with a `_FilterBarBase`
BaseComponent: it owns the chrome render() and declares `media =
_FILTER_BAR_MEDIA`, and each bar is now a subclass implementing
`build_fields()`.
The per-entity field-building bodies move verbatim into module-level
`_<entity>_fields(existing, ...)` functions that each subclass delegates to,
so the large bodies are untouched (no reindentation) and the diff stays
reviewable. Media still bubbles: BaseComponent.collect_media() merges the
bar's own filter_bar.js with the search_select.js / range_slider.js /
date_range_picker.js declared by the contained widgets.
Call sites are unchanged — `FilterBar(filter_json=..., preset_list_url=...)`
now instantiates a Node instead of calling a function, and both `str(bar)`
and `collect_media(bar)` behave as before.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The onSwap migration turned filter_bar.js, range_slider.js, and
search_select.js into ES modules that register via htmx.onLoad. The five
filter synthetic e2e pages still loaded them as classic `<script defer>`
with no htmx present, so the `import { onSwap }` line was a SyntaxError and
no widget ever initialized — 18 failing tests.
Load htmx.min.js first (classic) and the three widgets as `type="module"`,
mirroring how Page() serves them in the real app. date_range_picker.js
stays a classic defer script (it is an IIFE, not a module).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Page() now calls collect_media(content) and emits the ModuleScript /
StaticScript tags itself, so views no longer thread scripts= for
component-owned JS. The list views (game/session/purchase/device/
platform/playevent) compose with Fragment(filter_bar, content) instead of
mark_safe(str(filter_bar) + str(content)) — keeping the node tree intact
so the filter bar's media (filter_bar.js + search_select.js +
range_slider.js, and date_range_picker.js on purchases) reaches Page().
The stats views drop _STATS_SCRIPTS; YearPicker's datepicker.umd.js is
collected from its declared media.
The scripts= argument remains for page-specific glue not owned by a
component (the add-form helpers add_game.js / add_purchase.js /
add_session.js, alongside search_select.js for their form widgets).
Adds regression tests asserting the list and stats pages auto-load their
widget scripts with no scripts= in the view, and documents the node/
media model in CLAUDE.md.
https://claude.ai/code/session_01BKurBhE3Qj25p7Bfsg7EeK
The JS-bearing widgets now declare their script dependencies, so a view
no longer needs to know which scripts a component requires:
- SearchSelect / FilterSelect → search_select.js
- RangeSlider → range_slider.js
- DateRangePicker → date_range_picker.js
- YearPicker → datepicker.umd.js (external, from Phase 2)
- FilterBar chrome → filter_bar.js
Because the filter-bar internals now build a node tree (the legacy
Component() string-builder calls became Element/Div), each bar's
collect_media() returns its own filter_bar.js merged with the scripts
that bubble up from the FilterSelect / RangeSlider / DateRangePicker
widgets it contains — exactly the set the views thread by hand today.
Adds Node.with_media() so a function-built node can declare media
without a full BaseComponent subclass, and tests proving the bubbling.
Note: the six *FilterBar functions still share the _filter_bar chrome
helper rather than a BaseComponent class hierarchy; folding them into
one is a follow-up that does not affect media collection (Phase 4).
https://claude.ai/code/session_01BKurBhE3Qj25p7Bfsg7EeK
Generic leaf builders (Div, Span, Td, Tr, Th, Ul, Li, Strong, Label,
Template, P) are now generated from one _html_element factory over the
single Element class — the tag name is data, not a per-tag body. Only
elements that add classes/behaviour (Button, Pill, Checkbox, Radio,
Input, A, SearchField, H1, Modal, AddForm, tables) stay hand-written.
All primitives now return Node objects; string-built widgets (Icon,
SimpleTable, YearPicker) return Safe, and YearPicker declares its
datepicker media. Raw concatenation (_popover_html, Popover slot) uses
Fragment.
Node.__str__/__html__ now return a SafeString: a node's rendered output
is safe HTML by construction, so str(node) stays safe when fed back into
a child list or template (matching the old SafeText behaviour and
preventing double-escaping).
Consumers adapted: the form widgets (SearchSelectWidget,
PrimitiveCheckboxWidget) return render(component) so Django gets a safe
string; the session form's manual field markup joins via str(row).
Component tests render nodes to HTML before asserting.
https://claude.ai/code/session_01BKurBhE3Qj25p7Bfsg7EeK
lukas
Claude