zz

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/useBuildLogStream.ts

@@ -0,0 +1,70 @@
+/*
+ * 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 { buildEventStreamUrl } from "hooks/useEventStream";
+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];
+}
+
+export function useBuildLogStream(packageBase: string, repository: RepositoryId): void {
+    const queryClient = useQueryClient();
+
+    useEffect(() => {
+        const source = new EventSource(buildEventStreamUrl(repository, ["build-log"], packageBase));
+
+        source.addEventListener("build-log", (event: MessageEvent<string>) => {
+            const data = JSON.parse(event.data) as BuildLogEvent;
+
+            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]);
+}

frontend/src/hooks/useEventStream.ts

@@ -0,0 +1,101 @@
+/*
+ * 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 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;
+    }
+}
+
+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 {
+    useEffect(() => {
+        if (!repository) {
+            return;
+        }
+
+        const source = new EventSource(buildEventStreamUrl(repository, GLOBAL_EVENT_TYPES));
+
+        for (const eventType of GLOBAL_EVENT_TYPES) {
+            source.addEventListener(eventType, (event: MessageEvent<string>) => {
+                const data = JSON.parse(event.data) as { object_id?: string };
+                invalidateForEvent(queryClient, repository.key, eventType, data.object_id ?? undefined);
+            });
+        }
+
+        return () => {
+            source.close();
+        };
+    }, [queryClient, repository]);
+}

frontend/src/hooks/usePackageData.ts

@@ -20,46 +20,37 @@
 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 {
-    autoRefresh: ReturnType<typeof useAutoRefresh>;
     isAuthorized: boolean;
     isLoading: boolean;
     rows: PackageRow[];
     status: BuildStatus | undefined;
 }
 
-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({
         queryFn: currentRepository ? () => client.fetch.fetchPackages(currentRepository) : skipToken,
         queryKey: currentRepository ? QueryKeys.packages(currentRepository) : ["packages"],
-        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
     });
 
     const { data: status } = useQuery({
         queryFn: currentRepository ? () => client.fetch.fetchServerStatus(currentRepository) : skipToken,
         queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
-        refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
     });
 
     const rows = useMemo(() => packages.map(descriptor => new PackageRow(descriptor)), [packages]);
 
     return {
-        autoRefresh,
         isLoading,
         isAuthorized,
         rows,

frontend/src/hooks/usePackageTable.ts

@@ -21,13 +21,10 @@ 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 {
-    autoRefreshInterval: number;
     columnVisibility: Record<string, boolean>;
     dialogOpen: "dashboard" | "add" | "rebuild" | "keyImport" | null;
     filterModel: GridFilterModel;
@@ -37,7 +34,6 @@ export interface UsePackageTableResult {
     handleUpdate: () => Promise<void>;
     isAuthorized: boolean;
     isLoading: boolean;
-    onAutoRefreshIntervalChange: (interval: number) => void;
     paginationModel: { page: number; pageSize: number };
     rows: PackageRow[];
     searchText: string;
@@ -53,23 +49,14 @@ export interface UsePackageTableResult {
     status: BuildStatus | undefined;
 }
 
-export function usePackageTable(autoRefreshIntervals: AutoRefreshInterval[]): UsePackageTableResult {
-    const { rows, isLoading, isAuthorized, status, autoRefresh } = usePackageData(autoRefreshIntervals);
+export function usePackageTable(): UsePackageTableResult {
+    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 {
-        autoRefreshInterval: autoRefresh.interval,
         isLoading,
         isAuthorized,
-        onAutoRefreshIntervalChange: autoRefresh.setInterval,
         rows,
         status,
         ...actions,