Two gaps reported from live testing on the devpi rig:
1. The timezone/location step never showed done for a user whose real
timezone IS the shipped default (America/New_York) - the heuristic can
only detect difference-from-default, not "user saved this". Clicking an
item's checkbox now toggles it done manually (persisted per browser in
localStorage), so any heuristic false-negative is one tap to clear.
Clicking the item text still deep-links to its tab.
2. The card now hides itself automatically once every step is done
(auto-detected or manually checked) - previously it stayed until the X
was clicked.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
Owner-requested layout refinement of the Display Settings tab:
- The "Display Options" card (disable_hardware_pulsing, inverse_colors,
show_refresh_rate, use_short_date_format, Dynamic Duration) moves inside
the collapsed advanced section, now titled "Advanced Hardware & Display
Options (15)". Hidden form fields still submit with the form, and
settings search still auto-expands the section on match, so nothing is
lost - the tab just leads with the essentials.
- The "Vegas Scroll Mode" section moves above "Double-Sided Display".
New section order: Hardware (+ advanced dropdown) > Vegas Scroll >
Double-Sided > Multi-Display Sync.
Validation (real Jinja render): all 23 field names present exactly once,
divs balanced (70/70), the five Display Options fields render inside the
advanced section's bounds, and section markers confirm the new order.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
The initial SSE render sized the preview image (and both overlay canvases)
from the server-reported config dimensions (cols x chain_length,
rows x parallel), while the scale slider's re-render path sized from
img.naturalWidth/naturalHeight. Whenever the snapshot PNG's actual size
disagrees with the config (stale config, display service not restarted
after a hardware change), the initial render stretched the image at a
fractional ratio - blurry despite image-rendering: pixelated - and
touching the scale slider "fixed" it. Reported live on the devpi test rig.
Both paths now size from the loaded image's natural dimensions inside
img.onload (which also removes a transient wrong-size flash between
src assignment and load). The meta label now reports the true snapshot
size. The preview card also gets overflow-x-auto so on narrow screens a
wide preview scrolls at its exact pixel-perfect size instead of being
squeezed into the viewport (fractional downscaling of pixel art also
reads as blur).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
base.html shipped ~4,200 lines of inline JavaScript inside the HTML
document, re-downloaded and re-parsed on every page load (gzip helps the
transfer, but inline scripts can never be browser-cached). The four
largest blocks - none containing any Jinja syntax, verified by scanning
every inline block for {{ }} / {% %} - now live as static files served
with the app's existing mtime-versioned immutable caching:
- js/htmx-config.js (246 lines): HTMX swap/script-execution config,
toggleSection helpers
- js/app-early.js (346 lines): early helpers + the app() stub that must
precede Alpine init
- js/app-shell.js (2,997 lines): SSE wiring + the full Alpine app()
implementation and tab logic
- js/custom-feeds-helpers.js (262 lines): custom-feeds table helpers
Each replacement <script src> is CLASSIC (no defer/async) at the exact
position of the inline block it replaces - identical execution timing and
DOM visibility to inline scripts, so relative ordering with the deferred
scripts and with each other is unchanged. base.html drops from ~4,940 to
1,079 lines.
Validation: extraction proven lossless by programmatically reassembling
the four files back into the template and comparing against git HEAD -
byte-for-byte identical. Jinja parse passes; script open/close tags
balanced (53/53, after excluding a literal "<script>" inside an HTML
comment).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
Font Awesome, CodeMirror, and htmx were fetched from cdnjs/unpkg on every
fresh page load, adding third-party round-trips on a device that often
lives on a local network (and htmx was local-only in AP mode, meaning two
different loading behaviors to reason about).
- Vendored pinned copies under static/v3/vendor/: Font Awesome 6.0.0
(css/all.min.css + the 8 webfonts it references relatively) and
CodeMirror 5.65.2 (core, javascript mode, closebrackets/matchbrackets
addons, base + monokai css) - ~1.1 MB total, exact versions the CDN tags
pinned.
- htmx + sse + json-enc extensions now load from the existing local copies
(verified 1.9.10, matching the CDN pin) on EVERY network, not just AP
mode; the pinned CDN copies remain as a one-shot rescue fallback,
mirroring the pattern Alpine already used. The convoluted isAPMode
source-flipping logic collapses away.
- Dropped the CDN preconnect/dns-prefetch hints (no longer on the critical
path).
- Fixed a latent bug while relinking CodeMirror: the loader requested
mode/json/json.min.js, which does not exist on cdnjs (HTTP 404 verified)
- it 404'd on every JSON-editor open. JSON highlighting comes from the
javascript mode; the phantom entry is removed.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
plugins_manager.js, base.html's inline scripts, and app.js emitted 198
console.log calls in production - including per-interaction [DEBUG] dumps -
costing main-thread time and drowning real errors in noise.
- New window.debugLog() gate defined in base.html's first inline script
(before any other script runs): forwards to console.log only when
localStorage.pluginDebug === 'true' - the SAME switch plugins_manager.js
already used for its _PLUGIN_DEBUG_EARLY logs, so existing debug workflow
docs stay valid. Exposed as window.LEDMATRIX_DEBUG for other scripts.
- Mechanically rewrote console.log( -> debugLog( in plugins_manager.js
(127), base.html (64), app.js (7). Verified no occurrences lived inside
string literals before rewriting; console.error/console.warn untouched.
- app.js's no-Alpine showNotification fallback restored to console.info -
it's a user-facing last resort, not debug output.
Both load paths are safe: the gate is the first inline <script> in <head>,
and every rewritten file loads deferred after it.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
The interface ships a ~5,000-line HTML shell and >20k lines of JS
uncompressed; on phone/WiFi that dominates load time. Flask-Compress
gzips/brotlis compressible responses transparently.
- Optional dependency, same graceful pattern as flask-limiter: missing
package = uncompressed responses, no crash.
- SSE safety verified empirically against the real package (1.24): an
actual streamed text/event-stream response comes back with no
Content-Encoding while a large HTML response gzips — the display
preview / stats / logs streams are unaffected.
- Added flask-compress>=1.14 to web_interface/requirements.txt.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
display_preview_generator() opened each changed snapshot with PIL and
re-encoded it to PNG just to base64 it — but /tmp/led_matrix_preview.png
already IS a PNG, written atomically by the display service (tmp file +
os.replace in display_manager.py), so a partially-written file can never be
observed. Read the bytes and base64 them directly: identical payload
(front-end consumes data:image/png;base64 — verified in base.html), one
full image decode+encode per frame less on the same Pi that's driving the
matrix. The existing mtime skip and viewer-marker throttling are unchanged
(they already covered the "skip unchanged frames" concern).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
The user-visible URL no longer carries the interface version: the pages
blueprint is now registered un-prefixed (primary) AND at /v3 (second
registration, name='pages_v3_legacy'), so:
- http://<device>/ serves the interface directly (the old @app.route('/')
redirect is removed — the blueprint's own index takes its place)
- every existing /v3/... bookmark and all the hardcoded /v3/partials/...
fetches in templates/JS keep working verbatim through the alias mount —
zero template/JS churn, zero broken links
- url_for('pages_v3.*') resolves against the primary registration, so all
server-side redirects (captive portal detection endpoints) now emit
un-prefixed URLs
- the AP-mode captive-portal allowlist learned the un-prefixed page paths
(/setup, /partials/, /settings/, /plugin-ui/) so setup-mode requests
don't redirect-loop
- /api/v3 and the templates/v3, static/v3 directories are deliberately
untouched (internal, invisible to users; owner-confirmed scope)
Validation: dual registration mechanics tested against real Flask (test
client): /, /v3, /v3/ redirect, partials and /setup reachable on both
mounts, url_for yields un-prefixed paths; py_compile passes.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
The primary rotation's order was invisible and unconfigurable: modes are
registered in parallel-load COMPLETION order, so rotation order actually
varied between restarts. Only the niche Vegas Scroll mode had a working
order UI. This adds real, persisted ordering end to end:
Backend:
- config.template.json: new display.plugin_rotation_order (default [],
fully backward compatible).
- display_controller.py: _apply_plugin_rotation_order() rebuilds
available_modes grouped by plugin per the configured list (each plugin's
modes keep their declared order; unlisted plugins follow in existing
relative order; empty config = exact no-op). Applied at startup after
parallel load and after live enable/disable reconcile (before the
existing _resync_mode_index_after_change, which preserves the current
mode). Mirrors vegas_mode get_ordered_plugins() semantics.
- api_v3.py save_main_config: accepts plugin_rotation_order as a JSON
array (same parse/guard pattern as vegas_plugin_order).
Frontend:
- New shared widget static/v3/js/widgets/plugin-order-list.js: the Vegas
section's drag-and-drop list factored out verbatim (native HTML5 drag
events, saved-order-first rendering, hidden-input JSON sync),
parameterized by container/order-input/optional exclude-checkbox/badge.
- display.html: Vegas section now calls the shared module; its ~130-line
inline copy of the same logic is deleted.
- durations.html: new "Rotation Order" card above the durations grid using
the same module, posting plugin_rotation_order with the existing form.
Deviation from plan, deliberate: durations stay as their own mode-keyed
grid rather than inline in the drag rows - verified display_durations keys
are MODE names (display_controller.py resolves duration per mode_key), not
plugin ids, and one plugin can own several modes, so the planned 1:1
inline pairing was wrong.
Validation: py_compile on both Python files; _apply_plugin_rotation_order
unit-tested standalone (configured order applied, empty-config no-op,
unknown ids skipped - 3/3); both templates render with balanced divs, the
hidden input carries the saved order, and the old inline implementation is
confirmed gone; config.template.json parses.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
New users land on a dense multi-tab dashboard with no suggested order of
operations (the only guided flow is the WiFi captive portal). This adds a
non-gating checklist card at the top of Overview with five steps, each a
deep link that switches to the right tab (and closes the mobile nav drawer):
1. Set panel size -> Display tab (done: rows/cols/chain_length > 0)
2. Set timezone/location -> General tab (done: differs from template
defaults America/New_York / Tampa)
3. Install a plugin -> Plugins tab (done: /api/v3/plugins/installed
non-empty)
4. Enable a plugin -> Plugins tab (done: any installed plugin enabled)
5. Configure it -> Plugins tab (done: first enabled plugin has >=1
saved value differing from its
schema defaults)
Steps 1-2 are computed server-side in Jinja from main_config (already in the
partial's context); 3-5 client-side from existing endpoints. No new backend
state: dismissal persists in localStorage (mirroring the reconciliation
banner's sessionStorage pattern one section up); deep links use the same
_x_dataStack app-data access as settings-search.js. Disclosed heuristic
limit: values left at legitimate defaults (a user actually in Tampa) read
as "not done".
Validation: real Jinja render across 3 config variants confirms the
server-side done-flags flip correctly; div balance intact; /plugins/config
response shape (config dict directly in .data) verified against api_v3.py.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
Getting a plugin onto the display used to take three disconnected manual
steps: install from the store, flip its enable toggle, then restart the
display service - with no in-UI hint that steps 2 and 3 were needed (only
docs/GETTING_STARTED.md mentions it).
- installPlugin() now enables the plugin immediately on successful install
(owner-confirmed behavior change: always auto-enable, no opt-out; users
who don't want it running toggle it off as before), then shows a
persistent toast ("... restart the display to show it") with an inline
"Restart Now" button wired to the existing restartDisplay() - the same
function the three existing Restart Display buttons call.
- notification.js: show() accepts optional { actionLabel, onAction } to
render one inline action button per toast. Callbacks are stored per
notification id and cleaned up on dismiss; a new triggerAction() public
method runs the callback and dismisses. The global showNotification()
shorthand now forwards a full options object as its second argument
(legacy type-string calls unchanged).
Scope note: applies to the plugin store's install path (window.installPlugin).
The custom-registry install path keeps its existing behavior.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
The Hardware Configuration card showed ~17 fields at equal priority; a new
user only needs 7 of them to get a correctly-sized, correctly-colored image
(rows, cols, chain_length, parallel, brightness, hardware_mapping,
led_rgb_sequence). The other 10 (multiplexing, panel_type, row_address_type,
gpio_slowdown, rp1_rio, scan_mode, pwm_bits, pwm_dither_bits,
pwm_lsb_nanoseconds, limit_refresh_rate_hz) now live in a collapsed
"Advanced Hardware Settings" section using the same nested-section shell as
plugin config forms, so toggleSection() and settings-search auto-expand work
unchanged. led_rgb_sequence moved up beside brightness/hardware_mapping
(2-col grid became 3-col). No field was removed or renamed; the form still
posts the same names to /api/v3/config/main.
Also adds a live "Your display: W x H pixels" readout under the four sizing
fields (width = cols x chain_length, height = rows x parallel - the exact
math the chain-length tooltip describes in prose), recomputed client-side on
every input event, no round-trip.
Deviation from plan, deliberate: disable_hardware_pulsing / inverse_colors /
show_refresh_rate stay in their separate "Display Options" card rather than
moving across cards - relocating fields between form sections risks
regressions for no decluttering gain in the card users complained about.
Validation (real Jinja render): all 17 hardware fields present exactly once,
basic fields render before the advanced section and the 10 advanced fields
inside it, div count balanced (71/71), readout + recompute script present.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
Plugin config pages show every schema property at equal visual priority,
which overwhelms first-time users. Plugin authors can now add
"x-advanced": true to any flat (non-object) property in config_schema.json
to move it into one collapsed "Advanced Settings (N)" section rendered after
the basic fields - progressive disclosure with zero loss of control.
Implementation: the main render loop in plugin_config.html splits ordered
properties into basic/advanced tiers; the advanced group reuses the exact
.nested-section/.nested-content/toggleSection() shell that nested object
sections already use, so the settings search's expand-on-match behavior
works on advanced fields with no JS changes. Object-type properties ignore
the flag (they already render as their own collapsible sections). No
backend change needed: jsonschema ignores unknown x-* keywords exactly as
it does for x-widget/x-propertyOrder.
Documented in docs/widget-guide.md alongside the other x-* extensions.
Validation (rendered with real Jinja, not just parsed):
- synthetic schema with 2 advanced fields: basic fields render before the
section, advanced inside the collapsed shell, count badge correct,
x-advanced on an object property correctly ignored
- schema without any x-advanced: output is identical to the pre-change
template (whitespace-normalized diff against git HEAD's version)
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
Phones previously got the desktop layout squeezed: ~12 system tabs plus one
tab per installed plugin wrapped into many rows of small pill buttons, and
the header's settings-search and system-stats widgets were dropped entirely
(hidden below their breakpoints, never relocated).
- Off-canvas nav drawer below md: the existing nav markup (system tab row +
#plugin-tabs-row, including dynamically injected plugin tabs) is wrapped in
a #site-nav container that CSS repositions into a slide-in drawer on small
screens. Same DOM nodes, same @click handlers, nothing duplicated. Tabs
become full-width rows with 44px+ touch targets. A hamburger button
(md:hidden) in the header and a backdrop toggle the new mobileNavOpen
Alpine state (added to both app() definitions, mirroring activeTab).
Clicking any tab, a search result, or the backdrop closes the drawer.
At md+ hard CSS guards make all drawer styles inert - desktop renders
exactly as before.
- Header widgets relocated, not hidden: placeHeaderWidgets() in app.js moves
the #settings-search-wrap and #system-stats nodes (same elements, listeners
intact - both are looked up by id from SSE/search code, so they must never
be duplicated) into the drawer below md and back into the header above it,
via a matchMedia listener.
- Fixed 13 breakpoint utility classes that templates referenced but app.css
never defined (sm:block, sm:grid-cols-2, sm:text-sm, md:block, md:w-auto,
lg:block, lg:flex, lg:w-64, xl:grid-cols-2/3, 2xl:grid-cols-2/3/4). This
was a live bug: 'hidden sm:block' on the search box and 'hidden lg:flex'
on the stats meant BOTH were invisible at every screen width. Audit method
(repeatable): diff classes used in templates vs defined in app.css.
- Mobile modal sizing: one global rule caps .modal-content at 95vw/90vh with
internal scroll below 640px - covers every modal without per-template
changes.
- Horizontal-scroll affordance: pure-CSS edge-fade shadows on
.overflow-x-auto containers (scrolling-shadows technique), plus larger
in-table touch targets below md.
Validation: breakpoint used-vs-defined audit now returns zero gaps; Jinja
parse of base.html passes; all changes to desktop behavior are additive
(new utilities) or scoped inside max-width media queries.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
Plugin config forms have been rendered server-side (plugin_config.html via
GET /partials/plugin-config/<id>) since the HTMX migration; the old
client-side generator survived as unreachable code. Verified dead by call
graph, not by naming: showPluginConfigModal and showGithubTokenInstructions
have zero callers anywhere in templates or JS, and everything removed here
is reachable only from those two roots.
Removed:
- plugins_manager.js: showPluginConfigModal, generatePluginConfigForm,
generateFormFromSchema, generateFieldHtml, generateSimpleConfigForm,
handlePluginConfigSubmit, the modal's JSON-editor view (initJsonEditor,
switchPluginConfigView, syncFormToJson/JsonToForm, saveConfigFromJsonEditor,
resetPluginConfigToDefaults, displayValidationErrors, closePluginConfigModal,
savePluginConfiguration, currentPluginConfigState), their exclusive helpers
(getSchemaPropertyType, escapeCssSelector, dotToNested, collectBooleanFields,
normalizeFormDataForConfig, flattenConfig, loadCustomHtmlWidget), the
orphaned-modal cleanup block, the modal's listener wiring, and the
never-invoked showGithubTokenInstructions/closeInstructionsModal pair.
- plugins.html: the #plugin-config-modal markup those functions drove.
- base.html: the deprecated pluginConfigData() component and the
window.PluginConfigHelpers shim (only ever called by pluginConfigData).
Deliberately kept, verified still live:
- renderArrayObjectItem, getSchemaProperty, escapeHtml/escapeAttribute
(window-exposed for the top-level array-of-objects handlers the
server-rendered form uses), toggleNestedSection, addKeyValuePair/
addArrayObjectItem families, executePluginAction, and
window.currentPluginConfig = null init (file-upload.js and
executePluginAction read it, optional-chained).
- app()'s internal generateConfigForm/generateSimpleConfigForm methods in
base.html: unreachable now but embedded in the live Alpine component;
excising methods from a live object is deferred to keep this change
zero-risk.
Validation: every deletion seam inspected line-by-line; Jinja parse of both
templates passes; repo-wide sweep confirms zero remaining references to any
deleted function or element id (deleted ranges contained no Jinja tags).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KEZK1P1Q1fu5pcuVrkrCFZ
