From a frontend-design skill review of all pages, after last session's
chrome changes (top nav, all-tabs nav, header download row):
- The top/closing fastext nav now mutes the entry matching the current
page (.fastext-here) instead of rendering a link to the page you're
already on.
- Colour in fastext is reserved for the four entries that still carry
a real keyboard shortcut (r/g/y/c); the other four render in plain
ink instead of reusing k-red/k-green/k-yellow/k-cyan for a
destination they don't semantically mean (e.g. Requests no longer
shows in the app's own off-air red).
- Discover's badge slot meant "critic score" on its RT tiles and
"release year" on its new search tiles at the same time. Search
results (Library and Discover) now fold year/held-state into the
sub-line instead, leaving the badge exclusively for critic score.
- System's Transmission rows now carry a small ↗ glyph, since they
silently changed from in-app navigation to opening each service's
own UI in a new tab with no visual cue.
- SABnzbd polling drops from 5s to 20s on pages that only show the
header's download figure (everywhere but System/Activity, which
keep 5s for their own live figures) — a number idle 95% of the time
doesn't need second-level freshness sitewide.
- DESIGN.md's fastext description, now-current per this session's nav
changes.
Adds a live download figure next to the header clock, present on
every page (not just Activity/System). It's populated by the same
/api/sabnzbd poll those pages already use, extended to run
unconditionally and to fill in a new #head-dl span — never a
server-rendered fetch, so an unreachable SABnzbd can't add latency to
pages that don't otherwise touch it. Quiet ink at "0 IN QUEUE" when
idle, live cyan with a speed reading once something's moving.
- Fastext colour keys now lead every page but the index, since they're
the only nav those pages carry; the index keeps them as its closing
row since its own body is already the full nav.
- Settings page was missing page="settings" in its render_template
call, so its header silently fell back to "P100 Index".
- Library's search form posted a q param the route never read; it now
filters the cached Sonarr/Radarr lists and shows matching tiles.
- Discover gained a search bar that queries Ombi (already in front of
TMDB/TVDB) and lets you add a result straight to Radarr/Sonarr,
showing "Held" instead of a button for anything already in library.
- Fixed the Add button's success check, which read d.ok against a
response that actually sets d.success — it reported FAILED even
when the add worked.
Applies the fix round from the finish-reviewer's disposition on commit
4b19cbd, in one batch:
- System's disk table is unreadable below 560px: horizontal-scrolling a
6-column table hid the usage bar and the temperature, the two
readings that matter most (discipline 3 — one shared ruler — was
unauditable as a result). Added a disk_row() macro and a phone-only
.tt-disk-rows reflow (name + full 20-cell bar + temp on one line,
device/free/total beneath), CSS-toggled against the existing table
at the same breakpoint.
- Contrast failure on the highest-severity state: white text on the
red .tt-field.crit/.tt-toast.error/.tt-btn.armed reversals measured
4.0:1, under the 4.5:1 floor. Switched to black text (5.25:1),
matching the black-on-yellow .warn pattern already in use — and
fixed a second instance of the same bug: .tt-field.crit had no
.tt-field-meta override, unlike .warn.
- Two type families where the direction contract names one blocky
monospace: unified on a single self-hosted face (Space Mono, one
weight, no bold) for both body and the double-height row.
- FIRST VIEWPORT proportion: an unpromised 6-item Just Added grid was
competing with NOW SHOWING for the fold instead of the contract's
"lower two-thirds in double-height cyan." Cut to a fixed 3-item,
fixed-3-column row, which also fixes the orphaned-tile grid defect
as a side effect (a fixed count can't leave a lone tile beside empty
tracks).
- Three flat mid-grey fills contradicted discipline 1 (no in-between
tone): .tt-tile-art, .tt-btn:disabled, and .tt-err pre all painted a
solid --ink-dimmer background. Centralized the dither .tt-tile-art
already used correctly into a shared --dither-mid generator and
applied it to all three.
- Google Fonts dependency on a LAN-only home server: a dropped webfont
request was a silent identity change, not a graceful fallback.
Self-hosted Space Mono under static/fonts/ via @font-face; dropped
the <link> tags from _shell.html and login.html.
- Deliberately deferred: "pages differ in stock" (discipline 5) still
fires on only one band service-wide. Every other finding was a
bounded fix to existing code; this one asks for a new mechanism (an
aggregate status band on P100) rather than a correction, so it's
flagged for a follow-up rather than rushed into this batch.
Recaptured desktop.png, mobile.png, desktop-system.png and
mobile-system.png (the four files the reviewer's findings cited)
through the same true-390px iframe method as the prior round, and
returned them for the fix round's verdict pass.
Known follow-up: DESIGN.md's typography section (written by the
documenter before this batch) still names the old two-family pairing
and needs a re-run now that the font system changed under it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NBw1QodG8ZMYHrGeQfqyDS
Replaces the neutral dark card-based theme with "Page 100": teletext's
locked eight colours at full saturation on pure black, numbered pages
reachable by typing the number (or the r/g/y/c fastext keys), and no
borders, boxes, or radius anywhere — grouping is carried by full-bleed
colour fields and row weight instead.
Chosen via the impeccable skill's replacement-world flow: seven visual
candidates derived from the audience's own world, a mandatory roll
assigned Ceefax/US-cable-guide teletext, six catalog challengers weighed
against it, and the user locked the assigned direction on the decision
page (seed aab4510e).
- New templates for all nine pages (home/watch/library/discover/
requests/system/activity/login/settings) behind a shared _shell.html
carrying the direction contract and _macros.html for the row/bar/tile
vocabulary; deletes the old single-page dashboard.html and its
dedicated stylesheets/script.
- static/css/base.css + teletext.css: the locked palette, a two-height
type scale (Chivo Mono / DotGothic16), and the five disciplines the
system is held to (no in-between tone, no enclosure, one shared bar
ruler, trend only where real history exists, pages weighted by state).
- static/js/service.js: header clock, page-number jump, fastext keys,
two-tap arm/confirm add, guarded live polling — replaces dashboard.js.
- app.py: nav_items now carry page numbers; fastext defaults added to
the page-chrome context processor; version bumped to 2.0.0.
- DESIGN.md + .impeccable/design.json regenerated from the built world
by the documenter pass; PRODUCT.md and CLAUDE.md updated to describe
the new system in place of the retired one.
- Fixed a live bug found along the way: settings.html called
url_for('dashboard'), an endpoint removed earlier in the branch, which
would have 500'd the Settings page.
- Fixed a One-Ruler violation the finish review's recapture request
surfaced: --bar-cells disagreed with the bar() macro's hardcoded cell
count below the 760px breakpoint, so a fill could land mid-cell on a
phone. Removed the mobile override; the ruler is now 20 cells at every
width, matching the macro unconditionally.
Passed two inspection rounds (desktop + true-390px mobile, via an
iframe harness since macOS Chrome clamps --window-size) and a finish
review; QA screenshots and interview logs are gitignored as scratch,
not shipped in the repo.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NBw1QodG8ZMYHrGeQfqyDS
Parity went back into the GraphQL query, but for its temperature only —
it still gets no table row, since it has no filesystem to measure. The
temp rides in the card header next to the array summary, which was the
one genuinely useful thing the old parity row carried: a parity drive
cooking away is worth seeing. Multiple parity drives each get a badge,
and .meta-parity keeps the label and badge from wrapping apart.
The settings cog was a speck. The button was always a full 44px --tap
target, but the glyph inside it was set at --fs-sm (13px), so the
affordance read as far smaller than the hit area actually was. Now
--fs-xl (24px) with line-height 1 — roughly 55% of the button, which is
the usual proportion for an icon button. .icon-btn has exactly one user
(the cog), so nothing else shifts.
Verified at 1400px and 375px: no page overflow, the cog still measures
44x44, and the parity badge stays visible and intact on both.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Two fixes to the Storage card.
Unraid's GraphQL reports fsSize/fsFree in KB, not bytes — the schema is
explicit about it ("(KB) Total Size of the FS"). We were passing those
straight to fmt_bytes as if they were bytes, so every figure came out
1024x too small and picked the unit below the right one: a 13 TB disk
rendered as "13.0 GB" and a 64.8 TB array as "64.8 GB". _fs_bytes() now
does the conversion at the point of reading, so everything downstream
still deals in bytes. The shutil fallback already returns real bytes and
deliberately doesn't go through it.
Parity is gone from the table and is no longer requested at all. It
mirrors the array rather than holding a filesystem — the schema notes
fsSize is "Not present on Parity type drive" — so it could only ever
render as a name, three em-dashes and a temperature, which earned little
for a whole row. Worth knowing: its temperature is no longer surfaced
anywhere, so a hot parity drive won't show up here.
Verified against the raw KB shape the API actually returns: an array of
3.7/11.2/13.0 TB disks now totals 27.9 TB rather than 27.9 GB, the sub-TB
cache still correctly reads in GB, and the local fallback still reports
this machine's real 228.3 GB rather than a 1024x-inflated figure.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The dashboard had one shared password and no concept of a user. This
adds real accounts: a username field on the login page, per-user
credentials, and the signed-in user recorded on the session, which is
the groundwork for per-user permissions later.
Credentials are salted pbkdf2 hashes in settings.json's `users` map.
Three deliberate choices there:
- settings.json rather than an env var, because a pbkdf2 hash contains
'$' and docker compose interpolates that when it reads .env. It's also
already the bind-mounted file that survives `up -d --build`.
- pbkdf2 rather than Werkzeug's default scrypt, which needs a hashlib
built against OpenSSL — the macOS system Python has no hashlib.scrypt
and would raise at hash time.
- load_users() re-reads the file per check, so adding a user or changing
a password is live in every gunicorn worker with no restart. The old
_runtime_password was per-worker and only ever half-applied.
Multi-user activates only once an account exists. Until then the
original LOGIN_PASSWORD path is used unchanged and the username field is
hidden, so deploying this can't lock the existing install out.
manage_users.py prompts for passwords via getpass — never echoed, never
a CLI argument — and only ever writes hashes; it refuses to remove the
last account, which would silently drop the dashboard back to the shared
password.
Two fixes carried along: login no longer requires the LOGIN_PASSWORD env
var specifically, so a settings.json-only password works instead of
locking you out; and the legacy comparison now uses hmac.compare_digest,
which the old docstring claimed but '==' didn't provide.
Also gitignores settings.json and data/ — they hold API keys and now
password hashes, were excluded from the deploy rsync but not from git.
Verified: legacy fallback still signs in with no accounts configured; a
9-case credential matrix (right/wrong user x right/wrong password, plus
the retired shared password); per-user change-password scoped to the
signed-in account and live without restart; and the add/passwd/remove
guards.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The strip wrapped to two or three rows on narrow screens. It's now
nowrap with flex: 1 1 0 pills, so all six share the row equally and
shrink together instead of spilling onto a second line.
Six pills can't hold full detail in 375px, so detail degrades inside
the pill rather than the strip breaking: the stat drops at 1024px (the
dot already carries up/down), then below 560px the name swaps to a
short label — Son, Rad, Prow, SAB, Taut, Ombi. Without that swap the
names ellipsised to ~23px, about two characters, which identifies
nothing. The full name stays in the DOM at font-size: 0 so screen
readers still announce it, and it's on the pill's title attribute.
The dot and the pill itself never go, so no service is ever hidden —
which was the point of the old wrapping rule.
Verified one row with nothing clipped and no page overflow at 320, 375,
430, 560, 620, 700, 820, 1024, 1100 and 1400px.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The pills occupied a second full-width row of the header at every width,
which is a lot of permanent chrome for something you glance at. They now
open <main> as their own "Status" section, directly above Right now —
where you'd look for them, and consistent with every other band on the
page carrying a heading.
The header drops to a single row (brand left, clock and settings right),
so it no longer needs flex-wrap or the order: 1/2/3 shuffle that kept
the pill row beneath the brand. Pills go to var(--tap) height now
they're content rather than header furniture, and left-align with every
other section instead of centring.
Behaviour is unchanged: the pills keep their svc-<key> ids, so the
polling in dashboard.js needed no edit, and they still wrap rather than
scroll so no service is ever hidden.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Ten disks stacked at --row-h each turned one third of the "Right now"
strip into a ~950px tower. The row is a grid, so Now playing and
Downloads stretched to match and held roughly 1500px of empty card
between them.
The information needed width, not a shorter list. "Right now" drops to
two columns and Storage moves to a full-width row beneath it, where the
same ten disks are a six-column table — disk, used, size, free, usage
bar, temp — at ~270px total. Nothing is hidden and nothing scrolls
except the table itself, which gets its own overflow container below
720px rather than wrapping the sizes into mush.
Also: the array total moves to a bar above the table and the summary
into the card header, so the hero figure isn't repeating what every row
already says. The header summary is a sentence rather than a badge, so
it needs .card-meta-wrap to opt out of the global nowrap — without it
that one string pushed the whole page sideways on a phone.
Local-fallback (no per-disk data) and error states keep the previous
hero-figure treatment. CLAUDE.md now carries the dead-space rule this
came from.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Three inline style="..." attributes were pure styling with no per-request
data behind them (a hero-block spacing tweak, a trailing note's margin, a
gap between two stacked rows) — moved each into dashboard.css as a scoped
structural selector so future adjustments happen in one place instead of
being split between the template and the stylesheet.
Also bumped .stream-title/.stream-user/.stream-icon in the Now Playing
card one step up the existing --fs-* scale (13px->15px, 12px->13px,
15px->18px) rather than introducing a one-off size.
Documented the "styles belong in CSS, not inline" rule in CLAUDE.md,
with the actual exception: per-request computed values (a meter's width,
a threshold colour) and JS-toggled initial visibility still can't live
in a static stylesheet and are fine to stay inline.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The button used the default 38px .show-more height, shorter than the
68px (--row-h) request pills above it, so it read as a smaller
tacked-on control rather than one more row in the list. Scoped to a
new .show-more-row modifier rather than changing .show-more globally —
the Discover cards' Show more buttons sit under much taller RT items
and are correctly compact at 38px.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The Requests and Indexers cards sit side by side but read as two
unrelated lists: requests led with a type badge, indexers with a status
dot, and the rows drifted out of alignment once the share bar landed.
Give a request row the same anatomy as an indexer row — status dot,
title over a dimmed detail line, badge on the right — folding the type
into the detail line and mapping request status onto the existing
dot colours (a new .warn light covers pending). Both row types now
share a --row-h floor so the two cards line up row for row; the share
bar's top margin is trimmed so an indexer row reaches that height
without overshooting it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The Indexers card sat beside Requests as a stretched, vertically centred
grid of pills — mostly dead space once the Ombi list was expanded, and it
said nothing about which indexer was actually doing the work.
- Fetch Prowlarr's indexerstats over a rolling 30-day window and merge
per-indexer queries/grabs into the summary. Cached 10 min on success and
never on failure, so a stats outage can't blank the column after it
recovers or take the up/down list down with it.
- Rank indexers busiest-first by grab share (query share as fallback);
queries mostly count enabled indexers, grabs count who delivered.
- One indexer per line, matched to the Ombi request rows: same padding,
gap, radius and two-line body, plus a share bar scaled to the busiest
indexer and an Online/Offline badge the 30s poll keeps current.
- Let that row size cards to their own content instead of stretching.
Bump APP_VERSION to 1.2.0.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Letting the six pills share row one with the brand and clock meant that
once they stopped fitting, the header wrapped into ragged rows and
orphaned the clock onto a line of its own. Commit to two deliberate rows
at every width instead: identity and controls on top, pills centered on
a full-width row beneath. The <=700px block already did exactly this, so
this promotes that established pattern to all widths and drops the rules
it no longer needs to restate.
Also drops position:sticky — a status bar isn't worth permanent screen
real estate, and the header now scrolls away with the page.
Verified at 1554/1000/375px: brand and controls share a row, 0 pills
clipped, no horizontal page overflow, position computes to static.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The palette lived in a :root block duplicated across all three
templates, so every reshade meant three edits — and drifted twice in
practice (the favicon hardcoded its own hex; stale danger-border rgba
literals survived two palette changes). Move tokens to a single
static/css/base.css, derive every dim/border tint from the four source
hues with color-mix, and point the favicon at one static/favicon.svg.
Also splits the 1558-line dashboard.html into template + static assets:
662 lines of CSS and 396 of JS were re-sent uninlined on every load
with no browser caching, which costs real time on the remote/cellular
access this app is built for. Templates drop to 501/42/107 lines.
Server-rendered config (timezone, script_root) now arrives via
<body data-*>; wiring URL_BASE to request.script_root also fixes /api/*
fetches for a future subpath mount, which the hardcoded "" would break.
Header service pills now wrap instead of scrolling — they were clipped
at narrow widths, and a hidden pill is a service whose status you
cannot see. Verified 0 clipped and no page overflow at 320/375/700/1280.
Footer gains a version and date so the running build is identifiable
without trusting the Unraid Docker tab's cached container IDs.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
