migrate to hatch

Even though it is not a case in the application, the interface could be
used externally

.github/workflows/docker.yml

@@ -26,6 +26,10 @@ jobs:
 
       - uses: docker/setup-buildx-action@v3
 
+      - name: Set image date
+        id: args
+        run: echo "::set-output name=date::$(date -d yesterday +'%Y-%m-%d')"
+
       - name: Login to docker hub
         uses: docker/login-action@v3
         with:
@@ -53,6 +57,8 @@ jobs:
       - name: Build an image and push
         uses: docker/build-push-action@v6
         with:
+          build-args: |
+            BUILD_DATE=${{ steps.args.outputs.date }}
           file: docker/Dockerfile
           push: true
           tags: ${{ steps.meta.outputs.tags }}

.github/workflows/setup.sh

@@ -12,11 +12,11 @@ pacman -Syyu --noconfirm
 # main dependencies
 pacman -S --noconfirm devtools git npm pyalpm python-bcrypt python-filelock python-inflection python-pyelftools python-requests python-systemd sudo
 # make dependencies
-pacman -S --noconfirm --asdeps base-devel python-build python-flit python-installer python-tox python-wheel
+pacman -S --noconfirm --asdeps base-devel python-build python-hatchling python-installer python-tox python-wheel
 # optional dependencies
 if [[ -z $MINIMAL_INSTALL ]]; then
     # web server
-    pacman -S --noconfirm python-aioauth-client python-aiohttp python-aiohttp-apispec-git python-aiohttp-cors python-aiohttp-jinja2 python-aiohttp-security python-aiohttp-session python-cryptography python-jinja
+    pacman -S --noconfirm python-aioauth-client python-aiohttp python-aiohttp-apispec-git python-aiohttp-cors python-aiohttp-jinja2 python-aiohttp-security python-aiohttp-session python-aiohttp-sse-git python-cryptography python-jinja
     # additional features
     pacman -S --noconfirm gnupg ipython python-boto3 python-cerberus python-matplotlib rsync
 fi

.readthedocs.yml

@@ -1,9 +1,9 @@
 version: 2
 
 build:
-  os: ubuntu-20.04
+  os: ubuntu-lts-latest
   tools:
-    python: "3.12"
+    python: "3.13"
   apt_packages:
     - graphviz
 

docker/Dockerfile

@@ -1,13 +1,15 @@
 # build image
 FROM archlinux:base AS build
 
+ARG BUILD_DATE
+
 # install environment
 ## create build user
 RUN useradd -m -d "/home/build" -s "/usr/bin/nologin" build
 
 ## extract container creation date and set mirror for this timestamp, set PKGEXT and refresh database next
-RUN echo "Server = https://archive.archlinux.org/repos/$(stat -c "%y" "/var/lib/pacman" | cut -d " " -f 1 | sed "s,-,/,g")/\$repo/os/\$arch" > "/etc/pacman.d/mirrorlist" && \
+RUN echo "Server = https://archive.archlinux.org/repos/${BUILD_DATE//-/\/}/\$repo/os/\$arch" > "/etc/pacman.d/mirrorlist" && \
-    pacman -Sy
+    pacman -Syyuu --noconfirm
 ## setup package cache
 RUN runuser -u build -- mkdir "/tmp/pkg" && \
     echo "PKGDEST=/tmp/pkg" >> "/etc/makepkg.conf" && \
@@ -29,17 +31,16 @@ RUN pacman -S --noconfirm --asdeps \
         python-filelock \
         python-inflection \
         python-pyelftools \
-        python-requests \
+        python-requests
-        && \
+RUN pacman -S --noconfirm --asdeps \
-    pacman -S --noconfirm --asdeps \
         base-devel \
         python-build \
-        python-flit \
+        python-hatchling \
         python-installer \
+        python-setuptools \
         python-tox \
-        python-wheel \
+        python-wheel
-        && \
+RUN pacman -S --noconfirm --asdeps \
-    pacman -S --noconfirm --asdeps \
         git \
         python-aiohttp \
         python-aiohttp-openmetrics \
@@ -48,9 +49,8 @@ RUN pacman -S --noconfirm --asdeps \
         python-cryptography \
         python-jinja \
         python-systemd \
-        rsync \
+        rsync
-        && \
+RUN runuser -u build -- install-aur-package \
-    runuser -u build -- install-aur-package \
         python-aioauth-client \
         python-sphinx-typlog-theme \
         python-webargs \
@@ -59,6 +59,7 @@ RUN pacman -S --noconfirm --asdeps \
         python-aiohttp-jinja2 \
         python-aiohttp-session \
         python-aiohttp-security \
+        python-aiohttp-sse-git \
         python-requests-unixsocket2
 
 # install ahriman
@@ -109,7 +110,7 @@ RUN cp "/etc/pacman.d/mirrorlist" "/etc/pacman.d/mirrorlist.orig" && \
     echo "Server = file:///var/cache/pacman/pkg" > "/etc/pacman.d/mirrorlist" && \
     cp "/etc/pacman.conf" "/etc/pacman.conf.orig" && \
     sed -i "s/SigLevel *=.*/SigLevel = Optional/g" "/etc/pacman.conf" && \
-    pacman -Sy
+    pacman -Syyuu --noconfirm
 ## install package and its optional dependencies
 RUN pacman -S --noconfirm ahriman
 RUN pacman -S --noconfirm --asdeps \

docker/install-aur-package.sh

@@ -7,8 +7,10 @@ for PACKAGE in "$@"; do
     # clone the remote source
     git clone https://aur.archlinux.org/"$PACKAGE".git "$BUILD_DIR"
     cd "$BUILD_DIR"
+    # FIXME monkey patch PKGBUILD for python
+    sed -i 's/python -m build/python -m build --skip-dependency-check/g' "PKGBUILD"
     # checkout to the image date
-    git checkout "$(git rev-list -1 --before="$(stat -c "%y" "/var/lib/pacman" | cut -d " " -f 1)" master)"
+    git checkout "$(git rev-list -1 --before="$BUILD_DATE" master)"
     # build and install the package
     makepkg --nocheck --noconfirm --install --rmdeps --syncdeps
     cd /

docs/ahriman.application.handlers.rst

@@ -164,6 +164,14 @@ ahriman.application.handlers.restore module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.application.handlers.rollback module
+--------------------------------------------
+
+.. automodule:: ahriman.application.handlers.rollback
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.application.handlers.run module
 ---------------------------------------
 

docs/ahriman.core.status.rst

@@ -12,6 +12,14 @@ ahriman.core.status.client module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.core.status.event\_bus module
+-------------------------------------
+
+.. automodule:: ahriman.core.status.event_bus
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.core.status.local\_client module
 ----------------------------------------
 

docs/ahriman.web.middlewares.rst

@@ -12,6 +12,14 @@ ahriman.web.middlewares.auth\_handler module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.web.middlewares.etag\_handler module
+--------------------------------------------
+
+.. automodule:: ahriman.web.middlewares.etag_handler
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.web.middlewares.exception\_handler module
 -------------------------------------------------
 

docs/ahriman.web.schemas.rst

@@ -92,6 +92,14 @@ ahriman.web.schemas.error\_schema module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.web.schemas.event\_bus\_filter\_schema module
+-----------------------------------------------------
+
+.. automodule:: ahriman.web.schemas.event_bus_filter_schema
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.web.schemas.event\_schema module
 ----------------------------------------
 
@@ -252,6 +260,14 @@ ahriman.web.schemas.package\_version\_schema module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.web.schemas.packager\_schema module
+-------------------------------------------
+
+.. automodule:: ahriman.web.schemas.packager_schema
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.web.schemas.pagination\_schema module
 ---------------------------------------------
 
@@ -332,6 +348,14 @@ ahriman.web.schemas.repository\_stats\_schema module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.web.schemas.rollback\_schema module
+-------------------------------------------
+
+.. automodule:: ahriman.web.schemas.rollback_schema
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.web.schemas.search\_schema module
 -----------------------------------------
 
@@ -340,6 +364,14 @@ ahriman.web.schemas.search\_schema module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.web.schemas.sse\_schema module
+--------------------------------------
+
+.. automodule:: ahriman.web.schemas.sse_schema
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.web.schemas.status\_schema module
 -----------------------------------------
 

docs/ahriman.web.views.v1.auditlog.rst

@@ -4,6 +4,14 @@ ahriman.web.views.v1.auditlog package
 Submodules
 ----------
 
+ahriman.web.views.v1.auditlog.event\_bus module
+-----------------------------------------------
+
+.. automodule:: ahriman.web.views.v1.auditlog.event_bus
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.web.views.v1.auditlog.events module
 -------------------------------------------
 

docs/ahriman.web.views.v1.service.rst

@@ -68,6 +68,14 @@ ahriman.web.views.v1.service.request module
    :no-undoc-members:
    :show-inheritance:
 
+ahriman.web.views.v1.service.rollback module
+--------------------------------------------
+
+.. automodule:: ahriman.web.views.v1.service.rollback
+   :members:
+   :no-undoc-members:
+   :show-inheritance:
+
 ahriman.web.views.v1.service.search module
 ------------------------------------------
 

docs/architecture.rst

@@ -235,6 +235,18 @@ Remove packages
 
 This flow removes package from filesystem, updates repository database and also runs synchronization and reporting methods.
 
+Rollback packages
+^^^^^^^^^^^^^^^^^
+
+This flow restores a package to a previously built version:
+
+#. Load the current package definition from the repository database.
+#. Replace its version with the requested rollback target.
+#. Search the archive directory for built artifacts (packages and signatures) matching the target version.
+#. Add the found artifacts to the repository via the same path as ``package-add`` with ``PackageSource.Archive``.
+#. Trigger an immediate update to process the added packages.
+#. If ``--hold`` is enabled (the default), mark the package as held in the database to prevent automatic updates from overriding the rollback.
+
 Check outdated packages
 ^^^^^^^^^^^^^^^^^^^^^^^
 

docs/configuration.rst

@@ -180,10 +180,15 @@ Web server settings. This feature requires ``aiohttp`` libraries to be installed
 
 * ``address`` - optional address in form ``proto://host:port`` (``port`` can be omitted in case of default ``proto`` ports), will be used instead of ``http://{host}:{port}`` in case if set, string, optional. This option is required in case if ``OAuth`` provider is used.
 * ``autorefresh_intervals`` - enable page auto refresh options, space separated list of integers, optional. The first defined interval will be used as default. If no intervals set, the auto refresh buttons will be disabled. If first element of the list equals ``0``, auto refresh will be disabled by default.
+* ``cors_allow_headers`` - allowed CORS headers, space separated list of strings, optional.
+* ``cors_allow_methods`` - allowed CORS methods, space separated list of strings, optional.
+* ``cors_allow_origins`` - allowed CORS origins, space separated list of strings, optional, default ``*``.
+* ``cors_expose_headers`` - exposed CORS headers, space separated list of strings, optional.
 * ``enable_archive_upload`` - allow to upload packages via HTTP (i.e. call of ``/api/v1/service/upload`` uri), boolean, optional, default ``no``.
 * ``host`` - host to bind, string, optional.
 * ``index_url`` - full URL of the repository index page, string, optional.
 * ``max_body_size`` - max body size in bytes to be validated for archive upload, integer, optional. If not set, validation will be disabled.
+* ``max_queue_size`` - max queue size for server sent event streams, integer, optional, default ``0``. If set to ``0``, queue is unlimited.
 * ``port`` - port to bind, integer, optional.
 * ``service_only`` - disable status routes (including logs), boolean, optional, default ``no``.
 * ``static_path`` - path to directory with static files, string, required.
@@ -191,7 +196,7 @@ Web server settings. This feature requires ``aiohttp`` libraries to be installed
 * ``templates`` - path to templates directories, space separated list of paths, required.
 * ``unix_socket`` - path to the listening unix socket, string, optional. If set, server will create the socket on the specified address which can (and will) be used by application. Note, that unlike usual host/port configuration, unix socket allows to perform requests without authorization.
 * ``unix_socket_unsafe`` - set unsafe (o+w) permissions to unix socket, boolean, optional, default ``yes``. This option is enabled by default, because it is supposed that unix socket is created in safe environment (only web service is supposed to be used in unsafe), but it can be disabled by configuration.
-* ``wait_timeout`` - wait timeout in seconds, maximum amount of time to be waited before lock will be free, integer, optional.
+* ``wait_timeout`` - wait timeout in seconds, maximum amount of time to be waited before lock will be free, integer, optional. If set to ``0``, wait infinitely.
 
 ``archive`` group
 -----------------

docs/faq/backup.rst

@@ -33,3 +33,28 @@ The service provides several commands aim to do easy repository backup and resto
    .. code-block:: shell
 
       sudo -u ahriman ahriman repo-rebuild --from-database
+
+Package rollback
+================
+
+If the ``archive.keep_built_packages`` option is enabled, the service keeps previously built package files in the archive directory. These archives can be used to rollback a package to a previous successfully built version.
+
+#.
+   List available archive versions for a package:
+
+   .. code-block:: shell
+
+      ahriman package-archives ahriman
+
+#.
+   Rollback the package to the desired version:
+
+   .. code-block:: shell
+
+      sudo -u ahriman ahriman package-rollback ahriman 2.19.0-1
+
+   By default, the ``--hold`` flag is enabled, which prevents the package from being automatically updated on subsequent ``repo-update`` runs. To rollback without holding the package use:
+
+   .. code-block:: shell
+
+      sudo -u ahriman ahriman package-rollback ahriman 2.19.0-1 --no-hold

docs/requirements.txt

@@ -7,10 +7,13 @@ aiohttp==3.11.18
     #   ahriman (pyproject.toml)
     #   aiohttp-cors
     #   aiohttp-jinja2
+    #   aiohttp-sse
 aiohttp-cors==0.8.1
     # via ahriman (pyproject.toml)
 aiohttp-jinja2==1.6
     # via ahriman (pyproject.toml)
+aiohttp-sse==2.2.0
+    # via ahriman (pyproject.toml)
 aiosignal==1.3.2
     # via aiohttp
 alabaster==1.0.0

frontend/eslint.config.js

@@ -1,5 +1,6 @@
 import js from "@eslint/js";
 import stylistic from "@stylistic/eslint-plugin";
+import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import simpleImportSort from "eslint-plugin-simple-import-sort";
@@ -8,7 +9,11 @@ import tseslint from "typescript-eslint";
 export default tseslint.config(
     { ignores: ["dist"] },
     {
-        extends: [js.configs.recommended, ...tseslint.configs.recommendedTypeChecked],
+        extends: [
+            js.configs.recommended,
+            react.configs.flat.recommended,
+            ...tseslint.configs.recommendedTypeChecked,
+        ],
         files: ["src/**/*.{ts,tsx}"],
         languageOptions: {
             parserOptions: {
@@ -17,13 +22,14 @@ export default tseslint.config(
             },
         },
         plugins: {
+            "@stylistic": stylistic,
             "react-hooks": reactHooks,
             "react-refresh": reactRefresh,
             "simple-import-sort": simpleImportSort,
-            "@stylistic": stylistic,
         },
         rules: {
             ...reactHooks.configs.recommended.rules,
+            "react/react-in-jsx-scope": "off",
             "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
 
             // imports
@@ -33,7 +39,7 @@ export default tseslint.config(
             // core
             "curly": "error",
             "eqeqeq": "error",
-            "no-console": "error",
+            "no-console": ["warn", { allow: ["warn", "error"] }],
             "no-eval": "error",
 
             // stylistic
@@ -68,6 +74,7 @@ export default tseslint.config(
             "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }],
             "@typescript-eslint/explicit-function-return-type": ["error", { allowExpressions: true }],
             "@typescript-eslint/no-deprecated": "error",
+            "@typescript-eslint/no-floating-promises": "error",
             "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
             "@typescript-eslint/prefer-nullish-coalescing": "error",
             "@typescript-eslint/prefer-optional-chain": "error",

frontend/package.json

@@ -1,8 +1,36 @@
 {
+    "dependencies": {
+        "@emotion/react": ">=11.14.0 <11.15.0",
+        "@emotion/styled": ">=11.14.0 <11.15.0",
+        "@mui/icons-material": ">=7.3.0 <7.4.0",
+        "@mui/material": ">=7.3.0 <7.4.0",
+        "@mui/x-data-grid": ">=8.28.0 <8.29.0",
+        "@tanstack/react-query": ">=5.101.0 <5.102.0",
+        "chart.js": ">=4.5.0 <4.6.0",
+        "react": ">=19.2.0 <19.3.0",
+        "react-chartjs-2": ">=5.3.0 <5.4.0",
+        "react-dom": ">=19.2.0 <19.3.0",
+        "react-error-boundary": ">=6.1.0 <6.2.0",
+        "react-syntax-highlighter": ">=16.1.0 <16.2.0"
+    },
+    "devDependencies": {
+        "@eslint/js": ">=9.39.0 <9.40.0",
+        "@stylistic/eslint-plugin": ">=5.10.0 <5.11.0",
+        "@types/react": ">=19.2.0 <19.3.0",
+        "@types/react-dom": ">=19.2.0 <19.3.0",
+        "@types/react-syntax-highlighter": ">=15.5.0 <15.6.0",
+        "@vitejs/plugin-react": ">=6.0.0 <6.1.0",
+        "eslint": ">=9.39.0 <9.40.0",
+        "eslint-plugin-react": ">=7.37.0 <7.38.0",
+        "eslint-plugin-react-hooks": ">=7.1.0 <7.2.0",
+        "eslint-plugin-react-refresh": ">=0.5.0 <0.6.0",
+        "eslint-plugin-simple-import-sort": ">=12.1.0 <12.2.0",
+        "typescript": ">=5.9.0 <5.10.0",
+        "typescript-eslint": ">=8.57.0 <8.58.0",
+        "vite": ">=8.1.0 <8.2.0"
+    },
     "name": "ahriman-frontend",
     "private": true,
-    "type": "module",
-    "version": "2.20.0",
     "scripts": {
         "build": "tsc && vite build",
         "dev": "vite",
@@ -10,32 +38,6 @@
         "lint:fix": "eslint --fix src/",
         "preview": "vite preview"
     },
-    "dependencies": {
+    "type": "module",
-        "@emotion/react": "^11.14.0",
+    "version": "2.20.0"
-        "@emotion/styled": "^11.14.1",
-        "@mui/icons-material": "^7.3.9",
-        "@mui/material": "^7.3.9",
-        "@mui/x-data-grid": "^8.27.4",
-        "@tanstack/react-query": "^5.90.21",
-        "chart.js": "^4.5.1",
-        "react": "^19.2.4",
-        "react-chartjs-2": "^5.3.1",
-        "react-dom": "^19.2.4",
-        "react-syntax-highlighter": "^16.1.1"
-    },
-    "devDependencies": {
-        "@eslint/js": "^9.39.3",
-        "@stylistic/eslint-plugin": "^5.10.0",
-        "@types/react": "^19.2.14",
-        "@types/react-dom": "^19.2.3",
-        "@types/react-syntax-highlighter": "^15.5.13",
-        "@vitejs/plugin-react": "^6.0.1",
-        "eslint": "^9.39.3",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.5.2",
-        "eslint-plugin-simple-import-sort": "^12.1.1",
-        "typescript": "^5.9.3",
-        "typescript-eslint": "^8.56.1",
-        "vite": "^8.0.0"
-    }
 }

frontend/src/App.tsx

@@ -21,6 +21,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import AppLayout from "components/layout/AppLayout";
 import { AuthProvider } from "contexts/AuthProvider";
 import { ClientProvider } from "contexts/ClientProvider";
+import { EventStreamProvider } from "contexts/EventStreamProvider";
 import { NotificationProvider } from "contexts/NotificationProvider";
 import { RepositoryProvider } from "contexts/RepositoryProvider";
 import { ThemeProvider } from "contexts/ThemeProvider";
@@ -29,7 +30,6 @@ import type React from "react";
 const queryClient = new QueryClient({
     defaultOptions: {
         queries: {
-            staleTime: 30_000,
             retry: 1,
         },
     },
@@ -42,7 +42,9 @@ export default function App(): React.JSX.Element {
                 <ClientProvider>
                     <AuthProvider>
                         <RepositoryProvider>
-                            <AppLayout />
+                            <EventStreamProvider>
+                                <AppLayout />
+                            </EventStreamProvider>
                         </RepositoryProvider>
                     </AuthProvider>
                 </ClientProvider>

frontend/src/api/client/ApiError.ts

@@ -18,9 +18,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 export class ApiError extends Error {
+
+    body: string;
     status: number;
     statusText: string;
-    body: string;
 
     constructor(status: number, statusText: string, body: string) {
         super(`${status} ${statusText}`);

frontend/src/api/client/FetchClient.ts

@@ -24,6 +24,7 @@ import type { Event } from "models/Event";
 import type { InfoResponse } from "models/InfoResponse";
 import type { InternalStatus } from "models/InternalStatus";
 import type { LogRecord } from "models/LogRecord";
+import type { Package } from "models/Package";
 import type { PackageStatus } from "models/PackageStatus";
 import type { Patch } from "models/Patch";
 import { RepositoryId } from "models/RepositoryId";
@@ -42,6 +43,12 @@ export class FetchClient {
         });
     }
 
+    async fetchPackageArtifacts(packageBase: string, repository: RepositoryId): Promise<Package[]> {
+        return this.client.request<Package[]>(`/api/v1/packages/${encodeURIComponent(packageBase)}/archives`, {
+            query: repository.toQuery(),
+        });
+    }
+
     async fetchPackageChanges(packageBase: string, repository: RepositoryId): Promise<Changes> {
         return this.client.request<Changes>(`/api/v1/packages/${encodeURIComponent(packageBase)}/changes`, {
             query: repository.toQuery(),

frontend/src/api/client/RequestOptions.ts

@@ -18,8 +18,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 export interface RequestOptions {
+    json?: unknown;
     method?: string;
     query?: Record<string, string | number | boolean>;
-    json?: unknown;
     timeout?: number;
 }

frontend/src/api/client/ServiceClient.ts

@@ -23,6 +23,7 @@ import type { PackageActionRequest } from "models/PackageActionRequest";
 import type { PGPKey } from "models/PGPKey";
 import type { PGPKeyRequest } from "models/PGPKeyRequest";
 import type { RepositoryId } from "models/RepositoryId";
+import type { RollbackRequest } from "models/RollbackRequest";
 
 export class ServiceClient {
 
@@ -36,6 +37,14 @@ export class ServiceClient {
         return this.client.request("/api/v1/service/add", { method: "POST", query: repository.toQuery(), json: data });
     }
 
+    async servicePackageHold(packageBase: string, repository: RepositoryId, isHeld: boolean): Promise<void> {
+        return this.client.request(`/api/v1/packages/${encodeURIComponent(packageBase)}/hold`, {
+            method: "POST",
+            query: repository.toQuery(),
+            json: { is_held: isHeld },
+        });
+    }
+
     async servicePackagePatchRemove(packageBase: string, key: string): Promise<void> {
         return this.client.request(`/api/v1/packages/${encodeURIComponent(packageBase)}/patches/${encodeURIComponent(key)}`, {
             method: "DELETE",
@@ -58,6 +67,14 @@ export class ServiceClient {
         });
     }
 
+    async servicePackageRollback(repository: RepositoryId, data: RollbackRequest): Promise<void> {
+        return this.client.request("/api/v1/service/rollback", {
+            method: "POST",
+            query: repository.toQuery(),
+            json: data,
+        });
+    }
+
     async servicePackageSearch(query: string): Promise<AURPackage[]> {
         return this.client.request<AURPackage[]>("/api/v1/service/search", { query: { for: query } });
     }
@@ -78,14 +95,6 @@ export class ServiceClient {
         return this.client.request("/api/v1/service/pgp", { method: "POST", json: data });
     }
 
-    async servicePackageHoldUpdate(packageBase: string, repository: RepositoryId, isHeld: boolean): Promise<void> {
-        return this.client.request(`/api/v1/packages/${encodeURIComponent(packageBase)}/hold`, {
-            method: "POST",
-            query: repository.toQuery(),
-            json: { is_held: isHeld },
-        });
-    }
-
     async serviceRebuild(repository: RepositoryId, packages: string[]): Promise<void> {
         return this.client.request("/api/v1/service/rebuild", {
             method: "POST",

frontend/src/components/charts/EventDurationLineChart.tsx

@@ -32,11 +32,11 @@ export default function EventDurationLineChart({ events }: EventDurationLineChar
         labels: updateEvents.map(event => new Date(event.created * 1000).toISOStringShort()),
         datasets: [
             {
-                label: "update duration, s",
-                data: updateEvents.map(event => event.data?.took ?? 0),
-                borderColor: blue[500],
                 backgroundColor: blue[200],
+                borderColor: blue[500],
                 cubicInterpolationMode: "monotone" as const,
+                data: updateEvents.map(event => event.data?.took ?? 0),
+                label: "update duration, s",
                 tension: 0.4,
             },
         ],

frontend/src/components/charts/PackageCountBarChart.tsx

@@ -29,19 +29,19 @@ interface PackageCountBarChartProps {
 export default function PackageCountBarChart({ stats }: PackageCountBarChartProps): React.JSX.Element {
     return <Bar
         data={{
-            labels: ["packages"],
             datasets: [
                 {
-                    label: "bases",
-                    data: [stats.bases ?? 0],
                     backgroundColor: indigo[300],
+                    data: [stats.bases ?? 0],
+                    label: "bases",
                 },
                 {
-                    label: "archives",
-                    data: [stats.packages ?? 0],
                     backgroundColor: blue[500],
+                    data: [stats.packages ?? 0],
+                    label: "archives",
                 },
             ],
+            labels: ["packages"],
         }}
         options={{
             maintainAspectRatio: false,

frontend/src/components/charts/StatusPieChart.tsx

@@ -30,14 +30,14 @@ interface StatusPieChartProps {
 export default function StatusPieChart({ counters }: StatusPieChartProps): React.JSX.Element {
     const labels = ["unknown", "pending", "building", "failed", "success"] as BuildStatus[];
     const data = {
-        labels: labels,
         datasets: [
             {
-                label: "packages in status",
-                data: labels.map(label => counters[label]),
                 backgroundColor: labels.map(label => StatusColors[label]),
+                data: labels.map(label => counters[label]),
+                label: "packages in status",
             },
         ],
+        labels: labels,
     };
 
     return <Pie data={data} options={{ responsive: true }} />;

frontend/src/components/common/AutoRefreshControl.tsx

@@ -1,91 +0,0 @@
-/*
- * 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 CheckIcon from "@mui/icons-material/Check";
-import TimerIcon from "@mui/icons-material/Timer";
-import TimerOffIcon from "@mui/icons-material/TimerOff";
-import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from "@mui/material";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
-import React, { useState } from "react";
-
-interface AutoRefreshControlProps {
-    intervals: AutoRefreshInterval[];
-    currentInterval: number;
-    onIntervalChange: (interval: number) => void;
-}
-
-export default function AutoRefreshControl({
-    intervals,
-    currentInterval,
-    onIntervalChange,
-}: AutoRefreshControlProps): React.JSX.Element | null {
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
-    if (intervals.length === 0) {
-        return null;
-    }
-
-    const enabled = currentInterval > 0;
-
-    return <>
-        <Tooltip title="Auto-refresh">
-            <IconButton
-                size="small"
-                aria-label="Auto-refresh"
-                onClick={event => setAnchorEl(event.currentTarget)}
-                color={enabled ? "primary" : "default"}
-            >
-                {enabled ? <TimerIcon fontSize="small" /> : <TimerOffIcon fontSize="small" />}
-            </IconButton>
-        </Tooltip>
-        <Menu
-            anchorEl={anchorEl}
-            open={Boolean(anchorEl)}
-            onClose={() => setAnchorEl(null)}
-        >
-            <MenuItem
-                selected={!enabled}
-                onClick={() => {
-                    onIntervalChange(0);
-                    setAnchorEl(null);
-                }}
-            >
-                <ListItemIcon>
-                    {!enabled && <CheckIcon fontSize="small" />}
-                </ListItemIcon>
-                <ListItemText>Off</ListItemText>
-            </MenuItem>
-            {intervals.map(interval =>
-                <MenuItem
-                    key={interval.interval}
-                    selected={enabled && interval.interval === currentInterval}
-                    onClick={() => {
-                        onIntervalChange(interval.interval);
-                        setAnchorEl(null);
-                    }}
-                >
-                    <ListItemIcon>
-                        {enabled && interval.interval === currentInterval && <CheckIcon fontSize="small" />}
-                    </ListItemIcon>
-                    <ListItemText>{interval.text}</ListItemText>
-                </MenuItem>,
-            )}
-        </Menu>
-    </>;
-}

frontend/src/components/common/CodeBlock.tsx

@@ -46,27 +46,24 @@ export default function CodeBlock({
 
     return <Box sx={{ position: "relative" }}>
         <Box
-            ref={preRef}
             onScroll={onScroll}
+            ref={preRef}
             sx={{ overflow: "auto", height }}
         >
             <SyntaxHighlighter
+                customStyle={{
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    fontSize: "0.8rem",
+                    padding: theme.spacing(2),
+                }}
                 language={language}
                 style={mode === "dark" ? vs2015 : githubGist}
                 wrapLongLines
-                customStyle={{
-                    padding: theme.spacing(2),
-                    borderRadius: `${theme.shape.borderRadius}px`,
-                    fontSize: "0.8rem",
-                    fontFamily: "monospace",
-                    margin: 0,
-                    minHeight: "100%",
-                }}
             >
                 {content}
             </SyntaxHighlighter>
         </Box>
-        {content && <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+        {content && <Box sx={{ position: "absolute", right: 8, top: 8 }}>
             <CopyButton text={content} />
         </Box>}
     </Box>;

frontend/src/components/common/CopyButton.tsx

@@ -40,7 +40,7 @@ export default function CopyButton({ text }: CopyButtonProps): React.JSX.Element
     };
 
     return <Tooltip title={copied ? "Copied!" : "Copy"}>
-        <IconButton size="small" aria-label={copied ? "Copied" : "Copy"} onClick={() => void handleCopy()}>
+        <IconButton aria-label={copied ? "Copied" : "Copy"} onClick={() => void handleCopy()} size="small">
             {copied ? <CheckIcon fontSize="small" /> : <ContentCopyIcon fontSize="small" />}
         </IconButton>
     </Tooltip>;

frontend/src/components/common/DialogHeader.tsx

@@ -28,7 +28,7 @@ interface DialogHeaderProps {
 }
 
 export default function DialogHeader({ children, onClose, sx }: DialogHeaderProps): React.JSX.Element {
-    return <DialogTitle sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", ...sx }}>
+    return <DialogTitle sx={{ alignItems: "center", display: "flex", justifyContent: "space-between", ...sx }}>
         {children}
         <IconButton aria-label="Close" onClick={onClose} size="small" sx={{ color: "inherit" }}>
             <CloseIcon />

frontend/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { Box, Button, Typography } from "@mui/material";
+import type React from "react";
+import type { FallbackProps } from "react-error-boundary";
+
+interface ErrorDetails {
+    message: string;
+    stack: string | undefined;
+}
+
+export default function ErrorFallback({ error }: FallbackProps): React.JSX.Element {
+
+    const details: ErrorDetails = error instanceof Error
+        ? { message: error.message, stack: error.stack }
+        : { message: String(error), stack: undefined };
+
+    return <Box role="alert" sx={{ color: "text.primary", minHeight: "100vh", p: 6 }}>
+        <Typography sx={{ fontWeight: 700 }} variant="h4">
+            Something went wrong
+        </Typography>
+
+        <Typography color="error" sx={{ fontFamily: "monospace", mt: 2 }}>
+            {details.message}
+        </Typography>
+
+        {details.stack && <Typography
+            component="pre"
+            sx={{ color: "text.secondary", fontFamily: "monospace", fontSize: "0.75rem", mt: 3, whiteSpace: "pre-wrap", wordBreak: "break-word" }}
+        >
+            {details.stack}
+        </Typography>}
+
+        <Box sx={{ display: "flex", gap: 2, mt: 4 }}>
+            <Button onClick={() => window.location.reload()} variant="outlined">Reload page</Button>
+        </Box>
+    </Box>;
+}

frontend/src/components/common/NotificationItem.tsx

@@ -35,12 +35,12 @@ export default function NotificationItem({ notification, onClose }: Notification
     }, []);
 
     return (
-        <Slide direction="down" in={show} mountOnEnter unmountOnExit onExited={() => onClose(notification.id)}>
+        <Slide direction="down" in={show} mountOnEnter onExited={() => onClose(notification.id)} unmountOnExit>
             <Alert
                 onClose={() => setShow(false)}
                 severity={notification.severity}
-                variant="filled"
                 sx={{ width: "100%", pointerEvents: "auto" }}
+                variant="filled"
             >
                 <strong>{notification.title}</strong>
                 {notification.message && ` - ${notification.message}`}

frontend/src/components/common/RepositorySelect.tsx

@@ -30,9 +30,9 @@ export default function RepositorySelect({
     return <FormControl fullWidth margin="normal">
         <InputLabel>repository</InputLabel>
         <Select
-            value={repositorySelect.selectedKey || (currentRepository?.key ?? "")}
             label="repository"
             onChange={event => repositorySelect.setSelectedKey(event.target.value)}
+            value={repositorySelect.selectedKey || (currentRepository?.key ?? "")}
         >
             {repositories.map(repository =>
                 <MenuItem key={repository.key} value={repository.key}>

frontend/src/components/dialogs/DashboardDialog.tsx

@@ -30,23 +30,23 @@ import type React from "react";
 import { StatusHeaderStyles } from "theme/StatusColors";
 
 interface DashboardDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function DashboardDialog({ open, onClose }: DashboardDialogProps): React.JSX.Element {
+export default function DashboardDialog({ onClose, open }: DashboardDialogProps): React.JSX.Element {
     const client = useClient();
     const { currentRepository } = useRepository();
 
     const { data: status } = useQuery<InternalStatus>({
-        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
-        queryFn: currentRepository ? () => client.fetch.fetchServerStatus(currentRepository) : skipToken,
         enabled: open,
+        queryFn: currentRepository ? () => client.fetch.fetchServerStatus(currentRepository) : skipToken,
+        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
     });
 
     const headerStyle = status ? StatusHeaderStyles[status.status.status] : {};
 
-    return <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+    return <Dialog fullWidth maxWidth="lg" onClose={onClose} open={open}>
         <DialogHeader onClose={onClose} sx={headerStyle}>
             System health
         </DialogHeader>
@@ -55,43 +55,43 @@ export default function DashboardDialog({ open, onClose }: DashboardDialogProps)
             {status &&
                 <>
                     <Grid container spacing={2} sx={{ mt: 1 }}>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Repository name</Typography>
+                            <Typography align="right" color="text.secondary" variant="body2">Repository name</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{status.repository}</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Repository architecture</Typography>
+                            <Typography align="right" color="text.secondary" variant="body2">Repository architecture</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{status.architecture}</Typography>
                         </Grid>
                     </Grid>
 
                     <Grid container spacing={2} sx={{ mt: 1 }}>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Current status</Typography>
+                            <Typography align="right" color="text.secondary" variant="body2">Current status</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{status.status.status}</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Updated at</Typography>
+                            <Typography align="right" color="text.secondary" variant="body2">Updated at</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{new Date(status.status.timestamp * 1000).toISOStringShort()}</Typography>
                         </Grid>
                     </Grid>
 
                     <Grid container spacing={2} sx={{ mt: 2 }}>
-                        <Grid size={{ xs: 12, md: 6 }}>
+                        <Grid size={{ md: 6, xs: 12 }}>
                             <Box sx={{ height: 300 }}>
                                 <PackageCountBarChart stats={status.stats} />
                             </Box>
                         </Grid>
-                        <Grid size={{ xs: 12, md: 6 }}>
+                        <Grid size={{ md: 6, xs: 12 }}>
-                            <Box sx={{ height: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
+                            <Box sx={{ alignItems: "center", display: "flex", height: 300, justifyContent: "center" }}>
                                 <StatusPieChart counters={status.packages} />
                             </Box>
                         </Grid>

frontend/src/components/dialogs/KeyImportDialog.tsx

@@ -35,11 +35,11 @@ import { useNotification } from "hooks/useNotification";
 import React, { useState } from "react";
 
 interface KeyImportDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps): React.JSX.Element {
+export default function KeyImportDialog({ onClose, open }: KeyImportDialogProps): React.JSX.Element {
     const client = useClient();
     const { showSuccess, showError } = useNotification();
 
@@ -54,7 +54,7 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
         onClose();
     };
 
-    const handleFetch: () => Promise<void> = async () => {
+    const handleFetch = async (): Promise<void> => {
         if (!fingerprint || !server) {
             return;
         }
@@ -67,7 +67,7 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
         }
     };
 
-    const handleImport: () => Promise<void> = async () => {
+    const handleImport = async (): Promise<void> => {
         if (!fingerprint || !server) {
             return;
         }
@@ -81,38 +81,38 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
+    return <Dialog fullWidth maxWidth="lg" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Import key from PGP server
         </DialogHeader>
 
         <DialogContent>
             <TextField
-                label="fingerprint"
-                placeholder="PGP key fingerprint"
                 fullWidth
+                label="fingerprint"
                 margin="normal"
-                value={fingerprint}
                 onChange={event => setFingerprint(event.target.value)}
+                placeholder="PGP key fingerprint"
+                value={fingerprint}
             />
             <TextField
-                label="key server"
-                placeholder="PGP key server"
                 fullWidth
+                label="key server"
                 margin="normal"
-                value={server}
                 onChange={event => setServer(event.target.value)}
+                placeholder="PGP key server"
+                value={server}
             />
             {keyBody &&
                 <Box sx={{ mt: 2 }}>
-                    <CodeBlock content={keyBody} height={300} />
+                    <CodeBlock height={300} content={keyBody} />
                 </Box>
             }
         </DialogContent>
 
         <DialogActions>
-            <Button onClick={() => void handleImport()} variant="contained" startIcon={<PlayArrowIcon />}>import</Button>
+            <Button onClick={() => void handleImport()} startIcon={<PlayArrowIcon />} variant="contained">import</Button>
-            <Button onClick={() => void handleFetch()} variant="contained" color="success" startIcon={<RefreshIcon />}>fetch</Button>
+            <Button color="success" onClick={() => void handleFetch()} startIcon={<RefreshIcon />} variant="contained">fetch</Button>
         </DialogActions>
     </Dialog>;
 }

frontend/src/components/dialogs/LoginDialog.tsx

@@ -36,11 +36,11 @@ import { useNotification } from "hooks/useNotification";
 import React, { useState } from "react";
 
 interface LoginDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function LoginDialog({ open, onClose }: LoginDialogProps): React.JSX.Element {
+export default function LoginDialog({ onClose, open }: LoginDialogProps): React.JSX.Element {
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
     const [showPassword, setShowPassword] = useState(false);
@@ -54,7 +54,7 @@ export default function LoginDialog({ open, onClose }: LoginDialogProps): React.
         onClose();
     };
 
-    const handleSubmit: () => Promise<void> = async () => {
+    const handleSubmit = async (): Promise<void> => {
         if (!username || !password) {
             return;
         }
@@ -72,26 +72,24 @@ export default function LoginDialog({ open, onClose }: LoginDialogProps): React.
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="xs" fullWidth>
+    return <Dialog fullWidth maxWidth="xs" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Login
         </DialogHeader>
 
         <DialogContent>
             <TextField
-                label="username"
-                fullWidth
-                margin="normal"
-                value={username}
-                onChange={event => setUsername(event.target.value)}
                 autoFocus
+                fullWidth
+                label="username"
+                margin="normal"
+                onChange={event => setUsername(event.target.value)}
+                value={username}
             />
             <TextField
-                label="password"
                 fullWidth
+                label="password"
                 margin="normal"
-                type={showPassword ? "text" : "password"}
-                value={password}
                 onChange={event => setPassword(event.target.value)}
                 onKeyDown={event => {
                     if (event.key === "Enter") {
@@ -102,17 +100,24 @@ export default function LoginDialog({ open, onClose }: LoginDialogProps): React.
                     input: {
                         endAdornment:
                             <InputAdornment position="end">
-                                <IconButton aria-label={showPassword ? "Hide password" : "Show password"} onClick={() => setShowPassword(!showPassword)} edge="end" size="small">
+                                <IconButton
+                                    aria-label={showPassword ? "Hide password" : "Show password"}
+                                    edge="end"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    size="small"
+                                >
                                     {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
                                 </IconButton>
                             </InputAdornment>,
                     },
                 }}
+                type={showPassword ? "text" : "password"}
+                value={password}
             />
         </DialogContent>
 
         <DialogActions>
-            <Button onClick={() => void handleSubmit()} variant="contained" startIcon={<PersonIcon />}>login</Button>
+            <Button onClick={() => void handleSubmit()} startIcon={<PersonIcon />} variant="contained">login</Button>
         </DialogActions>
     </Dialog>;
 }

frontend/src/components/dialogs/PackageAddDialog.tsx

@@ -52,11 +52,11 @@ interface EnvironmentVariable {
 }
 
 interface PackageAddDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function PackageAddDialog({ open, onClose }: PackageAddDialogProps): React.JSX.Element {
+export default function PackageAddDialog({ onClose, open }: PackageAddDialogProps): React.JSX.Element {
     const client = useClient();
     const { showSuccess, showError } = useNotification();
     const repositorySelect = useSelectedRepository();
@@ -77,9 +77,9 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
     const debouncedSearch = useDebounce(packageName, 500);
 
     const { data: searchResults = [] } = useQuery<AURPackage[]>({
-        queryKey: QueryKeys.search(debouncedSearch),
-        queryFn: () => client.service.servicePackageSearch(debouncedSearch),
         enabled: debouncedSearch.length >= 3,
+        queryFn: () => client.service.servicePackageSearch(debouncedSearch),
+        queryKey: QueryKeys.search(debouncedSearch),
     });
 
     const handleSubmit = async (action: "add" | "request"): Promise<void> => {
@@ -107,7 +107,7 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+    return <Dialog fullWidth maxWidth="md" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Add new packages
         </DialogHeader>
@@ -117,20 +117,18 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
 
             <Autocomplete
                 freeSolo
-                options={searchResults.map(pkg => pkg.package)}
                 inputValue={packageName}
                 onInputChange={(_, value) => setPackageName(value)}
+                options={searchResults.map(pkg => pkg.package)}
+                renderInput={params =>
+                    <TextField {...params} label="package" margin="normal" placeholder="AUR package" />
+                }
                 renderOption={(props, option) => {
                     const pkg = searchResults.find(pkg => pkg.package === option);
-                    return (
+                    return <li {...props} key={option}>
-                        <li {...props} key={option}>
+                        {option}{pkg ? ` (${pkg.description})` : ""}
-                            {option}{pkg ? ` (${pkg.description})` : ""}
+                    </li>;
-                        </li>
-                    );
                 }}
-                renderInput={params =>
-                    <TextField {...params} label="package" placeholder="AUR package" margin="normal" />
-                }
             />
 
             <FormControlLabel
@@ -140,45 +138,50 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
 
             <Button
                 fullWidth
-                variant="outlined"
-                startIcon={<AddIcon />}
                 onClick={() => {
                     const id = variableIdCounter.current++;
                     setEnvironmentVariables(prev => [...prev, { id, key: "", value: "" }]);
                 }}
+                startIcon={<AddIcon />}
                 sx={{ mt: 1 }}
+                variant="outlined"
             >
                 add environment variable
             </Button>
 
             {environmentVariables.map(variable =>
-                <Box key={variable.id} sx={{ display: "flex", gap: 1, mt: 1, alignItems: "center" }}>
+                <Box key={variable.id} sx={{ alignItems: "center", display: "flex", gap: 1, mt: 1 }}>
                     <TextField
-                        size="small"
-                        placeholder="name"
-                        value={variable.key}
                         onChange={event => {
                             const newKey = event.target.value;
                             setEnvironmentVariables(prev =>
                                 prev.map(entry => entry.id === variable.id ? { ...entry, key: newKey } : entry),
                             );
                         }}
+                        placeholder="name"
+                        size="small"
                         sx={{ flex: 1 }}
+                        value={variable.key}
                     />
                     <Box>=</Box>
                     <TextField
-                        size="small"
                         placeholder="value"
-                        value={variable.value}
                         onChange={event => {
                             const newValue = event.target.value;
                             setEnvironmentVariables(prev =>
                                 prev.map(entry => entry.id === variable.id ? { ...entry, value: newValue } : entry),
                             );
                         }}
+                        size="small"
                         sx={{ flex: 1 }}
+                        value={variable.value}
                     />
-                    <IconButton size="small" color="error" aria-label="Remove variable" onClick={() => setEnvironmentVariables(prev => prev.filter(entry => entry.id !== variable.id))}>
+                    <IconButton
+                        aria-label="Remove variable"
+                        color="error"
+                        onClick={() => setEnvironmentVariables(prev => prev.filter(entry => entry.id !== variable.id))}
+                        size="small"
+                    >
                         <DeleteIcon />
                     </IconButton>
                 </Box>,
@@ -186,8 +189,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("add")} startIcon={<PlayArrowIcon />} variant="contained">add</Button>
-            <Button onClick={() => void handleSubmit("request")} variant="contained" color="success" startIcon={<AddIcon />}>request</Button>
+            <Button color="success" onClick={() => void handleSubmit("request")} startIcon={<AddIcon />} variant="contained">request</Button>
         </DialogActions>
     </Dialog>;
 }

frontend/src/components/dialogs/PackageInfoDialog.tsx

@@ -21,6 +21,7 @@ import { Box, Dialog, DialogContent, Tab, Tabs } from "@mui/material";
 import { skipToken, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ApiError } from "api/client/ApiError";
 import DialogHeader from "components/common/DialogHeader";
+import ArtifactsTab from "components/package/ArtifactsTab";
 import BuildLogsTab from "components/package/BuildLogsTab";
 import ChangesTab from "components/package/ChangesTab";
 import EventsTab from "components/package/EventsTab";
@@ -31,30 +32,25 @@ import PkgbuildTab from "components/package/PkgbuildTab";
 import { type TabKey, tabs } from "components/package/TabKey";
 import { QueryKeys } from "hooks/QueryKeys";
 import { useAuth } from "hooks/useAuth";
-import { useAutoRefresh } from "hooks/useAutoRefresh";
 import { useClient } from "hooks/useClient";
 import { useNotification } from "hooks/useNotification";
 import { useRepository } from "hooks/useRepository";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import type { Dependencies } from "models/Dependencies";
 import type { PackageStatus } from "models/PackageStatus";
 import type { Patch } from "models/Patch";
 import React, { useState } from "react";
 import { StatusHeaderStyles } from "theme/StatusColors";
-import { defaultInterval } from "utils";
 
 interface PackageInfoDialogProps {
-    packageBase: string | null;
-    open: boolean;
     onClose: () => void;
-    autoRefreshIntervals: AutoRefreshInterval[];
+    open: boolean;
+    packageBase: string | null;
 }
 
 export default function PackageInfoDialog({
-    packageBase,
-    open,
     onClose,
-    autoRefreshIntervals,
+    open,
+    packageBase,
 }: PackageInfoDialogProps): React.JSX.Element {
     const client = useClient();
     const { currentRepository } = useRepository();
@@ -76,35 +72,32 @@ export default function PackageInfoDialog({
         onClose();
     };
 
-    const autoRefresh = useAutoRefresh("package-info-autoreload-button", defaultInterval(autoRefreshIntervals));
-
     const { data: packageData } = useQuery<PackageStatus[]>({
-        queryKey: localPackageBase && currentRepository ? QueryKeys.package(localPackageBase, currentRepository) : ["packages"],
+        enabled: open,
         queryFn: localPackageBase && currentRepository ?
             () => client.fetch.fetchPackage(localPackageBase, currentRepository) : skipToken,
-        enabled: open,
+        queryKey: localPackageBase && currentRepository ? QueryKeys.package(localPackageBase, currentRepository) : ["packages"],
-        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
     });
 
     const { data: dependencies } = useQuery<Dependencies>({
-        queryKey: localPackageBase && currentRepository ? QueryKeys.dependencies(localPackageBase, currentRepository) : ["dependencies"],
+        enabled: open,
         queryFn: localPackageBase && currentRepository ?
             () => client.fetch.fetchPackageDependencies(localPackageBase, currentRepository) : skipToken,
-        enabled: open,
+        queryKey: localPackageBase && currentRepository ? QueryKeys.dependencies(localPackageBase, currentRepository) : ["dependencies"],
     });
 
     const { data: patches = [] } = useQuery<Patch[]>({
-        queryKey: localPackageBase ? QueryKeys.patches(localPackageBase) : ["patches"],
-        queryFn: localPackageBase ? () => client.fetch.fetchPackagePatches(localPackageBase) : skipToken,
         enabled: open,
+        queryFn: localPackageBase ? () => client.fetch.fetchPackagePatches(localPackageBase) : skipToken,
+        queryKey: localPackageBase ? QueryKeys.patches(localPackageBase) : ["patches"],
     });
 
-    const description: PackageStatus | undefined = packageData?.[0];
+    const description = packageData?.[0];
     const pkg = description?.package;
     const status = description?.status;
     const headerStyle = status ? StatusHeaderStyles[status.status] : {};
 
-    const handleUpdate: () => Promise<void> = async () => {
+    const handleUpdate = async (): Promise<void> => {
         if (!localPackageBase || !currentRepository) {
             return;
         }
@@ -117,7 +110,7 @@ export default function PackageInfoDialog({
         }
     };
 
-    const handleRemove: () => Promise<void> = async () => {
+    const handleRemove = async (): Promise<void> => {
         if (!localPackageBase || !currentRepository) {
             return;
         }
@@ -130,20 +123,20 @@ export default function PackageInfoDialog({
         }
     };
 
-    const handleHoldToggle: () => Promise<void> = async () => {
+    const handleHoldToggle = async (): Promise<void> => {
         if (!localPackageBase || !currentRepository) {
             return;
         }
         try {
             const newHeldStatus = !(status?.is_held ?? false);
-            await client.service.servicePackageHoldUpdate(localPackageBase, currentRepository, newHeldStatus);
+            await client.service.servicePackageHold(localPackageBase, currentRepository, newHeldStatus);
             void queryClient.invalidateQueries({ queryKey: QueryKeys.package(localPackageBase, currentRepository) });
         } catch (exception) {
             showError("Action failed", `Could not update hold status: ${ApiError.errorDetail(exception)}`);
         }
     };
 
-    const handleDeletePatch: (key: string) => Promise<void> = async key => {
+    const handleDeletePatch = async (key: string): Promise<void> => {
         if (!localPackageBase) {
             return;
         }
@@ -155,7 +148,7 @@ export default function PackageInfoDialog({
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
+    return <Dialog fullWidth maxWidth="lg" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose} sx={headerStyle}>
             {pkg && status
                 ? `${pkg.base} ${status.status} at ${new Date(status.timestamp * 1000).toISOStringShort()}`
@@ -165,16 +158,16 @@ export default function PackageInfoDialog({
         <DialogContent>
             {pkg &&
                 <>
-                    <PackageDetailsGrid pkg={pkg} dependencies={dependencies} />
+                    <PackageDetailsGrid dependencies={dependencies} pkg={pkg} />
                     <PackagePatchesList
-                        patches={patches}
                         editable={isAuthorized}
                         onDelete={key => void handleDeletePatch(key)}
+                        patches={patches}
                     />
 
                     <Box sx={{ borderBottom: 1, borderColor: "divider", mt: 2 }}>
-                        <Tabs value={activeTab} onChange={(_, tab: TabKey) => setActiveTab(tab)}>
+                        <Tabs onChange={(_, tab: TabKey) => setActiveTab(tab)} value={activeTab}>
-                            {tabs.map(({ key, label }) => <Tab key={key} value={key} label={label} />)}
+                            {tabs.map(({ key, label }) => <Tab key={key} label={label} value={key} />)}
                         </Tabs>
                     </Box>
 
@@ -182,7 +175,6 @@ export default function PackageInfoDialog({
                         <BuildLogsTab
                             packageBase={localPackageBase}
                             repository={currentRepository}
-                            refreshInterval={autoRefresh.interval}
                         />
                     }
                     {activeTab === "changes" && localPackageBase && currentRepository &&
@@ -194,21 +186,25 @@ export default function PackageInfoDialog({
                     {activeTab === "events" && localPackageBase && currentRepository &&
                         <EventsTab packageBase={localPackageBase} repository={currentRepository} />
                     }
+                    {activeTab === "artifacts" && localPackageBase && currentRepository &&
+                        <ArtifactsTab
+                            currentVersion={pkg.version}
+                            packageBase={localPackageBase}
+                            repository={currentRepository}
+                        />
+                    }
                 </>
             }
         </DialogContent>
 
         <PackageInfoActions
             isAuthorized={isAuthorized}
-            refreshDatabase={refreshDatabase}
-            onRefreshDatabaseChange={setRefreshDatabase}
             isHeld={status?.is_held ?? false}
             onHoldToggle={() => void handleHoldToggle()}
-            onUpdate={() => void handleUpdate()}
+            onRefreshDatabaseChange={setRefreshDatabase}
             onRemove={() => void handleRemove()}
-            autoRefreshIntervals={autoRefreshIntervals}
+            onUpdate={() => void handleUpdate()}
-            autoRefreshInterval={autoRefresh.interval}
+            refreshDatabase={refreshDatabase}
-            onAutoRefreshIntervalChange={autoRefresh.setInterval}
         />
     </Dialog>;
 }

frontend/src/components/dialogs/PackageRebuildDialog.tsx

@@ -28,11 +28,11 @@ import { useSelectedRepository } from "hooks/useSelectedRepository";
 import React, { useState } from "react";
 
 interface PackageRebuildDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDialogProps): React.JSX.Element {
+export default function PackageRebuildDialog({ onClose, open }: PackageRebuildDialogProps): React.JSX.Element {
     const client = useClient();
     const { showSuccess, showError } = useNotification();
     const repositorySelect = useSelectedRepository();
@@ -45,7 +45,7 @@ export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDi
         onClose();
     };
 
-    const handleRebuild: () => Promise<void> = async () => {
+    const handleRebuild = async (): Promise<void> => {
         if (!dependency) {
             return;
         }
@@ -63,7 +63,7 @@ export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDi
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+    return <Dialog fullWidth maxWidth="md" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Rebuild depending packages
         </DialogHeader>
@@ -72,17 +72,17 @@ export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDi
             <RepositorySelect repositorySelect={repositorySelect} />
 
             <TextField
-                label="dependency"
-                placeholder="packages dependency"
                 fullWidth
+                label="dependency"
                 margin="normal"
-                value={dependency}
+                placeholder="packages dependency"
                 onChange={event => setDependency(event.target.value)}
+                value={dependency}
             />
         </DialogContent>
 
         <DialogActions>
-            <Button onClick={() => void handleRebuild()} variant="contained" startIcon={<PlayArrowIcon />}>rebuild</Button>
+            <Button onClick={() => void handleRebuild()} startIcon={<PlayArrowIcon />} variant="contained">rebuild</Button>
         </DialogActions>
     </Dialog>;
 }

frontend/src/components/layout/AppLayout.tsx

@@ -41,8 +41,8 @@ export default function AppLayout(): React.JSX.Element {
     const [loginOpen, setLoginOpen] = useState(false);
 
     const { data: info } = useQuery<InfoResponse>({
-        queryKey: QueryKeys.info,
         queryFn: () => client.fetch.fetchServerInfo(),
+        queryKey: QueryKeys.info,
         staleTime: Infinity,
     });
 
@@ -55,9 +55,9 @@ export default function AppLayout(): React.JSX.Element {
     }, [info, setAuthState, setRepositories]);
 
     return <Container maxWidth="xl">
-        <Box sx={{ display: "flex", alignItems: "center", py: 1, gap: 1 }}>
+        <Box sx={{ alignItems: "center", display: "flex", gap: 1, py: 1 }}>
             <a href="https://ahriman.readthedocs.io/" title="logo">
-                <img src="/static/logo.svg" width={30} height={30} alt="" />
+                <img alt="" height={30} src="/static/logo.svg" width={30} />
             </a>
             <Box sx={{ flex: 1 }}>
                 <Navbar />
@@ -69,17 +69,15 @@ export default function AppLayout(): React.JSX.Element {
             </Tooltip>
         </Box>
 
-        <PackageTable
+        <PackageTable />
-            autoRefreshIntervals={info?.autorefresh_intervals ?? []}
-        />
 
         <Footer
-            version={info?.version ?? ""}
             docsEnabled={info?.docs_enabled ?? false}
             indexUrl={info?.index_url}
             onLoginClick={() => info?.auth.external ? window.location.assign("/api/v1/login") : setLoginOpen(true)}
+            version={info?.version ?? ""}
         />
 
-        <LoginDialog open={loginOpen} onClose={() => setLoginOpen(false)} />
+        <LoginDialog onClose={() => setLoginOpen(false)} open={loginOpen} />
     </Container>;
 }

frontend/src/components/layout/Footer.tsx

@@ -26,41 +26,41 @@ import { useAuth } from "hooks/useAuth";
 import type React from "react";
 
 interface FooterProps {
-    version: string;
     docsEnabled: boolean;
     indexUrl?: string;
     onLoginClick: () => void;
+    version: string;
 }
 
-export default function Footer({ version, docsEnabled, indexUrl, onLoginClick }: FooterProps): React.JSX.Element {
+export default function Footer({ docsEnabled, indexUrl, onLoginClick, version }: FooterProps): React.JSX.Element {
     const { enabled: authEnabled, username, logout } = useAuth();
 
     return <Box
         component="footer"
         sx={{
+            alignItems: "center",
+            borderColor: "divider",
+            borderTop: 1,
             display: "flex",
             flexWrap: "wrap",
             justifyContent: "space-between",
-            alignItems: "center",
-            borderTop: 1,
-            borderColor: "divider",
             mt: 2,
             py: 1,
         }}
     >
-        <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
+        <Box sx={{ alignItems: "center", display: "flex", gap: 2 }}>
-            <Link href="https://github.com/arcan1s/ahriman" underline="hover" color="inherit" sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+            <Link color="inherit" href="https://github.com/arcan1s/ahriman" sx={{ alignItems: "center", display: "flex", gap: 0.5 }} underline="hover">
                 <GitHubIcon fontSize="small" />
                 <Typography variant="body2">ahriman {version}</Typography>
             </Link>
-            <Link href="https://github.com/arcan1s/ahriman/releases" underline="hover" color="text.secondary" variant="body2">
+            <Link color="text.secondary" href="https://github.com/arcan1s/ahriman/releases" underline="hover" variant="body2">
                 releases
             </Link>
-            <Link href="https://github.com/arcan1s/ahriman/issues" underline="hover" color="text.secondary" variant="body2">
+            <Link color="text.secondary" href="https://github.com/arcan1s/ahriman/issues" underline="hover" variant="body2">
                 report a bug
             </Link>
             {docsEnabled &&
-                <Link href="/api-docs" underline="hover" color="text.secondary" variant="body2">
+                <Link color="text.secondary" href="/api-docs" underline="hover" variant="body2">
                     api
                 </Link>
             }
@@ -68,7 +68,7 @@ export default function Footer({ version, docsEnabled, indexUrl, onLoginClick }:
 
         {indexUrl &&
             <Box>
-                <Link href={indexUrl} underline="hover" color="inherit" sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                <Link color="inherit" href={indexUrl} underline="hover" sx={{ alignItems: "center", display: "flex", gap: 0.5 }}>
                     <HomeIcon fontSize="small" />
                     <Typography variant="body2">repo index</Typography>
                 </Link>
@@ -78,11 +78,11 @@ export default function Footer({ version, docsEnabled, indexUrl, onLoginClick }:
         {authEnabled &&
             <Box>
                 {username ?
-                    <Button size="small" startIcon={<LogoutIcon />} onClick={() => void logout()} sx={{ textTransform: "none" }}>
+                    <Button onClick={() => void logout()} size="small" startIcon={<LogoutIcon />} sx={{ textTransform: "none" }}>
                         logout ({username})
                     </Button>
                     :
-                    <Button size="small" startIcon={<LoginIcon />} onClick={onLoginClick} sx={{ textTransform: "none" }}>
+                    <Button onClick={onLoginClick} size="small" startIcon={<LoginIcon />} sx={{ textTransform: "none" }}>
                         login
                     </Button>
                 }

frontend/src/components/layout/Navbar.tsx

@@ -35,15 +35,15 @@ export default function Navbar(): React.JSX.Element | null {
 
     return <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
         <Tabs
-            value={currentIndex >= 0 ? currentIndex : 0}
             onChange={(_, newValue: number) => {
                 const repository = repositories[newValue];
                 if (repository) {
                     setCurrentRepository(repository);
                 }
             }}
-            variant="scrollable"
             scrollButtons="auto"
+            value={currentIndex >= 0 ? currentIndex : 0}
+            variant="scrollable"
         >
             {repositories.map(repository =>
                 <Tab

frontend/src/components/package/ArtifactsTab.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 RestoreIcon from "@mui/icons-material/Restore";
+import { Box, IconButton, Tooltip } from "@mui/material";
+import { DataGrid, type GridColDef } from "@mui/x-data-grid";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { ApiError } from "api/client/ApiError";
+import { QueryKeys } from "hooks/QueryKeys";
+import { useAuth } from "hooks/useAuth";
+import { useClient } from "hooks/useClient";
+import { useNotification } from "hooks/useNotification";
+import type { RepositoryId } from "models/RepositoryId";
+import type React from "react";
+import { useCallback, useMemo } from "react";
+import { DETAIL_TABLE_PROPS } from "utils";
+
+interface ArtifactsTabProps {
+    currentVersion: string;
+    packageBase: string;
+    repository: RepositoryId;
+}
+
+interface ArtifactRow {
+    id: string;
+    packager: string;
+    packages: string[];
+    version: string;
+}
+
+const staticColumns: GridColDef<ArtifactRow>[] = [
+    { align: "right", field: "version", flex: 1, headerAlign: "right", headerName: "version" },
+    {
+        field: "packages",
+        flex: 2,
+        headerName: "packages",
+        renderCell: params =>
+            <Box sx={{ whiteSpace: "pre-line" }}>{params.row.packages.join("\n")}</Box>,
+    },
+    { field: "packager", flex: 1, headerName: "packager" },
+];
+
+export default function ArtifactsTab({
+    currentVersion,
+    packageBase,
+    repository,
+}: ArtifactsTabProps): React.JSX.Element {
+    const client = useClient();
+    const queryClient = useQueryClient();
+    const { isAuthorized } = useAuth();
+    const { showSuccess, showError } = useNotification();
+
+    const { data: rows = [] } = useQuery<ArtifactRow[]>({
+        enabled: !!packageBase,
+        queryFn: async () => {
+            const packages = await client.fetch.fetchPackageArtifacts(packageBase, repository);
+            return packages.map(artifact => ({
+                id: artifact.version,
+                packager: artifact.packager ?? "",
+                packages: Object.keys(artifact.packages).sort(),
+                version: artifact.version,
+            })).reverse();
+        },
+        queryKey: QueryKeys.artifacts(packageBase, repository),
+    });
+
+    const handleRollback = useCallback(async (version: string): Promise<void> => {
+        try {
+            await client.service.servicePackageRollback(repository, { package: packageBase, version });
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.artifacts(packageBase, repository) });
+            void queryClient.invalidateQueries({ queryKey: QueryKeys.package(packageBase, repository) });
+            showSuccess("Success", `Rollback ${packageBase} to ${version} has been started`);
+        } catch (exception) {
+            showError("Action failed", `Rollback failed: ${ApiError.errorDetail(exception)}`);
+        }
+    }, [client, repository, packageBase, queryClient, showSuccess, showError]);
+
+    const columns = useMemo<GridColDef<ArtifactRow>[]>(() => [
+        ...staticColumns,
+        ...isAuthorized ? [{
+            field: "actions",
+            filterable: false,
+            headerName: "",
+            renderCell: params =>
+                <Tooltip title={params.row.version === currentVersion ? "Current version" : "Rollback to this version"}>
+                    <span>
+                        <IconButton
+                            disabled={params.row.version === currentVersion}
+                            onClick={() => void handleRollback(params.row.version)}
+                            size="small"
+                        >
+                            <RestoreIcon fontSize="small" />
+                        </IconButton>
+                    </span>
+                </Tooltip>,
+            width: 60,
+        } satisfies GridColDef<ArtifactRow>] : [],
+    ], [isAuthorized, currentVersion, handleRollback]);
+
+    return <Box sx={{ mt: 1 }}>
+        <DataGrid columns={columns} getRowHeight={() => "auto"} rows={rows} {...DETAIL_TABLE_PROPS} />
+    </Box>;
+}

frontend/src/components/package/BuildLogsTab.tsx

@@ -23,22 +23,22 @@ import { keepPreviousData, skipToken, useQuery } from "@tanstack/react-query";
 import CodeBlock from "components/common/CodeBlock";
 import { QueryKeys } from "hooks/QueryKeys";
 import { useAutoScroll } from "hooks/useAutoScroll";
+import { useBuildLogStream } from "hooks/useBuildLogStream";
 import { useClient } from "hooks/useClient";
 import type { LogRecord } from "models/LogRecord";
 import type { RepositoryId } from "models/RepositoryId";
 import React, { useEffect, useMemo, useState } from "react";
 
 interface Logs {
-    version: string;
-    processId: string;
     created: number;
     logs: string;
+    processId: string;
+    version: string;
 }
 
 interface BuildLogsTabProps {
     packageBase: string;
     repository: RepositoryId;
-    refreshInterval: number;
 }
 
 function convertLogs(records: LogRecord[], filter?: (record: LogRecord) => boolean): string {
@@ -51,17 +51,16 @@ function convertLogs(records: LogRecord[], filter?: (record: LogRecord) => boole
 export default function BuildLogsTab({
     packageBase,
     repository,
-    refreshInterval,
 }: BuildLogsTabProps): React.JSX.Element {
     const client = useClient();
+    useBuildLogStream(packageBase, repository);
     const [selectedVersionKey, setSelectedVersionKey] = useState<string | null>(null);
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
     const { data: allLogs } = useQuery<LogRecord[]>({
-        queryKey: QueryKeys.logs(packageBase, repository),
-        queryFn: () => client.fetch.fetchPackageLogs(packageBase, repository),
         enabled: !!packageBase,
-        refetchInterval: refreshInterval > 0 ? refreshInterval : false,
+        queryFn: () => client.fetch.fetchPackageLogs(packageBase, repository),
+        queryKey: QueryKeys.logs(packageBase, repository),
     });
 
     // Build version selectors from all logs
@@ -84,13 +83,13 @@ export default function BuildLogsTab({
         return Object.values(grouped)
             .sort((left, right) => right.minCreated - left.minCreated)
             .map(record => ({
-                version: record.version,
-                processId: record.process_id,
                 created: record.minCreated,
                 logs: convertLogs(
                     allLogs,
                     right => record.version === right.version && record.process_id === right.process_id,
                 ),
+                processId: record.process_id,
+                version: record.version,
             }));
     }, [allLogs]);
 
@@ -110,14 +109,13 @@ export default function BuildLogsTab({
 
     // Refresh active version logs
     const { data: versionLogs } = useQuery<LogRecord[]>({
-        queryKey: QueryKeys.logsVersion(packageBase, repository, activeVersion?.version ?? "", activeVersion?.processId ?? ""),
+        placeholderData: keepPreviousData,
         queryFn: activeVersion
             ? () => client.fetch.fetchPackageLogs(
                 packageBase, repository, activeVersion.version, activeVersion.processId,
             )
             : skipToken,
-        placeholderData: keepPreviousData,
+        queryKey: QueryKeys.logsVersion(packageBase, repository, activeVersion?.version ?? "", activeVersion?.processId ?? ""),
-        refetchInterval: refreshInterval > 0 ? refreshInterval : false,
     });
 
     // Derive displayed logs: prefer fresh polled data when available
@@ -143,25 +141,25 @@ export default function BuildLogsTab({
     return <Box sx={{ display: "flex", gap: 1, mt: 1 }}>
         <Box>
             <Button
-                size="small"
                 aria-label="Select version"
-                startIcon={<ListIcon />}
                 onClick={event => setAnchorEl(event.currentTarget)}
+                size="small"
+                startIcon={<ListIcon />}
             />
             <Menu
                 anchorEl={anchorEl}
-                open={Boolean(anchorEl)}
                 onClose={() => setAnchorEl(null)}
+                open={Boolean(anchorEl)}
             >
                 {versions.map((logs, index) =>
                     <MenuItem
                         key={`${logs.version}-${logs.processId}`}
-                        selected={index === activeIndex}
                         onClick={() => {
                             setSelectedVersionKey(`${logs.version}-${logs.processId}`);
                             setAnchorEl(null);
                             resetScroll();
                         }}
+                        selected={index === activeIndex}
                     >
                         <Typography variant="body2">{new Date(logs.created * 1000).toISOStringShort()}</Typography>
                     </MenuItem>,
@@ -174,10 +172,10 @@ export default function BuildLogsTab({
 
         <Box sx={{ flex: 1 }}>
             <CodeBlock
-                preRef={preRef}
                 content={displayedLogs}
                 height={400}
                 onScroll={handleScroll}
+                preRef={preRef}
             />
         </Box>
     </Box>;

frontend/src/components/package/ChangesTab.tsx

@@ -30,5 +30,5 @@ interface ChangesTabProps {
 export default function ChangesTab({ packageBase, repository }: ChangesTabProps): React.JSX.Element {
     const data = usePackageChanges(packageBase, repository);
 
-    return <CodeBlock language="diff" content={data?.changes ?? ""} height={400} />;
+    return <CodeBlock content={data?.changes ?? ""} height={400} language="diff" />;
 }

frontend/src/components/package/EventsTab.tsx

@@ -27,6 +27,7 @@ import type { Event } from "models/Event";
 import type { RepositoryId } from "models/RepositoryId";
 import type React from "react";
 import { useMemo } from "react";
+import { DETAIL_TABLE_PROPS } from "utils";
 
 interface EventsTabProps {
     packageBase: string;
@@ -34,46 +35,36 @@ interface EventsTabProps {
 }
 
 interface EventRow {
-    id: number;
-    timestamp: string;
     event: string;
+    id: number;
     message: string;
+    timestamp: string;
 }
 
 const columns: GridColDef<EventRow>[] = [
-    { field: "timestamp", headerName: "date", width: 180, align: "right", headerAlign: "right" },
+    { align: "right", field: "timestamp", headerAlign: "right", headerName: "date", width: 180 },
-    { field: "event", headerName: "event", flex: 1 },
+    { field: "event", flex: 1, headerName: "event" },
-    { field: "message", headerName: "description", flex: 2 },
+    { field: "message", flex: 2, headerName: "description" },
 ];
 
 export default function EventsTab({ packageBase, repository }: EventsTabProps): React.JSX.Element {
     const client = useClient();
 
     const { data: events = [] } = useQuery<Event[]>({
-        queryKey: QueryKeys.events(repository, packageBase),
-        queryFn: () => client.fetch.fetchPackageEvents(repository, packageBase, 30),
         enabled: !!packageBase,
+        queryFn: () => client.fetch.fetchPackageEvents(repository, packageBase, 30),
+        queryKey: QueryKeys.events(repository, packageBase),
     });
 
     const rows = useMemo<EventRow[]>(() => events.map((event, index) => ({
-        id: index,
-        timestamp: new Date(event.created * 1000).toISOStringShort(),
         event: event.event,
+        id: index,
         message: event.message ?? "",
+        timestamp: new Date(event.created * 1000).toISOStringShort(),
     })), [events]);
 
     return <Box sx={{ mt: 1 }}>
         <EventDurationLineChart events={events} />
-        <DataGrid
+        <DataGrid columns={columns} rows={rows} {...DETAIL_TABLE_PROPS} />
-            rows={rows}
-            columns={columns}
-            density="compact"
-            initialState={{
-                sorting: { sortModel: [{ field: "timestamp", sort: "desc" }] },
-            }}
-            pageSizeOptions={[10, 25]}
-            sx={{ height: 400, mt: 1 }}
-            disableRowSelectionOnClick
-        />
     </Box>;
 }

frontend/src/components/package/PackageDetailsGrid.tsx

@@ -23,11 +23,11 @@ import type { Package } from "models/Package";
 import React from "react";
 
 interface PackageDetailsGridProps {
-    pkg: Package;
     dependencies?: Dependencies;
+    pkg: Package;
 }
 
-export default function PackageDetailsGrid({ pkg, dependencies }: PackageDetailsGridProps): React.JSX.Element {
+export default function PackageDetailsGrid({ dependencies, pkg }: PackageDetailsGridProps): React.JSX.Element {
     const packagesList = Object.entries(pkg.packages)
         .map(([name, properties]) => `${name}${properties.description ? ` (${properties.description})` : ""}`);
 
@@ -65,50 +65,50 @@ 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={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">packages</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{packagesList.unique().join("\n")}</Typography></Grid>
+            <Grid size={{ md: 5, xs: 8 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{packagesList.unique().join("\n")}</Typography></Grid>
-            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">version</Typography></Grid>
+            <Grid size={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">version</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2">{pkg.version}</Typography></Grid>
+            <Grid size={{ md: 5, xs: 8 }}><Typography variant="body2">{pkg.version}</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">packager</Typography></Grid>
+            <Grid size={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">packager</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2">{pkg.packager ?? ""}</Typography></Grid>
+            <Grid size={{ md: 5, xs: 8 }}><Typography variant="body2">{pkg.packager ?? ""}</Typography></Grid>
-            <Grid size={{ xs: 4, md: 1 }} />
+            <Grid size={{ md: 1, xs: 4 }} />
-            <Grid size={{ xs: 8, md: 5 }} />
+            <Grid size={{ md: 5, xs: 8 }} />
         </Grid>
 
         <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={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">groups</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{groups.unique().join("\n")}</Typography></Grid>
+            <Grid size={{ md: 5, xs: 8 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{groups.unique().join("\n")}</Typography></Grid>
-            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">licenses</Typography></Grid>
+            <Grid size={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">licenses</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{licenses.unique().join("\n")}</Typography></Grid>
+            <Grid size={{ md: 5, xs: 8 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{licenses.unique().join("\n")}</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={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">upstream</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}>
+            <Grid size={{ md: 5, xs: 8 }}>
                 {upstreamUrls.map(url =>
-                    <Link key={url} href={url} target="_blank" rel="noopener noreferrer" underline="hover" display="block" variant="body2">
+                    <Link display="block" href={url} key={url} rel="noopener noreferrer" target="_blank" underline="hover" variant="body2">
                         {url}
                     </Link>,
                 )}
             </Grid>
-            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">AUR</Typography></Grid>
+            <Grid size={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">AUR</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}>
+            <Grid size={{ md: 5, xs: 8 }}>
                 <Typography variant="body2">
                     {aurUrl &&
-                        <Link href={aurUrl} target="_blank" rel="noopener noreferrer" underline="hover">AUR link</Link>
+                        <Link href={aurUrl} rel="noopener noreferrer" target="_blank" underline="hover">{aurUrl}</Link>
                     }
                 </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">depends</Typography></Grid>
+            <Grid size={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">depends</Typography></Grid>
-            <Grid size={{ xs: 8, md: 5 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{allDepends.join("\n")}</Typography></Grid>
+            <Grid size={{ md: 5, xs: 8 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{allDepends.join("\n")}</Typography></Grid>
-            <Grid size={{ xs: 4, md: 1 }}><Typography variant="body2" color="text.secondary" align="right">implicitly depends</Typography></Grid>
+            <Grid size={{ md: 1, xs: 4 }}><Typography align="right" color="text.secondary" variant="body2">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={{ md: 5, xs: 8 }}><Typography variant="body2" sx={{ whiteSpace: "pre-line" }}>{implicitDepends.unique().join("\n")}</Typography></Grid>
         </Grid>
     </>;
 }

frontend/src/components/package/PackageInfoActions.tsx

@@ -22,34 +22,26 @@ import PauseCircleIcon from "@mui/icons-material/PauseCircle";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PlayCircleIcon from "@mui/icons-material/PlayCircle";
 import { Button, Checkbox, DialogActions, FormControlLabel } from "@mui/material";
-import AutoRefreshControl from "components/common/AutoRefreshControl";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import type React from "react";
 
 interface PackageInfoActionsProps {
     isAuthorized: boolean;
     isHeld: boolean;
     onHoldToggle: () => void;
-    refreshDatabase: boolean;
     onRefreshDatabaseChange: (checked: boolean) => void;
-    onUpdate: () => void;
     onRemove: () => void;
-    autoRefreshIntervals: AutoRefreshInterval[];
+    onUpdate: () => void;
-    autoRefreshInterval: number;
+    refreshDatabase: boolean;
-    onAutoRefreshIntervalChange: (interval: number) => void;
 }
 
 export default function PackageInfoActions({
     isAuthorized,
-    refreshDatabase,
-    onRefreshDatabaseChange,
     isHeld,
     onHoldToggle,
-    onUpdate,
+    onRefreshDatabaseChange,
     onRemove,
-    autoRefreshIntervals,
+    onUpdate,
-    autoRefreshInterval,
+    refreshDatabase,
-    onAutoRefreshIntervalChange,
 }: PackageInfoActionsProps): React.JSX.Element {
     return <DialogActions sx={{ flexWrap: "wrap", gap: 1 }}>
         {isAuthorized &&
@@ -58,21 +50,16 @@ export default function PackageInfoActions({
                     control={<Checkbox checked={refreshDatabase} onChange={(_, checked) => onRefreshDatabaseChange(checked)} size="small" />}
                     label="update pacman databases"
                 />
-                <Button onClick={onHoldToggle} variant="outlined" color="warning" startIcon={isHeld ? <PlayCircleIcon /> : <PauseCircleIcon />} size="small">
+                <Button color="warning" onClick={onHoldToggle} size="small" startIcon={isHeld ? <PlayCircleIcon /> : <PauseCircleIcon />} variant="outlined">
                     {isHeld ? "unhold" : "hold"}
                 </Button>
-                <Button onClick={onUpdate} variant="contained" color="success" startIcon={<PlayArrowIcon />} size="small">
+                <Button color="success" onClick={onUpdate} size="small" startIcon={<PlayArrowIcon />} variant="contained">
                     update
                 </Button>
-                <Button onClick={onRemove} variant="contained" color="error" startIcon={<DeleteIcon />} size="small">
+                <Button color="error" onClick={onRemove} size="small" startIcon={<DeleteIcon />} variant="contained">
                     remove
                 </Button>
             </>
         }
-        <AutoRefreshControl
-            intervals={autoRefreshIntervals}
-            currentInterval={autoRefreshInterval}
-            onIntervalChange={onAutoRefreshIntervalChange}
-        />
     </DialogActions>;
 }

frontend/src/components/package/PackagePatchesList.tsx

@@ -23,39 +23,39 @@ import type { Patch } from "models/Patch";
 import type React from "react";
 
 interface PackagePatchesListProps {
-    patches: Patch[];
     editable: boolean;
     onDelete: (key: string) => void;
+    patches: Patch[];
 }
 
 export default function PackagePatchesList({
-    patches,
     editable,
     onDelete,
+    patches,
 }: PackagePatchesListProps): React.JSX.Element | null {
     if (patches.length === 0) {
         return null;
     }
 
     return <Box sx={{ mt: 2 }}>
-        <Typography variant="h6" gutterBottom>Environment variables</Typography>
+        <Typography gutterBottom variant="h6">Environment variables</Typography>
         {patches.map(patch =>
-            <Box key={patch.key} sx={{ display: "flex", alignItems: "center", gap: 1, mb: 0.5 }}>
+            <Box key={patch.key} sx={{ alignItems: "center", display: "flex", gap: 1, mb: 0.5 }}>
                 <TextField
-                    size="small"
-                    value={patch.key}
                     disabled
+                    size="small"
                     sx={{ flex: 1 }}
+                    value={patch.key}
                 />
                 <Box>=</Box>
                 <TextField
-                    size="small"
-                    value={JSON.stringify(patch.value)}
                     disabled
+                    value={JSON.stringify(patch.value)}
+                    size="small"
                     sx={{ flex: 1 }}
                 />
                 {editable &&
-                    <IconButton size="small" color="error" aria-label="Remove patch" onClick={() => onDelete(patch.key)}>
+                    <IconButton aria-label="Remove patch" color="error" onClick={() => onDelete(patch.key)} size="small">
                         <DeleteIcon fontSize="small" />
                     </IconButton>
                 }

frontend/src/components/package/PkgbuildTab.tsx

@@ -30,5 +30,5 @@ interface PkgbuildTabProps {
 export default function PkgbuildTab({ packageBase, repository }: PkgbuildTabProps): React.JSX.Element {
     const data = usePackageChanges(packageBase, repository);
 
-    return <CodeBlock language="bash" content={data?.pkgbuild ?? ""} height={400} />;
+    return <CodeBlock content={data?.pkgbuild ?? ""} height={400} language="bash" />;
 }

frontend/src/components/package/TabKey.ts

@@ -17,11 +17,12 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-export type TabKey = "logs" | "changes" | "pkgbuild" | "events";
+export type TabKey = "logs" | "changes" | "pkgbuild" | "events" | "artifacts";
 
 export const tabs: { key: TabKey; label: string }[] = [
     { key: "logs", label: "Build logs" },
     { key: "changes", label: "Changes" },
     { key: "pkgbuild", label: "PKGBUILD" },
     { key: "events", label: "Events" },
+    { key: "artifacts", label: "Artifacts" },
 ];

frontend/src/components/table/PackageTable.tsx

@@ -23,7 +23,6 @@ import {
     GRID_CHECKBOX_SELECTION_COL_DEF,
     type GridColDef,
     type GridFilterModel,
-    type GridRenderCellParams,
     type GridRowId,
     useGridApiRef,
 } from "@mui/x-data-grid";
@@ -36,16 +35,9 @@ import PackageTableToolbar from "components/table/PackageTableToolbar";
 import StatusCell from "components/table/StatusCell";
 import { useDebounce } from "hooks/useDebounce";
 import { usePackageTable } from "hooks/usePackageTable";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import type { PackageRow } from "models/PackageRow";
 import React, { useMemo } from "react";
 
-interface PackageTableProps {
-    autoRefreshIntervals: AutoRefreshInterval[];
-}
-
-const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-
 function createListColumn(
     field: keyof PackageRow,
     headerName: string,
@@ -55,15 +47,15 @@ function createListColumn(
         field,
         headerName,
         ...options,
-        valueGetter: (value: string[]) => (value ?? []).join(" "),
+        renderCell: params =>
-        renderCell: (params: GridRenderCellParams<PackageRow>) =>
             <Box sx={{ whiteSpace: "pre-line" }}>{((params.row[field] as string[]) ?? []).join("\n")}</Box>,
         sortComparator: (left: string, right: string) => left.localeCompare(right),
+        valueGetter: (value: string[]) => (value ?? []).join(" "),
     };
 }
 
-export default function PackageTable({ autoRefreshIntervals }: PackageTableProps): React.JSX.Element {
+export default function PackageTable(): React.JSX.Element {
-    const table = usePackageTable(autoRefreshIntervals);
+    const table = usePackageTable();
     const apiRef = useGridApiRef();
     const debouncedSearch = useDebounce(table.searchText, 300);
 
@@ -79,36 +71,30 @@ export default function PackageTable({ autoRefreshIntervals }: PackageTableProps
         () => [
             {
                 field: "base",
-                headerName: "package base",
                 flex: 1,
+                headerName: "package base",
                 minWidth: 150,
-                renderCell: (params: GridRenderCellParams<PackageRow>) =>
+                renderCell: params =>
                     params.row.webUrl ?
-                        <Link href={params.row.webUrl} target="_blank" rel="noopener noreferrer" underline="hover">
+                        <Link href={params.row.webUrl} rel="noopener noreferrer" target="_blank" underline="hover">
                             {params.value as string}
                         </Link>
                         : params.value as string,
             },
-            { field: "version", headerName: "version", width: 180, align: "right", headerAlign: "right" },
+            { align: "right", field: "version", headerAlign: "right", headerName: "version", width: 180 },
             createListColumn("packages", "packages", { flex: 1, minWidth: 120 }),
             createListColumn("groups", "groups", { width: 150 }),
             createListColumn("licenses", "licenses", { width: 150 }),
             { field: "packager", headerName: "packager", width: 150 },
+            { align: "right", field: "timestamp", headerName: "last update", headerAlign: "right", width: 180 },
             {
-                field: "timestamp",
-                headerName: "last update",
-                width: 180,
-                align: "right",
-                headerAlign: "right",
-            },
-            {
-                field: "status",
-                headerName: "status",
-                width: 120,
                 align: "center",
+                field: "status",
                 headerAlign: "center",
-                renderCell: (params: GridRenderCellParams<PackageRow>) =>
+                headerName: "status",
-                    <StatusCell status={params.row.status} isHeld={params.row.isHeld} />,
+                renderCell: params =>
+                    <StatusCell isHeld={params.row.isHeld} status={params.row.status} />,
+                width: 120,
             },
         ],
         [],
@@ -116,56 +102,37 @@ export default function PackageTable({ autoRefreshIntervals }: PackageTableProps
 
     return <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
         <PackageTableToolbar
-            hasSelection={table.selectionModel.length > 0}
-            isAuthorized={table.isAuthorized}
-            status={table.status}
-            searchText={table.searchText}
-            onSearchChange={table.setSearchText}
-            autoRefresh={{
-                autoRefreshIntervals,
-                currentInterval: table.autoRefreshInterval,
-                onIntervalChange: table.onAutoRefreshIntervalChange,
-            }}
             actions={{
-                onDashboardClick: () => table.setDialogOpen("dashboard"),
                 onAddClick: () => table.setDialogOpen("add"),
-                onUpdateClick: () => void table.handleUpdate(),
+                onDashboardClick: () => table.setDialogOpen("dashboard"),
-                onRefreshDatabaseClick: () => void table.handleRefreshDatabase(),
-                onRebuildClick: () => table.setDialogOpen("rebuild"),
-                onRemoveClick: () => void table.handleRemove(),
-                onKeyImportClick: () => table.setDialogOpen("keyImport"),
-                onReloadClick: table.handleReload,
                 onExportClick: () => apiRef.current?.exportDataAsCsv(),
+                onKeyImportClick: () => table.setDialogOpen("keyImport"),
+                onRebuildClick: () => table.setDialogOpen("rebuild"),
+                onRefreshDatabaseClick: () => void table.handleRefreshDatabase(),
+                onReloadClick: table.handleReload,
+                onRemoveClick: () => void table.handleRemove(),
+                onUpdateClick: () => void table.handleUpdate(),
             }}
+            isAuthorized={table.isAuthorized}
+            hasSelection={table.selectionModel.length > 0}
+            onSearchChange={table.setSearchText}
+            searchText={table.searchText}
+            status={table.status}
         />
 
         <DataGrid
             apiRef={apiRef}
-            rows={table.rows}
-            columns={columns}
-            loading={table.isLoading}
-            getRowHeight={() => "auto"}
             checkboxSelection
-            disableRowSelectionOnClick
-            rowSelectionModel={{ type: "include", ids: new Set<GridRowId>(table.selectionModel) }}
-            onRowSelectionModelChange={model => {
-                if (model.type === "exclude") {
-                    const excludeIds = new Set([...model.ids].map(String));
-                    table.setSelectionModel(table.rows.map(row => row.id).filter(id => !excludeIds.has(id)));
-                } else {
-                    table.setSelectionModel([...model.ids].map(String));
-                }
-            }}
-            paginationModel={table.paginationModel}
-            onPaginationModelChange={table.setPaginationModel}
-            pageSizeOptions={PAGE_SIZE_OPTIONS}
             columnVisibilityModel={table.columnVisibility}
-            onColumnVisibilityModelChange={table.setColumnVisibility}
+            columns={columns}
+            density="compact"
+            disableRowSelectionOnClick
             filterModel={effectiveFilterModel}
-            onFilterModelChange={table.setFilterModel}
+            getRowHeight={() => "auto"}
             initialState={{
                 sorting: { sortModel: [{ field: "base", sort: "asc" }] },
             }}
+            loading={table.isLoading}
             onCellClick={(params, event) => {
                 // Don't open info dialog when clicking checkbox or link
                 if (params.field === GRID_CHECKBOX_SELECTION_COL_DEF.field) {
@@ -176,22 +143,31 @@ export default function PackageTable({ autoRefreshIntervals }: PackageTableProps
                 }
                 table.setSelectedPackage(String(params.id));
             }}
-            sx={{
+            onColumnVisibilityModelChange={table.setColumnVisibility}
-                flex: 1,
+            onFilterModelChange={table.setFilterModel}
-                "& .MuiDataGrid-row": { cursor: "pointer" },
+            onPaginationModelChange={table.setPaginationModel}
+            onRowSelectionModelChange={model => {
+                if (model.type === "exclude") {
+                    const excludeIds = new Set([...model.ids].map(String));
+                    table.setSelectionModel(table.rows.map(row => row.id).filter(id => !excludeIds.has(id)));
+                } else {
+                    table.setSelectionModel([...model.ids].map(String));
+                }
             }}
-            density="compact"
+            paginationModel={table.paginationModel}
+            rowSelectionModel={{ type: "include", ids: new Set<GridRowId>(table.selectionModel) }}
+            rows={table.rows}
+            sx={{ flex: 1 }}
         />
 
-        <DashboardDialog open={table.dialogOpen === "dashboard"} onClose={() => table.setDialogOpen(null)} />
+        <DashboardDialog onClose={() => table.setDialogOpen(null)} open={table.dialogOpen === "dashboard"} />
-        <PackageAddDialog open={table.dialogOpen === "add"} onClose={() => table.setDialogOpen(null)} />
+        <PackageAddDialog onClose={() => table.setDialogOpen(null)} open={table.dialogOpen === "add"} />
-        <PackageRebuildDialog open={table.dialogOpen === "rebuild"} onClose={() => table.setDialogOpen(null)} />
+        <PackageRebuildDialog onClose={() => table.setDialogOpen(null)} open={table.dialogOpen === "rebuild"} />
-        <KeyImportDialog open={table.dialogOpen === "keyImport"} onClose={() => table.setDialogOpen(null)} />
+        <KeyImportDialog onClose={() => table.setDialogOpen(null)} open={table.dialogOpen === "keyImport"} />
         <PackageInfoDialog
-            packageBase={table.selectedPackage}
-            open={table.selectedPackage !== null}
             onClose={() => table.setSelectedPackage(null)}
-            autoRefreshIntervals={autoRefreshIntervals}
+            open={table.selectedPackage !== null}
+            packageBase={table.selectedPackage}
         />
     </Box>;
 }

frontend/src/components/table/PackageTableToolbar.tsx

@@ -30,60 +30,50 @@ import ReplayIcon from "@mui/icons-material/Replay";
 import SearchIcon from "@mui/icons-material/Search";
 import VpnKeyIcon from "@mui/icons-material/VpnKey";
 import { Box, Button, Divider, IconButton, InputAdornment, Menu, MenuItem, TextField, Tooltip } from "@mui/material";
-import AutoRefreshControl from "components/common/AutoRefreshControl";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import type { BuildStatus } from "models/BuildStatus";
 import React, { useState } from "react";
 import { StatusColors } from "theme/StatusColors";
 
-export interface AutoRefreshProps {
-    autoRefreshIntervals: AutoRefreshInterval[];
-    currentInterval: number;
-    onIntervalChange: (interval: number) => void;
-}
-
 export interface ToolbarActions {
-    onDashboardClick: () => void;
     onAddClick: () => void;
-    onUpdateClick: () => void;
+    onDashboardClick: () => void;
-    onRefreshDatabaseClick: () => void;
-    onRebuildClick: () => void;
-    onRemoveClick: () => void;
-    onKeyImportClick: () => void;
-    onReloadClick: () => void;
     onExportClick: () => void;
+    onKeyImportClick: () => void;
+    onRebuildClick: () => void;
+    onRefreshDatabaseClick: () => void;
+    onReloadClick: () => void;
+    onRemoveClick: () => void;
+    onUpdateClick: () => void;
 }
 
 interface PackageTableToolbarProps {
+    actions: ToolbarActions;
     hasSelection: boolean;
     isAuthorized: boolean;
-    status?: BuildStatus;
-    searchText: string;
     onSearchChange: (text: string) => void;
-    autoRefresh: AutoRefreshProps;
+    searchText: string;
-    actions: ToolbarActions;
+    status?: BuildStatus;
 }
 
 export default function PackageTableToolbar({
+    actions,
     hasSelection,
     isAuthorized,
-    status,
-    searchText,
     onSearchChange,
-    autoRefresh,
+    searchText,
-    actions,
+    status,
 }: PackageTableToolbarProps): React.JSX.Element {
     const [packagesAnchorEl, setPackagesAnchorEl] = useState<HTMLElement | null>(null);
 
-    return <Box sx={{ display: "flex", gap: 1, mb: 1, flexWrap: "wrap", alignItems: "center" }}>
+    return <Box sx={{ alignItems: "center", display: "flex", flexWrap: "wrap", gap: 1, mb: 1 }}>
         <Tooltip title="System health">
             <IconButton
                 aria-label="System health"
                 onClick={actions.onDashboardClick}
                 sx={{
                     borderColor: status ? StatusColors[status] : undefined,
-                    borderWidth: 1,
                     borderStyle: "solid",
+                    borderWidth: 1,
                     color: status ? StatusColors[status] : undefined,
                 }}
             >
@@ -94,16 +84,16 @@ export default function PackageTableToolbar({
         {isAuthorized &&
             <>
                 <Button
-                    variant="contained"
-                    startIcon={<InventoryIcon />}
                     onClick={event => setPackagesAnchorEl(event.currentTarget)}
+                    startIcon={<InventoryIcon />}
+                    variant="contained"
                 >
                     packages
                 </Button>
                 <Menu
                     anchorEl={packagesAnchorEl}
-                    open={Boolean(packagesAnchorEl)}
                     onClose={() => setPackagesAnchorEl(null)}
+                    open={Boolean(packagesAnchorEl)}
                 >
                     <MenuItem onClick={() => {
                         setPackagesAnchorEl(null); actions.onAddClick();
@@ -126,58 +116,52 @@ export default function PackageTableToolbar({
                         <ReplayIcon fontSize="small" sx={{ mr: 1 }} /> rebuild
                     </MenuItem>
                     <Divider />
-                    <MenuItem onClick={() => {
+                    <MenuItem disabled={!hasSelection} onClick={() => {
                         setPackagesAnchorEl(null); actions.onRemoveClick();
-                    }} disabled={!hasSelection}>
+                    }}>
                         <DeleteIcon fontSize="small" sx={{ mr: 1 }} /> remove
                     </MenuItem>
                 </Menu>
 
-                <Button variant="contained" color="info" startIcon={<VpnKeyIcon />} onClick={actions.onKeyImportClick}>
+                <Button color="info" onClick={actions.onKeyImportClick} startIcon={<VpnKeyIcon />} variant="contained">
                     import key
                 </Button>
             </>
         }
 
-        <Button variant="outlined" color="secondary" startIcon={<RefreshIcon />} onClick={actions.onReloadClick}>
+        <Button color="secondary" onClick={actions.onReloadClick} startIcon={<RefreshIcon />} variant="outlined">
             reload
         </Button>
 
-        <AutoRefreshControl
-            intervals={autoRefresh.autoRefreshIntervals}
-            currentInterval={autoRefresh.currentInterval}
-            onIntervalChange={autoRefresh.onIntervalChange}
-        />
-
         <Box sx={{ flexGrow: 1 }} />
 
         <TextField
-            size="small"
             aria-label="Search packages"
-            placeholder="search packages..."
-            value={searchText}
             onChange={event => onSearchChange(event.target.value)}
+            placeholder="search packages..."
+            size="small"
             slotProps={{
                 input: {
+                    endAdornment: searchText ?
+                        <InputAdornment position="end">
+                            <IconButton aria-label="Clear search" onClick={() => onSearchChange("")} size="small">
+                                <ClearIcon fontSize="small" />
+                            </IconButton>
+                        </InputAdornment>
+                        : undefined,
                     startAdornment:
                             <InputAdornment position="start">
                                 <SearchIcon fontSize="small" />
                             </InputAdornment>
                     ,
-                    endAdornment: searchText ?
-                        <InputAdornment position="end">
-                            <IconButton size="small" aria-label="Clear search" onClick={() => onSearchChange("")}>
-                                <ClearIcon fontSize="small" />
-                            </IconButton>
-                        </InputAdornment>
-                        : undefined,
                 },
             }}
             sx={{ minWidth: 200 }}
+            value={searchText}
         />
 
         <Tooltip title="Export CSV">
-            <IconButton size="small" aria-label="Export CSV" onClick={actions.onExportClick}>
+            <IconButton aria-label="Export CSV" onClick={actions.onExportClick} size="small">
                 <FileDownloadIcon fontSize="small" />
             </IconButton>
         </Tooltip>

frontend/src/components/table/StatusCell.tsx

@@ -24,11 +24,11 @@ import type React from "react";
 import { StatusColors } from "theme/StatusColors";
 
 interface StatusCellProps {
-    status: BuildStatus;
     isHeld?: boolean;
+    status: BuildStatus;
 }
 
-export default function StatusCell({ status, isHeld }: StatusCellProps): React.JSX.Element {
+export default function StatusCell({ isHeld, status }: StatusCellProps): React.JSX.Element {
     return <Chip
         icon={isHeld ? <PauseCircleIcon /> : undefined}
         label={status}

frontend/src/contexts/AuthContext.ts

@@ -26,9 +26,9 @@ interface AuthState {
 
 export interface AuthContextValue extends AuthState {
     isAuthorized: boolean;
-    setAuthState: (state: AuthState) => void;
     login: (username: string, password: string) => Promise<void>;
     logout: () => Promise<void>;
+    setAuthState: (state: AuthState) => void;
 }
 
 export const AuthContext = createContext<AuthContextValue | null>(null);

frontend/src/contexts/ClientProvider.tsx

@@ -24,9 +24,7 @@ import React, { type ReactNode, useMemo } from "react";
 export function ClientProvider({ children }: { children: ReactNode }): React.JSX.Element {
     const client = useMemo(() => new AhrimanClient(), []);
 
-    return (
+    return <ClientContext.Provider value={client}>
-        <ClientContext.Provider value={client}>
+        {children}
-            {children}
+    </ClientContext.Provider>;
-        </ClientContext.Provider>
-    );
 }

frontend/src/contexts/EventStreamProvider.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { useQueryClient } from "@tanstack/react-query";
+import { useEventStream } from "hooks/useEventStream";
+import { useRepository } from "hooks/useRepository";
+import type { ReactNode } from "react";
+
+export function EventStreamProvider({ children }: { children: ReactNode }): ReactNode {
+    const queryClient = useQueryClient();
+    const { currentRepository } = useRepository();
+
+    useEventStream(queryClient, currentRepository);
+
+    return children;
+}

frontend/src/contexts/NotificationContext.ts

@@ -20,8 +20,8 @@
 import { createContext } from "react";
 
 export interface NotificationContextValue {
-    showSuccess: (title: string, message: string) => void;
     showError: (title: string, message: string) => void;
+    showSuccess: (title: string, message: string) => void;
 }
 
 export const NotificationContext = createContext<NotificationContextValue | null>(null);

frontend/src/contexts/NotificationProvider.tsx

@@ -55,17 +55,17 @@ export function NotificationProvider({ children }: { children: ReactNode }): Rea
         {children}
         <Box
             sx={{
-                position: "fixed",
-                top: 16,
-                left: "50%",
-                transform: "translateX(-50%)",
-                zIndex: theme => theme.zIndex.snackbar,
                 display: "flex",
                 flexDirection: "column",
                 gap: 1,
+                left: "50%",
                 maxWidth: 500,
-                width: "100%",
                 pointerEvents: "none",
+                position: "fixed",
+                top: 16,
+                transform: "translateX(-50%)",
+                width: "100%",
+                zIndex: theme => theme.zIndex.snackbar,
             }}
         >
             {notifications.map(notification =>

frontend/src/contexts/RepositoryContext.ts

@@ -21,10 +21,10 @@ import type { RepositoryId } from "models/RepositoryId";
 import { createContext } from "react";
 
 export interface RepositoryContextValue {
-    repositories: RepositoryId[];
     currentRepository: RepositoryId | null;
-    setRepositories: (repositories: RepositoryId[]) => void;
+    repositories: RepositoryId[];
     setCurrentRepository: (repository: RepositoryId) => void;
+    setRepositories: (repositories: RepositoryId[]) => void;
 }
 
 export const RepositoryContext = createContext<RepositoryContextValue | null>(null);

frontend/src/contexts/ThemeProvider.tsx

@@ -39,10 +39,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }): Reac
     const theme = useMemo(() => createAppTheme(mode), [mode]);
 
     useEffect(() => {
-        const textColor = mode === "dark" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)";
+        chartDefaults.color = mode === "dark" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)";
-        const gridColor = mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+        chartDefaults.borderColor = mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
-        chartDefaults.color = textColor;
-        chartDefaults.borderColor = gridColor;
     }, [mode]);
 
     const value = useMemo(() => ({ mode, toggleTheme }), [mode, toggleTheme]);

frontend/src/hooks/QueryKeys.ts

@@ -21,6 +21,8 @@ import type { RepositoryId } from "models/RepositoryId";
 
 export const QueryKeys = {
 
+    artifacts: (packageBase: string, repository: RepositoryId) => ["artifacts", repository.key, packageBase] as const,
+
     changes: (packageBase: string, repository: RepositoryId) => ["changes", repository.key, packageBase] as const,
 
     dependencies: (packageBase: string, repository: RepositoryId) => ["dependencies", repository.key, packageBase] as const,

frontend/src/hooks/useAutoRefresh.ts

@@ -1,49 +0,0 @@
-/*
- * 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 { useLocalStorage } from "hooks/useLocalStorage";
-import { type Dispatch, type SetStateAction, useEffect, useState } from "react";
-
-interface AutoRefreshResult {
-    interval: number;
-    setInterval: Dispatch<SetStateAction<number>>;
-    setPaused: Dispatch<SetStateAction<boolean>>;
-}
-
-export function useAutoRefresh(key: string, defaultInterval: number): AutoRefreshResult {
-    const storageKey = `ahriman-${key}`;
-    const [interval, setInterval] = useLocalStorage<number>(storageKey, defaultInterval);
-    const [paused, setPaused] = useState(false);
-
-    // Apply defaultInterval when it becomes available (e.g. after info endpoint loads)
-    // but only if the user hasn't explicitly set a preference
-    useEffect(() => {
-        if (defaultInterval > 0 && window.localStorage.getItem(storageKey) === null) {
-            setInterval(defaultInterval);
-        }
-    }, [storageKey, defaultInterval, setInterval]);
-
-    const effectiveInterval = paused ? 0 : interval;
-
-    return {
-        interval: effectiveInterval,
-        setInterval,
-        setPaused,
-    };
-}

frontend/src/hooks/useAutoScroll.ts

@@ -20,10 +20,10 @@
 import { type RefObject, useCallback, useRef } from "react";
 
 interface UseAutoScrollResult {
-    preRef: RefObject<HTMLElement | null>;
     handleScroll: () => void;
-    scrollToBottom: () => void;
+    preRef: RefObject<HTMLElement | null>;
     resetScroll: () => void;
+    scrollToBottom: () => void;
 }
 
 export function useAutoScroll(): UseAutoScrollResult {
@@ -59,5 +59,5 @@ export function useAutoScroll(): UseAutoScrollResult {
         }
     }, []);
 
-    return { preRef, handleScroll, scrollToBottom, resetScroll };
+    return { handleScroll, preRef, resetScroll, scrollToBottom };
 }

frontend/src/hooks/useBuildLogStream.ts

@@ -0,0 +1,96 @@
+/*
+ * 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 type { QueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
+import { buildEventStreamUrl } from "hooks/useEventStream";
+import { useNotification } from "hooks/useNotification";
+import type { LogRecord } from "models/LogRecord";
+import type { RepositoryId } from "models/RepositoryId";
+import { useEffect } from "react";
+
+interface BuildLogEvent {
+    created: number;
+    message: string;
+    process_id: string;
+    version: string;
+}
+
+function appendLogRecord(existing: LogRecord[] | undefined, record: LogRecord): LogRecord[] {
+    return [...existing ?? [], record];
+}
+
+function invalidateLogs(queryClient: QueryClient, repository: RepositoryId, packageBase: string): void {
+    void queryClient.invalidateQueries({ queryKey: ["logs", repository.key, packageBase] });
+}
+
+export function useBuildLogStream(packageBase: string, repository: RepositoryId): void {
+    const queryClient = useQueryClient();
+    const { showError } = useNotification();
+
+    useEffect(() => {
+        const source = new EventSource(buildEventStreamUrl(repository, ["build-log"], packageBase));
+        let needsRefresh = false;
+
+        source.addEventListener("error", () => {
+            needsRefresh = true;
+        });
+
+        source.addEventListener("open", () => {
+            if (needsRefresh) {
+                invalidateLogs(queryClient, repository, packageBase);
+                needsRefresh = false;
+            }
+        });
+
+        source.addEventListener("build-log", (event: MessageEvent<string>) => {
+            let data: BuildLogEvent;
+            try {
+                data = JSON.parse(event.data) as BuildLogEvent;
+            } catch {
+                showError("Live updates failed", "Could not parse build log event; refreshing logs.");
+                invalidateLogs(queryClient, repository, packageBase);
+                return;
+            }
+
+            const record: LogRecord = {
+                created: data.created,
+                message: data.message,
+                process_id: data.process_id,
+                version: data.version,
+            };
+
+            // Append to the all-logs cache
+            queryClient.setQueryData<LogRecord[]>(
+                ["logs", repository.key, packageBase],
+                existing => appendLogRecord(existing, record),
+            );
+
+            // Append to the version-specific cache
+            queryClient.setQueryData<LogRecord[]>(
+                ["logs", repository.key, packageBase, record.version, record.process_id],
+                existing => appendLogRecord(existing, record),
+            );
+        });
+
+        return () => {
+            source.close();
+        };
+    }, [queryClient, packageBase, repository, showError]);
+}

frontend/src/hooks/useEventStream.ts

@@ -0,0 +1,127 @@
+/*
+ * 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 type { QueryClient } from "@tanstack/react-query";
+import { useNotification } from "hooks/useNotification";
+import type { RepositoryId } from "models/RepositoryId";
+import { useEffect } from "react";
+
+const GLOBAL_EVENT_TYPES = [
+    "package-held",
+    "package-outdated",
+    "package-removed",
+    "package-status-changed",
+    "package-update-failed",
+    "package-updated",
+    "service-status-changed",
+] as const;
+
+function invalidateForEvent(
+    queryClient: QueryClient,
+    repositoryKey: string,
+    eventType: string,
+    objectId?: string,
+): void {
+    switch (eventType) {
+        case "package-status-changed":
+        case "package-updated":
+        case "package-removed":
+        case "package-held":
+            void queryClient.invalidateQueries({ queryKey: ["packages", repositoryKey] });
+            void queryClient.invalidateQueries({ queryKey: ["status", repositoryKey] });
+            if (objectId) {
+                void queryClient.invalidateQueries({ queryKey: ["packages", repositoryKey, objectId] });
+                void queryClient.invalidateQueries({ queryKey: ["events", repositoryKey, objectId] });
+            }
+            break;
+        case "service-status-changed":
+            void queryClient.invalidateQueries({ queryKey: ["status", repositoryKey] });
+            break;
+        case "package-outdated":
+        case "package-update-failed":
+            void queryClient.invalidateQueries({ queryKey: ["packages", repositoryKey] });
+            if (objectId) {
+                void queryClient.invalidateQueries({ queryKey: ["packages", repositoryKey, objectId] });
+            }
+            break;
+    }
+}
+
+function invalidateRepository(queryClient: QueryClient, repositoryKey: string): void {
+    void queryClient.invalidateQueries({ queryKey: ["packages", repositoryKey] });
+    void queryClient.invalidateQueries({ queryKey: ["status", repositoryKey] });
+    void queryClient.invalidateQueries({ queryKey: ["events", repositoryKey] });
+}
+
+export function buildEventStreamUrl(
+    repository: RepositoryId,
+    events?: readonly string[],
+    objectId?: string,
+): string {
+    const params = new URLSearchParams(repository.toQuery());
+    if (events) {
+        for (const event of events) {
+            params.append("event", event);
+        }
+    }
+    if (objectId) {
+        params.set("object_id", objectId);
+    }
+    return `/api/v1/events/stream?${params.toString()}`;
+}
+
+export function useEventStream(queryClient: QueryClient, repository: RepositoryId | null): void {
+    const { showError } = useNotification();
+
+    useEffect(() => {
+        if (!repository) {
+            return;
+        }
+
+        const source = new EventSource(buildEventStreamUrl(repository, GLOBAL_EVENT_TYPES));
+        let needsRefresh = false;
+
+        source.addEventListener("error", () => {
+            needsRefresh = true;
+        });
+
+        source.addEventListener("open", () => {
+            if (needsRefresh) {
+                invalidateRepository(queryClient, repository.key);
+                needsRefresh = false;
+            }
+        });
+
+        for (const eventType of GLOBAL_EVENT_TYPES) {
+            source.addEventListener(eventType, (event: MessageEvent<string>) => {
+                try {
+                    const data = JSON.parse(event.data) as { object_id?: string };
+                    invalidateForEvent(queryClient, repository.key, eventType, data.object_id ?? undefined);
+                } catch {
+                    showError("Live updates failed", "Could not parse server event; refreshing data.");
+                    invalidateRepository(queryClient, repository.key);
+                }
+            });
+        }
+
+        return () => {
+            source.close();
+        };
+    }, [queryClient, repository, showError]);
+}

frontend/src/hooks/usePackageActions.ts

@@ -26,10 +26,10 @@ import { useRepository } from "hooks/useRepository";
 import type { RepositoryId } from "models/RepositoryId";
 
 export interface UsePackageActionsResult {
-    handleReload: () => void;
-    handleUpdate: () => Promise<void>;
     handleRefreshDatabase: () => Promise<void>;
+    handleReload: () => void;
     handleRemove: () => Promise<void>;
+    handleUpdate: () => Promise<void>;
 }
 
 export function usePackageActions(
@@ -63,7 +63,7 @@ export function usePackageActions(
         }
     };
 
-    const handleReload: () => void = () => {
+    const handleReload = (): void => {
         if (currentRepository !== null) {
             invalidate(currentRepository);
         }
@@ -80,11 +80,11 @@ export function usePackageActions(
 
     const handleRefreshDatabase = (): Promise<void> => performAction(async (repository): Promise<string> => {
         await client.service.servicePackageUpdate(repository, {
-            packages: [],
-            refresh: true,
             aur: false,
             local: false,
             manual: false,
+            packages: [],
+            refresh: true,
         });
         return "Pacman database update has been requested";
     }, "Could not update pacman databases");
@@ -100,9 +100,9 @@ export function usePackageActions(
     };
 
     return {
-        handleReload,
-        handleUpdate,
         handleRefreshDatabase,
+        handleReload,
         handleRemove,
+        handleUpdate,
     };
 }

frontend/src/hooks/usePackageChanges.ts

@@ -27,9 +27,9 @@ export function usePackageChanges(packageBase: string, repository: RepositoryId)
     const client = useClient();
 
     const { data } = useQuery<Changes>({
-        queryKey: QueryKeys.changes(packageBase, repository),
-        queryFn: () => client.fetch.fetchPackageChanges(packageBase, repository),
         enabled: !!packageBase,
+        queryFn: () => client.fetch.fetchPackageChanges(packageBase, repository),
+        queryKey: QueryKeys.changes(packageBase, repository),
     });
 
     return data;

frontend/src/hooks/usePackageData.ts

@@ -20,49 +20,40 @@
 import { skipToken, useQuery } from "@tanstack/react-query";
 import { QueryKeys } from "hooks/QueryKeys";
 import { useAuth } from "hooks/useAuth";
-import { useAutoRefresh } from "hooks/useAutoRefresh";
 import { useClient } from "hooks/useClient";
 import { useRepository } from "hooks/useRepository";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import type { BuildStatus } from "models/BuildStatus";
 import { PackageRow } from "models/PackageRow";
 import { useMemo } from "react";
-import { defaultInterval } from "utils";
 
 export interface UsePackageDataResult {
-    rows: PackageRow[];
-    isLoading: boolean;
     isAuthorized: boolean;
+    isLoading: boolean;
+    rows: PackageRow[];
     status: BuildStatus | undefined;
-    autoRefresh: ReturnType<typeof useAutoRefresh>;
 }
 
-export function usePackageData(autoRefreshIntervals: AutoRefreshInterval[]): UsePackageDataResult {
+export function usePackageData(): UsePackageDataResult {
     const client = useClient();
     const { currentRepository } = useRepository();
     const { isAuthorized } = useAuth();
 
-    const autoRefresh = useAutoRefresh("table-autoreload-button", defaultInterval(autoRefreshIntervals));
-
     const { data: packages = [], isLoading } = useQuery({
-        queryKey: currentRepository ? QueryKeys.packages(currentRepository) : ["packages"],
         queryFn: currentRepository ? () => client.fetch.fetchPackages(currentRepository) : skipToken,
-        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
+        queryKey: currentRepository ? QueryKeys.packages(currentRepository) : ["packages"],
     });
 
     const { data: status } = useQuery({
-        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
         queryFn: currentRepository ? () => client.fetch.fetchServerStatus(currentRepository) : skipToken,
-        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
+        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
     });
 
     const rows = useMemo(() => packages.map(descriptor => new PackageRow(descriptor)), [packages]);
 
     return {
-        rows,
         isLoading,
         isAuthorized,
+        rows,
         status: status?.status.status,
-        autoRefresh,
     };
 }

frontend/src/hooks/usePackageTable.ts

@@ -21,66 +21,45 @@ import type { GridFilterModel } from "@mui/x-data-grid";
 import { usePackageActions } from "hooks/usePackageActions";
 import { usePackageData } from "hooks/usePackageData";
 import { useTableState } from "hooks/useTableState";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import type { BuildStatus } from "models/BuildStatus";
 import type { PackageRow } from "models/PackageRow";
-import { useEffect } from "react";
 
 export interface UsePackageTableResult {
-    rows: PackageRow[];
-    isLoading: boolean;
-    isAuthorized: boolean;
-    status: BuildStatus | undefined;
-
-    selectionModel: string[];
-    setSelectionModel: (model: string[]) => void;
-
-    dialogOpen: "dashboard" | "add" | "rebuild" | "keyImport" | null;
-    setDialogOpen: (dialog: "dashboard" | "add" | "rebuild" | "keyImport" | null) => void;
-    selectedPackage: string | null;
-    setSelectedPackage: (base: string | null) => void;
-
-    paginationModel: { pageSize: number; page: number };
-    setPaginationModel: (model: { pageSize: number; page: number }) => void;
     columnVisibility: Record<string, boolean>;
-    setColumnVisibility: (model: Record<string, boolean>) => void;
+    dialogOpen: "dashboard" | "add" | "rebuild" | "keyImport" | null;
     filterModel: GridFilterModel;
-    setFilterModel: (model: GridFilterModel) => void;
-    searchText: string;
-    setSearchText: (text: string) => void;
-
-    autoRefreshInterval: number;
-    onAutoRefreshIntervalChange: (interval: number) => void;
-
-    handleReload: () => void;
-    handleUpdate: () => Promise<void>;
     handleRefreshDatabase: () => Promise<void>;
+    handleReload: () => void;
     handleRemove: () => Promise<void>;
+    handleUpdate: () => Promise<void>;
+    isAuthorized: boolean;
+    isLoading: boolean;
+    paginationModel: { page: number; pageSize: number };
+    rows: PackageRow[];
+    searchText: string;
+    selectedPackage: string | null;
+    selectionModel: string[];
+    setColumnVisibility: (model: Record<string, boolean>) => void;
+    setDialogOpen: (dialog: "dashboard" | "add" | "rebuild" | "keyImport" | null) => void;
+    setFilterModel: (model: GridFilterModel) => void;
+    setPaginationModel: (model: { page: number; pageSize: number }) => void;
+    setSearchText: (text: string) => void;
+    setSelectedPackage: (base: string | null) => void;
+    setSelectionModel: (model: string[]) => void;
+    status: BuildStatus | undefined;
 }
 
-export function usePackageTable(autoRefreshIntervals: AutoRefreshInterval[]): UsePackageTableResult {
+export function usePackageTable(): UsePackageTableResult {
-    const { rows, isLoading, isAuthorized, status, autoRefresh } = usePackageData(autoRefreshIntervals);
+    const { rows, isLoading, isAuthorized, status } = usePackageData();
     const tableState = useTableState();
     const actions = usePackageActions(tableState.selectionModel, tableState.setSelectionModel);
 
-    // Pause auto-refresh when dialog is open
-    const isDialogOpen = tableState.dialogOpen !== null || tableState.selectedPackage !== null;
-    const setPaused = autoRefresh.setPaused;
-    useEffect(() => {
-        setPaused(isDialogOpen);
-    }, [isDialogOpen, setPaused]);
-
     return {
-        rows,
         isLoading,
         isAuthorized,
+        rows,
         status,
-
-        ...tableState,
-
-        autoRefreshInterval: autoRefresh.interval,
-        onAutoRefreshIntervalChange: autoRefresh.setInterval,
-
         ...actions,
+        ...tableState,
     };
 }

frontend/src/hooks/useSelectedRepository.ts

@@ -22,10 +22,10 @@ import type { RepositoryId } from "models/RepositoryId";
 import { useState } from "react";
 
 export interface SelectedRepositoryResult {
-    selectedKey: string;
-    setSelectedKey: (key: string) => void;
-    selectedRepository: RepositoryId | null;
     reset: () => void;
+    selectedKey: string;
+    selectedRepository: RepositoryId | null;
+    setSelectedKey: (key: string) => void;
 }
 
 export function useSelectedRepository(): SelectedRepositoryResult {
@@ -40,9 +40,9 @@ export function useSelectedRepository(): SelectedRepositoryResult {
         }
     }
 
-    const reset: () => void = () => {
+    const reset = (): void => {
         setSelectedKey("");
     };
 
-    return { selectedKey, setSelectedKey, selectedRepository, reset };
+    return { reset, selectedKey, selectedRepository, setSelectedKey };
 }

frontend/src/hooks/useTableState.ts

@@ -24,22 +24,20 @@ import { useState } from "react";
 export type DialogType = "dashboard" | "add" | "rebuild" | "keyImport";
 
 export interface UseTableStateResult {
-    selectionModel: string[];
-    setSelectionModel: (model: string[]) => void;
-
-    dialogOpen: DialogType | null;
-    setDialogOpen: (dialog: DialogType | null) => void;
-    selectedPackage: string | null;
-    setSelectedPackage: (base: string | null) => void;
-
-    paginationModel: { pageSize: number; page: number };
-    setPaginationModel: (model: { pageSize: number; page: number }) => void;
     columnVisibility: Record<string, boolean>;
-    setColumnVisibility: (model: Record<string, boolean>) => void;
+    dialogOpen: DialogType | null;
     filterModel: GridFilterModel;
-    setFilterModel: (model: GridFilterModel) => void;
+    paginationModel: { pageSize: number; page: number };
     searchText: string;
+    selectedPackage: string | null;
+    selectionModel: string[];
+    setColumnVisibility: (model: Record<string, boolean>) => void;
+    setDialogOpen: (dialog: DialogType | null) => void;
+    setFilterModel: (model: GridFilterModel) => void;
+    setPaginationModel: (model: { pageSize: number; page: number }) => void;
     setSearchText: (text: string) => void;
+    setSelectedPackage: (base: string | null) => void;
+    setSelectionModel: (model: string[]) => void;
 }
 
 export function useTableState(): UseTableStateResult {
@@ -49,8 +47,8 @@ export function useTableState(): UseTableStateResult {
     const [searchText, setSearchText] = useState("");
 
     const [paginationModel, setPaginationModel] = useLocalStorage("ahriman-packages-pagination", {
-        pageSize: 10,
         page: 0,
+        pageSize: 25,
     });
     const [columnVisibility, setColumnVisibility] = useLocalStorage<Record<string, boolean>>(
         "ahriman-packages-columns",
@@ -62,21 +60,19 @@ export function useTableState(): UseTableStateResult {
     );
 
     return {
-        selectionModel,
-        setSelectionModel,
-
-        dialogOpen,
-        setDialogOpen,
-        selectedPackage,
-        setSelectedPackage,
-
-        paginationModel,
-        setPaginationModel,
         columnVisibility,
-        setColumnVisibility,
+        dialogOpen,
         filterModel,
-        setFilterModel,
+        paginationModel,
         searchText,
+        selectedPackage,
+        selectionModel,
+        setColumnVisibility,
+        setDialogOpen,
+        setFilterModel,
+        setPaginationModel,
         setSearchText,
+        setSelectedPackage,
+        setSelectionModel,
     };
 }

frontend/src/main.tsx

@@ -21,11 +21,18 @@ import "chartSetup";
 import "utils";
 
 import App from "App";
+import ErrorFallback from "components/common/ErrorBoundary";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { ErrorBoundary } from "react-error-boundary";
 
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <App />
+        <ErrorBoundary
+            FallbackComponent={ErrorFallback}
+            onError={(error, info) => console.error("Uncaught error:", error, info.componentStack)}
+        >
+            <App />
+        </ErrorBoundary>
     </StrictMode>,
 );

frontend/src/models/AURPackage.ts

@@ -18,6 +18,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 export interface AURPackage {
-    package: string;
     description: string;
+    package: string;
 }

frontend/src/models/BuildStatus.ts

@@ -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/>.
  */
-export type BuildStatus = "unknown" | "pending" | "building" | "failed" | "success";
+export type BuildStatus = "building" | "failed" | "pending" | "success" | "unknown";

frontend/src/models/InfoResponse.ts

@@ -18,14 +18,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import type { AuthInfo } from "models/AuthInfo";
-import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import type { RepositoryId } from "models/RepositoryId";
 
 export interface InfoResponse {
     auth: AuthInfo;
-    repositories: RepositoryId[];
-    version: string;
-    autorefresh_intervals: AutoRefreshInterval[];
     docs_enabled: boolean;
     index_url?: string;
+    repositories: RepositoryId[];
+    version: string;
 }

frontend/src/models/InternalStatus.ts

@@ -23,8 +23,8 @@ import type { Status } from "models/Status";
 
 export interface InternalStatus {
     architecture: string;
-    repository: string;
     packages: Counters;
+    repository: string;
     stats: RepositoryStats;
     status: Status;
     version: string;

frontend/src/models/LoginRequest.ts

@@ -18,6 +18,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 export interface LoginRequest {
-    username: string;
     password: string;
+    username: string;
 }

frontend/src/models/Notification.ts

@@ -21,7 +21,7 @@ import type { AlertColor } from "@mui/material";
 
 export interface Notification {
     id: string;
-    title: string;
     message: string;
     severity: AlertColor;
+    title: string;
 }

frontend/src/models/PackageActionRequest.ts

@@ -20,10 +20,10 @@
 import type { Patch } from "models/Patch";
 
 export interface PackageActionRequest {
-    packages: string[];
-    patches?: Patch[];
-    refresh?: boolean;
     aur?: boolean;
     local?: boolean;
     manual?: boolean;
+    packages: string[];
+    patches?: Patch[];
+    refresh?: boolean;
 }

frontend/src/models/PackageRow.ts

@@ -21,32 +21,31 @@ import type { BuildStatus } from "models/BuildStatus";
 import type { PackageStatus } from "models/PackageStatus";
 
 export class PackageRow {
-    id: string;
+
     base: string;
-    webUrl?: string;
-    version: string;
-    packages: string[];
     groups: string[];
+    id: string;
+    isHeld: boolean;
     licenses: string[];
     packager: string;
-    timestamp: string;
+    packages: string[];
-    timestampValue: number;
     status: BuildStatus;
-    isHeld: boolean;
+    timestamp: string;
+    version: string;
+    webUrl?: string;
 
     constructor(descriptor: PackageStatus) {
-        this.id = descriptor.package.base;
         this.base = descriptor.package.base;
-        this.webUrl = descriptor.package.remote.web_url ?? undefined;
-        this.version = descriptor.package.version;
-        this.packages = Object.keys(descriptor.package.packages).sort();
         this.groups = PackageRow.extractListProperties(descriptor.package, "groups");
+        this.id = descriptor.package.base;
+        this.isHeld = descriptor.status.is_held ?? false;
         this.licenses = PackageRow.extractListProperties(descriptor.package, "licenses");
         this.packager = descriptor.package.packager ?? "";
-        this.timestamp = new Date(descriptor.status.timestamp * 1000).toISOStringShort();
+        this.packages = Object.keys(descriptor.package.packages).sort();
-        this.timestampValue = descriptor.status.timestamp;
         this.status = descriptor.status.status;
-        this.isHeld = descriptor.status.is_held ?? false;
+        this.timestamp = new Date(descriptor.status.timestamp * 1000).toISOStringShort();
+        this.version = descriptor.package.version;
+        this.webUrl = descriptor.package.remote.web_url ?? undefined;
     }
 
     private static extractListProperties(pkg: PackageStatus["package"], property: "groups" | "licenses"): string[] {

frontend/src/models/RepositoryId.ts

@@ -18,6 +18,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 export class RepositoryId {
+
     readonly architecture: string;
     readonly repository: string;
 

frontend/src/models/RollbackRequest.ts

@@ -17,8 +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/>.
  */
-export interface AutoRefreshInterval {
+export interface RollbackRequest {
-    interval: number;
+    package: string;
-    is_active: boolean;
+    version: string;
-    text: string;
 }

frontend/src/models/Status.ts

@@ -20,7 +20,7 @@
 import type { BuildStatus } from "models/BuildStatus";
 
 export interface Status {
+    is_held?: boolean;
     status: BuildStatus;
     timestamp: number;
-    is_held?: boolean;
 }

frontend/src/theme/StatusColors.ts

@@ -21,19 +21,19 @@ import { amber, green, grey, orange, red } from "@mui/material/colors";
 import type { BuildStatus } from "models/BuildStatus";
 
 const base: Record<BuildStatus, string> = {
-    unknown: grey[600],
-    pending: amber[700],
     building: orange[800],
     failed: red[700],
+    pending: amber[700],
     success: green[700],
+    unknown: grey[600],
 };
 
 const headerBase: Record<BuildStatus, string> = {
-    unknown: grey[600],
-    pending: amber[700],
     building: orange[600],
     failed: red[500],
+    pending: amber[700],
     success: green[600],
+    unknown: grey[600],
 };
 
 export const StatusColors = base;

frontend/src/utils.ts

@@ -17,11 +17,13 @@
  * 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 { AutoRefreshInterval } from "models/AutoRefreshInterval";
+export const DETAIL_TABLE_PROPS = {
-
+    density: "compact" as const,
-export function defaultInterval(intervals: AutoRefreshInterval[]): number {
+    disableColumnSorting: true,
-    return intervals.find(interval => interval.is_active)?.interval ?? 0;
+    disableRowSelectionOnClick: true,
-}
+    paginationModel: { page: 0, pageSize: 25 },
+    sx: { height: 400, mt: 1 },
+};
 
 declare global {
     interface Array<T> {

frontend/tsconfig.json

@@ -4,18 +4,18 @@
         "baseUrl": "src",
         "isolatedModules": true,
         "jsx": "react-jsx",
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
         "module": "ESNext",
         "moduleResolution": "bundler",
         "noEmit": true,
         "noFallthroughCasesInSwitch": true,
-        "noUncheckedIndexedAccess": true,
+        "noImplicitOverride": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "resolveJsonModule": true,
         "skipLibCheck": true,
         "strict": true,
-        "target": "ES2020",
+        "target": "ESNext",
         "useDefineForClassFields": true
     },
     "include": ["src"]

frontend/vite.config.ts

@@ -4,34 +4,34 @@ import { defineConfig, type Plugin } from "vite";
 
 function rename(oldName: string, newName: string): Plugin {
     return {
-        name: "rename",
         enforce: "post",
         generateBundle(_, bundle) {
             if (bundle[oldName]) {
                 bundle[oldName].fileName = newName;
             }
         },
+        name: "rename",
     };
 }
 
 export default defineConfig({
-    plugins: [react(), rename("index.html", "build-status.jinja2")],
     base: "/",
-    resolve: {
-        tsconfigPaths: true,
-    },
     build: {
         chunkSizeWarningLimit: 10000,
         emptyOutDir: false,
         outDir: path.resolve(__dirname, "../package/share/ahriman/templates"),
-        rollupOptions: {
+        rolldownOptions: {
             output: {
-                entryFileNames: "static/[name].js",
-                chunkFileNames: "static/[name].js",
                 assetFileNames: "static/[name].[ext]",
+                chunkFileNames: "static/[name].js",
+                entryFileNames: "static/[name].js",
             },
         },
     },
+    plugins: [react(), rename("index.html", "build-status.jinja2")],
+    resolve: {
+        tsconfigPaths: true,
+    },
     server: {
         proxy: {
             "/api": "http://localhost:8080",

package/archlinux/PKGBUILD

@@ -9,7 +9,7 @@ arch=('any')
 url="https://ahriman.readthedocs.io/"
 license=('GPL-3.0-or-later')
 depends=('devtools>=1:1.0.0' 'git' 'pyalpm' 'python-bcrypt' 'python-filelock' 'python-inflection' 'python-pyelftools' 'python-requests')
-makedepends=('npm' 'python-build' 'python-flit' 'python-installer' 'python-wheel')
+makedepends=('npm' 'python-build' 'python-hatchling' 'python-installer' 'python-wheel')
 source=("https://github.com/arcan1s/ahriman/releases/download/$pkgver/$pkgbase-$pkgver.tar.gz"
         "$pkgbase.sysusers"
         "$pkgbase.tmpfiles")
@@ -77,7 +77,7 @@ package_ahriman-triggers() {
 package_ahriman-web() {
     pkgname='ahriman-web'
     pkgdesc="ArcH linux ReposItory MANager, web server"
-    depends=("$pkgbase-core=$pkgver" 'python-aiohttp-cors' 'python-aiohttp-jinja2')
+    depends=("$pkgbase-core=$pkgver" 'python-aiohttp-cors' 'python-aiohttp-jinja2' 'python-aiohttp-sse-git')
     optdepends=('python-aioauth-client: OAuth2 authorization support'
                 'python-aiohttp-apispec>=3.0.0: autogenerated API documentation'
                 'python-aiohttp-openmetrics: HTTP metrics support'

package/share/ahriman/settings/ahriman.ini.d/00-web.ini

@@ -30,6 +30,14 @@ allow_read_only = yes
 ; If no intervals set, auto refresh will be disabled. 0 can only be the first element and will disable auto refresh
 ; by default.
 autorefresh_intervals = 5 1 10 30 60
+; Allowed CORS headers. By default everything is allowed.
+;cors_allow_headers =
+; Allowed CORS methods. By default everything is allowed.
+;cors_allow_methods =
+; Allowed CORS origins.
+;cors_allow_origins = *
+; Exposed CORS headers. By default everything is exposed.
+;cors_expose_headers =
 ; Enable file upload endpoint used by some triggers.
 ;enable_archive_upload = no
 ; Address to bind the server.
@@ -38,6 +46,8 @@ host = 127.0.0.1
 ;index_url =
 ; Max file size in bytes which can be uploaded to the server. Requires ${web:enable_archive_upload} to be enabled.
 ;max_body_size =
+; Max event queue size used for server sent event endpoints (0 is infinite)
+;max_queue_size = 0
 ; Port to listen. Must be set, if the web service is enabled.
 ;port =
 ; Disable status (e.g. package status, logs, etc) endpoints. Useful for build only modes.

pyproject.toml

@@ -1,6 +1,6 @@
 [build-system]
-requires = ["flit_core"]
+requires = ["hatchling"]
-build-backend = "flit_core.buildapi"
+build-backend = "hatchling.build"
 
 [project]
 name = "ahriman"
@@ -8,8 +8,7 @@ name = "ahriman"
 description = "ArcH linux ReposItory MANager"
 readme = "README.md"
 
-# Actually we are using features from the latest python, however, ubuntu, which is used for CI doesn't have it
+requires-python = ">=3.13"
-requires-python = ">=3"
 
 license = {file = "COPYING"}
 authors = [
@@ -58,6 +57,7 @@ web = [
     "aiohttp",
     "aiohttp_cors",
     "aiohttp_jinja2",
+    "aiohttp_sse",
 ]
 web-auth = [
     "ahriman[web]",
@@ -112,21 +112,32 @@ tests = [
     "pytest-spec",
 ]
 
-[tool.flit.sdist]
+[tool.hatch.version]
+path = "src/ahriman/__init__.py"
+
+[tool.hatch.build.targets.sdist]
 include = [
-    "AUTHORS",
+    "/AUTHORS",
-    "CONTRIBUTING.md",
+    "/CONTRIBUTING.md",
-    "SECURITY.md",
+    "/COPYING",
-    "package",
+    "/README.md",
-    "frontend",
+    "/SECURITY.md",
-    "subpackages.py",
+    "/frontend",
-    "web.png",
+    "/package",
+    "/pyproject.toml",
+    "/src",
+    "/subpackages.py",
+    "/web.png",
 ]
 exclude = [
-    "package/archlinux",
+    "/package/archlinux",
-    "frontend/node_modules",
+    "/frontend/node_modules",
-    "frontend/package-lock.json",
+    "/frontend/package-lock.json",
 ]
 
-[tool.flit.external-data]
+[tool.hatch.build.targets.wheel]
-directory = "package"
+packages = ["src/ahriman"]
+
+[tool.hatch.build.targets.wheel.shared-data]
+"package/lib" = "lib"
+"package/share" = "share"

src/ahriman/application/application/application_repository.py

@@ -156,15 +156,14 @@ class ApplicationRepository(ApplicationProperties):
         result = Result()
 
         # process already built packages if any
-        built_packages = self.repository.packages_built()
+        if built_packages := self.repository.packages_built():  # speedup a bit
-        if built_packages:  # speedup a bit
             build_result = self.repository.process_update(built_packages, packagers)
             self.on_result(build_result)
             result.merge(build_result)
 
             # filter packages which were prebuilt
             succeeded = {package.base for package in build_result.success}
-            updates = filter(lambda package: package.base not in succeeded, updates)
+            updates = [package for package in updates if package.base not in succeeded]
 
         builder = Updater.load(self.repository_id, self.configuration, self.repository)
 

src/ahriman/application/handlers/rollback.py

@@ -19,6 +19,7 @@
 #
 import argparse
 
+from dataclasses import replace
 from pathlib import Path
 
 from ahriman.application.application import Application
@@ -62,9 +63,9 @@ class Rollback(Handler):
             application.reporter.package_hold_update(package.base, enabled=True)
 
     @staticmethod
-    def _set_package_archives_parser(root: SubParserAction) -> argparse.ArgumentParser:
+    def _set_package_rollback_parser(root: SubParserAction) -> argparse.ArgumentParser:
         """
-        add parser for package archives subcommand
+        add parser for package rollback subcommand
 
         Args:
             root(SubParserAction): subparsers for the commands
@@ -80,14 +81,14 @@ class Rollback(Handler):
                             action=argparse.BooleanOptionalAction, default=True)
         parser.add_argument("-u", "--username", help="build as user", default=extract_user())
         parser.set_defaults(aur=False, changes=False, check_files=False, dependencies=False, dry_run=False,
-                            exit_code=False, increment=False, now=True, local=False, manual=False, refresh=False,
+                            exit_code=True, increment=False, now=True, local=False, manual=False, refresh=False,
                             source=PackageSource.Archive, variable=None, vcs=False)
         return parser
 
     @staticmethod
     def package_artifacts(application: Application, package: Package) -> list[Path]:
         """
-        look for package artifacts and returns paths to them if any
+        look for requested package artifacts and return paths to them
 
         Args:
             application(Application): application instance
@@ -102,13 +103,13 @@ class Rollback(Handler):
         # lookup for built artifacts
         artifacts = application.repository.package_archives_lookup(package)
         if not artifacts:
-            raise UnknownPackageError(package.base) from None
+            raise UnknownPackageError(package.base)
         return artifacts
 
     @staticmethod
     def package_load(application: Application, package_base: str, version: str) -> Package:
         """
-        load package from given arguments
+        load package from repository, while setting requested version
 
         Args:
             application(Application): application instance
@@ -123,10 +124,8 @@ class Rollback(Handler):
         """
         try:
             package, _ = next(iter(application.reporter.package_get(package_base)))
-            package.version = version
+            return replace(package, version=version)
-
-            return package
         except StopIteration:
             raise UnknownPackageError(package_base) from None
 
-    arguments = [_set_package_archives_parser]
+    arguments = [_set_package_rollback_parser]

src/ahriman/core/alpm/pkgbuild_parser.py

@@ -104,7 +104,7 @@ class PkgbuildParser(shlex.shlex):
 
         # ignore substitution and extend bash symbols
         self.wordchars += "${}#:+-@!"
-        # in case of default behaviour, it will ignore, for example, segment part of url outside of quotes
+        # in case of default behavior, it will ignore, for example, segment part of url outside of quotes
         self.commenters = ""
 
     @staticmethod

src/ahriman/core/alpm/remote/aur.py

@@ -72,7 +72,7 @@ class AUR(Remote):
         parse RPC response to package list
 
         Args:
-            response(dict[str, Any]): RPC response json
+            response(dict[str, Any]): RPC response JSON
 
         Returns:
             list[AURPackage]: list of parsed packages

src/ahriman/core/alpm/remote/official.py

@@ -74,7 +74,7 @@ class Official(Remote):
         parse RPC response to package list
 
         Args:
-            response(dict[str, Any]): RPC response json
+            response(dict[str, Any]): RPC response JSON
 
         Returns:
             list[AURPackage]: list of parsed packages

src/ahriman/core/alpm/remote/official_syncdb.py

@@ -32,7 +32,7 @@ class OfficialSyncdb(Official):
     updates.
 
     This approach also has limitations, because we don't require superuser rights (neither going to download database
-    separately), the database file might be outdated and must be handled manually (or kind of). This behaviour might be
+    separately), the database file might be outdated and must be handled manually (or kind of). This behavior might be
     changed in the future.
 
     Still we leave search function based on the official repositories RPC.

src/ahriman/core/auth/auth.py

@@ -50,13 +50,13 @@ class Auth(LazyLogging):
     @property
     def auth_control(self) -> str:
         """
-        This workaround is required to make different behaviour for login interface.
+        This workaround is required to make different behavior for login interface.
         In case of internal authentication it must provide an interface (modal form) to log in with button sends POST
-        request. But for an external providers behaviour can be different: e.g. OAuth provider requires sending GET
+        request. But for an external providers behavior can be different: e.g. OAuth provider requires sending GET
         request to external resource
 
         Returns:
-            str: login control as html code to insert
+            str: login control as HTML code to insert
         """
         return "<button type=\"button\" class=\"btn btn-link\" data-bs-toggle=\"modal\" data-bs-target=\"#login-modal\" style=\"text-decoration: none\"><i class=\"bi bi-box-arrow-in-right\"></i> login</button>"
 

src/ahriman/core/auth/helpers.py

@@ -30,7 +30,13 @@ except ImportError:
 from typing import Any
 
 
-__all__ = ["authorized_userid", "check_authorized", "forget", "remember"]
+__all__ = [
+    "authorized_userid",
+    "check_authorized",
+    "forget",
+    "get_session",
+    "remember",
+]
 
 
 async def authorized_userid(*args: Any, **kwargs: Any) -> Any:

src/ahriman/core/auth/oauth.py

@@ -62,10 +62,10 @@ class OAuth(Mapping):
     @property
     def auth_control(self) -> str:
         """
-        get authorization html control
+        get authorization HTML control
 
         Returns:
-            str: login control as html code to insert
+            str: login control as HTML code to insert
         """
         return "<a class=\"nav-link\" href=\"/api/v1/login\" title=\"login via OAuth2\"><i class=\"bi bi-box-arrow-in-right\"></i> login</a>"
 

src/ahriman/core/build_tools/package_archive.py

@@ -72,17 +72,17 @@ class PackageArchive:
             if not PackageArchive.is_elf(binary_file):
                 return []
 
-            elf_file = ELFFile(binary_file)  # type: ignore[no-untyped-call]
+            elf_file = ELFFile(binary_file)
             dynamic_section = next(
-                (section for section in elf_file.iter_sections()  # type: ignore[no-untyped-call]
+                (section for section in elf_file.iter_sections()
                  if isinstance(section, DynamicSection)),
                 None)
             if dynamic_section is None:
                 return []
 
             return [
-                tag.needed
+                tag.needed  # type: ignore[attr-defined]
-                for tag in dynamic_section.iter_tags()  # type: ignore[no-untyped-call]
+                for tag in dynamic_section.iter_tags()
                 if tag.entry.d_tag == "DT_NEEDED"
             ]