feat(01-02): add data directory, server hooks, and verification page

- Create data/ directory with attachments/ subdirectory and .gitkeep files
- Update .gitignore to track .gitkeep but ignore database files
- Server hooks initialize database on first request
- Page server load fetches entries and creates test entry if none exist
- Verification page shows database status, entry count, and recent entries

.gitignore

@@ -22,5 +22,10 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
-# Database
-/data/
+# Data directory (persistent data)
+data/*.db
+data/*.db-wal
+data/*.db-shm
+data/attachments/*
+!data/.gitkeep
+!data/attachments/.gitkeep

src/hooks.server.ts

@@ -0,0 +1,23 @@
+import type { Handle } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { entries } from '$lib/server/db/schema';
+
+// Ensure database tables exist on first request
+let initialized = false;
+
+export const handle: Handle = async ({ event, resolve }) => {
+	if (!initialized) {
+		// Run a simple query to ensure connection works
+		// Drizzle with push handles schema creation, but this verifies connectivity
+		try {
+			db.select().from(entries).limit(1).all();
+			initialized = true;
+			console.log('Database initialized successfully');
+		} catch (error) {
+			console.error('Database initialization failed:', error);
+			// Don't block - let the error propagate to the request
+		}
+	}
+
+	return resolve(event);
+};

src/routes/+page.server.ts

@@ -0,0 +1,24 @@
+import type { PageServerLoad } from './$types';
+import { entryRepository } from '$lib/server/db/repository';
+
+export const load: PageServerLoad = async () => {
+	const count = entryRepository.count();
+
+	// Create a test entry if none exist (for verification)
+	let testEntry = null;
+	if (count === 0) {
+		testEntry = entryRepository.create({
+			title: 'Foundation Test',
+			content: 'This entry was created to verify the foundation is working.',
+			type: 'thought'
+		});
+	}
+
+	const entries = entryRepository.getAll({ limit: 5 });
+
+	return {
+		dbStatus: 'connected',
+		entryCount: testEntry ? count + 1 : count,
+		recentEntries: entries
+	};
+};

src/routes/+page.svelte

@@ -1,2 +1,46 @@
-<h1 class="text-2xl font-bold text-blue-600">TaskPlanner</h1>
-<p class="text-gray-600">Foundation setup complete.</p>
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<main class="min-h-screen bg-gray-50 p-8">
+	<div class="max-w-2xl mx-auto">
+		<h1 class="text-3xl font-bold text-gray-900 mb-2">TaskPlanner</h1>
+		<p class="text-gray-600 mb-8">Foundation Phase Complete</p>
+
+		<div class="bg-white rounded-lg shadow p-6 mb-6">
+			<h2 class="text-lg font-semibold text-gray-800 mb-4">System Status</h2>
+
+			<div class="space-y-3">
+				<div class="flex items-center gap-2">
+					<span class="w-3 h-3 rounded-full bg-green-500"></span>
+					<span class="text-gray-700">Database: {data.dbStatus}</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<span class="w-3 h-3 rounded-full bg-green-500"></span>
+					<span class="text-gray-700">Entries in database: {data.entryCount}</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<span class="w-3 h-3 rounded-full bg-green-500"></span>
+					<span class="text-gray-700">Repository layer: operational</span>
+				</div>
+			</div>
+		</div>
+
+		{#if data.recentEntries.length > 0}
+			<div class="bg-white rounded-lg shadow p-6">
+				<h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Entries</h2>
+				<ul class="space-y-2">
+					{#each data.recentEntries as entry}
+						<li class="p-3 bg-gray-50 rounded">
+							<div class="font-medium text-gray-900">{entry.title || '(no title)'}</div>
+							<div class="text-sm text-gray-600">{entry.content}</div>
+							<div class="text-xs text-gray-400 mt-1">
+								Type: {entry.type} | Created: {new Date(entry.createdAt).toLocaleString()}
+							</div>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</div>
+</main>