feat: brand-new interface (#158)

This was initally generated by ai, but later has been heavily edited.
The reason why it has been implemented is that there are plans to
implement more features to ui, but it becomes hard to add new features
to plain js, so I decided to rewrite it in typescript.

Yet because it is still ai slop, it is still possible to enable old
interface via configuration, even though new interface is turned on by
default to get feedback

frontend/src/api/client/AhrimanClient.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { Client } from "api/client/Client";
+import { FetchClient } from "api/client/FetchClient";
+import { ServiceClient } from "api/client/ServiceClient";
+import type { LoginRequest } from "models/LoginRequest";
+
+export class AhrimanClient extends Client {
+
+    readonly fetch = new FetchClient(this);
+    readonly service = new ServiceClient(this);
+
+    async login(data: LoginRequest): Promise<void> {
+        return this.request("/api/v1/login", { method: "POST", json: data });
+    }
+
+    async logout(): Promise<void> {
+        return this.request("/api/v1/logout", { method: "POST" });
+    }
+}

frontend/src/api/client/ApiError.ts

@@ -0,0 +1,44 @@
+/*
+ * 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/>.
+ */
+export class ApiError extends Error {
+    status: number;
+    statusText: string;
+    body: string;
+
+    constructor(status: number, statusText: string, body: string) {
+        super(`${status} ${statusText}`);
+        this.status = status;
+        this.statusText = statusText;
+        this.body = body;
+    }
+
+    get detail(): string {
+        try {
+            const parsed = JSON.parse(this.body) as Record<string, string>;
+            return parsed.error ?? (this.body || this.message);
+        } catch {
+            return this.body || this.message;
+        }
+    }
+
+    static errorDetail(exception: unknown): string {
+        return exception instanceof ApiError ? exception.detail : String(exception);
+    }
+}

frontend/src/api/client/Client.ts

@@ -0,0 +1,79 @@
+/*
+ * 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 { ApiError } from "api/client/ApiError";
+import type { RequestOptions } from "api/client/RequestOptions";
+
+export class Client {
+
+    private static readonly DEFAULT_TIMEOUT = 30_000;
+
+    async request<T>(url: string, options: RequestOptions = {}): Promise<T> {
+        const { method, query, json, timeout = Client.DEFAULT_TIMEOUT } = options;
+
+        let fullUrl = url;
+        if (query) {
+            const params = new URLSearchParams();
+            for (const [key, value] of Object.entries(query)) {
+                if (value !== undefined && value !== null) {
+                    params.set(key, String(value));
+                }
+            }
+            fullUrl += `?${params.toString()}`;
+        }
+
+        const headers: Record<string, string> = {
+            Accept: "application/json",
+        };
+        if (json !== undefined) {
+            headers["Content-Type"] = "application/json";
+        }
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+        const requestInit: RequestInit = {
+            method: method || (json ? "POST" : "GET"),
+            headers,
+            signal: controller.signal,
+        };
+
+        if (json !== undefined) {
+            requestInit.body = JSON.stringify(json);
+        }
+
+        let response: Response;
+        try {
+            response = await fetch(fullUrl, requestInit);
+        } finally {
+            clearTimeout(timeoutId);
+        }
+
+        if (!response.ok) {
+            const body = await response.text();
+            throw new ApiError(response.status, response.statusText, body);
+        }
+
+        const contentType = response.headers.get("Content-Type") ?? "";
+        if (!contentType.includes("application/json")) {
+            return undefined as T;
+        }
+        return await response.json() as T;
+    }
+}

frontend/src/api/client/FetchClient.ts

@@ -0,0 +1,109 @@
+/*
+ * 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 { Client } from "api/client/Client";
+import type { Changes } from "models/Changes";
+import type { Dependencies } from "models/Dependencies";
+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 { PackageStatus } from "models/PackageStatus";
+import type { Patch } from "models/Patch";
+import { RepositoryId } from "models/RepositoryId";
+
+export class FetchClient {
+
+    protected client: Client;
+
+    constructor(client: Client) {
+        this.client = client;
+    }
+
+    async fetchPackage(packageBase: string, repository: RepositoryId): Promise<PackageStatus[]> {
+        return this.client.request<PackageStatus[]>(`/api/v1/packages/${encodeURIComponent(packageBase)}`, {
+            query: repository.toQuery(),
+        });
+    }
+
+    async fetchPackageChanges(packageBase: string, repository: RepositoryId): Promise<Changes> {
+        return this.client.request<Changes>(`/api/v1/packages/${encodeURIComponent(packageBase)}/changes`, {
+            query: repository.toQuery(),
+        });
+    }
+
+    async fetchPackageDependencies(packageBase: string, repository: RepositoryId): Promise<Dependencies> {
+        return this.client.request<Dependencies>(`/api/v1/packages/${encodeURIComponent(packageBase)}/dependencies`, {
+            query: repository.toQuery(),
+        });
+    }
+
+    async fetchPackageEvents(repository: RepositoryId, objectId?: string, limit?: number): Promise<Event[]> {
+        const query: Record<string, string | number> = repository.toQuery();
+        if (objectId) {
+            query.object_id = objectId;
+        }
+        if (limit) {
+            query.limit = limit;
+        }
+        return this.client.request<Event[]>("/api/v1/events", { query });
+    }
+
+    async fetchPackageLogs(
+        packageBase: string,
+        repository: RepositoryId,
+        version?: string,
+        processId?: string,
+        head?: boolean,
+    ): Promise<LogRecord[]> {
+        const query: Record<string, string | boolean> = { ...repository.toQuery() };
+        if (version) {
+            query.version = version;
+        }
+        if (processId) {
+            query.process_id = processId;
+        }
+        if (head) {
+            query.head = true;
+        }
+        return this.client.request<LogRecord[]>(`/api/v2/packages/${encodeURIComponent(packageBase)}/logs`, { query });
+    }
+
+    async fetchPackagePatches(packageBase: string): Promise<Patch[]> {
+        return this.client.request<Patch[]>(`/api/v1/packages/${encodeURIComponent(packageBase)}/patches`);
+    }
+
+    async fetchPackages(repository: RepositoryId): Promise<PackageStatus[]> {
+        return this.client.request<PackageStatus[]>("/api/v1/packages", { query: repository.toQuery() });
+    }
+
+    async fetchServerInfo(): Promise<InfoResponse> {
+        const info = await this.client.request<InfoResponse>("/api/v2/info");
+        return {
+            ...info,
+            repositories: info.repositories.map(repo =>
+                new RepositoryId(repo.architecture, repo.repository),
+            ),
+        };
+    }
+
+    async fetchServerStatus(repository: RepositoryId): Promise<InternalStatus> {
+        return this.client.request<InternalStatus>("/api/v1/status", { query: repository.toQuery() });
+    }
+}

frontend/src/api/client/RequestOptions.ts

@@ -0,0 +1,25 @@
+/*
+ * 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/>.
+ */
+export interface RequestOptions {
+    method?: string;
+    query?: Record<string, string | number | boolean>;
+    json?: unknown;
+    timeout?: number;
+}

frontend/src/api/client/ServiceClient.ts

@@ -0,0 +1,88 @@
+/*
+ * 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 { Client } from "api/client/Client";
+import type { AURPackage } from "models/AURPackage";
+import type { PackageActionRequest } from "models/PackageActionRequest";
+import type { PGPKey } from "models/PGPKey";
+import type { PGPKeyRequest } from "models/PGPKeyRequest";
+import type { RepositoryId } from "models/RepositoryId";
+
+export class ServiceClient {
+
+    protected client: Client;
+
+    constructor(client: Client) {
+        this.client = client;
+    }
+
+    async servicePackageAdd(repository: RepositoryId, data: PackageActionRequest): Promise<void> {
+        return this.client.request("/api/v1/service/add", { method: "POST", query: repository.toQuery(), json: data });
+    }
+
+    async servicePackagePatchRemove(packageBase: string, key: string): Promise<void> {
+        return this.client.request(`/api/v1/packages/${encodeURIComponent(packageBase)}/patches/${encodeURIComponent(key)}`, {
+            method: "DELETE",
+        });
+    }
+
+    async servicePackageRemove(repository: RepositoryId, packages: string[]): Promise<void> {
+        return this.client.request("/api/v1/service/remove", {
+            method: "POST",
+            query: repository.toQuery(),
+            json: { packages },
+        });
+    }
+
+    async servicePackageRequest(repository: RepositoryId, data: PackageActionRequest): Promise<void> {
+        return this.client.request("/api/v1/service/request", {
+            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 } });
+    }
+
+    async servicePackageUpdate(repository: RepositoryId, data: PackageActionRequest): Promise<void> {
+        return this.client.request("/api/v1/service/update", {
+            method: "POST",
+            query: repository.toQuery(),
+            json: data,
+        });
+    }
+
+    async servicePGPFetch(key: string, server: string): Promise<PGPKey> {
+        return this.client.request<PGPKey>("/api/v1/service/pgp", { query: { key, server } });
+    }
+
+    async servicePGPImport(data: PGPKeyRequest): Promise<void> {
+        return this.client.request("/api/v1/service/pgp", { method: "POST", json: data });
+    }
+
+    async serviceRebuild(repository: RepositoryId, packages: string[]): Promise<void> {
+        return this.client.request("/api/v1/service/rebuild", {
+            method: "POST",
+            query: repository.toQuery(),
+            json: { packages },
+        });
+    }
+}