fix: dynamically import chart.js to avoid SSR failure

Chart.js requires browser APIs and was failing during SSR when
imported at module level. Move import inside onMount.

Author: aster-void

.claude/troubleshooting/chartjs-ssr-failure.md

@@ -0,0 +1,26 @@
+# Chart.js SSR Failure
+
+**Keywords**: chart.js, blank page, nothing renders, empty page, white screen
+
+**Symptom**: Page using Chart.js renders blank/nothing.
+
+**Cause**: Chart.js requires browser APIs (`window`, `canvas`, etc.) and fails when imported at module level during SSR.
+
+**Solution**: Dynamically import Chart.js inside `onMount`:
+
+```svelte
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+  import type { Chart as ChartType } from "chart.js";
+
+  let chart: ChartType | null = null;
+
+  onDestroy(() => chart?.destroy());
+
+  onMount(async () => {
+    const { Chart, LineController, ... } = await import("chart.js");
+    Chart.register(LineController, ...);
+    // create chart
+  });
+</script>
+```

CLAUDE.md

@@ -5,6 +5,7 @@
 {Main work}
 {Run bun tidy / it muts return 0 warnings and errors}
 {Update knowledge database and CLAUDE.md as needed}
+{Log troubleshooting to .claude/troubleshooting/ if applicable}
 </workflow>
 
 # Knowledge Database
@@ -15,6 +16,16 @@ ALWAYS read relevant knowledges before you start working.
 ls ./docs/knowledges
 ```
 
+# Troubleshooting
+
+When fixing non-obvious bugs, log the issue to `.claude/troubleshooting/` for future reference.
+
+Each file should include: **Keywords** (symptom-focused for greppability), **Symptom**, **Cause**, **Solution**.
+
+```sh
+ls .claude/troubleshooting
+```
+
 # Available Tools
 
 - core: Svelte v5 + Remote Functions + Async

src/lib/components/analytics/ViewTrendChart.svelte

@@ -1,29 +1,6 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import {
-		Chart,
-		LineController,
-		LineElement,
-		PointElement,
-		LinearScale,
-		CategoryScale,
-		Title,
-		Tooltip,
-		Legend,
-		Filler,
-	} from "chart.js";
-
-	Chart.register(
-		LineController,
-		LineElement,
-		PointElement,
-		LinearScale,
-		CategoryScale,
-		Title,
-		Tooltip,
-		Legend,
-		Filler,
-	);
+	import { onDestroy, onMount } from "svelte";
+	import type { Chart as ChartType } from "chart.js";
 
 	interface Props {
 		data: Array<{ date: string; count: number }>;
@@ -34,9 +11,36 @@
 	const { data, title = "View Trend", color = "#00D372" }: Props = $props();
 
 	let canvas: HTMLCanvasElement;
-	let chart: Chart | null = null;
+	let chart: ChartType | null = null;
+
+	onDestroy(() => chart?.destroy());
+
+	onMount(async () => {
+		const {
+			Chart,
+			LineController,
+			LineElement,
+			PointElement,
+			LinearScale,
+			CategoryScale,
+			Title,
+			Tooltip,
+			Legend,
+			Filler,
+		} = await import("chart.js");
+
+		Chart.register(
+			LineController,
+			LineElement,
+			PointElement,
+			LinearScale,
+			CategoryScale,
+			Title,
+			Tooltip,
+			Legend,
+			Filler,
+		);
 
-	onMount(() => {
 		const ctx = canvas.getContext("2d");
 		if (!ctx) return;
 
@@ -152,10 +156,6 @@
 				},
 			},
 		});
-
-		return () => {
-			chart?.destroy();
-		};
 	});
 </script>