From dae5f2c9a10379ba05684451e9e388d1afbb8fd2 Mon Sep 17 00:00:00 2001
From: ajianaz <ajianaz@users.noreply.github.com>
Date: Tue, 30 Jun 2026 17:54:43 +0700
Subject: [PATCH] fix(web): ApiClientError undefined crash + type errors +
 frontend CI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- P1: Add missing ApiClientError class definition (was accidentally
  deleted during v0.2.0 merge — caused login crash with 'ApiClientError
  is not defined' runtime error)
- P1: Remove dead [id] issue route (superseded by [issueId]/events/[eventId]
  which correctly accesses event data via data.message)
- P2: Fix debounceTimer null check — use undefined instead of null to
  match clearTimeout signature
- P2: Extract vitest config from vite.config.ts to vitest.config.ts
  with proper SvelteKit alias resolution
- P3: Add svelte-check and vitest to web-build CI pipeline
---
 .github/workflows/ci.yml                      |   2 +
 web/src/lib/api.ts                            |   9 +
 .../routes/(dashboard)/issues/+page.svelte    |   6 +-
 .../(dashboard)/issues/[id]/+page.svelte      | 160 ------------------
 web/vite.config.ts                            |   8 +-
 web/vitest.config.ts                          |  18 ++
 6 files changed, 33 insertions(+), 170 deletions(-)
 delete mode 100644 web/src/routes/(dashboard)/issues/[id]/+page.svelte
 create mode 100644 web/vitest.config.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e3d4c50..a566d19 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -93,7 +93,9 @@ jobs:
           cache: 'npm'
           cache-dependency-path: web/package-lock.json
       - run: npm ci
+      - run: npm run check
       - run: npm run build
+      - run: npm test
 
   cora-review:
     name: Cora Review
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index 3c467ca..985400e 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -70,6 +70,15 @@ export interface ListResponse<T> {
 	per_page: number;
 }
 
+export class ApiClientError extends Error {
+	constructor(
+		public status: number,
+		message: string
+	) {
+		super(message);
+		this.name = 'ApiClientError';
+	}
+}
 
 // ── Transactions ──────────────────────────────────────────────────────
 
diff --git a/web/src/routes/(dashboard)/issues/+page.svelte b/web/src/routes/(dashboard)/issues/+page.svelte
index f894029..f46f69c 100644
--- a/web/src/routes/(dashboard)/issues/+page.svelte
+++ b/web/src/routes/(dashboard)/issues/+page.svelte
@@ -34,7 +34,7 @@
 	let wsUnsub: (() => void) | null = $state(null);
 
 	let searchQuery: string = $state('');
-	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
 
 	const statuses = ['unresolved', 'resolved', 'ignored'];
 	const levels = ['fatal', 'error', 'warning', 'info', 'debug'];
@@ -197,7 +197,7 @@
 			value={searchQuery}
 			oninput={(e) => {
 				searchQuery = (e.target as HTMLInputElement).value;
-				clearTimeout(debounceTimer);
+				if (debounceTimer !== undefined) clearTimeout(debounceTimer);
 				debounceTimer = setTimeout(() => {
 					currentPage = 1;
 					navigate();
@@ -206,7 +206,7 @@
 			}
 			onkeydown={(e) => {
 				if (e.key === 'Enter') {
-					clearTimeout(debounceTimer);
+					if (debounceTimer !== undefined) clearTimeout(debounceTimer);
 					currentPage = 1;
 					navigate();
 				}
diff --git a/web/src/routes/(dashboard)/issues/[id]/+page.svelte b/web/src/routes/(dashboard)/issues/[id]/+page.svelte
deleted file mode 100644
index 42496c8..0000000
--- a/web/src/routes/(dashboard)/issues/[id]/+page.svelte
+++ /dev/null
@@ -1,160 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { page } from '$app/state';
-	import { goto } from '$app/navigation';
-	import { api, type Issue, type StoredEvent, type Project } from '$lib/api';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-
-	let issue: Issue | null = $state(null);
-	let events: StoredEvent[] = $state([]);
-	let project: Project | null = $state(null);
-	let loading = $state(true);
-	let error = $state('');
-
-	import { levelTextClass, statusTextClass, timeAgo } from '$lib/utils';
-
-	const statusLabels: Record<string, string> = {
-		unresolved: 'Resolve',
-		resolved: 'Reopen',
-		ignored: 'Unignore'
-	};
-
-	async function toggleStatus() {
-		if (!issue) return;
-		const newStatus = issue.status === 'unresolved' ? 'resolved' : 'unresolved';
-		try {
-			await api.setIssueStatus(issue.id, newStatus);
-			issue = { ...issue, status: newStatus };
-		} catch (e: any) {
-			error = e?.message || 'Failed to update status';
-		}
-	}
-
-	function goBack() {
-		const projectSlug = page.url.searchParams.get('project');
-		if (projectSlug) {
-			goto(`/issues?project=${projectSlug}`);
-		} else {
-			goto('/issues');
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			goBack();
-		}
-	}
-
-	onMount(async () => {
-		const issueId = page.params.id;
-		if (!issueId) return;
-
-		try {
-			issue = await api.getIssue(issueId);
-			const res = await api.listEvents(issueId);
-			events = res.data;
-
-			// Load project info
-			const projectSlug = page.url.searchParams.get('project');
-			if (projectSlug) {
-				try {
-					project = await api.getProject(projectSlug);
-				} catch {
-					// Project lookup failed, that's OK
-				}
-			} else {
-				// Try to find project from projects list
-				const projects = await api.listProjects();
-				const match = projects.find(p => p.id === issue?.project_id);
-				if (match) project = match;
-			}
-		} catch (e: any) {
-			error = e?.message || 'Failed to load issue';
-		} finally {
-			loading = false;
-		}
-	});
-</script>
-
-<svelte:head>
-	<title>{issue ? issue.title : 'Issue'} · TrapFall</title>
-</svelte:head>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="p-4 lg:p-6 space-y-4">
-	{#if loading}
-		<div class="space-y-4">
-			<Skeleton class="h-8 w-1/2" />
-			<Skeleton class="h-48 w-full" />
-		</div>
-	{:else if error}
-		<div class="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
-			<p class="text-sm text-destructive">{error}</p>
-		</div>
-	{:else if issue}
-		<!-- Back nav -->
-		<div class="flex items-center gap-2 text-sm text-muted-foreground">
-			<Button variant="ghost" size="sm" onclick={goBack} class="gap-1 px-2">
-				←
-				Back
-			</Button>
-			{#if project}
-				<span class="text-muted-foreground/50">·</span>
-				<Badge variant="outline" class="text-xs">{project.name}</Badge>
-			{/if}
-			<span class="text-muted-foreground/50">·</span>
-			<span class="text-xs">Press <kbd class="rounded border px-1 py-0.5 text-[10px] font-mono">ESC</kbd> to go back</span>
-		</div>
-
-		<!-- Header -->
-		<div class="flex items-start justify-between gap-4">
-			<div class="space-y-1">
-				<div class="flex items-center gap-2">
-					<Badge variant="outline" class={levelTextClass(issue.level)}>
-						{issue.level}
-					</Badge>
-					<Badge variant="outline" class={statusTextClass(issue.status)}>
-						{issue.status}
-					</Badge>
-					<h1 class="text-xl font-bold">{issue.title}</h1>
-				</div>
-				<p class="text-sm text-muted-foreground">
-					{issue.culprit || 'No culprit'} · {issue.count} events · {issue.user_count} users · Last seen {timeAgo(issue.last_seen)}
-				</p>
-			</div>
-			<Button variant="outline" onclick={toggleStatus}>
-				{statusLabels[issue.status] || 'Toggle'}
-			</Button>
-		</div>
-
-		<!-- Event List -->
-		<div class="space-y-3">
-			<h2 class="text-lg font-semibold">Events</h2>
-			{#if events.length === 0}
-				<p class="text-sm text-muted-foreground">No event data available.</p>
-			{:else}
-				{#each events as event}
-					<Card>
-						<CardHeader class="pb-2">
-							<CardTitle class="text-sm font-mono">
-								{timeAgo(event.received_at)} · {event.platform || 'unknown'}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							{#if event.message}
-								<p class="text-sm mb-2">{event.message}</p>
-							{/if}
-							<pre class="text-xs bg-muted p-3 rounded overflow-auto max-h-96">
-{JSON.stringify(event.data, null, 2)}</pre
-							>
-						</CardContent>
-					</Card>
-				{/each}
-			{/if}
-		</div>
-	{/if}
-</div>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 0414132..bf699a8 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -3,11 +3,5 @@ import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()],
-	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}'],
-		environment: 'jsdom',
-		globals: true,
-		setupFiles: ['src/test-setup.ts']
-	}
+	plugins: [tailwindcss(), sveltekit()]
 });
diff --git a/web/vitest.config.ts b/web/vitest.config.ts
new file mode 100644
index 0000000..476a202
--- /dev/null
+++ b/web/vitest.config.ts
@@ -0,0 +1,18 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	resolve: {
+		alias: {
+			$lib: resolve('./src/lib'),
+			$components: resolve('./src/lib/components'),
+			$ui: resolve('./src/lib/components/ui')
+		}
+	},
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}'],
+		environment: 'jsdom',
+		globals: true,
+		setupFiles: ['src/test-setup.ts']
+	}
+});