Dashboard: centralized 401 sign-out, 429 retry handling, JSDoc types, and CSS tokens

[LoneWolfxm]

Summary

Dashboard: centralized 401 sign-out, 429 retry handling, JSDoc types, and CSS tokens

What was solved

#682 — Dashboard: sign out automatically on 401 responses

Add centralized 401 handling to the dashboard API layer so that any request returning 401 clears the stored API key and returns the user to the sign-in gate with a clear message. This is a focused frontend change in the dashboard's api.js (and its session/state helpers if needed), keeping the key out of URLs, logs, and console output.

Addressed:

• Changed: static/session.js
• Handle 401 responses centrally in api.js rather than per-call
• On 401, clear the stored API key and show the sign-in gate
• Show a clear message to the user when returned to the gate

#683 — Dashboard: handle 429 rate-limit responses using Retry-After

Update the dashboard frontend to detect HTTP 429 rate-limit responses, parse the Retry-After header, surface a clear retry message to the user, and disable the refresh button until the retry window elapses. This is a client-side change in the static dashboard assets, keeping the existing error-handling flow and not touching API key handling.

Addressed:

• Changed: static/dashboard.html
• Parse the Retry-After header from 429 responses (support both delta-seconds and HTTP-date forms as appropriate).
• Display a user-facing message indicating when to retry instead of a generic error.
• Disable the refresh button until the parsed retry time has elapsed, then re-enable it.

#684 — Dashboard: add JSDoc types and // @ts-check

Add JSDoc @typedef declarations for Payment and WebhookDelivery matching openapi.yaml, and enable // @ts-check across the dashboard's static JS modules so editors type-check without a build step. This is a type-annotation-only change to the static dashboard JavaScript files; no runtime behavior changes.

Addressed:

• Changed: static/state.js
• Add @typedef for Payment matching the Payment schema in openapi.yaml
• Add @typedef for WebhookDelivery matching the WebhookDelivery schema in openapi.yaml
• Add // @ts-check to each dashboard static JS module

#685 — Dashboard: move colours and spacing into CSS custom properties

Refactor static/dashboard.css to introduce CSS custom properties (design tokens) on :root for colours and spacing, then replace hard-coded literal colour and spacing values throughout the stylesheet with var(...) references. This is a pure CSS tokenization change scoped to the dashboard stylesheet, supporting future dark-mode theming without altering markup or JS behaviour.

Addressed:

• Changed: static/dashboard-theme.js
• Define design tokens (colours and spacing) on the :root selector in static/dashboard.css
• Replace literal colour values in dashboard.css with var(--token) references
• Replace literal spacing values in dashboard.css with var(--token) references

Changes

• static/dashboard.html (modify)
• static/state.js (modify)
• static/session.js (modify)
• static/dashboard-theme.js (modify)

Approach

1. Dashboard: sign out automatically on 401 responses #682 — Dashboard: sign out automatically on 401 responses (Changed: static/session.js)
2. Dashboard: handle 429 rate-limit responses using Retry-After #683 — Dashboard: handle 429 rate-limit responses using Retry-After (Changed: static/dashboard.html)
3. Dashboard: add JSDoc types and // @ts-check #684 — Dashboard: add JSDoc types and // @ts-check (Changed: static/state.js)
4. Dashboard: move colours and spacing into CSS custom properties #685 — Dashboard: move colours and spacing into CSS custom properties (Changed: static/dashboard-theme.js)

Issues

Closes #682
Closes #683
Closes #684
Closes #685

[drips-wave]

@LoneWolfxm Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits