feat: brand-new interface

This was initally generated by ai, but later has been heavily edited. The reason why it has been implemented is that there are plans to implement more features to ui, but it becomes hard to add new features to plain js, so I decided to rewrite it in typescript. Yet because it is still ai slop, it is still possible to enable old interface via configuration, even though new interface is turned on by default to get feedback
2026-04-07 02:53:38 +00:00 · 2026-03-03 16:52:58 +02:00
42 changed files with 347 additions and 363 deletions
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -125,7 +125,7 @@ Again, the most checks can be performed by `tox` command, though some additional
        def __hash__(self) -> int: ...  # basically any magic (or look-alike) method
    ```
  
-  Methods inside one group should be ordered alphabetically, the only exceptions are `__init__` (`__post_init__` for dataclasses), `__new__` and `__del__` methods which should be defined first. For test methods it is recommended to follow the order in which functions are defined. Same idea applies to frontend classes.
+  Methods inside one group should be ordered alphabetically, the only exceptions are `__init__` (`__post_init__` for dataclasses), `__new__` and `__del__` methods which should be defined first. For test methods it is recommended to follow the order in which functions are defined.

  Though, we would like to highlight abstract methods (i.e. ones which raise `NotImplementedError`), we still keep in global order at the moment.

@@ -172,9 +172,8 @@ Again, the most checks can be performed by `tox` command, though some additional
    )
    ```

-* Imports goes in alphabetical order, no relative imports allowed. Same rule applies to frontend classes.
-* One file should define only one class, exception is class satellites in case if file length remains less than 400 lines. Same rule applies to frontend classes.
-* It is possible to create file which contains some functions (e.g. `ahriman.core.utils`), but in this case you would need to define `__all__` attribute.
+* One file should define only one class, exception is class satellites in case if file length remains less than 400 lines.
+* It is possible to create file which contains some functions (e.g. `ahriman.core.util`), but in this case you would need to define `__all__` attribute.
 * The file size mentioned above must be applicable in general. In case of big classes consider splitting them into traits. Note, however, that `pylint` includes comments and docstrings into counter, thus you need to check file size by other tools.
 * No global variable is allowed outside of `ahriman` module. `ahriman.core.context` is also special case.
 * Single quotes are not allowed. The reason behind this restriction is the fact that docstrings must be written by using double quotes only, and we would like to make style consistent.
@@ -227,8 +226,6 @@ Again, the most checks can be performed by `tox` command, though some additional

 The projects also uses typing checks (provided by `mypy`) and some linter checks provided by `pylint` and `bandit`. Those checks must be passed successfully for any open pull requests.

-Frontend checks normally are performed by `eslint` (e.g. `npx run eslint`).
-
 ## Developers how to

 ### Run automated checks
--- a/docs/_static/architecture.dot
+++ b/docs/_static/architecture.dot
@@ -250,9 +250,7 @@ digraph G {
    ahriman_web_schemas [fillcolor="blue",fontcolor="white",label="ahriman\.\nweb\.\nschemas",shape="box"];
    ahriman_web_schemas_any_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nany_schema"];
    ahriman_web_schemas_aur_package_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\naur_package_schema"];
-    ahriman_web_schemas_auth_info_schema [fillcolor="#c45431",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nauth_info_schema"];
    ahriman_web_schemas_auth_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nauth_schema"];
-    ahriman_web_schemas_auto_refresh_interval_schema [fillcolor="#c45431",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nauto_refresh_interval_schema"];
    ahriman_web_schemas_build_options_schema [fillcolor="#d04e24",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nbuild_options_schema"];
    ahriman_web_schemas_changes_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nchanges_schema"];
    ahriman_web_schemas_configuration_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nconfiguration_schema"];
@@ -263,7 +261,6 @@ digraph G {
    ahriman_web_schemas_event_search_schema [fillcolor="blue",fontcolor="white",label="ahriman\.\nweb\.\nschemas\.\nevent_search_schema",shape="box"];
    ahriman_web_schemas_file_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nfile_schema"];
    ahriman_web_schemas_info_schema [fillcolor="blue",fontcolor="white",label="ahriman\.\nweb\.\nschemas\.\ninfo_schema",shape="box"];
-    ahriman_web_schemas_info_v2_schema [fillcolor="blue",fontcolor="white",label="ahriman\.\nweb\.\nschemas\.\ninfo_v2_schema",shape="box"];
    ahriman_web_schemas_internal_status_schema [fillcolor="blue",fontcolor="white",label="ahriman\.\nweb\.\nschemas\.\ninternal_status_schema",shape="box"];
    ahriman_web_schemas_log_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nlog_schema"];
    ahriman_web_schemas_login_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nlogin_schema"];
@@ -292,12 +289,11 @@ digraph G {
    ahriman_web_schemas_status_schema [fillcolor="#ca4116",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nstatus_schema"];
    ahriman_web_schemas_update_flags_schema [fillcolor="blue",fontcolor="white",label="ahriman\.\nweb\.\nschemas\.\nupdate_flags_schema",shape="box"];
    ahriman_web_schemas_worker_schema [fillcolor="#b85a3d",fontcolor="#ffffff",label="ahriman\.\nweb\.\nschemas\.\nworker_schema"];
-    ahriman_web_server_info [fillcolor="#93371a",fontcolor="#ffffff",label="ahriman\.\nweb\.\nserver_info"];
    ahriman_web_views [fillcolor="#f94810",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews"];
    ahriman_web_views_api_docs [fillcolor="#794434",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\napi\.\ndocs"];
    ahriman_web_views_api_swagger [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\napi\.\nswagger"];
    ahriman_web_views_base [fillcolor="#952603",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nbase"];
-    ahriman_web_views_index [fillcolor="#794434",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nindex"];
+    ahriman_web_views_index [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nindex"];
    ahriman_web_views_static [fillcolor="#884d3a",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nstatic"];
    ahriman_web_views_status_view_guard [fillcolor="#ef3e06",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nstatus_view_guard"];
    ahriman_web_views_v1_auditlog_events [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nauditlog\.\nevents"];
@@ -320,14 +316,13 @@ digraph G {
    ahriman_web_views_v1_service_search [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nservice\.\nsearch"];
    ahriman_web_views_v1_service_update [fillcolor="#724031",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nservice\.\nupdate"];
    ahriman_web_views_v1_service_upload [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nservice\.\nupload"];
-    ahriman_web_views_v1_status_info [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nstatus\.\ninfo"];
+    ahriman_web_views_v1_status_info [fillcolor="#724031",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nstatus\.\ninfo"];
    ahriman_web_views_v1_status_metrics [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nstatus\.\nmetrics"];
    ahriman_web_views_v1_status_repositories [fillcolor="#724031",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nstatus\.\nrepositories"];
    ahriman_web_views_v1_status_status [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nstatus\.\nstatus"];
    ahriman_web_views_v1_user_login [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nuser\.\nlogin"];
    ahriman_web_views_v1_user_logout [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv1\.\nuser\.\nlogout"];
    ahriman_web_views_v2_packages_logs [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv2\.\npackages\.\nlogs"];
-    ahriman_web_views_v2_status_info [fillcolor="#6b3c2e",fontcolor="#ffffff",label="ahriman\.\nweb\.\nviews\.\nv2\.\nstatus\.\ninfo"];
    ahriman_web_web [fillcolor="#733826",fontcolor="#ffffff",label="ahriman\.\nweb\.\nweb"];
    aioauth_client [fillcolor="#c07d40",shape="folder"];
    aiohttp [fillcolor="#f9b506",shape="folder"];
@@ -494,10 +489,10 @@ digraph G {
    ahriman_core -> ahriman_web_keys [fillcolor="#ef3e06",minlen="2"];
    ahriman_core -> ahriman_web_middlewares_auth_handler [fillcolor="#ef3e06",minlen="3"];
    ahriman_core -> ahriman_web_routes [fillcolor="#ef3e06",minlen="2"];
-    ahriman_core -> ahriman_web_server_info [fillcolor="#ef3e06",minlen="2"];
    ahriman_core -> ahriman_web_views_api_docs [fillcolor="#ef3e06",minlen="3"];
    ahriman_core -> ahriman_web_views_api_swagger [fillcolor="#ef3e06",minlen="3"];
    ahriman_core -> ahriman_web_views_base [fillcolor="#ef3e06",minlen="3"];
+    ahriman_core -> ahriman_web_views_index [fillcolor="#ef3e06",minlen="3"];
    ahriman_core -> ahriman_web_views_status_view_guard [fillcolor="#ef3e06",minlen="3"];
    ahriman_core -> ahriman_web_views_v1_distributed_workers [fillcolor="#ef3e06",minlen="3"];
    ahriman_core -> ahriman_web_views_v1_packages_logs [fillcolor="#ef3e06",minlen="3"];
@@ -547,13 +542,13 @@ digraph G {
    ahriman_core_archive_archive_trigger -> ahriman_core_archive [fillcolor="blue",weight="3"];
    ahriman_core_auth -> ahriman_web_keys [fillcolor="blue",minlen="2"];
    ahriman_core_auth -> ahriman_web_middlewares_auth_handler [fillcolor="blue",minlen="3"];
-    ahriman_core_auth -> ahriman_web_server_info [fillcolor="blue",minlen="2"];
    ahriman_core_auth -> ahriman_web_views_base [fillcolor="blue",minlen="3"];
+    ahriman_core_auth -> ahriman_web_views_index [fillcolor="blue",minlen="3"];
    ahriman_core_auth -> ahriman_web_views_v1_user_login [fillcolor="blue",minlen="3"];
    ahriman_core_auth -> ahriman_web_views_v1_user_logout [fillcolor="blue",minlen="3"];
    ahriman_core_auth -> ahriman_web_web [fillcolor="blue",minlen="2"];
    ahriman_core_auth_auth -> ahriman_core_auth [fillcolor="blue",weight="3"];
-    ahriman_core_auth_helpers -> ahriman_web_server_info [fillcolor="#d04e24",minlen="3"];
+    ahriman_core_auth_helpers -> ahriman_web_views_index [fillcolor="#d04e24",minlen="3"];
    ahriman_core_auth_helpers -> ahriman_web_views_v1_user_login [fillcolor="#d04e24",minlen="3"];
    ahriman_core_auth_helpers -> ahriman_web_views_v1_user_logout [fillcolor="#d04e24",minlen="3"];
    ahriman_core_auth_mapping -> ahriman_core_auth_auth [fillcolor="blue",weight="3"];
@@ -996,7 +991,6 @@ digraph G {
    ahriman_core_types -> ahriman_core_report_jinja_template [fillcolor="#f94810",minlen="2",weight="2"];
    ahriman_core_types -> ahriman_core_report_rss [fillcolor="#f94810",minlen="2",weight="2"];
    ahriman_core_types -> ahriman_core_utils [fillcolor="#f94810",weight="2"];
-    ahriman_core_types -> ahriman_web_server_info [fillcolor="#f94810",minlen="2"];
    ahriman_core_types -> ahriman_web_views_v1_distributed_workers [fillcolor="#f94810",minlen="3"];
    ahriman_core_types -> ahriman_web_views_v1_packages_packages [fillcolor="#f94810",minlen="3"];
    ahriman_core_types -> ahriman_web_views_v1_service_search [fillcolor="#f94810",minlen="3"];
@@ -1066,9 +1060,8 @@ digraph G {
    ahriman_core_utils -> ahriman_models_repository_paths [fillcolor="#db3805",minlen="2"];
    ahriman_core_utils -> ahriman_models_repository_stats [fillcolor="#db3805",minlen="2"];
    ahriman_core_utils -> ahriman_models_worker [fillcolor="#db3805",minlen="2"];
-    ahriman_core_utils -> ahriman_web_server_info [fillcolor="#db3805",minlen="2"];
    ahriman_core_utils -> ahriman_web_views_api_swagger [fillcolor="#db3805",minlen="3"];
-    ahriman_core_utils -> ahriman_web_views_base [fillcolor="#db3805",minlen="3"];
+    ahriman_core_utils -> ahriman_web_views_index [fillcolor="#db3805",minlen="3"];
    ahriman_core_utils -> ahriman_web_views_v1_packages_logs [fillcolor="#db3805",minlen="3"];
    ahriman_core_utils -> ahriman_web_views_v1_service_upload [fillcolor="#db3805",minlen="3"];
    ahriman_models -> ahriman_application_ahriman [fillcolor="#f94810",minlen="2"];
@@ -1252,7 +1245,6 @@ digraph G {
    ahriman_models -> ahriman_web_views_v1_user_login [fillcolor="#f94810",minlen="3"];
    ahriman_models -> ahriman_web_views_v1_user_logout [fillcolor="#f94810",minlen="3"];
    ahriman_models -> ahriman_web_views_v2_packages_logs [fillcolor="#f94810",minlen="3"];
-    ahriman_models -> ahriman_web_views_v2_status_info [fillcolor="#f94810",minlen="3"];
    ahriman_models -> ahriman_web_web [fillcolor="#f94810",minlen="2"];
    ahriman_models_action -> ahriman_application_handlers_change [fillcolor="#e75222",minlen="3"];
    ahriman_models_action -> ahriman_application_handlers_patch [fillcolor="#e75222",minlen="3"];
@@ -1661,7 +1653,6 @@ digraph G {
    ahriman_models_user_access -> ahriman_web_views_v1_user_login [fillcolor="#f94810",minlen="3"];
    ahriman_models_user_access -> ahriman_web_views_v1_user_logout [fillcolor="#f94810",minlen="3"];
    ahriman_models_user_access -> ahriman_web_views_v2_packages_logs [fillcolor="#f94810",minlen="3"];
-    ahriman_models_user_access -> ahriman_web_views_v2_status_info [fillcolor="#f94810",minlen="3"];
    ahriman_models_waiter -> ahriman_application_lock [fillcolor="#c45431",minlen="2"];
    ahriman_models_waiter -> ahriman_core_report_remote_call [fillcolor="#c45431",minlen="3"];
    ahriman_models_worker -> ahriman_application_application_workers_remote_updater [fillcolor="#e9410c",minlen="3"];
@@ -1672,9 +1663,7 @@ digraph G {
    ahriman_web -> ahriman_application_handlers_web [fillcolor="#f94810",minlen="3"];
    ahriman_web_apispec -> ahriman_web_schemas_any_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_aur_package_schema [fillcolor="#e53b05",minlen="2",weight="2"];
-    ahriman_web_apispec -> ahriman_web_schemas_auth_info_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_auth_schema [fillcolor="#e53b05",minlen="2",weight="2"];
-    ahriman_web_apispec -> ahriman_web_schemas_auto_refresh_interval_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_build_options_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_changes_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_configuration_schema [fillcolor="#e53b05",minlen="2",weight="2"];
@@ -1685,7 +1674,6 @@ digraph G {
    ahriman_web_apispec -> ahriman_web_schemas_event_search_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_file_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_info_schema [fillcolor="#e53b05",minlen="2",weight="2"];
-    ahriman_web_apispec -> ahriman_web_schemas_info_v2_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_internal_status_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_log_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_login_schema [fillcolor="#e53b05",minlen="2",weight="2"];
@@ -1714,9 +1702,9 @@ digraph G {
    ahriman_web_apispec -> ahriman_web_schemas_status_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_update_flags_schema [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_schemas_worker_schema [fillcolor="#e53b05",minlen="2",weight="2"];
-    ahriman_web_apispec -> ahriman_web_server_info [fillcolor="#e53b05",weight="2"];
    ahriman_web_apispec -> ahriman_web_views_api_docs [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_views_api_swagger [fillcolor="#e53b05",minlen="2",weight="2"];
+    ahriman_web_apispec -> ahriman_web_views_index [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_views_v1_auditlog_events [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_views_v1_distributed_workers [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_views_v1_packages_changes [fillcolor="#e53b05",minlen="2",weight="2"];
@@ -1744,7 +1732,6 @@ digraph G {
    ahriman_web_apispec -> ahriman_web_views_v1_user_login [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_views_v1_user_logout [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_views_v2_packages_logs [fillcolor="#e53b05",minlen="2",weight="2"];
-    ahriman_web_apispec -> ahriman_web_views_v2_status_info [fillcolor="#e53b05",minlen="2",weight="2"];
    ahriman_web_apispec -> ahriman_web_web [fillcolor="#e53b05",weight="2"];
    ahriman_web_apispec_decorators -> ahriman_web_views_v1_auditlog_events [fillcolor="#bd3104",minlen="2",weight="2"];
    ahriman_web_apispec_decorators -> ahriman_web_views_v1_distributed_workers [fillcolor="#bd3104",minlen="2",weight="2"];
@@ -1773,7 +1760,6 @@ digraph G {
    ahriman_web_apispec_decorators -> ahriman_web_views_v1_user_login [fillcolor="#bd3104",minlen="2",weight="2"];
    ahriman_web_apispec_decorators -> ahriman_web_views_v1_user_logout [fillcolor="#bd3104",minlen="2",weight="2"];
    ahriman_web_apispec_decorators -> ahriman_web_views_v2_packages_logs [fillcolor="#bd3104",minlen="2",weight="2"];
-    ahriman_web_apispec_decorators -> ahriman_web_views_v2_status_info [fillcolor="#bd3104",minlen="2",weight="2"];
    ahriman_web_apispec_info -> ahriman_web_web [fillcolor="#a14f35",minlen="2",weight="2"];
    ahriman_web_cors -> ahriman_web_web [fillcolor="#b0573a",weight="2"];
    ahriman_web_keys -> ahriman_web_apispec_info [fillcolor="#823017",minlen="2",weight="2"];
@@ -1813,14 +1799,9 @@ digraph G {
    ahriman_web_schemas -> ahriman_web_views_v1_status_status [fillcolor="blue",minlen="2",weight="2"];
    ahriman_web_schemas -> ahriman_web_views_v1_user_login [fillcolor="blue",minlen="2",weight="2"];
    ahriman_web_schemas -> ahriman_web_views_v2_packages_logs [fillcolor="blue",minlen="2",weight="2"];
-    ahriman_web_schemas -> ahriman_web_views_v2_status_info [fillcolor="blue",minlen="2",weight="2"];
    ahriman_web_schemas_any_schema -> ahriman_web_schemas [fillcolor="#b85a3d",weight="3"];
    ahriman_web_schemas_aur_package_schema -> ahriman_web_schemas [fillcolor="#b85a3d",weight="3"];
-    ahriman_web_schemas_auth_info_schema -> ahriman_web_schemas [fillcolor="#c45431",weight="3"];
-    ahriman_web_schemas_auth_info_schema -> ahriman_web_schemas_info_v2_schema [fillcolor="#c45431",weight="3"];
    ahriman_web_schemas_auth_schema -> ahriman_web_schemas [fillcolor="#b85a3d",weight="3"];
-    ahriman_web_schemas_auto_refresh_interval_schema -> ahriman_web_schemas [fillcolor="#c45431",weight="3"];
-    ahriman_web_schemas_auto_refresh_interval_schema -> ahriman_web_schemas_info_v2_schema [fillcolor="#c45431",weight="3"];
    ahriman_web_schemas_build_options_schema -> ahriman_web_schemas [fillcolor="#d04e24",weight="3"];
    ahriman_web_schemas_build_options_schema -> ahriman_web_schemas_package_names_schema [fillcolor="#d04e24",weight="3"];
    ahriman_web_schemas_build_options_schema -> ahriman_web_schemas_update_flags_schema [fillcolor="#d04e24",weight="3"];
@@ -1834,7 +1815,6 @@ digraph G {
    ahriman_web_schemas_event_search_schema -> ahriman_web_schemas [fillcolor="blue",weight="3"];
    ahriman_web_schemas_file_schema -> ahriman_web_schemas [fillcolor="#b85a3d",weight="3"];
    ahriman_web_schemas_info_schema -> ahriman_web_schemas [fillcolor="blue",weight="3"];
-    ahriman_web_schemas_info_v2_schema -> ahriman_web_schemas [fillcolor="blue",weight="3"];
    ahriman_web_schemas_internal_status_schema -> ahriman_web_schemas [fillcolor="blue",weight="3"];
    ahriman_web_schemas_log_schema -> ahriman_web_schemas [fillcolor="#b85a3d",weight="3"];
    ahriman_web_schemas_login_schema -> ahriman_web_schemas [fillcolor="#b85a3d",weight="3"];
@@ -1867,7 +1847,6 @@ digraph G {
    ahriman_web_schemas_remote_schema -> ahriman_web_schemas_package_schema [fillcolor="#b44d2d",weight="3"];
    ahriman_web_schemas_repository_id_schema -> ahriman_web_schemas [fillcolor="#ef3e06",weight="3"];
    ahriman_web_schemas_repository_id_schema -> ahriman_web_schemas_info_schema [fillcolor="#ef3e06",weight="3"];
-    ahriman_web_schemas_repository_id_schema -> ahriman_web_schemas_info_v2_schema [fillcolor="#ef3e06",weight="3"];
    ahriman_web_schemas_repository_id_schema -> ahriman_web_schemas_internal_status_schema [fillcolor="#ef3e06",weight="3"];
    ahriman_web_schemas_repository_id_schema -> ahriman_web_schemas_package_status_schema [fillcolor="#ef3e06",weight="3"];
    ahriman_web_schemas_repository_id_schema -> ahriman_web_schemas_package_version_schema [fillcolor="#ef3e06",weight="3"];
@@ -1881,13 +1860,8 @@ digraph G {
    ahriman_web_schemas_status_schema -> ahriman_web_schemas_package_status_schema [fillcolor="#ca4116",weight="3"];
    ahriman_web_schemas_update_flags_schema -> ahriman_web_schemas [fillcolor="blue",weight="3"];
    ahriman_web_schemas_worker_schema -> ahriman_web_schemas [fillcolor="#b85a3d",weight="3"];
-    ahriman_web_server_info -> ahriman_web_views_index [fillcolor="#93371a",minlen="2",weight="2"];
-    ahriman_web_server_info -> ahriman_web_views_v1_status_info [fillcolor="#93371a",minlen="2",weight="2"];
-    ahriman_web_server_info -> ahriman_web_views_v2_status_info [fillcolor="#93371a",minlen="2",weight="2"];
    ahriman_web_views -> ahriman_web_routes [fillcolor="#f94810",weight="2"];
-    ahriman_web_views -> ahriman_web_server_info [fillcolor="#f94810",weight="2"];
    ahriman_web_views_base -> ahriman_web_routes [fillcolor="#952603",minlen="2",weight="2"];
-    ahriman_web_views_base -> ahriman_web_server_info [fillcolor="#952603",minlen="2",weight="2"];
    ahriman_web_views_base -> ahriman_web_views_api_docs [fillcolor="#952603",weight="3"];
    ahriman_web_views_base -> ahriman_web_views_api_swagger [fillcolor="#952603",weight="3"];
    ahriman_web_views_base -> ahriman_web_views_index [fillcolor="#952603",weight="3"];
@@ -1919,7 +1893,6 @@ digraph G {
    ahriman_web_views_base -> ahriman_web_views_v1_user_login [fillcolor="#952603",weight="3"];
    ahriman_web_views_base -> ahriman_web_views_v1_user_logout [fillcolor="#952603",weight="3"];
    ahriman_web_views_base -> ahriman_web_views_v2_packages_logs [fillcolor="#952603",weight="3"];
-    ahriman_web_views_base -> ahriman_web_views_v2_status_info [fillcolor="#952603",weight="3"];
    ahriman_web_views_status_view_guard -> ahriman_web_views_v1_packages_changes [fillcolor="#ef3e06",weight="3"];
    ahriman_web_views_status_view_guard -> ahriman_web_views_v1_packages_dependencies [fillcolor="#ef3e06",weight="3"];
    ahriman_web_views_status_view_guard -> ahriman_web_views_v1_packages_logs [fillcolor="#ef3e06",weight="3"];
@@ -1942,7 +1915,6 @@ digraph G {
    aiohttp -> ahriman_web_routes [fillcolor="#f9b506",minlen="2"];
    aiohttp -> ahriman_web_views_api_swagger [fillcolor="#f9b506",minlen="3"];
    aiohttp -> ahriman_web_views_base [fillcolor="#f9b506",minlen="3"];
-    aiohttp -> ahriman_web_views_index [fillcolor="#f9b506",minlen="3"];
    aiohttp -> ahriman_web_views_static [fillcolor="#f9b506",minlen="3"];
    aiohttp -> ahriman_web_views_v1_auditlog_events [fillcolor="#f9b506",minlen="3"];
    aiohttp -> ahriman_web_views_v1_distributed_workers [fillcolor="#f9b506",minlen="3"];
@@ -1971,7 +1943,6 @@ digraph G {
    aiohttp -> ahriman_web_views_v1_user_login [fillcolor="#f9b506",minlen="3"];
    aiohttp -> ahriman_web_views_v1_user_logout [fillcolor="#f9b506",minlen="3"];
    aiohttp -> ahriman_web_views_v2_packages_logs [fillcolor="#f9b506",minlen="3"];
-    aiohttp -> ahriman_web_views_v2_status_info [fillcolor="#f9b506",minlen="3"];
    aiohttp -> ahriman_web_web [fillcolor="#f9b506",minlen="2"];
    aiohttp -> aiohttp_cors [fillcolor="#f9b506",minlen="2"];
    aiohttp -> aiohttp_jinja2 [fillcolor="#f9b506",minlen="2"];
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,17 +18,16 @@
        "@mui/x-data-grid": "^8.27.3",
        "@tanstack/react-query": "^5.0.0",
        "chart.js": "^4.5.0",
+        "highlight.js": "^11.11.0",
        "react": "^19.2.4",
        "react-chartjs-2": "^5.2.0",
-        "react-dom": "^19.2.4",
-        "react-syntax-highlighter": "^16.1.1"
+        "react-dom": "^19.2.4"
    },
    "devDependencies": {
        "@eslint/js": "^9.39.3",
        "@stylistic/eslint-plugin": "^5.9.0",
        "@types/react": "^19.2.14",
        "@types/react-dom": "^19.2.3",
-        "@types/react-syntax-highlighter": "^15.5.13",
        "@vitejs/plugin-react": "^5.0.0",
        "eslint": "^9.39.3",
        "eslint-plugin-react-hooks": "^7.0.1",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -38,18 +38,20 @@ const queryClient = new QueryClient({
 });

 export default function App(): React.JSX.Element {
-    return <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={Theme}>
-            <CssBaseline />
-            <NotificationProvider>
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ThemeProvider theme={Theme}>
+                <CssBaseline />
                <ClientProvider>
                    <AuthProvider>
                        <RepositoryProvider>
-                            <AppLayout />
+                            <NotificationProvider>
+                                <AppLayout />
+                            </NotificationProvider>
                        </RepositoryProvider>
                    </AuthProvider>
                </ClientProvider>
-            </NotificationProvider>
-        </ThemeProvider>
-    </QueryClientProvider>;
+            </ThemeProvider>
+        </QueryClientProvider>
+    );
 }
--- a/frontend/src/api/client/AhrimanClient.ts
+++ b/frontend/src/api/client/AhrimanClient.ts
@@ -17,15 +17,14 @@
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
-import { Client } from "api/client/Client";
-import { FetchClient } from "api/client/FetchClient";
-import { ServiceClient } from "api/client/ServiceClient";
+import { BaseClient } from "api/client/BaseClient";
+import { FetchMixin } from "api/client/FetchMixin";
+import { ServiceMixin } from "api/client/ServiceMixin";
 import type { LoginRequest } from "models/LoginRequest";
+import { applyMixins } from "utils";

-export class AhrimanClient extends Client {
-
-    readonly fetch = new FetchClient(this);
-    readonly service = new ServiceClient(this);
+/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
+export class AhrimanClient extends BaseClient {

    async login(data: LoginRequest): Promise<void> {
        return this.request("/api/v1/login", { method: "POST", json: data });
@@ -35,3 +34,7 @@ export class AhrimanClient extends Client {
        return this.request("/api/v1/logout", { method: "POST" });
    }
 }
+
+export interface AhrimanClient extends FetchMixin, ServiceMixin {}
+/* eslint-enable @typescript-eslint/no-unsafe-declaration-merging */
+applyMixins(AhrimanClient, [FetchMixin, ServiceMixin]);
--- a/frontend/src/api/client/BaseClient.ts
+++ b/frontend/src/api/client/BaseClient.ts
@@ -20,12 +20,10 @@
 import { ApiError } from "api/client/ApiError";
 import type { RequestOptions } from "api/client/RequestOptions";

-export class Client {
+export class BaseClient {

-    private static readonly DEFAULT_TIMEOUT = 30_000;
-
-    async request<T>(url: string, options: RequestOptions = {}): Promise<T> {
-        const { method, query, json, timeout = Client.DEFAULT_TIMEOUT } = options;
+    protected async request<T>(url: string, options: RequestOptions = {}): Promise<T> {
+        const { method, query, json } = options;

        let fullUrl = url;
        if (query) {
@@ -45,35 +43,30 @@ export class Client {
            headers["Content-Type"] = "application/json";
        }

-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-
        const requestInit: RequestInit = {
            method: method || (json ? "POST" : "GET"),
            headers,
-            signal: controller.signal,
        };

        if (json !== undefined) {
            requestInit.body = JSON.stringify(json);
        }

-        let response: Response;
-        try {
-            response = await fetch(fullUrl, requestInit);
-        } finally {
-            clearTimeout(timeoutId);
-        }
+        const response = await fetch(fullUrl, requestInit);

        if (!response.ok) {
            const body = await response.text();
            throw new ApiError(response.status, response.statusText, body);
        }

-        const contentType = response.headers.get("Content-Type") ?? "";
-        if (!contentType.includes("application/json")) {
+        if (response.redirected) {
            return undefined as T;
        }
-        return await response.json() as T;
+
+        const contentType = response.headers.get("Content-Type") ?? "";
+        if (contentType.includes("application/json")) {
+            return await response.json() as T;
+        }
+        return await response.text() as T;
    }
 }
--- a/frontend/src/api/client/FetchClient.ts
+++ b/frontend/src/api/client/FetchClient.ts
@@ -17,7 +17,7 @@
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
-import type { Client } from "api/client/Client";
+import { BaseClient } from "api/client/BaseClient";
 import type { Changes } from "models/Changes";
 import type { Dependencies } from "models/Dependencies";
 import type { Event } from "models/Event";
@@ -28,28 +28,22 @@ import type { PackageStatus } from "models/PackageStatus";
 import type { Patch } from "models/Patch";
 import { RepositoryId } from "models/RepositoryId";

-export class FetchClient {
-
-    protected client: Client;
-
-    constructor(client: Client) {
-        this.client = client;
-    }
+export class FetchMixin extends BaseClient {

    async fetchPackage(packageBase: string, repository: RepositoryId): Promise<PackageStatus[]> {
-        return this.client.request<PackageStatus[]>(`/api/v1/packages/${encodeURIComponent(packageBase)}`, {
+        return this.request<PackageStatus[]>(`/api/v1/packages/${encodeURIComponent(packageBase)}`, {
            query: repository.toQuery(),
        });
    }

    async fetchPackageChanges(packageBase: string, repository: RepositoryId): Promise<Changes> {
-        return this.client.request<Changes>(`/api/v1/packages/${encodeURIComponent(packageBase)}/changes`, {
+        return this.request<Changes>(`/api/v1/packages/${encodeURIComponent(packageBase)}/changes`, {
            query: repository.toQuery(),
        });
    }

    async fetchPackageDependencies(packageBase: string, repository: RepositoryId): Promise<Dependencies> {
-        return this.client.request<Dependencies>(`/api/v1/packages/${encodeURIComponent(packageBase)}/dependencies`, {
+        return this.request<Dependencies>(`/api/v1/packages/${encodeURIComponent(packageBase)}/dependencies`, {
            query: repository.toQuery(),
        });
    }
@@ -62,7 +56,7 @@ export class FetchClient {
        if (limit) {
            query.limit = limit;
        }
-        return this.client.request<Event[]>("/api/v1/events", { query });
+        return this.request<Event[]>("/api/v1/events", { query });
    }

    async fetchPackageLogs(
@@ -82,28 +76,26 @@ export class FetchClient {
        if (head) {
            query.head = true;
        }
-        return this.client.request<LogRecord[]>(`/api/v2/packages/${encodeURIComponent(packageBase)}/logs`, { query });
+        return this.request<LogRecord[]>(`/api/v2/packages/${encodeURIComponent(packageBase)}/logs`, { query });
    }

    async fetchPackagePatches(packageBase: string): Promise<Patch[]> {
-        return this.client.request<Patch[]>(`/api/v1/packages/${encodeURIComponent(packageBase)}/patches`);
+        return this.request<Patch[]>(`/api/v1/packages/${encodeURIComponent(packageBase)}/patches`);
    }

    async fetchPackages(repository: RepositoryId): Promise<PackageStatus[]> {
-        return this.client.request<PackageStatus[]>("/api/v1/packages", { query: repository.toQuery() });
+        return this.request<PackageStatus[]>("/api/v1/packages", { query: repository.toQuery() });
    }

    async fetchServerInfo(): Promise<InfoResponse> {
-        const info = await this.client.request<InfoResponse>("/api/v2/info");
-        return {
-            ...info,
-            repositories: info.repositories.map(repo =>
-                new RepositoryId(repo.architecture, repo.repository),
-            ),
-        };
+        const info = await this.request<InfoResponse>("/api/v2/info");
+        info.repositories = info.repositories.map(repositories =>
+            new RepositoryId(repositories.architecture, repositories.repository),
+        );
+        return info;
    }

    async fetchServerStatus(repository: RepositoryId): Promise<InternalStatus> {
-        return this.client.request<InternalStatus>("/api/v1/status", { query: repository.toQuery() });
+        return this.request<InternalStatus>("/api/v1/status", { query: repository.toQuery() });
    }
 }
--- a/frontend/src/api/client/RequestOptions.ts
+++ b/frontend/src/api/client/RequestOptions.ts
@@ -21,5 +21,4 @@ export interface RequestOptions {
    method?: string;
    query?: Record<string, string | number | boolean>;
    json?: unknown;
-    timeout?: number;
 }
--- a/frontend/src/api/client/ServiceClient.ts
+++ b/frontend/src/api/client/ServiceClient.ts
@@ -17,33 +17,27 @@
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
-import type { Client } from "api/client/Client";
+import { BaseClient } from "api/client/BaseClient";
 import type { AURPackage } from "models/AURPackage";
 import type { PackageActionRequest } from "models/PackageActionRequest";
 import type { PGPKey } from "models/PGPKey";
 import type { PGPKeyRequest } from "models/PGPKeyRequest";
 import type { RepositoryId } from "models/RepositoryId";

-export class ServiceClient {
-
-    protected client: Client;
-
-    constructor(client: Client) {
-        this.client = client;
-    }
+export class ServiceMixin extends BaseClient {

    async servicePackageAdd(repository: RepositoryId, data: PackageActionRequest): Promise<void> {
-        return this.client.request("/api/v1/service/add", { method: "POST", query: repository.toQuery(), json: data });
+        return this.request("/api/v1/service/add", { method: "POST", query: repository.toQuery(), json: data });
    }

    async servicePackagePatchRemove(packageBase: string, key: string): Promise<void> {
-        return this.client.request(`/api/v1/packages/${encodeURIComponent(packageBase)}/patches/${encodeURIComponent(key)}`, {
+        return this.request(`/api/v1/packages/${encodeURIComponent(packageBase)}/patches/${encodeURIComponent(key)}`, {
            method: "DELETE",
        });
    }

    async servicePackageRemove(repository: RepositoryId, packages: string[]): Promise<void> {
-        return this.client.request("/api/v1/service/remove", {
+        return this.request("/api/v1/service/remove", {
            method: "POST",
            query: repository.toQuery(),
            json: { packages },
@@ -51,7 +45,7 @@ export class ServiceClient {
    }

    async servicePackageRequest(repository: RepositoryId, data: PackageActionRequest): Promise<void> {
-        return this.client.request("/api/v1/service/request", {
+        return this.request("/api/v1/service/request", {
            method: "POST",
            query: repository.toQuery(),
            json: data,
@@ -59,11 +53,11 @@ export class ServiceClient {
    }

    async servicePackageSearch(query: string): Promise<AURPackage[]> {
-        return this.client.request<AURPackage[]>("/api/v1/service/search", { query: { for: query } });
+        return this.request<AURPackage[]>("/api/v1/service/search", { query: { for: query } });
    }

    async servicePackageUpdate(repository: RepositoryId, data: PackageActionRequest): Promise<void> {
-        return this.client.request("/api/v1/service/update", {
+        return this.request("/api/v1/service/update", {
            method: "POST",
            query: repository.toQuery(),
            json: data,
@@ -71,15 +65,15 @@ export class ServiceClient {
    }

    async servicePGPFetch(key: string, server: string): Promise<PGPKey> {
-        return this.client.request<PGPKey>("/api/v1/service/pgp", { query: { key, server } });
+        return this.request<PGPKey>("/api/v1/service/pgp", { query: { key, server } });
    }

    async servicePGPImport(data: PGPKeyRequest): Promise<void> {
-        return this.client.request("/api/v1/service/pgp", { method: "POST", json: data });
+        return this.request("/api/v1/service/pgp", { method: "POST", json: data });
    }

    async serviceRebuild(repository: RepositoryId, packages: string[]): Promise<void> {
-        return this.client.request("/api/v1/service/rebuild", {
+        return this.request("/api/v1/service/rebuild", {
            method: "POST",
            query: repository.toQuery(),
            json: { packages },
--- a/frontend/src/components/charts/StatusPieChart.tsx
+++ b/frontend/src/components/charts/StatusPieChart.tsx
@@ -17,7 +17,7 @@
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
-import type { BuildStatus } from "models/BuildStatus";
+import type { BuildStatus } from "models/BuildStatus.ts";
 import type { Counters } from "models/Counters";
 import type React from "react";
 import { Pie } from "react-chartjs-2";
--- a/frontend/src/components/common/CodeBlock.tsx
+++ b/frontend/src/components/common/CodeBlock.tsx
@@ -22,7 +22,9 @@ import CopyButton from "components/common/CopyButton";
 import React, { type RefObject } from "react";

 interface CodeBlockProps {
+    codeRef?: RefObject<HTMLElement | null>;
    preRef?: RefObject<HTMLElement | null>;
+    className?: string;
    getText: () => string;
    height?: number | string;
    onScroll?: () => void;
@@ -30,7 +32,9 @@ interface CodeBlockProps {
 }

 export default function CodeBlock({
+    codeRef,
    preRef,
+    className,
    getText,
    height,
    onScroll,
@@ -52,8 +56,8 @@ export default function CodeBlock({
                ...wordBreak ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : {},
            }}
        >
-            <code>
-                {getText()}
+            <code ref={codeRef} className={className}>
+                {!codeRef && getText()}
            </code>
        </Box>
        <Box sx={{ position: "absolute", top: 8, right: 8 }}>
--- a/frontend/src/components/common/StringList.tsx
+++ b/frontend/src/components/common/StringList.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from "react";
+
+interface StringListProps {
+    items: string[];
+}
+
+export default function StringList({ items }: StringListProps): React.JSX.Element {
+    return <>{items.join("\n")}</>;
+}
--- a/frontend/src/components/dialogs/DashboardDialog.tsx
+++ b/frontend/src/components/dialogs/DashboardDialog.tsx
@@ -40,7 +40,7 @@ export default function DashboardDialog({ open, onClose }: DashboardDialogProps)

    const { data: status } = useQuery<InternalStatus>({
        queryKey: current ? QueryKeys.status(current) : ["status"],
-        queryFn: current ? () => client.fetch.fetchServerStatus(current) : skipToken,
+        queryFn: current ? () => client.fetchServerStatus(current) : skipToken,
        enabled: open,
    });

--- a/frontend/src/components/dialogs/KeyImportDialog.tsx
+++ b/frontend/src/components/dialogs/KeyImportDialog.tsx
@@ -47,10 +47,14 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
    const [server, setServer] = useState("keyserver.ubuntu.com");
    const [keyBody, setKeyBody] = useState("");

-    const handleClose = (): void => {
+    const resetFields = (): void => {
        setFingerprint("");
        setServer("keyserver.ubuntu.com");
        setKeyBody("");
+    };
+
+    const handleClose = (): void => {
+        resetFields();
        onClose();
    };

@@ -59,7 +63,7 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
            return;
        }
        try {
-            const result = await client.service.servicePGPFetch(fingerprint, server);
+            const result = await client.servicePGPFetch(fingerprint, server);
            setKeyBody(result.key);
        } catch (exception) {
            const detail = ApiError.errorDetail(exception);
@@ -72,7 +76,7 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
            return;
        }
        try {
-            await client.service.servicePGPImport({ key: fingerprint, server });
+            await client.servicePGPImport({ key: fingerprint, server });
            handleClose();
            showSuccess("Success", `Key ${fingerprint} has been imported`);
        } catch (exception) {
--- a/frontend/src/components/dialogs/PackageAddDialog.tsx
+++ b/frontend/src/components/dialogs/PackageAddDialog.tsx
@@ -42,7 +42,6 @@ import { useDebounce } from "hooks/useDebounce";
 import { useNotification } from "hooks/useNotification";
 import { useSelectedRepository } from "hooks/useSelectedRepository";
 import type { AURPackage } from "models/AURPackage";
-import type { PackageActionRequest } from "models/PackageActionRequest";
 import React, { useRef, useState } from "react";

 interface EnvironmentVariable {
@@ -78,11 +77,11 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp

    const { data: searchResults = [] } = useQuery<AURPackage[]>({
        queryKey: QueryKeys.search(debouncedSearch),
-        queryFn: () => client.service.servicePackageSearch(debouncedSearch),
+        queryFn: () => client.servicePackageSearch(debouncedSearch),
        enabled: debouncedSearch.length >= 3,
    });

-    const handleSubmit = async (action: "add" | "request"): Promise<void> => {
+    const handleAdd: () => Promise<void> = async () => {
        if (!packageName) {
            return;
        }
@@ -92,18 +91,38 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
        }
        try {
            const patches = environmentVariables.filter(variable => variable.key);
-            const request: PackageActionRequest = { packages: [packageName], patches };
-            if (action === "add") {
-                request.refresh = refreshDatabase;
-                await client.service.servicePackageAdd(repository, request);
-            } else {
-                await client.service.servicePackageRequest(repository, request);
-            }
+            await client.servicePackageAdd(repository, {
+                packages: [packageName],
+                patches,
+                refresh: refreshDatabase,
+            });
            handleClose();
-            showSuccess("Success", `Packages ${packageName} have been ${action === "add" ? "added" : "requested"}`);
+            showSuccess("Success", `Packages ${packageName} have been added`);
        } catch (exception) {
            const detail = ApiError.errorDetail(exception);
-            showError("Action failed", `Package ${action} failed: ${detail}`);
+            showError("Action failed", `Package addition failed: ${detail}`);
+        }
+    };
+
+    const handleRequest: () => Promise<void> = async () => {
+        if (!packageName) {
+            return;
+        }
+        const repository = repositorySelect.selectedRepository;
+        if (!repository) {
+            return;
+        }
+        try {
+            const patches = environmentVariables.filter(variable => variable.key);
+            await client.servicePackageRequest(repository, {
+                packages: [packageName],
+                patches,
+            });
+            handleClose();
+            showSuccess("Success", `Packages ${packageName} have been requested`);
+        } catch (exception) {
+            const detail = ApiError.errorDetail(exception);
+            showError("Action failed", `Package request failed: ${detail}`);
        }
    };

@@ -186,8 +205,8 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
        </DialogContent>

        <DialogActions>
-            <Button onClick={() => void handleSubmit("add")} variant="contained" startIcon={<PlayArrowIcon />}>add</Button>
-            <Button onClick={() => void handleSubmit("request")} variant="contained" color="success" startIcon={<AddIcon />}>request</Button>
+            <Button onClick={() => void handleAdd()} variant="contained" startIcon={<PlayArrowIcon />}>add</Button>
+            <Button onClick={() => void handleRequest()} variant="contained" color="success" startIcon={<AddIcon />}>request</Button>
        </DialogActions>
    </Dialog>;
 }
--- a/frontend/src/components/dialogs/PackageInfoDialog.tsx
+++ b/frontend/src/components/dialogs/PackageInfoDialog.tsx
@@ -60,11 +60,6 @@ export default function PackageInfoDialog({
    const { showSuccess, showError } = useNotification();
    const queryClient = useQueryClient();

-    const [localPackageBase, setLocalPackageBase] = useState(packageBase);
-    if (packageBase !== null && packageBase !== localPackageBase) {
-        setLocalPackageBase(packageBase);
-    }
-
    const [tabIndex, setTabIndex] = useState(0);
    const [refreshDatabase, setRefreshDatabase] = useState(true);

@@ -77,22 +72,21 @@ export default function PackageInfoDialog({
    const autoRefresh = useAutoRefresh("package-info-autoreload-button", defaultInterval(autoRefreshIntervals));

    const { data: packageData } = useQuery<PackageStatus[]>({
-        queryKey: localPackageBase && current ? QueryKeys.package(localPackageBase, current) : ["packages"],
-        queryFn: localPackageBase && current ? () => client.fetch.fetchPackage(localPackageBase, current) : skipToken,
+        queryKey: packageBase && current ? QueryKeys.package(packageBase, current) : ["packages"],
+        queryFn: packageBase && current ? () => client.fetchPackage(packageBase, current) : skipToken,
        enabled: open,
        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
    });

    const { data: dependencies } = useQuery<Dependencies>({
-        queryKey: localPackageBase && current ? QueryKeys.dependencies(localPackageBase, current) : ["dependencies"],
-        queryFn: localPackageBase && current
-            ? () => client.fetch.fetchPackageDependencies(localPackageBase, current) : skipToken,
+        queryKey: packageBase && current ? QueryKeys.dependencies(packageBase, current) : ["dependencies"],
+        queryFn: packageBase && current ? () => client.fetchPackageDependencies(packageBase, current) : skipToken,
        enabled: open,
    });

    const { data: patches = [] } = useQuery<Patch[]>({
-        queryKey: localPackageBase ? QueryKeys.patches(localPackageBase) : ["patches"],
-        queryFn: localPackageBase ? () => client.fetch.fetchPackagePatches(localPackageBase) : skipToken,
+        queryKey: packageBase ? QueryKeys.patches(packageBase) : ["patches"],
+        queryFn: packageBase ? () => client.fetchPackagePatches(packageBase) : skipToken,
        enabled: open,
    });

@@ -102,24 +96,24 @@ export default function PackageInfoDialog({
    const headerStyle = status ? StatusHeaderStyles[status.status] : {};

    const handleUpdate: () => Promise<void> = async () => {
-        if (!localPackageBase || !current) {
+        if (!packageBase || !current) {
            return;
        }
        try {
-            await client.service.servicePackageAdd(current, { packages: [localPackageBase], refresh: refreshDatabase });
-            showSuccess("Success", `Run update for packages ${localPackageBase}`);
+            await client.servicePackageAdd(current, { packages: [packageBase], refresh: refreshDatabase });
+            showSuccess("Success", `Run update for packages ${packageBase}`);
        } catch (exception) {
            showError("Action failed", `Package update failed: ${ApiError.errorDetail(exception)}`);
        }
    };

    const handleRemove: () => Promise<void> = async () => {
-        if (!localPackageBase || !current) {
+        if (!packageBase || !current) {
            return;
        }
        try {
-            await client.service.servicePackageRemove(current, [localPackageBase]);
-            showSuccess("Success", `Packages ${localPackageBase} have been removed`);
+            await client.servicePackageRemove(current, [packageBase]);
+            showSuccess("Success", `Packages ${packageBase} have been removed`);
            onClose();
        } catch (exception) {
            showError("Action failed", `Could not remove package: ${ApiError.errorDetail(exception)}`);
@@ -127,12 +121,12 @@ export default function PackageInfoDialog({
    };

    const handleDeletePatch: (key: string) => Promise<void> = async key => {
-        if (!localPackageBase) {
+        if (!packageBase) {
            return;
        }
        try {
-            await client.service.servicePackagePatchRemove(localPackageBase, key);
-            void queryClient.invalidateQueries({ queryKey: QueryKeys.patches(localPackageBase) });
+            await client.servicePackagePatchRemove(packageBase, key);
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.patches(packageBase) });
        } catch (exception) {
            showError("Action failed", `Could not delete variable: ${ApiError.errorDetail(exception)}`);
        }
@@ -142,7 +136,7 @@ export default function PackageInfoDialog({
        <DialogHeader onClose={handleClose} sx={headerStyle}>
            {pkg && status
                ? `${pkg.base} ${status.status} at ${new Date(status.timestamp * 1000).toISOStringShort()}`
-                : localPackageBase ?? ""}
+                : packageBase ?? ""}
        </DialogHeader>

        <DialogContent>
@@ -163,18 +157,18 @@ export default function PackageInfoDialog({
                        </Tabs>
                    </Box>

-                    {tabIndex === 0 && localPackageBase && current &&
+                    {tabIndex === 0 && packageBase && current &&
                        <BuildLogsTab
-                            packageBase={localPackageBase}
+                            packageBase={packageBase}
                            repository={current}
                            refreshInterval={autoRefresh.interval}
                        />
                    }
-                    {tabIndex === 1 && localPackageBase && current &&
-                        <ChangesTab packageBase={localPackageBase} repository={current} />
+                    {tabIndex === 1 && packageBase && current &&
+                        <ChangesTab packageBase={packageBase} repository={current} />
                    }
-                    {tabIndex === 2 && localPackageBase && current &&
-                        <EventsTab packageBase={localPackageBase} repository={current} />
+                    {tabIndex === 2 && packageBase && current &&
+                        <EventsTab packageBase={packageBase} repository={current} />
                    }
                </>
            }
--- a/frontend/src/components/dialogs/PackageRebuildDialog.tsx
+++ b/frontend/src/components/dialogs/PackageRebuildDialog.tsx
@@ -54,7 +54,7 @@ export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDi
            return;
        }
        try {
-            await client.service.serviceRebuild(repository, [dependency]);
+            await client.serviceRebuild(repository, [dependency]);
            handleClose();
            showSuccess("Success", `Repository rebuild has been run for packages which depend on ${dependency}`);
        } catch (exception) {
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -38,7 +38,7 @@ export default function AppLayout(): React.JSX.Element {

    const { data: info } = useQuery<InfoResponse>({
        queryKey: QueryKeys.info,
-        queryFn: () => client.fetch.fetchServerInfo(),
+        queryFn: () => client.fetchServerInfo(),
        staleTime: Infinity,
    });

--- a/frontend/src/components/package/BuildLogsTab.tsx
+++ b/frontend/src/components/package/BuildLogsTab.tsx
@@ -59,7 +59,7 @@ export default function BuildLogsTab({

    const { data: allLogs } = useQuery<LogRecord[]>({
        queryKey: QueryKeys.logs(packageBase, repository),
-        queryFn: () => client.fetch.fetchPackageLogs(packageBase, repository),
+        queryFn: () => client.fetchPackageLogs(packageBase, repository),
        enabled: !!packageBase,
        refetchInterval: refreshInterval > 0 ? refreshInterval : false,
    });
@@ -112,9 +112,7 @@ export default function BuildLogsTab({
    const { data: versionLogs } = useQuery<LogRecord[]>({
        queryKey: QueryKeys.logsVersion(packageBase, repository, activeVersion?.version ?? "", activeVersion?.processId ?? ""),
        queryFn: activeVersion
-            ? () => client.fetch.fetchPackageLogs(
-                packageBase, repository, activeVersion.version, activeVersion.processId,
-            )
+            ? () => client.fetchPackageLogs(packageBase, repository, activeVersion.version, activeVersion.processId)
            : skipToken,
        placeholderData: keepPreviousData,
        refetchInterval: refreshInterval > 0 ? refreshInterval : false,
--- a/frontend/src/components/package/ChangesTab.tsx
+++ b/frontend/src/components/package/ChangesTab.tsx
@@ -17,19 +17,20 @@
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
+import "highlight.js/styles/github.css";
+
 import { Box } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
-import CopyButton from "components/common/CopyButton";
+import CodeBlock from "components/common/CodeBlock";
+import hljs from "highlight.js/lib/core";
+import diff from "highlight.js/lib/languages/diff";
 import { QueryKeys } from "hooks/QueryKeys";
 import { useClient } from "hooks/useClient";
 import type { Changes } from "models/Changes";
 import type { RepositoryId } from "models/RepositoryId";
-import React from "react";
-import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import diff from "react-syntax-highlighter/dist/esm/languages/hljs/diff";
-import { githubGist } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import React, { useEffect, useRef } from "react";

-SyntaxHighlighter.registerLanguage("diff", diff);
+hljs.registerLanguage("diff", diff);

 interface ChangesTabProps {
    packageBase: string;
@@ -38,33 +39,23 @@ interface ChangesTabProps {

 export default function ChangesTab({ packageBase, repository }: ChangesTabProps): React.JSX.Element {
    const client = useClient();
+    const codeRef = useRef<HTMLElement>(null);

    const { data } = useQuery<Changes>({
        queryKey: QueryKeys.changes(packageBase, repository),
-        queryFn: () => client.fetch.fetchPackageChanges(packageBase, repository),
+        queryFn: () => client.fetchPackageChanges(packageBase, repository),
        enabled: !!packageBase,
    });

    const changesText = data?.changes ?? "";

-    return <Box sx={{ position: "relative", mt: 1 }}>
-        <SyntaxHighlighter
-            language="diff"
-            style={githubGist}
-            customStyle={{
-                padding: "16px",
-                borderRadius: "4px",
-                overflow: "auto",
-                height: 400,
-                fontSize: "0.8rem",
-                fontFamily: "monospace",
-                margin: 0,
-            }}
-        >
-            {changesText}
-        </SyntaxHighlighter>
-        <Box sx={{ position: "absolute", top: 8, right: 8 }}>
-            <CopyButton getText={() => changesText} />
-        </Box>
+    useEffect(() => {
+        if (codeRef.current) {
+            codeRef.current.innerHTML = hljs.highlight(changesText, { language: "diff" }).value;
+        }
+    }, [changesText]);
+
+    return <Box sx={{ mt: 1 }}>
+        <CodeBlock codeRef={codeRef} className="language-diff" getText={() => changesText} height={400} />
    </Box>;
 }
--- a/frontend/src/components/package/EventsTab.tsx
+++ b/frontend/src/components/package/EventsTab.tsx
@@ -26,7 +26,6 @@ import { useClient } from "hooks/useClient";
 import type { Event } from "models/Event";
 import type { RepositoryId } from "models/RepositoryId";
 import type React from "react";
-import { useMemo } from "react";

 interface EventsTabProps {
    packageBase: string;
@@ -51,16 +50,16 @@ export default function EventsTab({ packageBase, repository }: EventsTabProps):

    const { data: events = [] } = useQuery<Event[]>({
        queryKey: QueryKeys.events(repository, packageBase),
-        queryFn: () => client.fetch.fetchPackageEvents(repository, packageBase, 30),
+        queryFn: () => client.fetchPackageEvents(repository, packageBase, 30),
        enabled: !!packageBase,
    });

-    const rows = useMemo<EventRow[]>(() => events.map((event, index) => ({
+    const rows: EventRow[] = events.map((event, index) => ({
        id: index,
        timestamp: new Date(event.created * 1000).toISOStringShort(),
        event: event.event,
        message: event.message ?? "",
-    })), [events]);
+    }));

    return <Box sx={{ mt: 1 }}>
        <EventDurationLineChart events={events} />
--- a/frontend/src/components/package/PackageDetailsGrid.tsx
+++ b/frontend/src/components/package/PackageDetailsGrid.tsx
@@ -18,6 +18,7 @@
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
 import { Grid, Link, Typography } from "@mui/material";
+import StringList from "components/common/StringList";
 import type { Dependencies } from "models/Dependencies";
 import type { Package } from "models/Package";
 import React from "react";
@@ -66,7 +67,7 @@ export default function PackageDetailsGrid({ pkg, dependencies }: PackageDetails
    return <>
        <Grid container spacing={1} sx={{ mt: 1 }}>
            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">packages</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{packagesList.unique().join("\n")}</Typography></Grid>
+            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}><StringList items={packagesList.unique()} /></Typography></Grid>
            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">version</Typography></Grid>
            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2">{pkg.version}</Typography></Grid>
        </Grid>
@@ -80,16 +81,16 @@ export default function PackageDetailsGrid({ pkg, dependencies }: PackageDetails

        <Grid container spacing={1} sx={{ mt: 0.5 }}>
            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">groups</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{groups.unique().join("\n")}</Typography></Grid>
+            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}><StringList items={groups.unique()} /></Typography></Grid>
            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">licenses</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{licenses.unique().join("\n")}</Typography></Grid>
+            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}><StringList items={licenses.unique()} /></Typography></Grid>
        </Grid>

        <Grid container spacing={1} sx={{ mt: 0.5 }}>
            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">upstream</Typography></Grid>
            <Grid size={{ xs: 8, md: 5 }}>
                {upstreamUrls.map(url =>
-                    <Link key={url} href={url} target="_blank" rel="noopener noreferrer" underline="hover" display="block" variant="body2">
+                    <Link key={url} href={url} target="_blank" rel="noopener" underline="hover" display="block" variant="body2">
                        {url}
                    </Link>,
                )}
@@ -98,7 +99,7 @@ export default function PackageDetailsGrid({ pkg, dependencies }: PackageDetails
            <Grid size={{ xs: 8, md: 5 }}>
                <Typography variant="body2">
                    {aurUrl &&
-                        <Link href={aurUrl} target="_blank" rel="noopener noreferrer" underline="hover">AUR link</Link>
+                        <Link href={aurUrl} target="_blank" rel="noopener" underline="hover">AUR link</Link>
                    }
                </Typography>
            </Grid>
@@ -106,9 +107,9 @@ export default function PackageDetailsGrid({ pkg, dependencies }: PackageDetails

        <Grid container spacing={1} sx={{ mt: 0.5 }}>
            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">depends</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{allDepends.join("\n")}</Typography></Grid>
+            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}><StringList items={allDepends} /></Typography></Grid>
            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">implicitly depends</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{implicitDepends.unique().join("\n")}</Typography></Grid>
+            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}><StringList items={implicitDepends.unique()} /></Typography></Grid>
        </Grid>
    </>;
 }
--- a/frontend/src/components/table/PackageTable.tsx
+++ b/frontend/src/components/table/PackageTable.tsx
@@ -27,6 +27,7 @@ import {
    type GridRowId,
    useGridApiRef,
 } from "@mui/x-data-grid";
+import StringList from "components/common/StringList";
 import DashboardDialog from "components/dialogs/DashboardDialog";
 import KeyImportDialog from "components/dialogs/KeyImportDialog";
 import PackageAddDialog from "components/dialogs/PackageAddDialog";
@@ -57,7 +58,7 @@ function createListColumn(
        ...options,
        valueGetter: (value: string[]) => (value ?? []).join(" "),
        renderCell: (params: GridRenderCellParams<PackageRow>) =>
-            <Box sx={{ whiteSpace: "pre-line" }}>{((params.row[field] as string[]) ?? []).join("\n")}</Box>,
+            <Box sx={{ whiteSpace: "pre-line" }}><StringList items={(params.row[field] as string[]) ?? []} /></Box>,
        sortComparator: (left: string, right: string) => left.localeCompare(right),
    };
 }
@@ -84,7 +85,7 @@ export default function PackageTable({ autoRefreshIntervals }: PackageTableProps
                minWidth: 150,
                renderCell: (params: GridRenderCellParams<PackageRow>) =>
                    params.row.webUrl ?
-                        <Link href={params.row.webUrl} target="_blank" rel="noopener noreferrer" underline="hover">
+                        <Link href={params.row.webUrl} target="_blank" rel="noopener" underline="hover">
                            {params.value as string}
                        </Link>
                        : params.value as string,
@@ -113,7 +114,7 @@ export default function PackageTable({ autoRefreshIntervals }: PackageTableProps
        [],
    );

-    return <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+    return <Box>
        <PackageTableToolbar
            hasSelection={table.selectionModel.length > 0}
            isAuthorized={table.isAuthorized}
@@ -129,7 +130,7 @@ export default function PackageTable({ autoRefreshIntervals }: PackageTableProps
                onDashboardClick: () => table.setDialogOpen("dashboard"),
                onAddClick: () => table.setDialogOpen("add"),
                onUpdateClick: () => void table.handleUpdate(),
-                onRefreshDatabaseClick: () => void table.handleRefreshDatabase(),
+                onRefreshDbClick: () => void table.handleRefreshDb(),
                onRebuildClick: () => table.setDialogOpen("rebuild"),
                onRemoveClick: () => void table.handleRemove(),
                onKeyImportClick: () => table.setDialogOpen("keyImport"),
@@ -176,7 +177,7 @@ export default function PackageTable({ autoRefreshIntervals }: PackageTableProps
                table.setSelectedPackage(String(params.id));
            }}
            sx={{
-                flex: 1,
+                height: 500,
                "& .MuiDataGrid-row": { cursor: "pointer" },
            }}
            density="compact"
--- a/frontend/src/components/table/PackageTableToolbar.tsx
+++ b/frontend/src/components/table/PackageTableToolbar.tsx
@@ -46,7 +46,7 @@ export interface ToolbarActions {
    onDashboardClick: () => void;
    onAddClick: () => void;
    onUpdateClick: () => void;
-    onRefreshDatabaseClick: () => void;
+    onRefreshDbClick: () => void;
    onRebuildClick: () => void;
    onRemoveClick: () => void;
    onKeyImportClick: () => void;
@@ -116,7 +116,7 @@ export default function PackageTableToolbar({
                        <PlayArrowIcon fontSize="small" sx={{ mr: 1 }} /> update
                    </MenuItem>
                    <MenuItem onClick={() => {
-                        setPackagesAnchorEl(null); actions.onRefreshDatabaseClick();
+                        setPackagesAnchorEl(null); actions.onRefreshDbClick();
                    }}>
                        <DownloadIcon fontSize="small" sx={{ mr: 1 }} /> update pacman databases
                    </MenuItem>
--- a/frontend/src/contexts/AuthProvider.tsx
+++ b/frontend/src/contexts/AuthProvider.tsx
@@ -17,41 +17,33 @@
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
-import { ApiError } from "api/client/ApiError";
 import { AuthContext } from "contexts/AuthContext";
 import { useClient } from "hooks/useClient";
-import { useNotification } from "hooks/useNotification";
 import React, { type ReactNode, useCallback, useMemo, useState } from "react";

 export function AuthProvider({ children }: { children: ReactNode }): React.JSX.Element {
    const client = useClient();
-    const [authState, setAuthState] = useState({ enabled: true, username: null as string | null });
-    const { showError } = useNotification();
+    const [state, setState] = useState({ enabled: true, username: null as string | null });

    const login = useCallback(async (username: string, password: string) => {
        await client.login({ username, password });
-        setAuthState(prev => ({ ...prev, username }));
+        setState(prev => ({ ...prev, username }));
    }, [client]);

-    const logout = useCallback(async () => {
-        try {
-            await client.logout();
-            setAuthState(prev => ({ ...prev, username: null }));
-        } catch (exception) {
-            const detail = ApiError.errorDetail(exception);
-            showError("Login error", `Could not log out: ${detail}`);
-        }
-    }, [client, showError]);
+    const doLogout = useCallback(async () => {
+        await client.logout();
+        setState(prev => ({ ...prev, username: null }));
+    }, [client]);

-    const isAuthorized = useMemo(() =>
-        !authState.enabled || authState.username !== null, [authState.enabled, authState.username],
-    );
+    const isAuthorized = useMemo(() => !state.enabled || state.username !== null, [state.enabled, state.username]);

    const value = useMemo(() => ({
-        ...authState, isAuthorized, setAuthState, login, logout,
-    }), [authState, isAuthorized, login, logout]);
+        ...state, isAuthorized, setAuthState: setState, login, logout: doLogout,
+    }), [state, isAuthorized, login, doLogout]);

-    return <AuthContext.Provider value={value}>
-        {children}
-    </AuthContext.Provider>;
+    return (
+        <AuthContext.Provider value={value}>
+            {children}
+        </AuthContext.Provider>
+    );
 }
--- a/frontend/src/contexts/Notification.ts
+++ b/frontend/src/contexts/Notification.ts
@@ -20,7 +20,7 @@
 import type { AlertColor } from "@mui/material";

 export interface Notification {
-    id: string;
+    id: number;
    title: string;
    message: string;
    severity: AlertColor;
--- a/frontend/src/components/common/NotificationItem.tsx
+++ b/frontend/src/components/common/NotificationItem.tsx
@@ -18,12 +18,12 @@
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
 import { Alert, Slide } from "@mui/material";
-import type { Notification } from "models/Notification";
+import type { Notification } from "contexts/Notification";
 import React, { useEffect, useState } from "react";

 interface NotificationItemProps {
    notification: Notification;
-    onClose: (id: string) => void;
+    onClose: (id: number) => void;
 }

 export default function NotificationItem({ notification, onClose }: NotificationItemProps): React.JSX.Element {
--- a/frontend/src/contexts/NotificationProvider.tsx
+++ b/frontend/src/contexts/NotificationProvider.tsx
@@ -18,26 +18,22 @@
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
 import { type AlertColor, Box } from "@mui/material";
-import NotificationItem from "components/common/NotificationItem";
+import type { Notification } from "contexts/Notification";
 import { NotificationContext } from "contexts/NotificationContext";
-import type { Notification } from "models/Notification";
-import React, { type ReactNode, useCallback, useMemo, useState } from "react";
+import NotificationItem from "contexts/NotificationItem";
+import React, { type ReactNode, useCallback, useMemo, useRef, useState } from "react";

 export function NotificationProvider({ children }: { children: ReactNode }): React.JSX.Element {
+    const nextId = useRef(0);
    const [notifications, setNotifications] = useState<Notification[]>([]);

    const addNotification = useCallback((title: string, message: string, severity: AlertColor) => {
-        const id = `${severity}:${title}:${message}`;
-        setNotifications(prev => {
-            if (prev.some(notification => notification.id === id)) {
-                return prev;
-            }
-            return [...prev, { id, title, message, severity }];
-        });
+        const id = nextId.current++;
+        setNotifications(prev => [...prev, { id, title, message, severity }]);
    }, []);

-    const removeNotification = useCallback((key: string) => {
-        setNotifications(prev => prev.filter(notification => notification.id !== key));
+    const removeNotification = useCallback((id: number) => {
+        setNotifications(prev => prev.filter(notification => notification.id !== id));
    }, []);

    const showSuccess = useCallback(
@@ -51,26 +47,28 @@ export function NotificationProvider({ children }: { children: ReactNode }): Rea

    const value = useMemo(() => ({ showSuccess, showError }), [showSuccess, showError]);

-    return <NotificationContext.Provider value={value}>
-        {children}
-        <Box
-            sx={{
-                position: "fixed",
-                top: 16,
-                left: "50%",
-                transform: "translateX(-50%)",
-                zIndex: theme => theme.zIndex.snackbar,
-                display: "flex",
-                flexDirection: "column",
-                gap: 1,
-                maxWidth: 500,
-                width: "100%",
-                pointerEvents: "none",
-            }}
-        >
-            {notifications.map(notification =>
-                <NotificationItem key={notification.id} notification={notification} onClose={removeNotification} />,
-            )}
-        </Box>
-    </NotificationContext.Provider>;
+    return (
+        <NotificationContext.Provider value={value}>
+            {children}
+            <Box
+                sx={{
+                    position: "fixed",
+                    top: 16,
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    zIndex: theme => theme.zIndex.snackbar,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 1,
+                    maxWidth: 500,
+                    width: "100%",
+                    pointerEvents: "none",
+                }}
+            >
+                {notifications.map(notification =>
+                    <NotificationItem key={notification.id} notification={notification} onClose={removeNotification} />,
+                )}
+            </Box>
+        </NotificationContext.Provider>
+    );
 }
--- a/frontend/src/hooks/useAutoScroll.ts
+++ b/frontend/src/hooks/useAutoScroll.ts
@@ -17,7 +17,7 @@
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
-import { type RefObject, useCallback, useRef } from "react";
+import { type RefObject, useRef } from "react";

 interface UseAutoScrollResult {
    preRef: RefObject<HTMLElement | null>;
@@ -31,19 +31,19 @@ export function useAutoScroll(): UseAutoScrollResult {
    const initialScrollDone = useRef(false);
    const wasAtBottom = useRef(true);

-    const handleScroll = useCallback((): void => {
+    const handleScroll: () => void = () => {
        if (preRef.current) {
            const element = preRef.current;
            wasAtBottom.current = element.scrollTop + element.clientHeight >= element.scrollHeight - 50;
        }
-    }, []);
+    };

-    const resetScroll = useCallback((): void => {
+    const resetScroll: () => void = () => {
        initialScrollDone.current = false;
-    }, []);
+    };

    // scroll to bottom on initial load, then only if already near bottom and no active text selection
-    const scrollToBottom = useCallback((): void => {
+    const scrollToBottom: () => void = () => {
        if (!preRef.current) {
            return;
        }
@@ -57,7 +57,7 @@ export function useAutoScroll(): UseAutoScrollResult {
                element.scrollTop = element.scrollHeight;
            }
        }
-    }, []);
+    };

    return { preRef, handleScroll, scrollToBottom, resetScroll };
 }
--- a/frontend/src/hooks/useContextNotNull.ts
+++ b/frontend/src/hooks/useContextNotNull.ts
@@ -21,7 +21,7 @@ import { type Context, useContext } from "react";

 export function useContextNotNull<T>(context: Context<T | null>): T {
    const ctx = useContext(context);
-    if (ctx === null) {
+    if (!ctx) {
        throw new Error("must be used within a Provider");
    }
    return ctx;
--- a/frontend/src/hooks/usePackageActions.ts
+++ b/frontend/src/hooks/usePackageActions.ts
@@ -23,12 +23,11 @@ import { QueryKeys } from "hooks/QueryKeys";
 import { useClient } from "hooks/useClient";
 import { useNotification } from "hooks/useNotification";
 import { useRepository } from "hooks/useRepository";
-import type { RepositoryId } from "models/RepositoryId";

 export interface UsePackageActionsResult {
    handleReload: () => void;
    handleUpdate: () => Promise<void>;
-    handleRefreshDatabase: () => Promise<void>;
+    handleRefreshDb: () => Promise<void>;
    handleRemove: () => Promise<void>;
 }

@@ -41,68 +40,80 @@ export function usePackageActions(
    const { showSuccess, showError } = useNotification();
    const queryClient = useQueryClient();

-    const invalidate = (repository: RepositoryId): void => {
-        void queryClient.invalidateQueries({ queryKey: QueryKeys.packages(repository) });
-        void queryClient.invalidateQueries({ queryKey: QueryKeys.status(repository) });
+    const handleReload: () => void = () => {
+        if (!current) {
+            return;
+        }
+        void queryClient.invalidateQueries({ queryKey: QueryKeys.packages(current) });
+        void queryClient.invalidateQueries({ queryKey: QueryKeys.status(current) });
    };

-    const performAction = async (
-        action: (repository: RepositoryId) => Promise<string>,
-        errorMessage: string,
-    ): Promise<void> => {
+    const handleUpdate: () => Promise<void> = async () => {
        if (!current) {
            return;
        }
        try {
-            const successMessage = await action(current);
-            showSuccess("Success", successMessage);
-            invalidate(current);
+            if (selectionModel.length === 0) {
+                await client.servicePackageUpdate(current, { packages: [] });
+                showSuccess("Success", "Repository update has been run");
+            } else {
+                await client.servicePackageAdd(current, { packages: selectionModel });
+                showSuccess("Success", `Run update for packages ${selectionModel.join(", ")}`);
+            }
            setSelectionModel([]);
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.packages(current) });
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.status(current) });
        } catch (exception) {
-            showError("Action failed", `${errorMessage}: ${ApiError.errorDetail(exception)}`);
+            const detail = ApiError.errorDetail(exception);
+            showError("Action failed", `Packages update failed: ${detail}`);
        }
    };

-    const handleReload: () => void = () => {
-        if (current !== null) {
-            invalidate(current);
+    const handleRefreshDb: () => Promise<void> = async () => {
+        if (!current) {
+            return;
+        }
+        try {
+            await client.servicePackageUpdate(current, {
+                packages: [],
+                refresh: true,
+                aur: false,
+                local: false,
+                manual: false,
+            });
+            showSuccess("Success", "Pacman database update has been requested");
+            setSelectionModel([]);
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.packages(current) });
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.status(current) });
+        } catch (exception) {
+            const detail = ApiError.errorDetail(exception);
+            showError("Action failed", `Could not update pacman databases: ${detail}`);
        }
    };

-    const handleUpdate = (): Promise<void> => performAction(async (repository): Promise<string> => {
-        if (selectionModel.length === 0) {
-            await client.service.servicePackageUpdate(repository, { packages: [] });
-            return "Repository update has been run";
+    const handleRemove: () => Promise<void> = async () => {
+        if (!current) {
+            return;
        }
-        await client.service.servicePackageAdd(repository, { packages: selectionModel });
-        return `Run update for packages ${selectionModel.join(", ")}`;
-    }, "Packages update failed");
-
-    const handleRefreshDatabase = (): Promise<void> => performAction(async (repository): Promise<string> => {
-        await client.service.servicePackageUpdate(repository, {
-            packages: [],
-            refresh: true,
-            aur: false,
-            local: false,
-            manual: false,
-        });
-        return "Pacman database update has been requested";
-    }, "Could not update pacman databases");
-
-    const handleRemove = (): Promise<void> => {
        if (selectionModel.length === 0) {
-            return Promise.resolve();
+            return;
+        }
+        try {
+            await client.servicePackageRemove(current, selectionModel);
+            showSuccess("Success", `Packages ${selectionModel.join(", ")} have been removed`);
+            setSelectionModel([]);
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.packages(current) });
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.status(current) });
+        } catch (exception) {
+            const detail = ApiError.errorDetail(exception);
+            showError("Action failed", `Could not remove packages: ${detail}`);
        }
-        return performAction(async (repository): Promise<string> => {
-            await client.service.servicePackageRemove(repository, selectionModel);
-            return `Packages ${selectionModel.join(", ")} have been removed`;
-        }, "Could not remove packages");
    };

    return {
        handleReload,
        handleUpdate,
-        handleRefreshDatabase,
+        handleRefreshDb,
        handleRemove,
    };
 }
--- a/frontend/src/hooks/usePackageData.ts
+++ b/frontend/src/hooks/usePackageData.ts
@@ -46,13 +46,13 @@ export function usePackageData(autoRefreshIntervals: AutoRefreshInterval[]): Use

    const { data: packages = [], isLoading } = useQuery({
        queryKey: current ? QueryKeys.packages(current) : ["packages"],
-        queryFn: current ? () => client.fetch.fetchPackages(current) : skipToken,
+        queryFn: current ? () => client.fetchPackages(current) : skipToken,
        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
    });

    const { data: status } = useQuery({
        queryKey: current ? QueryKeys.status(current) : ["status"],
-        queryFn: current ? () => client.fetch.fetchServerStatus(current) : skipToken,
+        queryFn: current ? () => client.fetchServerStatus(current) : skipToken,
        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
    });

--- a/frontend/src/hooks/usePackageTable.ts
+++ b/frontend/src/hooks/usePackageTable.ts
@@ -54,7 +54,7 @@ export interface UsePackageTableResult {

    handleReload: () => void;
    handleUpdate: () => Promise<void>;
-    handleRefreshDatabase: () => Promise<void>;
+    handleRefreshDb: () => Promise<void>;
    handleRemove: () => Promise<void>;
 }

--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -19,6 +19,21 @@
 */
 import type { AutoRefreshInterval } from "models/AutoRefreshInterval";

+// https://www.typescriptlang.org/docs/handbook/mixins.html#alternative-pattern
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument */
+export function applyMixins(clazz: any, classes: any[]): void {
+    classes.forEach(baseClass => {
+        Object.getOwnPropertyNames(baseClass.prototype).forEach(name => {
+            Object.defineProperty(
+                clazz.prototype,
+                name,
+                Object.getOwnPropertyDescriptor(baseClass.prototype, name) || Object.create(null),
+            );
+        });
+    });
+}
+/* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument */
+
 export function defaultInterval(intervals: AutoRefreshInterval[]): number {
    return intervals.find(interval => interval.is_active)?.interval ?? 0;
 }
--- a/package/archlinux/PKGBUILD
+++ b/package/archlinux/PKGBUILD
@@ -2,7 +2,7 @@

 pkgbase='ahriman'
 pkgname=('ahriman' 'ahriman-core' 'ahriman-triggers' 'ahriman-web')
-pkgver=2.20.0rc5
+pkgver=2.20.0rc4
 pkgrel=1
 pkgdesc="ArcH linux ReposItory MANager"
 arch=('any')
--- a/package/share/ahriman/templates/build-status-classic.jinja2
+++ b/package/share/ahriman/templates/build-status-classic.jinja2
--- a/package/share/ahriman/templates/build-status.jinja2
+++ b/package/share/ahriman/templates/build-status.jinja2
@@ -7,6 +7,7 @@

    <link rel="icon" href="/static/favicon.ico" />
  <script type="module" crossorigin src="/static/index.js"></script>
+  <link rel="stylesheet" crossorigin href="/static/index.css">
 </head>
 <body>

--- a/package/share/man/man1/ahriman.1
+++ b/package/share/man/man1/ahriman.1
@@ -1,4 +1,4 @@
-.TH AHRIMAN "1" "2026\-03\-06" "ahriman 2.20.0rc5" "ArcH linux ReposItory MANager"
+.TH AHRIMAN "1" "2026\-02\-21" "ahriman 2.20.0rc4" "ArcH linux ReposItory MANager"
 .SH NAME
 ahriman \- ArcH linux ReposItory MANager
 .SH SYNOPSIS
--- a/package/share/zsh/site-functions/_ahriman
+++ b/package/share/zsh/site-functions/_ahriman
@@ -245,7 +245,7 @@ _shtab_ahriman_init_options=(
  {--makeflags-jobs,--no-makeflags-jobs}"[append MAKEFLAGS variable with parallelism set to number of cores (default\: True)]:makeflags_jobs:"
  "--mirror[use the specified explicitly mirror instead of including mirrorlist (default\: None)]:mirror:"
  {--multilib,--no-multilib}"[add or do not multilib repository (default\: True)]:multilib:"
-  "--packager[packager name and email]:packager:"
+  "--packager[packager name and email (default\: None)]:packager:"
  "--server[server to be used for devtools. If none set, local files will be used (default\: None)]:server:"
  "--sign-key[sign key id (default\: None)]:sign_key:"
  "*--sign-target[sign options (default\: None)]:sign_target:(disabled packages repository)"
@@ -526,7 +526,7 @@ _shtab_ahriman_repo_init_options=(
  {--makeflags-jobs,--no-makeflags-jobs}"[append MAKEFLAGS variable with parallelism set to number of cores (default\: True)]:makeflags_jobs:"
  "--mirror[use the specified explicitly mirror instead of including mirrorlist (default\: None)]:mirror:"
  {--multilib,--no-multilib}"[add or do not multilib repository (default\: True)]:multilib:"
-  "--packager[packager name and email]:packager:"
+  "--packager[packager name and email (default\: None)]:packager:"
  "--server[server to be used for devtools. If none set, local files will be used (default\: None)]:server:"
  "--sign-key[sign key id (default\: None)]:sign_key:"
  "*--sign-target[sign options (default\: None)]:sign_target:(disabled packages repository)"
@@ -583,7 +583,7 @@ _shtab_ahriman_repo_setup_options=(
  {--makeflags-jobs,--no-makeflags-jobs}"[append MAKEFLAGS variable with parallelism set to number of cores (default\: True)]:makeflags_jobs:"
  "--mirror[use the specified explicitly mirror instead of including mirrorlist (default\: None)]:mirror:"
  {--multilib,--no-multilib}"[add or do not multilib repository (default\: True)]:multilib:"
-  "--packager[packager name and email]:packager:"
+  "--packager[packager name and email (default\: None)]:packager:"
  "--server[server to be used for devtools. If none set, local files will be used (default\: None)]:server:"
  "--sign-key[sign key id (default\: None)]:sign_key:"
  "*--sign-target[sign options (default\: None)]:sign_target:(disabled packages repository)"
@@ -757,7 +757,7 @@ _shtab_ahriman_service_setup_options=(
  {--makeflags-jobs,--no-makeflags-jobs}"[append MAKEFLAGS variable with parallelism set to number of cores (default\: True)]:makeflags_jobs:"
  "--mirror[use the specified explicitly mirror instead of including mirrorlist (default\: None)]:mirror:"
  {--multilib,--no-multilib}"[add or do not multilib repository (default\: True)]:multilib:"
-  "--packager[packager name and email]:packager:"
+  "--packager[packager name and email (default\: None)]:packager:"
  "--server[server to be used for devtools. If none set, local files will be used (default\: None)]:server:"
  "--sign-key[sign key id (default\: None)]:sign_key:"
  "*--sign-target[sign options (default\: None)]:sign_target:(disabled packages repository)"
@@ -792,7 +792,7 @@ _shtab_ahriman_setup_options=(
  {--makeflags-jobs,--no-makeflags-jobs}"[append MAKEFLAGS variable with parallelism set to number of cores (default\: True)]:makeflags_jobs:"
  "--mirror[use the specified explicitly mirror instead of including mirrorlist (default\: None)]:mirror:"
  {--multilib,--no-multilib}"[add or do not multilib repository (default\: True)]:multilib:"
-  "--packager[packager name and email]:packager:"
+  "--packager[packager name and email (default\: None)]:packager:"
  "--server[server to be used for devtools. If none set, local files will be used (default\: None)]:server:"
  "--sign-key[sign key id (default\: None)]:sign_key:"
  "*--sign-target[sign options (default\: None)]:sign_target:(disabled packages repository)"
--- a/src/ahriman/init.py
+++ b/src/ahriman/init.py
@@ -17,4 +17,4 @@
 # You should have received a copy of the GNU General Public License
 # along with this program. If not, see <http://www.gnu.org/licenses/>.
 #
-__version__ = "2.20.0rc5"
+__version__ = "2.20.0rc4"
--- a/subpackages.py
+++ b/subpackages.py
@@ -45,10 +45,10 @@ SUBPACKAGES = {
        prefix / "lib" / "systemd" / "system" / "ahriman-web.service",
        prefix / "lib" / "systemd" / "system" / "ahriman-web@.service",
        prefix / "share" / "ahriman" / "settings" / "ahriman.ini.d" / "00-web.ini",
-        prefix / "share" / "ahriman" / "templates" / "api.jinja2",
        prefix / "share" / "ahriman" / "templates" / "build-status",
-        prefix / "share" / "ahriman" / "templates" / "build-status-classic.jinja2",
        prefix / "share" / "ahriman" / "templates" / "build-status.jinja2",
+        prefix / "share" / "ahriman" / "templates" / "build-status-legacy.jinja2",
+        prefix / "share" / "ahriman" / "templates" / "api.jinja2",
        prefix / "share" / "ahriman" / "templates" / "error.jinja2",
        prefix / "share" / "ahriman" / "templates" / "static",
        site_packages / "ahriman" / "application" / "handlers" / "web.py",
--- a/tests/ahriman/core/test_utils.py
+++ b/tests/ahriman/core/test_utils.py
@@ -291,28 +291,6 @@ def test_filter_json_empty_value(package_ahriman: Package) -> None:
    assert "base" not in filter_json(probe, probe.keys())


-def test_filter_json_nested() -> None:
-    """
-    must recursively filter None values from nested dicts
-    """
-    assert filter_json({"a": {"b": None, "c": 1}}) == {"a": {"c": 1}}
-
-
-def test_filter_json_list() -> None:
-    """
-    must recursively filter None values inside lists
-    """
-    assert filter_json([{"a": 1, "b": None}]) == [{"a": 1}]
-
-
-def test_filter_json_scalar() -> None:
-    """
-    must pass through scalar values unchanged
-    """
-    assert filter_json("scalar") == "scalar"
-    assert filter_json(42) == 42
-
-
 def test_full_version() -> None:
    """
    must construct full version
@@ -605,7 +583,7 @@ def test_walk(resource_path_root: Path) -> None:
        resource_path_root / "web" / "templates" / "utils" / "style.jinja2",
        resource_path_root / "web" / "templates" / "api.jinja2",
        resource_path_root / "web" / "templates" / "build-status.jinja2",
-        resource_path_root / "web" / "templates" / "build-status-classic.jinja2",
+        resource_path_root / "web" / "templates" / "build-status-legacy.jinja2",
        resource_path_root / "web" / "templates" / "email-index.jinja2",
        resource_path_root / "web" / "templates" / "error.jinja2",
        resource_path_root / "web" / "templates" / "repo-index.jinja2",