chore: frontend tests (#42)

* more src/components tests
* - extracted repeated code from adminsagas
- excluded tests from build
- instead of svg's using the icons from @lucide/svelte

* AdminUsers refactoring
* tests for AdminEvents, refactoring of said component, also rollout and url paths fixes
* updated tests, unwrap+unwrapOr and such + docs
* interceptors' mocks + fixed tests

Author: HardMax71

docs/frontend/error-handling.md

@@ -0,0 +1,87 @@
+# Error handling
+
+The frontend uses a centralized error handling pattern built around two helpers: `unwrap` and `unwrapOr`. These work with the `{ data, error }` result structure returned by the generated API client.
+
+## Why this exists
+
+The API client returns results in a discriminated union format where every call gives you `{ data, error }`. The naive approach leads to repetitive boilerplate scattered across every component:
+
+```typescript
+const { data, error } = await someApiCall({});
+if (error) return;
+doSomething(data);
+```
+
+This `if (error) return` pattern appeared 17+ times across admin panels and the editor. It's noisy, easy to forget, and obscures the actual logic. The helpers eliminate it while keeping the code readable.
+
+## How it works
+
+Both helpers live in `lib/api-interceptors.ts` alongside the centralized error interceptor that shows toast notifications for API failures.
+
+`unwrap` extracts the data or throws if there's an error:
+
+```typescript
+const data = unwrap(await listUsersApiV1AdminUsersGet({}));
+// data is guaranteed to exist here - if there was an error, we threw
+users = data;
+```
+
+When the API call fails, the interceptor has already shown a toast to the user. The throw stops the function execution - any code after `unwrap` only runs on success. The thrown error bubbles up as an unhandled rejection, gets logged to console, and that's it.
+
+`unwrapOr` returns a fallback value instead of throwing:
+
+```typescript
+const data = unwrapOr(await listUsersApiV1AdminUsersGet({}), null);
+users = data ? data : [];
+```
+
+This is useful when you want to continue execution with a default value rather than bail out entirely. Common for load functions where an empty array is a reasonable fallback.
+
+## Choosing between them
+
+Use `unwrap` when the function should stop on error. Delete operations, save operations, anything where subsequent code assumes success:
+
+```typescript
+async function deleteUser(): Promise<void> {
+    deletingUser = true;
+    const result = await deleteUserApiV1AdminUsersUserIdDelete({ path: { user_id } });
+    deletingUser = false;
+    unwrap(result);
+    // only runs if delete succeeded
+    await loadUsers();
+    showModal = false;
+}
+```
+
+Use `unwrapOr` when you can gracefully handle failure with a default. Load operations where showing an empty state is acceptable:
+
+```typescript
+async function loadEvents() {
+    loading = true;
+    const data = unwrapOr(await browseEventsApiV1AdminEventsBrowsePost({ body: filters }), null);
+    loading = false;
+    events = data?.events || [];
+}
+```
+
+## Cleanup before unwrap
+
+If you need cleanup to run regardless of success or failure (like resetting a loading flag), do it before calling `unwrap`:
+
+```typescript
+async function saveRateLimits(): Promise<void> {
+    savingRateLimits = true;
+    const result = await updateRateLimitsApi({ body: config });
+    savingRateLimits = false;  // runs whether or not there's an error
+    unwrap(result);            // throws if error, stopping execution
+    showModal = false;         // only runs on success
+}
+```
+
+The pattern is: await the call, do cleanup, then unwrap. This keeps the loading state correct even when errors occur.
+
+## What happens on error
+
+The error interceptor in `api-interceptors.ts` handles user feedback. When an API call fails, it shows an appropriate toast based on the status code (401 redirects to login, 403 shows access denied, 422 formats validation errors, 429 warns about rate limits, 5xx shows server error). By the time your component code sees the error, the user has already been notified.
+
+The `unwrap` throw becomes an unhandled promise rejection. The global handler in `main.ts` logs it to console and suppresses the default browser error. No error page, no duplicate notifications - just a clean exit from the function.

frontend/package-lock.json

@@ -23,6 +23,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.34.1",
+    "@lucide/svelte": "^0.562.0",
     "@mateothegreat/svelte5-router": "^2.16.19",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",

frontend/package.json

@@ -181,7 +181,8 @@ export default {
             preferBuiltins: false,
             // Prefer ES modules
             mainFields: ['svelte', 'module', 'browser', 'main'],
-            exportConditions: ['svelte']
+            exportConditions: ['svelte'],
+            extensions: ['.mjs', '.js', '.json', '.node', '.svelte']
         }),
         commonjs(),
         !production && {

frontend/rollup.config.js

@@ -81,7 +81,7 @@
         { path: "/admin/sagas", component: AdminSagas, hooks: { pre: requireAuth } },
         { path: "/admin/users", component: AdminUsers, hooks: { pre: requireAuth } },
         { path: "/admin/settings", component: AdminSettings, hooks: { pre: requireAuth } },
-        { path: "/admin", component: AdminEvents, hooks: { pre: requireAuth } },
+        { path: "^/admin$", component: AdminEvents, hooks: { pre: requireAuth } },
     ];
 </script>
 

frontend/src/App.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {
+    PlayCircle,
+    CheckCircle,
+    XCircle,
+    Clock,
+    FileInput,
+    Zap,
+    Check,
+    X,
+    MinusCircle,
+    HelpCircle,
+  } from '@lucide/svelte';
+
+  interface Props {
+    eventType: string;
+    size?: number;
+  }
+
+  let { eventType, size = 20 }: Props = $props();
+
+  // Map event types to icon components
+  const iconMap: Record<string, typeof PlayCircle> = {
+    // Execution events
+    'execution.requested': FileInput,
+    'execution_requested': FileInput,
+    'execution.started': PlayCircle,
+    'execution_started': PlayCircle,
+    'execution.completed': CheckCircle,
+    'execution_completed': CheckCircle,
+    'execution.failed': XCircle,
+    'execution_failed': XCircle,
+    'execution.timeout': Clock,
+    'execution_timeout': Clock,
+    // Pod events
+    'pod.created': Zap,
+    'pod_created': Zap,
+    'pod.running': Zap,
+    'pod_running': Zap,
+    'pod.succeeded': Check,
+    'pod_succeeded': Check,
+    'pod.failed': X,
+    'pod_failed': X,
+    'pod.terminated': MinusCircle,
+    'pod_terminated': MinusCircle,
+  };
+
+  const Icon = $derived(iconMap[eventType] || HelpCircle);
+</script>
+
+<Icon {size} />

frontend/src/components/EventTypeIcon.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { X } from '@lucide/svelte';
+  import { fade } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    children: Snippet;
+    footer?: Snippet;
+  }
+
+  let { open, title, onClose, size = 'lg', children, footer }: Props = $props();
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-2xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-6xl',
+  };
+
+  // Only listen for Escape when modal is open
+  $effect(() => {
+    if (!open) return;
+
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  });
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) onClose();
+  }
+</script>
+
+{#if open}
+  <div
+    class="modal-backdrop"
+    transition:fade={{ duration: 150 }}
+    onclick={handleBackdropClick}
+    onkeydown={(e) => e.key === 'Escape' && onClose()}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="modal-title"
+    tabindex="-1"
+  >
+    <div class="modal-container {sizeClasses[size]}">
+      <div class="modal-header">
+        <h2 id="modal-title" class="modal-title">{title}</h2>
+        <button onclick={onClose} class="modal-close" aria-label="Close modal">
+          <X size={24} />
+        </button>
+      </div>
+      <div class="modal-body">
+        {@render children()}
+      </div>
+      {#if footer}
+        <div class="modal-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

frontend/src/components/Modal.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@lucide/svelte';
+
+  interface Props {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
+    itemName?: string;
+  }
+
+  let {
+    currentPage,
+    totalPages,
+    totalItems,
+    pageSize,
+    onPageChange,
+    onPageSizeChange,
+    pageSizeOptions = [10, 25, 50, 100],
+    itemName = 'items',
+  }: Props = $props();
+
+  const start = $derived(Math.min((currentPage - 1) * pageSize + 1, totalItems));
+  const end = $derived(Math.min(currentPage * pageSize, totalItems));
+</script>
+
+{#if totalPages > 1 || onPageSizeChange}
+  <div class="pagination-container">
+    <div class="pagination-info">
+      Showing {start} - {end} of {totalItems} {itemName}
+    </div>
+
+    <div class="flex items-center gap-4">
+      {#if onPageSizeChange}
+        <select
+          class="pagination-selector"
+          value={pageSize}
+          onchange={(e) => onPageSizeChange?.(Number(e.currentTarget.value))}
+        >
+          {#each pageSizeOptions as size}
+            <option value={size}>{size} / page</option>
+          {/each}
+        </select>
+      {/if}
+
+      {#if totalPages > 1}
+        <div class="pagination-controls">
+          <button
+            class="pagination-button"
+            onclick={() => onPageChange(1)}
+            disabled={currentPage === 1}
+            aria-label="First page"
+          >
+            <ChevronsLeft size={16} />
+          </button>
+          <button
+            class="pagination-button"
+            onclick={() => onPageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+            aria-label="Previous page"
+          >
+            <ChevronLeft size={16} />
+          </button>
+          <span class="pagination-text">
+            <span class="font-medium">{currentPage}</span> / <span class="font-medium">{totalPages}</span>
+          </span>
+          <button
+            class="pagination-button"
+            onclick={() => onPageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            aria-label="Next page"
+          >
+            <ChevronRight size={16} />
+          </button>
+          <button
+            class="pagination-button"
+            onclick={() => onPageChange(totalPages)}
+            disabled={currentPage === totalPages}
+            aria-label="Last page"
+          >
+            <ChevronsRight size={16} />
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}