stack(arrConfig): implemented arr config handling

- database module + migrations handler - http client class + arr client child (with connection pooling, retries, backoff) - toast alerts - add new arr configs
2026-01-22 10:51:02 +01:00 · 2025-10-20 02:13:09 +10:30
parent 24e5571a66
commit e24410f6f3
42 changed files with 2494 additions and 6 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
 engine-strict=true
+@jsr:registry=https://npm.jsr.io
--- a/deno.json
+++ b/deno.json
@@ -3,7 +3,12 @@
 		"$config": "./src/utils/config/config.ts",
 		"$stores": "./src/stores",
 		"$components": "./src/components",
-		"$static": "./src/static"
+		"$static": "./src/static",
+		"$db/": "./src/db/",
+		"$logger": "./src/utils/logger/logger.ts",
+		"$arr/": "./src/utils/arr/",
+		"$http/": "./src/utils/http/",
+		"$api": "./src/utils/api/request.ts"
 	},
 	"tasks": {
 		"dev": "APP_BASE_PATH=./temp vite dev",
--- a/deno.lock
+++ b/deno.lock
@@ -3,6 +3,7 @@
  "specifiers": {
    "npm:@eslint/compat@^1.4.0": "1.4.0_eslint@9.37.0",
    "npm:@eslint/js@^9.36.0": "9.37.0",
+    "npm:@jsr/db__sqlite@0.12": "0.12.0",
    "npm:@sveltejs/kit@^2.43.2": "2.47.1_@sveltejs+vite-plugin-svelte@6.2.1__svelte@5.40.2___acorn@8.15.0__vite@7.1.10___@types+node@22.18.11___picomatch@4.0.3__@types+node@22.18.11_svelte@5.40.2__acorn@8.15.0_vite@7.1.10__@types+node@22.18.11__picomatch@4.0.3_acorn@8.15.0_@types+node@22.18.11",
    "npm:@sveltejs/vite-plugin-svelte@^6.2.0": "6.2.1_svelte@5.40.2__acorn@8.15.0_vite@7.1.10__@types+node@22.18.11__picomatch@4.0.3_@types+node@22.18.11",
    "npm:@tailwindcss/forms@~0.5.10": "0.5.10_tailwindcss@4.1.14",
@@ -396,6 +397,69 @@
        "@jridgewell/sourcemap-codec"
      ]
    },
+    "@jsr/db__sqlite@0.12.0": {
+      "integrity": "sha512-nTMYOzEl8oFhtPS90tAdMbpYTec7/brHtlVLt8afAsNLX+z1FkEIWljxqJS8UDzN23wCTsNXL96NArqBaJRy9A==",
+      "dependencies": [
+        "@jsr/denosaurs__plug",
+        "@jsr/std__path@0.217.0"
+      ],
+      "tarball": "https://npm.jsr.io/~/11/@jsr/db__sqlite/0.12.0.tgz"
+    },
+    "@jsr/denosaurs__plug@1.1.0": {
+      "integrity": "sha512-GNRMr8XcYWbv8C1B5OjDa5u8q3p2lz7YVWQLhH5HAy0pkpb0+Y3npSxzjM49v5ajTFIzUCwIKv1gQukPm9q7qw==",
+      "dependencies": [
+        "@jsr/std__encoding",
+        "@jsr/std__fmt@1.0.8",
+        "@jsr/std__fs",
+        "@jsr/std__path@1.1.2"
+      ],
+      "tarball": "https://npm.jsr.io/~/11/@jsr/denosaurs__plug/1.1.0.tgz"
+    },
+    "@jsr/std__assert@0.217.0": {
+      "integrity": "sha512-kCGfcXX8lMcZHWrCgFhbdpNloB50MkLwHdRZvZKjZK424F9g+M742jkTDLMOJmwkDoEqFKyNVrGhPtspS4+NvQ==",
+      "dependencies": [
+        "@jsr/std__fmt@0.217.0"
+      ],
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__assert/0.217.0.tgz"
+    },
+    "@jsr/std__encoding@1.0.10": {
+      "integrity": "sha512-WK2njnDTyKefroRNk2Ooq7GStp6Y0ccAvr4To+Z/zecRAGe7+OSvH9DbiaHpAKwEi2KQbmpWMOYsdNt+TsdmSw==",
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__encoding/1.0.10.tgz"
+    },
+    "@jsr/std__fmt@0.217.0": {
+      "integrity": "sha512-AM33Cr/V3St3Cj5O4QQe4aMKGyzL9eYz+mOC58BmqxgeZwFbvSC06DzM2DS3ixcsAnwH2kYMXHpCBax0sT9q8Q==",
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__fmt/0.217.0.tgz"
+    },
+    "@jsr/std__fmt@1.0.8": {
+      "integrity": "sha512-miZHzj9OgjuajrcMKzpqNVwFb9O71UHZzV/FHVq0E0Uwmv/1JqXgmXAoBNPrn+MP0fHT3mMgaZ6XvQO7dam67Q==",
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__fmt/1.0.8.tgz"
+    },
+    "@jsr/std__fs@1.0.19": {
+      "integrity": "sha512-TEjyE8g+46jPlu7dJHLrwc8NMGl8zfG+JjWxyNQyDbxP0RtqZ4JmYZfR9vy4RWYWJQbLpw6Kbt2n+K/2zAO/JA==",
+      "dependencies": [
+        "@jsr/std__internal",
+        "@jsr/std__path@1.1.2"
+      ],
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__fs/1.0.19.tgz"
+    },
+    "@jsr/std__internal@1.0.12": {
+      "integrity": "sha512-6xReMW9p+paJgqoFRpOE2nogJFvzPfaLHLIlyADYjKMUcwDyjKZxryIbgcU+gxiTygn8yCjld1HoI0ET4/iZeA==",
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__internal/1.0.12.tgz"
+    },
+    "@jsr/std__path@0.217.0": {
+      "integrity": "sha512-KoqEpZX9CE8zyyr4+X6AROOGYv95AysnJni2E5g9pqG+IGUUuNjOC3yRTvHnsB5tJ6uQs6DwET5chIdUPcylIQ==",
+      "dependencies": [
+        "@jsr/std__assert"
+      ],
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__path/0.217.0.tgz"
+    },
+    "@jsr/std__path@1.1.2": {
+      "integrity": "sha512-5hkOR1s5M7am02Bn9KS+SNMNwUSivz7t7/w2HBhFIfO7Eh8+mWilaZ+1tdanV9aaSHr4c99Zo4Da+cCSuzUOdA==",
+      "dependencies": [
+        "@jsr/std__internal"
+      ],
+      "tarball": "https://npm.jsr.io/~/11/@jsr/std__path/1.1.2.tgz"
+    },
    "@nodelib/fs.scandir@2.1.5": {
      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
      "dependencies": [
@@ -1815,6 +1879,7 @@
      "dependencies": [
        "npm:@eslint/compat@^1.4.0",
        "npm:@eslint/js@^9.36.0",
+        "npm:@jsr/db__sqlite@0.12",
        "npm:@sveltejs/kit@^2.43.2",
        "npm:@sveltejs/vite-plugin-svelte@^6.2.0",
        "npm:@tailwindcss/forms@~0.5.10",
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -8,6 +8,11 @@ declare global {
 		// interface PageState {}
 		// interface Platform {}
 	}
+
+	// Extend RequestInit to support Deno HttpClient
+	interface RequestInit {
+		client?: Deno.HttpClient;
+	}
 }

 export {};
--- a/src/components/form/TagInput.svelte
+++ b/src/components/form/TagInput.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { X } from 'lucide-svelte';
+
+	export let tags: string[] = [];
+	export let placeholder = 'Type and press Enter to add tags';
+
+	let inputValue = '';
+
+	function addTag() {
+		const trimmed = inputValue.trim();
+		if (trimmed && !tags.includes(trimmed)) {
+			tags = [...tags, trimmed];
+			inputValue = '';
+		}
+	}
+
+	function removeTag(index: number) {
+		tags = tags.filter((_, i) => i !== index);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			addTag();
+		} else if (event.key === 'Backspace' && inputValue === '' && tags.length > 0) {
+			// Remove last tag when backspace is pressed on empty input
+			removeTag(tags.length - 1);
+		}
+	}
+</script>
+
+<div
+	class="flex min-h-[2.5rem] flex-wrap gap-2 rounded-lg border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-700 dark:bg-neutral-800"
+>
+	{#each tags as tag, index (tag)}
+		<div
+			class="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+		>
+			<span>{tag}</span>
+			<button
+				type="button"
+				on:click={() => removeTag(index)}
+				class="hover:text-blue-900 dark:hover:text-blue-100"
+				aria-label="Remove tag"
+			>
+				<X size={14} />
+			</button>
+		</div>
+	{/each}
+
+	<input
+		type="text"
+		id="tags-input"
+		bind:value={inputValue}
+		on:keydown={handleKeydown}
+		{placeholder}
+		class="min-w-[120px] flex-1 border-0 bg-transparent text-neutral-900 outline-none placeholder:text-neutral-400 focus:ring-0 dark:text-neutral-50 dark:placeholder:text-neutral-500"
+	/>
+</div>
--- a/src/components/navigation/pageNav/pageNav.svelte
+++ b/src/components/navigation/pageNav/pageNav.svelte
@@ -10,9 +10,9 @@
 	<div class="flex-1 overflow-y-auto p-4">
 		<Group label="🏠 Home" href="/" hasItems={true}>
 			<GroupItem label="Databases" href="/databases" />
-			<GroupItem label="Radarr" href="/radarr" />
-			<GroupItem label="Sonarr" href="/sonarr" />
-			<GroupItem label="Lidarr" href="/lidarr" />
+			<GroupItem label="Radarr" href="/arr/radarr" />
+			<GroupItem label="Sonarr" href="/arr/sonarr" />
+			<GroupItem label="Lidarr" href="/arr/lidarr" />
 		</Group>

 		<Group label="⚡ Quality Profiles" href="/quality-profiles" initialOpen={false} />
--- a/src/components/toast/Toast.svelte
+++ b/src/components/toast/Toast.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-svelte';
+	import type { ToastType } from '$stores/toast';
+	import { toastStore } from '$stores/toast';
+	import { fade, fly } from 'svelte/transition';
+
+	export let id: string;
+	export let type: ToastType;
+	export let message: string;
+
+	// Icon mapping
+	const icons = {
+		success: CheckCircle,
+		error: XCircle,
+		warning: AlertTriangle,
+		info: Info
+	};
+
+	// Style mapping
+	const styles = {
+		success: 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200',
+		error: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200',
+		warning: 'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200',
+		info: 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200'
+	};
+
+	// Icon color mapping
+	const iconColors = {
+		success: 'text-green-600 dark:text-green-400',
+		error: 'text-red-600 dark:text-red-400',
+		warning: 'text-yellow-600 dark:text-yellow-400',
+		info: 'text-blue-600 dark:text-blue-400'
+	};
+
+	const Icon = icons[type];
+
+	function dismiss() {
+		toastStore.remove(id);
+	}
+</script>
+
+<div
+	in:fly={{ y: -20, duration: 300 }}
+	out:fade={{ duration: 200 }}
+	class="flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg {styles[type]}"
+>
+	<Icon size={20} class="mt-0.5 flex-shrink-0 {iconColors[type]}" />
+	<p class="flex-1 text-sm font-medium">{message}</p>
+	<button
+		on:click={dismiss}
+		class="flex-shrink-0 opacity-50 transition-opacity hover:opacity-100"
+		aria-label="Dismiss"
+	>
+		<X size={16} />
+	</button>
+</div>
--- a/src/components/toast/ToastContainer.svelte
+++ b/src/components/toast/ToastContainer.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { toastStore } from '$stores/toast';
+	import Toast from './Toast.svelte';
+</script>
+
+<div class="pointer-events-none fixed right-4 top-20 z-50 flex flex-col gap-3">
+	{#each $toastStore as toast (toast.id)}
+		<div class="pointer-events-auto">
+			<Toast id={toast.id} type={toast.type} message={toast.message} />
+		</div>
+	{/each}
+</div>
--- a/src/db/db.ts
+++ b/src/db/db.ts
@@ -0,0 +1,162 @@
+import { Database } from '@jsr/db__sqlite';
+import type { RestBindParameters } from '@jsr/db__sqlite';
+import { config } from '$config';
+import { logger } from '$logger';
+
+/**
+ * Database singleton for SQLite
+ */
+class DatabaseManager {
+	private db: Database | null = null;
+	private initialized = false;
+
+	/**
+	 * Initialize the database connection
+	 */
+	async initialize(): Promise<void> {
+		if (this.initialized) {
+			return;
+		}
+
+		try {
+			// Ensure data directory exists
+			await Deno.mkdir(config.paths.data, { recursive: true });
+
+			// Open database connection
+			this.db = new Database(config.paths.database);
+
+			// Enable foreign keys
+			this.db.exec('PRAGMA foreign_keys = ON');
+
+			// Set journal mode to WAL for better concurrency
+			this.db.exec('PRAGMA journal_mode = WAL');
+
+			// Set synchronous to NORMAL for better performance
+			this.db.exec('PRAGMA synchronous = NORMAL');
+
+			this.initialized = true;
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			await logger.error(`Failed to initialize database: ${message}`, {
+				source: 'DatabaseManager',
+				meta: error
+			});
+			throw new Error(`Failed to initialize database: ${message}`);
+		}
+	}
+
+	/**
+	 * Get the database instance
+	 */
+	getDatabase(): Database {
+		if (!this.db) {
+			throw new Error('Database not initialized. Call initialize() first.');
+		}
+		return this.db;
+	}
+
+	/**
+	 * Execute a SQL statement
+	 */
+	exec(sql: string): void {
+		const db = this.getDatabase();
+		db.exec(sql);
+	}
+
+	/**
+	 * Prepare a SQL statement
+	 */
+	prepare(sql: string) {
+		const db = this.getDatabase();
+		return db.prepare(sql);
+	}
+
+	/**
+	 * Run a query and return all results
+	 */
+	query<T = unknown>(sql: string, ...params: RestBindParameters): T[] {
+		const stmt = this.prepare(sql);
+		if (params.length > 0) {
+			return stmt.all(...params) as T[];
+		}
+		return stmt.all() as T[];
+	}
+
+	/**
+	 * Run a query and return the first result
+	 */
+	queryFirst<T = unknown>(sql: string, ...params: RestBindParameters): T | undefined {
+		const stmt = this.prepare(sql);
+		if (params.length > 0) {
+			return stmt.get(...params) as T | undefined;
+		}
+		return stmt.get() as T | undefined;
+	}
+
+	/**
+	 * Execute a statement and return the number of affected rows
+	 */
+	execute(sql: string, ...params: RestBindParameters): number {
+		const stmt = this.prepare(sql);
+		if (params.length > 0) {
+			stmt.run(...params);
+		} else {
+			stmt.run();
+		}
+		return this.getDatabase().changes;
+	}
+
+	/**
+	 * Begin a transaction
+	 */
+	beginTransaction(): void {
+		this.exec('BEGIN TRANSACTION');
+	}
+
+	/**
+	 * Commit a transaction
+	 */
+	commit(): void {
+		this.exec('COMMIT');
+	}
+
+	/**
+	 * Rollback a transaction
+	 */
+	rollback(): void {
+		this.exec('ROLLBACK');
+	}
+
+	/**
+	 * Run a function within a transaction
+	 */
+	async transaction<T>(fn: () => T | Promise<T>): Promise<T> {
+		this.beginTransaction();
+		try {
+			const result = await fn();
+			this.commit();
+			return result;
+		} catch (error) {
+			this.rollback();
+			await logger.error('Transaction rolled back due to error', {
+				source: 'DatabaseManager',
+				meta: error
+			});
+			throw error;
+		}
+	}
+
+	/**
+	 * Close the database connection
+	 */
+	close(): void {
+		if (this.db) {
+			this.db.close();
+			this.db = null;
+			this.initialized = false;
+		}
+	}
+}
+
+// Export singleton instance
+export const db = new DatabaseManager();
--- a/src/db/migrations.ts
+++ b/src/db/migrations.ts
@@ -0,0 +1,301 @@
+import { db } from "./db.ts";
+import { logger } from "$logger";
+
+export interface Migration {
+  version: number;
+  name: string;
+  up: string;
+  down?: string;
+}
+
+/**
+ * Migration runner for database schema management
+ */
+class MigrationRunner {
+  private migrationsTable = "migrations";
+
+  /**
+   * Initialize the migrations table
+   */
+  initialize(): void {
+    const sql = `
+			CREATE TABLE IF NOT EXISTS ${this.migrationsTable} (
+				version INTEGER PRIMARY KEY,
+				name TEXT NOT NULL,
+				applied_at DATETIME DEFAULT CURRENT_TIMESTAMP
+			)
+		`;
+    db.exec(sql);
+  }
+
+  /**
+   * Get the current migration version
+   */
+  getCurrentVersion(): number {
+    const result = db.queryFirst<{ version: number }>(
+      `SELECT MAX(version) as version FROM ${this.migrationsTable}`,
+    );
+    return result?.version ?? 0;
+  }
+
+  /**
+   * Check if a migration has been applied
+   */
+  isApplied(version: number): boolean {
+    const result = db.queryFirst<{ count: number }>(
+      `SELECT COUNT(*) as count FROM ${this.migrationsTable} WHERE version = ?`,
+      version,
+    );
+    return (result?.count ?? 0) > 0;
+  }
+
+  /**
+   * Apply a single migration
+   */
+  private async applyMigration(migration: Migration): Promise<void> {
+    try {
+      await db.transaction(async () => {
+        // Execute the migration
+        db.exec(migration.up);
+
+        // Record the migration
+        db.execute(
+          `INSERT INTO ${this.migrationsTable} (version, name) VALUES (?, ?)`,
+          migration.version,
+          migration.name,
+        );
+
+        await logger.info(
+          `✓ Applied migration ${migration.version}: ${migration.name}`,
+          {
+            source: "MigrationRunner",
+          },
+        );
+      });
+    } catch (error) {
+      await logger.error(
+        `✗ Failed to apply migration ${migration.version}: ${migration.name}`,
+        {
+          source: "MigrationRunner",
+          meta: error,
+        },
+      );
+      throw error;
+    }
+  }
+
+  /**
+   * Rollback a single migration
+   */
+  private async rollbackMigration(migration: Migration): Promise<void> {
+    if (!migration.down) {
+      throw new Error(
+        `Migration ${migration.version} does not support rollback`,
+      );
+    }
+
+    try {
+      await db.transaction(async () => {
+        // Execute the rollback
+        db.exec(migration.down!);
+
+        // Remove the migration record
+        db.execute(
+          `DELETE FROM ${this.migrationsTable} WHERE version = ?`,
+          migration.version,
+        );
+
+        await logger.info(
+          `✓ Rolled back migration ${migration.version}: ${migration.name}`,
+          {
+            source: "MigrationRunner",
+          },
+        );
+      });
+    } catch (error) {
+      await logger.error(
+        `✗ Failed to rollback migration ${migration.version}: ${migration.name}`,
+        {
+          source: "MigrationRunner",
+          meta: error,
+        },
+      );
+      throw error;
+    }
+  }
+
+  /**
+   * Run all pending migrations
+   */
+  async up(migrations: Migration[]): Promise<void> {
+    this.initialize();
+
+    // Sort migrations by version
+    const sortedMigrations = [...migrations].sort((a, b) =>
+      a.version - b.version
+    );
+
+    let applied = 0;
+    for (const migration of sortedMigrations) {
+      if (this.isApplied(migration.version)) {
+        continue;
+      }
+
+      await this.applyMigration(migration);
+      applied++;
+    }
+
+    if (applied === 0) {
+      await logger.info("✓ Database is up to date", {
+        source: "MigrationRunner",
+      });
+    }
+  }
+
+  /**
+   * Rollback to a specific version
+   */
+  async down(migrations: Migration[], targetVersion = 0): Promise<void> {
+    this.initialize();
+
+    const currentVersion = this.getCurrentVersion();
+    if (currentVersion <= targetVersion) {
+      await logger.info("✓ Already at target version or below", {
+        source: "MigrationRunner",
+      });
+      return;
+    }
+
+    // Sort migrations by version in descending order
+    const sortedMigrations = [...migrations]
+      .filter((m) => m.version > targetVersion && m.version <= currentVersion)
+      .sort((a, b) => b.version - a.version);
+
+    let rolledBack = 0;
+    for (const migration of sortedMigrations) {
+      if (!this.isApplied(migration.version)) {
+        continue;
+      }
+
+      await this.rollbackMigration(migration);
+      rolledBack++;
+    }
+
+    await logger.info(`✓ Rolled back ${rolledBack} migration(s)`, {
+      source: "MigrationRunner",
+    });
+  }
+
+  /**
+   * Get list of applied migrations
+   */
+  getAppliedMigrations(): Array<
+    { version: number; name: string; applied_at: string }
+  > {
+    return db.query(
+      `SELECT version, name, applied_at FROM ${this.migrationsTable} ORDER BY version`,
+    );
+  }
+
+  /**
+   * Get list of pending migrations
+   */
+  getPendingMigrations(migrations: Migration[]): Migration[] {
+    const pending: Migration[] = [];
+    for (const migration of migrations) {
+      if (!this.isApplied(migration.version)) {
+        pending.push(migration);
+      }
+    }
+    return pending.sort((a, b) => a.version - b.version);
+  }
+
+  /**
+   * Reset the database (rollback all migrations)
+   */
+  async reset(migrations: Migration[]): Promise<void> {
+    await this.down(migrations, 0);
+  }
+
+  /**
+   * Fresh migration (reset and reapply all)
+   */
+  async fresh(migrations: Migration[]): Promise<void> {
+    await logger.warn("⚠ Resetting database...", { source: "MigrationRunner" });
+    await this.reset(migrations);
+    await logger.info("↻ Reapplying all migrations...", {
+      source: "MigrationRunner",
+    });
+    await this.up(migrations);
+  }
+}
+
+// Export singleton instance
+export const migrationRunner = new MigrationRunner();
+
+/**
+ * Helper function to load migrations from files
+ * Loads all migration files from src/db/migrations/ directory
+ */
+export async function loadMigrations(): Promise<Migration[]> {
+  const migrations: Migration[] = [];
+  const migrationsDir = new URL("./migrations/", import.meta.url).pathname;
+
+  try {
+    // Read all files in migrations directory
+    for await (const entry of Deno.readDir(migrationsDir)) {
+      // Skip template files (starting with _)
+      if (entry.name.startsWith("_")) {
+        continue;
+      }
+
+      // Only process TypeScript/JavaScript files
+      if (
+        entry.isFile &&
+        (entry.name.endsWith(".ts") || entry.name.endsWith(".js"))
+      ) {
+        try {
+          // Dynamically import the migration file
+          const migrationModule = await import(/* @vite-ignore */ `./migrations/${entry.name}`);
+
+          // Get the migration object (could be default export or named export)
+          const migration = migrationModule.default ||
+            migrationModule.migration;
+
+          if (migration && typeof migration.version === "number") {
+            migrations.push(migration);
+          } else {
+            await logger.warn(
+              `Migration file ${entry.name} does not export a valid migration`,
+              {
+                source: "MigrationRunner",
+              },
+            );
+          }
+        } catch (error) {
+          await logger.error(`Failed to load migration file ${entry.name}`, {
+            source: "MigrationRunner",
+            meta: error,
+          });
+        }
+      }
+    }
+  } catch (_error) {
+    // If directory doesn't exist or can't be read, return empty array
+    await logger.info("No migrations directory found or empty", {
+      source: "MigrationRunner",
+    });
+    return [];
+  }
+
+  // Sort by version number
+  return migrations.sort((a, b) => a.version - b.version);
+}
+
+/**
+ * Run migrations
+ */
+export async function runMigrations(migrations?: Migration[]): Promise<void> {
+  const migrationsToRun = migrations ?? await loadMigrations();
+  await migrationRunner.up(migrationsToRun);
+}
--- a/src/db/migrations/001_create_arr_instances.ts
+++ b/src/db/migrations/001_create_arr_instances.ts
@@ -0,0 +1,52 @@
+import type { Migration } from '../migrations.ts';
+
+/**
+ * Migration 001: Create arr_instances table
+ *
+ * Creates the initial table for storing *arr application instance configurations.
+ * This includes Radarr, Sonarr, Readarr, Lidarr, Prowlarr, etc.
+ *
+ * Fields:
+ * - id: Auto-incrementing primary key
+ * - name: User-friendly name (unique)
+ * - type: Instance type (radarr, sonarr, etc.)
+ * - url: Base URL for the instance
+ * - api_key: API key for authentication
+ * - tags: JSON array of tags
+ * - sync_profile: Optional sync profile identifier
+ * - enabled: Boolean flag (1=enabled, 0=disabled)
+ * - created_at: Timestamp of creation
+ * - updated_at: Timestamp of last update
+ */
+
+export const migration: Migration = {
+	version: 1,
+	name: 'Create arr_instances table',
+
+	up: `
+		CREATE TABLE arr_instances (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+
+			-- Instance identification
+			name TEXT NOT NULL UNIQUE,
+			type TEXT NOT NULL,
+
+			-- Connection details
+			url TEXT NOT NULL,
+			api_key TEXT NOT NULL,
+
+			-- Configuration
+			tags TEXT,
+			sync_profile TEXT,
+			enabled INTEGER NOT NULL DEFAULT 1,
+
+			-- Metadata
+			created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+			updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+		);
+	`,
+
+	down: `
+		DROP TABLE IF EXISTS arr_instances;
+	`
+};
--- a/src/db/migrations/002_remove_sync_profile.ts
+++ b/src/db/migrations/002_remove_sync_profile.ts
@@ -0,0 +1,20 @@
+import type { Migration } from '../migrations.ts';
+
+/**
+ * Migration 002: Remove sync_profile column
+ *
+ * Drops the sync_profile column from arr_instances table as it's not needed.
+ */
+
+export const migration: Migration = {
+	version: 2,
+	name: 'Remove sync_profile column from arr_instances',
+
+	up: `
+		ALTER TABLE arr_instances DROP COLUMN sync_profile;
+	`,
+
+	down: `
+		ALTER TABLE arr_instances ADD COLUMN sync_profile TEXT;
+	`
+};
--- a/src/db/migrations/_template.ts
+++ b/src/db/migrations/_template.ts
@@ -0,0 +1,70 @@
+import type { Migration } from '../migrations.ts';
+
+/**
+ * MIGRATION TEMPLATE
+ *
+ * Copy this file to create a new migration:
+ * 1. Copy _template.ts to a new file (e.g., 001_initial_schema.ts)
+ * 2. Update the version number (must be unique and sequential)
+ * 3. Update the name (describe what this migration does)
+ * 4. Write your SQL in the `up` section
+ * 5. Write rollback SQL in the `down` section (optional but recommended)
+ * 6. Delete these comments
+ *
+ * NAMING CONVENTION:
+ * - Use format: NNN_description.ts (e.g., 001_initial_schema.ts, 002_add_users.ts)
+ * - Numbers should be sequential (001, 002, 003, ...)
+ * - Use underscores for spaces in description
+ * - Keep descriptions short but descriptive
+ *
+ * BEST PRACTICES:
+ * - Always test migrations in development first
+ * - Keep migrations small and focused
+ * - Use transactions (handled automatically)
+ * - Always provide a `down` migration for rollback capability
+ * - Use IF NOT EXISTS for tables/indexes when appropriate
+ * - Comment complex SQL
+ *
+ * VERSION NUMBERS:
+ * - Must be unique integers
+ * - Should be sequential (1, 2, 3, ...)
+ * - Once applied to production, NEVER change a migration
+ * - If you need to fix a migration, create a new one
+ */
+
+export const migration: Migration = {
+	// REQUIRED: Unique version number (increment from last migration)
+	version: 999, // CHANGE THIS
+
+	// REQUIRED: Human-readable description
+	name: 'Template migration - CHANGE THIS',
+
+	// REQUIRED: SQL to apply the migration (forward migration)
+	up: `
+		-- Example: Create a new table
+		CREATE TABLE IF NOT EXISTS example_table (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			name TEXT NOT NULL,
+			email TEXT UNIQUE,
+			created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+			updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+		);
+
+		-- Example: Create an index
+		CREATE INDEX IF NOT EXISTS idx_example_email ON example_table(email);
+
+		-- Example: Insert initial data
+		INSERT INTO example_table (name, email) VALUES ('Example', 'example@example.com');
+	`,
+
+	// OPTIONAL: SQL to rollback the migration (reverse migration)
+	// If not provided, migration cannot be rolled back
+	down: `
+		-- Rollback in reverse order of 'up'
+		DROP INDEX IF EXISTS idx_example_email;
+		DROP TABLE IF EXISTS example_table;
+	`
+};
+
+// Alternative: You can also use default export
+// export default migration;
--- a/src/db/queries/arrInstances.ts
+++ b/src/db/queries/arrInstances.ts
@@ -0,0 +1,169 @@
+import { db } from '../db.ts';
+
+/**
+ * Types for arr_instances table
+ */
+export interface ArrInstance {
+	id: number;
+	name: string;
+	type: string;
+	url: string;
+	api_key: string;
+	tags: string | null;
+	enabled: number;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface CreateArrInstanceInput {
+	name: string;
+	type: string;
+	url: string;
+	apiKey: string;
+	tags?: string[];
+	enabled?: boolean;
+}
+
+export interface UpdateArrInstanceInput {
+	name?: string;
+	type?: string;
+	url?: string;
+	apiKey?: string;
+	tags?: string[];
+	enabled?: boolean;
+}
+
+/**
+ * All queries for arr_instances table
+ */
+export const arrInstancesQueries = {
+	/**
+	 * Create a new arr instance
+	 */
+	create(input: CreateArrInstanceInput): number {
+		const tagsJson = input.tags && input.tags.length > 0 ? JSON.stringify(input.tags) : null;
+		const enabled = input.enabled !== false ? 1 : 0;
+
+		db.execute(
+			`INSERT INTO arr_instances (name, type, url, api_key, tags, enabled)
+       VALUES (?, ?, ?, ?, ?, ?)`,
+			input.name,
+			input.type,
+			input.url,
+			input.apiKey,
+			tagsJson,
+			enabled
+		);
+
+		// Get the last inserted ID
+		const result = db.queryFirst<{ id: number }>('SELECT last_insert_rowid() as id');
+		return result?.id ?? 0;
+	},
+
+	/**
+	 * Get an arr instance by ID
+	 */
+	getById(id: number): ArrInstance | undefined {
+		return db.queryFirst<ArrInstance>('SELECT * FROM arr_instances WHERE id = ?', id);
+	},
+
+	/**
+	 * Get all arr instances
+	 */
+	getAll(): ArrInstance[] {
+		return db.query<ArrInstance>('SELECT * FROM arr_instances ORDER BY name');
+	},
+
+	/**
+	 * Get arr instances by type
+	 */
+	getByType(type: string): ArrInstance[] {
+		return db.query<ArrInstance>(
+			'SELECT * FROM arr_instances WHERE type = ? ORDER BY name',
+			type
+		);
+	},
+
+	/**
+	 * Get enabled arr instances
+	 */
+	getEnabled(): ArrInstance[] {
+		return db.query<ArrInstance>('SELECT * FROM arr_instances WHERE enabled = 1 ORDER BY name');
+	},
+
+	/**
+	 * Update an arr instance
+	 */
+	update(id: number, input: UpdateArrInstanceInput): boolean {
+		const updates: string[] = [];
+		const params: (string | number | null)[] = [];
+
+		if (input.name !== undefined) {
+			updates.push('name = ?');
+			params.push(input.name);
+		}
+		if (input.type !== undefined) {
+			updates.push('type = ?');
+			params.push(input.type);
+		}
+		if (input.url !== undefined) {
+			updates.push('url = ?');
+			params.push(input.url);
+		}
+		if (input.apiKey !== undefined) {
+			updates.push('api_key = ?');
+			params.push(input.apiKey);
+		}
+		if (input.tags !== undefined) {
+			updates.push('tags = ?');
+			params.push(input.tags.length > 0 ? JSON.stringify(input.tags) : null);
+		}
+		if (input.enabled !== undefined) {
+			updates.push('enabled = ?');
+			params.push(input.enabled ? 1 : 0);
+		}
+
+		if (updates.length === 0) {
+			return false;
+		}
+
+		// Add updated_at
+		updates.push('updated_at = CURRENT_TIMESTAMP');
+		params.push(id);
+
+		const affected = db.execute(
+			`UPDATE arr_instances SET ${updates.join(', ')} WHERE id = ?`,
+			...params
+		);
+
+		return affected > 0;
+	},
+
+	/**
+	 * Delete an arr instance
+	 */
+	delete(id: number): boolean {
+		const affected = db.execute('DELETE FROM arr_instances WHERE id = ?', id);
+		return affected > 0;
+	},
+
+	/**
+	 * Check if an instance name already exists
+	 */
+	nameExists(name: string, excludeId?: number): boolean {
+		if (excludeId !== undefined) {
+			const result = db.queryFirst<{ count: number }>(
+				'SELECT COUNT(*) as count FROM arr_instances WHERE name = ? AND id != ?',
+				name,
+				excludeId
+			);
+			return (result?.count ?? 0) > 0;
+		}
+
+		const result = db.queryFirst<{ count: number }>(
+			'SELECT COUNT(*) as count FROM arr_instances WHERE name = ?',
+			name
+		);
+		return (result?.count ?? 0) > 0;
+	}
+};
--- a/src/db/schema.sql
+++ b/src/db/schema.sql
@@ -0,0 +1,42 @@
+-- Profilarr Database Schema
+-- This file documents the current database schema after all migrations
+-- DO NOT execute this file directly - use migrations instead
+-- Last updated: 2025-10-20
+
+-- ==============================================================================
+-- TABLE: migrations
+-- Purpose: Track applied database migrations
+-- Managed by: MigrationRunner (src/db/migrations.ts)
+-- ==============================================================================
+
+CREATE TABLE IF NOT EXISTS migrations (
+    version INTEGER PRIMARY KEY,
+    name TEXT NOT NULL,
+    applied_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- ==============================================================================
+-- TABLE: arr_instances
+-- Purpose: Store configuration for *arr application instances (Radarr, Sonarr, etc.)
+-- Migration: 001_create_arr_instances.ts
+-- ==============================================================================
+
+CREATE TABLE arr_instances (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+
+    -- Instance identification
+    name TEXT NOT NULL UNIQUE,              -- User-friendly name (e.g., "Main Radarr", "4K Sonarr")
+    type TEXT NOT NULL,                     -- Instance type: radarr, sonarr, readarr, lidarr, prowlarr
+
+    -- Connection details
+    url TEXT NOT NULL,                      -- Base URL (e.g., "http://localhost:7878")
+    api_key TEXT NOT NULL,                  -- API key for authentication
+
+    -- Configuration
+    tags TEXT,                              -- JSON array of tags (e.g., '["movies","4k"]')
+    enabled INTEGER NOT NULL DEFAULT 1,     -- 1=enabled, 0=disabled
+
+    -- Metadata
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
--- a/src/deno.d.ts
+++ b/src/deno.d.ts
@@ -2,6 +2,9 @@
 * Deno global type declarations for SvelteKit project
 */

+/** App version injected at build time */
+declare const __APP_VERSION__: string;
+
 declare namespace Deno {
 	export const env: {
 		get(key: string): string | undefined;
@@ -14,4 +17,24 @@ declare namespace Deno {
 		data: string,
 		options?: { append?: boolean }
 	): Promise<void>;
+
+	export interface HttpClient {
+		close(): void;
+	}
+
+	export interface CreateHttpClientOptions {
+		poolMaxIdlePerHost?: number;
+		poolIdleTimeout?: number;
+	}
+
+	export function createHttpClient(options?: CreateHttpClientOptions): HttpClient;
+
+	export interface DirEntry {
+		name: string;
+		isFile: boolean;
+		isDirectory: boolean;
+		isSymlink: boolean;
+	}
+
+	export function readDir(path: string): AsyncIterable<DirEntry>;
 }
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,8 +1,16 @@
 import { config } from '$config';
 import { logStartup } from './utils/logger/startup.ts';
+import { db } from '$db/db.ts';
+import { runMigrations } from '$db/migrations.ts';

 // Initialize configuration on server startup
 await config.init();

 // Log startup banner
 await logStartup();
+
+// Initialize database
+await db.initialize();
+
+// Run database migrations
+await runMigrations();
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
 	import logo from '$static/logo.svg';
 	import Navbar from '$components/navigation/navbar/navbar.svelte';
 	import PageNav from '$components/navigation/pageNav/pageNav.svelte';
+	import ToastContainer from '$components/toast/ToastContainer.svelte';
 </script>

 <svelte:head>
@@ -12,6 +13,7 @@

 <Navbar />
 <PageNav />
+<ToastContainer />

 <main class="pt-16 pl-72">
 	<slot />
--- a/src/routes/arr/[type]/+page.server.ts
+++ b/src/routes/arr/[type]/+page.server.ts
@@ -0,0 +1,18 @@
+import { error } from '@sveltejs/kit';
+import type { ServerLoad } from '@sveltejs/kit';
+
+// Valid arr types
+const VALID_TYPES = ['radarr', 'sonarr', 'lidarr', 'chaptarr'];
+
+export const load: ServerLoad = ({ params }) => {
+	const type = params.type;
+
+	// Validate type
+	if (!type || !VALID_TYPES.includes(type)) {
+		error(404, `Invalid arr type: ${type}`);
+	}
+
+	return {
+		type
+	};
+};
--- a/src/routes/arr/[type]/+page.svelte
+++ b/src/routes/arr/[type]/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { Plus } from 'lucide-svelte';
+
+	export let data: PageData;
+
+	// Capitalize first letter for display (reactive statement)
+	$: displayName = data.type ? data.type.charAt(0).toUpperCase() + data.type.slice(1) : '';
+</script>
+
+<div class="p-8">
+	<div class="mb-8 flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-50">{displayName}</h1>
+			<p class="mt-3 text-lg text-neutral-600 dark:text-neutral-400">
+				Manage your {displayName} instances
+			</p>
+		</div>
+		<a
+			href="/arr/new?type={data.type}"
+			class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+		>
+			<Plus size={16} />
+			Add Instance
+		</a>
+	</div>
+
+	<!-- Instance list will go here later -->
+	<div class="text-neutral-600 dark:text-neutral-400">
+		<p>No instances configured yet. Click "Add Instance" to get started.</p>
+	</div>
+</div>
--- a/src/routes/arr/new/+page.server.ts
+++ b/src/routes/arr/new/+page.server.ts
@@ -0,0 +1,102 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions } from '@sveltejs/kit';
+import { arrInstancesQueries } from '$db/queries/arrInstances.ts';
+import { logger } from '$logger';
+
+const VALID_TYPES = ['radarr', 'sonarr', 'lidarr', 'chaptarr'];
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+
+		const name = formData.get('name')?.toString().trim();
+		const type = formData.get('type')?.toString().trim();
+		const url = formData.get('url')?.toString().trim();
+		const apiKey = formData.get('api_key')?.toString().trim();
+		const tagsJson = formData.get('tags')?.toString().trim();
+
+		// Validation
+		if (!name || !type || !url || !apiKey) {
+			await logger.warn('Attempted to create instance with missing required fields', {
+				source: 'arr/new',
+				meta: { name, type, url, hasApiKey: !!apiKey }
+			});
+
+			return fail(400, {
+				error: 'Name, type, URL, and API key are required',
+				values: { name, type, url }
+			});
+		}
+
+		if (!VALID_TYPES.includes(type)) {
+			await logger.warn('Attempted to create instance with invalid type', {
+				source: 'arr/new',
+				meta: { name, type, url }
+			});
+
+			return fail(400, {
+				error: 'Invalid arr type',
+				values: { name, type, url }
+			});
+		}
+
+		// Check if name already exists
+		if (arrInstancesQueries.nameExists(name)) {
+			await logger.warn('Attempted to create instance with duplicate name', {
+				source: 'arr/new',
+				meta: { name, type }
+			});
+
+			return fail(400, {
+				error: 'An instance with this name already exists',
+				values: { name, type, url }
+			});
+		}
+
+		// Parse tags
+		let tags: string[] = [];
+		if (tagsJson) {
+			try {
+				const parsed = JSON.parse(tagsJson);
+				if (Array.isArray(parsed)) {
+					tags = parsed;
+				}
+			} catch (error) {
+				await logger.warn('Failed to parse tags JSON', {
+					source: 'arr/new',
+					meta: { tagsJson, error }
+				});
+			}
+		}
+
+		try {
+			// Create the instance
+			const id = arrInstancesQueries.create({
+				name,
+				type,
+				url,
+				apiKey,
+				tags
+			});
+
+			await logger.info(`Created new ${type} instance: ${name}`, {
+				source: 'arr/new',
+				meta: { id, name, type, url }
+			});
+
+		} catch (error) {
+			await logger.error('Failed to create arr instance', {
+				source: 'arr/new',
+				meta: error
+			});
+
+			return fail(500, {
+				error: 'Failed to create instance',
+				values: { name, type, url }
+			});
+		}
+
+		// Redirect to the type page (outside try-catch since redirect throws)
+		redirect(303, `/arr/${type}`);
+	}
+} satisfies Actions;
--- a/src/routes/arr/new/+page.svelte
+++ b/src/routes/arr/new/+page.svelte
@@ -0,0 +1,229 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Check, X, Loader2, Save, Wifi } from 'lucide-svelte';
+	import { apiRequest } from '$api';
+	import TagInput from '$components/form/TagInput.svelte';
+	import { enhance } from '$app/forms';
+	import { toastStore } from '$stores/toast';
+	import type { ActionData } from './$types';
+
+	export let form: ActionData;
+
+	// Get type from URL params if provided
+	const typeFromUrl = $page.url.searchParams.get('type') || '';
+
+	// Form values (restore from form action if there was an error)
+	let name = form?.values?.name ?? '';
+	let type = form?.values?.type ?? typeFromUrl;
+	let url = form?.values?.url ?? '';
+	let apiKey = '';
+	let tags: string[] = [];
+
+	// Connection test state
+	type ConnectionStatus = 'idle' | 'testing' | 'success' | 'error';
+	let connectionStatus: ConnectionStatus = 'idle';
+	let connectionError = '';
+
+	// Test connection function
+	async function testConnection() {
+		// Validation
+		if (!type || !url || !apiKey) {
+			connectionError = 'Please fill in Type, URL, and API Key';
+			connectionStatus = 'error';
+			return;
+		}
+
+		connectionStatus = 'testing';
+		connectionError = '';
+
+		try {
+			const data = await apiRequest<{ success: boolean; error?: string }>('/arr/test', {
+				method: 'POST',
+				body: JSON.stringify({ type, url, apiKey }),
+				showSuccessToast: true,
+				successMessage: 'Connection successful!'
+			});
+
+			connectionStatus = 'success';
+		} catch (error) {
+			connectionStatus = 'error';
+			connectionError = error instanceof Error ? error.message : 'Connection test failed';
+		}
+	}
+
+	// Reset connection status when form fields change
+	function resetConnectionStatus() {
+		if (connectionStatus !== 'idle') {
+			connectionStatus = 'idle';
+			connectionError = '';
+		}
+	}
+
+	$: canSubmit = connectionStatus === 'success';
+</script>
+
+<div class="p-8">
+	<div class="mb-8">
+		<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-50">Add Arr Instance</h1>
+		<p class="mt-3 text-lg text-neutral-600 dark:text-neutral-400">
+			Configure a new Radarr, Sonarr, Lidarr, or Chaptarr instance
+		</p>
+	</div>
+
+	<div class="max-w-2xl">
+		<form
+			method="POST"
+			class="space-y-6"
+			use:enhance={() => {
+				return async ({ result, update }) => {
+					if (result.type === 'failure' && result.data) {
+						// Show error toast
+						toastStore.add('error', (result.data as { error?: string }).error || 'Failed to save instance');
+					} else if (result.type === 'redirect') {
+						// Show success toast before redirect
+						toastStore.add('success', 'Instance created successfully!');
+					}
+					await update();
+				};
+			}}
+		>
+			<!-- Name -->
+			<div>
+				<label for="name" class="block text-sm font-medium text-neutral-900 dark:text-neutral-50">
+					Name <span class="text-red-500">*</span>
+				</label>
+				<input
+					type="text"
+					id="name"
+					name="name"
+					bind:value={name}
+					required
+					placeholder="e.g., Main Radarr, 4K Sonarr"
+					class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+				/>
+			</div>
+
+			<!-- Type -->
+			<div>
+				<label for="type" class="block text-sm font-medium text-neutral-900 dark:text-neutral-50">
+					Type <span class="text-red-500">*</span>
+				</label>
+				<select
+					id="type"
+					name="type"
+					bind:value={type}
+					on:change={resetConnectionStatus}
+					required
+					class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50"
+				>
+					<option value="">Select type...</option>
+					<option value="radarr">Radarr</option>
+					<option value="sonarr">Sonarr</option>
+					<option value="lidarr">Lidarr</option>
+					<option value="chaptarr">Chaptarr</option>
+				</select>
+			</div>
+
+			<!-- URL -->
+			<div>
+				<label for="url" class="block text-sm font-medium text-neutral-900 dark:text-neutral-50">
+					URL <span class="text-red-500">*</span>
+				</label>
+				<input
+					type="url"
+					id="url"
+					name="url"
+					bind:value={url}
+					on:input={resetConnectionStatus}
+					required
+					placeholder="http://localhost:7878"
+					class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+				/>
+			</div>
+
+			<!-- API Key -->
+			<div>
+				<label for="api_key" class="block text-sm font-medium text-neutral-900 dark:text-neutral-50">
+					API Key <span class="text-red-500">*</span>
+				</label>
+				<input
+					type="text"
+					id="api_key"
+					name="api_key"
+					bind:value={apiKey}
+					on:input={resetConnectionStatus}
+					required
+					placeholder="Enter API key"
+					class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 font-mono text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+				/>
+			</div>
+
+			<!-- Tags (optional) -->
+			<div>
+				<label for="tags-input" class="block text-sm font-medium text-neutral-900 dark:text-neutral-50">
+					Tags
+				</label>
+				<div class="mt-1">
+					<TagInput bind:tags />
+				</div>
+				<p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+					Optional. Press Enter to add a tag, Backspace to remove.
+				</p>
+				<!-- Hidden input to submit tags as JSON -->
+				<input type="hidden" name="tags" value={tags.length > 0 ? JSON.stringify(tags) : ''} />
+			</div>
+
+			<!-- Buttons -->
+			<div class="space-y-3">
+				<div class="flex justify-between gap-3">
+					<button
+						type="button"
+						on:click={testConnection}
+						disabled={connectionStatus === 'testing'}
+						class="flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800"
+					>
+						{#if connectionStatus === 'testing'}
+							<Loader2 size={14} class="animate-spin" />
+							Testing...
+						{:else if connectionStatus === 'success'}
+							<Check size={14} class="text-green-600 dark:text-green-400" />
+							Connected
+						{:else if connectionStatus === 'error'}
+							<X size={14} class="text-red-600 dark:text-red-400" />
+							Test
+						{:else}
+							<Wifi size={14} />
+							Test
+						{/if}
+					</button>
+
+					<button
+						type="submit"
+						disabled={!canSubmit}
+						class="flex items-center gap-2 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+					>
+						<Save size={14} />
+						Save
+					</button>
+				</div>
+
+				<!-- Connection Status Messages -->
+				{#if connectionStatus === 'success'}
+					<p class="text-sm text-green-600 dark:text-green-400">
+						Connection test passed! You can now save this instance.
+					</p>
+				{/if}
+				{#if connectionStatus === 'error'}
+					<p class="text-sm text-red-600 dark:text-red-400">
+						{connectionError}
+					</p>
+				{/if}
+				{#if !canSubmit && connectionStatus !== 'success'}
+					<p class="text-sm text-neutral-500 dark:text-neutral-400">
+						Please test the connection before saving
+					</p>
+				{/if}
+			</div>
+		</form>
+	</div>
+</div>
--- a/src/routes/arr/test/+server.ts
+++ b/src/routes/arr/test/+server.ts
@@ -0,0 +1,40 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from '@sveltejs/kit';
+import { createArrClient } from '$arr/factory.ts';
+import type { ArrType } from '$arr/types.ts';
+
+const VALID_TYPES = ['radarr', 'sonarr', 'lidarr', 'chaptarr'];
+
+export const POST: RequestHandler = async ({ request }) => {
+	try {
+		const { type, url, apiKey } = await request.json();
+
+		// Validation
+		if (!type || !url || !apiKey) {
+			return json({ success: false, error: 'Missing required fields' }, { status: 400 });
+		}
+
+		if (!VALID_TYPES.includes(type)) {
+			return json({ success: false, error: 'Invalid arr type' }, { status: 400 });
+		}
+
+		// Create client and test connection
+		const client = createArrClient(type as ArrType, url, apiKey);
+		const isConnected = await client.testConnection();
+		client.close();
+
+		if (isConnected) {
+			return json({ success: true });
+		} else {
+			return json({ success: false, error: 'Connection test failed' });
+		}
+	} catch (error) {
+		return json(
+			{
+				success: false,
+				error: error instanceof Error ? error.message : 'Unknown error'
+			},
+			{ status: 500 }
+		);
+	}
+};
--- a/src/routes/settings/about/+page.server.ts
+++ b/src/routes/settings/about/+page.server.ts
@@ -0,0 +1,111 @@
+import { migrationRunner } from '$db/migrations.ts';
+import { config } from '$config';
+import packageJson from '../../../../package.json' with { type: 'json' };
+
+type GitHubRelease = {
+	tag_name: string;
+	name: string;
+	published_at: string;
+	html_url: string;
+	prerelease: boolean;
+};
+
+type VersionStatus = 'up-to-date' | 'out-of-date' | 'dev-build';
+
+async function fetchGitHubReleases(): Promise<GitHubRelease[]> {
+	try {
+		const response = await fetch(
+			'https://api.github.com/repos/Dictionarry-Hub/profilarr/releases',
+			{
+				headers: {
+					Accept: 'application/vnd.github+json',
+					'User-Agent': 'Profilarr'
+				}
+			}
+		);
+
+		if (!response.ok) {
+			return [];
+		}
+
+		return await response.json();
+	} catch {
+		return [];
+	}
+}
+
+function compareVersions(v1: string, v2: string): number {
+	const parts1 = v1.split('.').map(Number);
+	const parts2 = v2.split('.').map(Number);
+
+	for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+		const num1 = parts1[i] || 0;
+		const num2 = parts2[i] || 0;
+
+		if (num1 > num2) return 1;
+		if (num1 < num2) return -1;
+	}
+
+	return 0;
+}
+
+function getVersionStatus(
+	currentVersion: string,
+	latestVersion: string | undefined
+): VersionStatus {
+	if (!latestVersion) {
+		return 'dev-build';
+	}
+
+	// Remove 'v' prefix if present
+	const current = currentVersion.replace(/^v/, '');
+	const latest = latestVersion.replace(/^v/, '');
+
+	// Check if it's a dev build (e.g., has -dev, -alpha, -beta suffix)
+	if (current.includes('-') || current.includes('dev')) {
+		return 'dev-build';
+	}
+
+	// Compare versions semantically
+	const comparison = compareVersions(current, latest);
+
+	if (comparison > 0) {
+		// Current version is greater than latest release - must be a dev build
+		return 'dev-build';
+	} else if (comparison === 0) {
+		// Versions are equal
+		return 'up-to-date';
+	} else {
+		// Current version is less than latest release
+		return 'out-of-date';
+	}
+}
+
+export const load = async () => {
+	const currentMigrationVersion = migrationRunner.getCurrentVersion();
+	const appliedMigrations = migrationRunner.getAppliedMigrations();
+
+	// Fetch GitHub releases
+	const releases = await fetchGitHubReleases();
+	const latestRelease = releases.find((r) => !r.prerelease);
+
+	// Determine version status
+	const versionStatus = getVersionStatus(packageJson.version, latestRelease?.tag_name);
+
+	return {
+		version: packageJson.version,
+		versionStatus,
+		timezone: config.timezone,
+		paths: {
+			base: config.paths.base,
+			data: config.paths.data,
+			logs: config.paths.logs,
+			database: config.paths.database
+		},
+		migration: {
+			current: currentMigrationVersion,
+			applied: appliedMigrations
+		},
+		releases: releases.slice(0, 10) // Return latest 10 releases
+	};
+};
--- a/src/routes/settings/about/+page.svelte
+++ b/src/routes/settings/about/+page.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import {
+		Info,
+		FolderOpen,
+		Database,
+		HelpCircle,
+		Heart,
+		ListChecks,
+		Package
+	} from 'lucide-svelte';
+	import InfoTable from './components/InfoTable.svelte';
+	import InfoRow from './components/InfoRow.svelte';
+	import VersionBadge from './components/VersionBadge.svelte';
+
+	export let data: PageData;
+
+	type InfoRowData = {
+		label: string;
+		value: string;
+		type: 'code' | 'link' | 'text';
+		href?: string;
+	};
+
+	type Section = {
+		title: string;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		icon?: any;
+		rows: InfoRowData[];
+	};
+
+	const sections: Section[] = [
+		{
+			title: 'Paths',
+			icon: FolderOpen,
+			rows: [
+				{ label: 'Base Path', value: data.paths.base, type: 'code' },
+				{ label: 'Data Directory', value: data.paths.data, type: 'code' },
+				{ label: 'Logs Directory', value: data.paths.logs, type: 'code' },
+				{ label: 'Database Path', value: data.paths.database, type: 'code' }
+			]
+		},
+		{
+			title: 'Getting Support',
+			icon: HelpCircle,
+			rows: [
+				{
+					label: 'Documentation',
+					value: 'https://dictionarry.dev/',
+					type: 'link',
+					href: 'https://dictionarry.dev/'
+				},
+				{
+					label: 'GitHub',
+					value: 'https://github.com/Dictionarry-Hub',
+					type: 'link',
+					href: 'https://github.com/Dictionarry-Hub'
+				},
+				{
+					label: 'Discord',
+					value: 'https://discord.gg/XGdTJP5G8a',
+					type: 'link',
+					href: 'https://discord.gg/XGdTJP5G8a'
+				}
+			]
+		},
+		{
+			title: 'Support',
+			icon: Heart,
+			rows: [
+				{
+					label: 'GitHub Sponsors',
+					value: 'https://github.com/sponsors/Dictionarry-Hub',
+					type: 'link',
+					href: 'https://github.com/sponsors/Dictionarry-Hub'
+				},
+				{
+					label: 'Buy Me a Coffee',
+					value: 'https://www.buymeacoffee.com/santiagosayshey',
+					type: 'link',
+					href: 'https://www.buymeacoffee.com/santiagosayshey'
+				}
+			]
+		}
+	];
+</script>
+
+<div class="p-8">
+	<h1 class="mb-6 text-3xl font-bold text-neutral-900 dark:text-neutral-50">About Profilarr</h1>
+
+	<div class="space-y-6">
+		<!-- Application (special case with version badge) -->
+		<InfoTable title="Application" icon={Info}>
+			<tr class="bg-white dark:bg-neutral-900">
+				<td class="w-1/3 px-6 py-4 text-sm font-medium text-neutral-900 dark:text-neutral-50">
+					Version
+				</td>
+				<td class="px-6 py-4 text-sm">
+					<div class="flex items-center gap-2">
+						<code
+							class="rounded bg-neutral-100 px-2 py-1 font-mono text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
+						>
+							v{data.version}
+						</code>
+						<VersionBadge status={data.versionStatus} />
+					</div>
+				</td>
+			</tr>
+			<InfoRow label="Timezone" value={data.timezone} type="code" />
+		</InfoTable>
+
+		{#each sections as section (section.title)}
+			<InfoTable title={section.title} icon={section.icon}>
+				{#each section.rows as row (row.label)}
+					<InfoRow label={row.label} value={row.value} type={row.type} href={row.href} />
+				{/each}
+			</InfoTable>
+		{/each}
+
+		<!-- Database (special case with custom content) -->
+		{#if data.migration.applied.length > 0}
+			<InfoTable title="Database" icon={Database}>
+				<tr class="bg-white dark:bg-neutral-900">
+					<td
+						class="w-1/3 px-6 py-4 align-top text-sm font-medium text-neutral-900 dark:text-neutral-50"
+					>
+						Migrations
+					</td>
+					<td class="px-6 py-4">
+						<div class="space-y-2">
+							{#each data.migration.applied as migration (migration.version)}
+								<div class="flex items-center justify-between">
+									<div class="text-sm">
+										<code
+											class="rounded bg-neutral-100 px-2 py-1 font-mono text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
+										>
+											v{migration.version}
+										</code>
+										<span class="ml-2 text-neutral-600 dark:text-neutral-400">
+											{migration.name}
+										</span>
+									</div>
+									<span class="text-xs text-neutral-500">
+										{new Date(migration.applied_at).toLocaleDateString()}
+									</span>
+								</div>
+							{/each}
+						</div>
+					</td>
+				</tr>
+			</InfoTable>
+		{/if}
+
+		<!-- Releases Section -->
+		{#if data.releases.length > 0}
+			<InfoTable title="Releases" icon={Package}>
+				<tr class="bg-white dark:bg-neutral-900">
+					<td colspan="2" class="px-6 py-4">
+						<div class="space-y-3">
+							{#each data.releases as release, index (release.tag_name)}
+								<div
+									class="flex items-center justify-between border-b border-neutral-200 pb-3 last:border-0 last:pb-0 dark:border-neutral-800"
+								>
+									<div class="flex items-center gap-3">
+										<a
+											href={release.html_url}
+											target="_blank"
+											rel="noopener noreferrer"
+											data-sveltekit-reload
+											class="font-mono text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+										>
+											{release.tag_name}
+										</a>
+										{#if index === 0}
+											<span
+												class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+											>
+												Latest
+											</span>
+										{/if}
+										{#if release.prerelease}
+											<span
+												class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
+											>
+												Pre-release
+											</span>
+										{/if}
+									</div>
+									<span class="text-xs text-neutral-500 dark:text-neutral-500">
+										{new Date(release.published_at).toLocaleDateString()}
+									</span>
+								</div>
+							{/each}
+						</div>
+					</td>
+				</tr>
+			</InfoTable>
+		{/if}
+	</div>
+</div>
--- a/src/routes/settings/about/components/InfoRow.svelte
+++ b/src/routes/settings/about/components/InfoRow.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	export let label: string;
+	export let value: string;
+	export let type: 'text' | 'code' | 'link' = 'text';
+	export let href: string | undefined = undefined;
+</script>
+
+<tr class="bg-white dark:bg-neutral-900">
+	<td class="w-1/3 px-6 py-4 text-sm font-medium text-neutral-900 dark:text-neutral-50">
+		{label}
+	</td>
+	<td class="px-6 py-4 text-sm">
+		{#if type === 'code'}
+			<code
+				class="rounded bg-neutral-100 px-2 py-1 font-mono text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
+			>
+				{value}
+			</code>
+		{:else if type === 'link' && href}
+			<a
+				{href}
+				target="_blank"
+				rel="noopener noreferrer"
+				data-sveltekit-reload
+				class="rounded bg-neutral-100 px-2 py-1 font-mono text-blue-600 hover:text-blue-700 dark:bg-neutral-800 dark:text-blue-400 dark:hover:text-blue-300"
+			>
+				{value}
+			</a>
+		{:else}
+			{value}
+		{/if}
+	</td>
+</tr>
--- a/src/routes/settings/about/components/InfoTable.svelte
+++ b/src/routes/settings/about/components/InfoTable.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let title: string;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	export let icon: any = undefined;
+</script>
+
+<div class="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
+	<div
+		class="border-b border-neutral-200 bg-neutral-50 px-6 py-3 dark:border-neutral-800 dark:bg-neutral-800"
+	>
+		<div class="flex items-center gap-2">
+			{#if icon}
+				<svelte:component this={icon} class="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
+			{/if}
+			<h2 class="text-sm font-semibold text-neutral-900 dark:text-neutral-50">{title}</h2>
+		</div>
+	</div>
+	<table class="w-full">
+		<tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
+			<slot />
+		</tbody>
+	</table>
+</div>
--- a/src/routes/settings/about/components/VersionBadge.svelte
+++ b/src/routes/settings/about/components/VersionBadge.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let status: 'up-to-date' | 'out-of-date' | 'dev-build';
+
+	const statusConfig = {
+		'up-to-date': {
+			label: 'Up to date',
+			class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+		},
+		'out-of-date': {
+			label: 'Out of date',
+			class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+		},
+		'dev-build': {
+			label: 'Dev build',
+			class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+		}
+	};
+
+	const config = statusConfig[status];
+</script>
+
+<span
+	class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {config.class}"
+>
+	{config.label}
+</span>
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -0,0 +1,41 @@
+import { writable } from 'svelte/store';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export interface Toast {
+	id: string;
+	type: ToastType;
+	message: string;
+	duration?: number; // Auto-dismiss duration in ms (default: 5000)
+}
+
+function createToastStore() {
+	const { subscribe, update } = writable<Toast[]>([]);
+
+	return {
+		subscribe,
+		add: (type: ToastType, message: string, duration = 5000) => {
+			const id = crypto.randomUUID();
+			const toast: Toast = { id, type, message, duration };
+
+			update((toasts) => [...toasts, toast]);
+
+			// Auto-dismiss after duration
+			if (duration > 0) {
+				setTimeout(() => {
+					update((toasts) => toasts.filter((t) => t.id !== id));
+				}, duration);
+			}
+
+			return id;
+		},
+		remove: (id: string) => {
+			update((toasts) => toasts.filter((t) => t.id !== id));
+		},
+		clear: () => {
+			update(() => []);
+		}
+	};
+}
+
+export const toastStore = createToastStore();
--- a/src/utils/api/request.ts
+++ b/src/utils/api/request.ts
@@ -0,0 +1,88 @@
+import { toastStore } from '$stores/toast';
+
+export interface ApiRequestOptions extends RequestInit {
+	showSuccessToast?: boolean; // Show toast on success (default: false)
+	showErrorToast?: boolean; // Show toast on error (default: true)
+	successMessage?: string; // Custom success message
+	errorMessage?: string; // Custom error message (overrides server error)
+}
+
+export class ApiError extends Error {
+	constructor(
+		message: string,
+		public status: number,
+		public data?: unknown
+	) {
+		super(message);
+		this.name = 'ApiError';
+	}
+}
+
+/**
+ * Wrapper for fetch API with automatic toast notifications
+ * @param url - Request URL
+ * @param options - Request options with toast configuration
+ * @returns Response data (automatically parsed as JSON)
+ */
+export async function apiRequest<T = unknown>(
+	url: string,
+	options: ApiRequestOptions = {}
+): Promise<T> {
+	const {
+		showSuccessToast = false,
+		showErrorToast = true,
+		successMessage,
+		errorMessage,
+		headers,
+		...fetchOptions
+	} = options;
+
+	try {
+		// Set default headers
+		const defaultHeaders: HeadersInit = {
+			'Content-Type': 'application/json'
+		};
+
+		const response = await fetch(url, {
+			...fetchOptions,
+			headers: {
+				...defaultHeaders,
+				...headers
+			}
+		});
+
+		// Parse response
+		const data = await response.json();
+
+		// Handle HTTP errors
+		if (!response.ok) {
+			const message = errorMessage || data.error || data.message || `HTTP ${response.status}`;
+
+			if (showErrorToast) {
+				toastStore.add('error', message);
+			}
+
+			throw new ApiError(message, response.status, data);
+		}
+
+		// Show success toast if requested
+		if (showSuccessToast && successMessage) {
+			toastStore.add('success', successMessage);
+		}
+
+		return data as T;
+	} catch (error) {
+		// Handle network errors or other exceptions
+		if (error instanceof ApiError) {
+			throw error;
+		}
+
+		const message = errorMessage || (error instanceof Error ? error.message : 'Network error');
+
+		if (showErrorToast) {
+			toastStore.add('error', message);
+		}
+
+		throw new ApiError(message, 0);
+	}
+}
--- a/src/utils/arr/README.md
+++ b/src/utils/arr/README.md
@@ -0,0 +1,105 @@
+# Arr HTTP Client Utilities
+
+Object-oriented HTTP client architecture for communicating with *arr
+applications (Radarr, Sonarr, Lidarr, Chaptarr).
+
+## Architecture
+
+### Class Hierarchy
+
+```
+BaseHttpClient (generic HTTP operations)
+    ↓
+BaseArrClient (arr-specific features: API key auth, common patterns)
+    ↓
+RadarrClient, SonarrClient, LidarrClient, ChaptarrClient (specific API methods)
+```
+
+### File Structure
+
+```
+src/utils/http/
+├── client.ts           # BaseHttpClient - connection pooling, basic HTTP methods
+└── types.ts            # TypeScript types for HTTP requests/responses
+
+src/utils/arr/
+├── base.ts             # BaseArrClient - arr-specific auth, common patterns
+├── radarr.ts           # RadarrClient - Radarr API methods
+├── sonarr.ts           # SonarrClient - Sonarr API methods
+├── lidarr.ts           # LidarrClient - Lidarr API methods
+├── chaptarr.ts         # ChaptarrClient - Chaptarr API methods
+├── factory.ts          # Factory function to create client by type
+├── types.ts            # Arr-specific types
+└── README.md           # This file
+```
+
+## Class Responsibilities
+
+### BaseHttpClient (`src/utils/http/client.ts`)
+
+Base HTTP client with generic request capabilities.
+
+**Features:**
+
+- Connection pooling (using Deno's built-in `fetch` with keep-alive)
+- Basic HTTP methods: `get()`, `post()`, `put()`, `delete()`, `patch()`
+- Request/response handling
+- Error handling
+- Configurable timeouts
+- Base URL management
+
+**Constructor:**
+
+```typescript
+new BaseHttpClient(baseUrl: string, options?: HttpClientOptions)
+```
+
+**Methods:**
+
+- `get<T>(path: string, options?: RequestOptions): Promise<T>`
+- `post<T>(path: string, body?: unknown, options?: RequestOptions): Promise<T>`
+- `put<T>(path: string, body?: unknown, options?: RequestOptions): Promise<T>`
+- `delete<T>(path: string, options?: RequestOptions): Promise<T>`
+- `patch<T>(path: string, body?: unknown, options?: RequestOptions): Promise<T>`
+
+### BaseArrClient (`src/utils/arr/base.ts`)
+
+Base client for all *arr applications. Extends `BaseHttpClient`.
+
+**Features:**
+
+- Automatically adds `X-Api-Key` header to all requests
+- Common arr API patterns (pagination, filtering)
+- Connection testing via `/api/v3/system/status`
+
+**Constructor:**
+
+```typescript
+new BaseArrClient(url: string, apiKey: string)
+```
+
+**Methods:**
+
+- `testConnection(): Promise<boolean>` - Test connection to arr instance
+- All methods from `BaseHttpClient`
+
+### Future Usage (when specific methods are implemented)
+
+```typescript
+import { createArrClient } from "$utils/arr/factory.ts";
+
+const radarr = createArrClient("radarr", "http://localhost:7878", "api-key");
+
+// Get movies
+const movies = await radarr.getMovies();
+
+// Get quality profiles
+const profiles = await radarr.getQualityProfiles();
+
+// Add movie
+await radarr.addMovie({
+  title: "Inception",
+  tmdbId: 27205,
+  qualityProfileId: 1,
+});
+```
--- a/src/utils/arr/base.ts
+++ b/src/utils/arr/base.ts
@@ -0,0 +1,49 @@
+import { BaseHttpClient } from '../http/client.ts';
+import type { ArrSystemStatus } from './types.ts';
+import { logger } from '$logger';
+
+/**
+ * Base client for all *arr applications
+ * Extends BaseHttpClient with arr-specific features
+ */
+export class BaseArrClient extends BaseHttpClient {
+	private apiKey: string;
+
+	constructor(url: string, apiKey: string) {
+		super(url, {
+			headers: {
+				'X-Api-Key': apiKey
+			}
+		});
+		this.apiKey = apiKey;
+	}
+
+	/**
+	 * Test connection to the arr instance
+	 * Calls /api/v3/system/status endpoint
+	 * @returns true if connection successful, false otherwise
+	 */
+	async testConnection(): Promise<boolean> {
+		try {
+			const status = await this.get<ArrSystemStatus>('/api/v3/system/status');
+
+			await logger.info(`Connection successful to ${this.baseUrl}`, {
+				source: 'BaseArrClient',
+				meta: {
+					appName: status.appName,
+					version: status.version,
+					osName: status.osName
+				}
+			});
+
+			return true;
+		} catch (error) {
+			await logger.error(`Connection failed to ${this.baseUrl}`, {
+				source: 'BaseArrClient',
+				meta: error
+			});
+
+			return false;
+		}
+	}
+}
--- a/src/utils/arr/clients/chaptarr.ts
+++ b/src/utils/arr/clients/chaptarr.ts
@@ -0,0 +1,9 @@
+import { BaseArrClient } from '../base.ts';
+
+/**
+ * Chaptarr API client
+ * Extends BaseArrClient with Chaptarr-specific API methods
+ */
+export class ChaptarrClient extends BaseArrClient {
+	// Specific API methods will be implemented here as needed
+}
--- a/src/utils/arr/clients/lidarr.ts
+++ b/src/utils/arr/clients/lidarr.ts
@@ -0,0 +1,9 @@
+import { BaseArrClient } from '../base.ts';
+
+/**
+ * Lidarr API client
+ * Extends BaseArrClient with Lidarr-specific API methods
+ */
+export class LidarrClient extends BaseArrClient {
+	// Specific API methods will be implemented here as needed
+}
--- a/src/utils/arr/clients/radarr.ts
+++ b/src/utils/arr/clients/radarr.ts
@@ -0,0 +1,9 @@
+import { BaseArrClient } from '../base.ts';
+
+/**
+ * Radarr API client
+ * Extends BaseArrClient with Radarr-specific API methods
+ */
+export class RadarrClient extends BaseArrClient {
+	// Specific API methods will be implemented here as needed
+}
--- a/src/utils/arr/clients/sonarr.ts
+++ b/src/utils/arr/clients/sonarr.ts
@@ -0,0 +1,9 @@
+import { BaseArrClient } from '../base.ts';
+
+/**
+ * Sonarr API client
+ * Extends BaseArrClient with Sonarr-specific API methods
+ */
+export class SonarrClient extends BaseArrClient {
+	// Specific API methods will be implemented here as needed
+}
--- a/src/utils/arr/factory.ts
+++ b/src/utils/arr/factory.ts
@@ -0,0 +1,32 @@
+import type { ArrType } from './types.ts';
+import { BaseArrClient } from './base.ts';
+import { RadarrClient } from './clients/radarr.ts';
+import { SonarrClient } from './clients/sonarr.ts';
+import { LidarrClient } from './clients/lidarr.ts';
+import { ChaptarrClient } from './clients/chaptarr.ts';
+
+/**
+ * Factory function to create an arr client instance
+ * @param type - The arr application type (radarr, sonarr, lidarr, chaptarr)
+ * @param url - Base URL of the arr instance
+ * @param apiKey - API key for authentication
+ * @returns Arr client instance
+ */
+export function createArrClient(
+	type: ArrType,
+	url: string,
+	apiKey: string
+): BaseArrClient {
+	switch (type) {
+		case 'radarr':
+			return new RadarrClient(url, apiKey);
+		case 'sonarr':
+			return new SonarrClient(url, apiKey);
+		case 'lidarr':
+			return new LidarrClient(url, apiKey);
+		case 'chaptarr':
+			return new ChaptarrClient(url, apiKey);
+		default:
+			throw new Error(`Unknown arr type: ${type}`);
+	}
+}
--- a/src/utils/arr/types.ts
+++ b/src/utils/arr/types.ts
@@ -0,0 +1,43 @@
+/**
+ * Arr Client Types
+ */
+
+export type ArrType = 'radarr' | 'sonarr' | 'lidarr' | 'chaptarr';
+
+/**
+ * System status response from /api/v3/system/status
+ * Based on actual Radarr API response
+ */
+export interface ArrSystemStatus {
+	appName: string;
+	instanceName: string;
+	version: string;
+	buildTime: string;
+	isDebug: boolean;
+	isProduction: boolean;
+	isAdmin: boolean;
+	isUserInteractive: boolean;
+	startupPath: string;
+	appData: string;
+	osName: string;
+	osVersion: string;
+	isNetCore: boolean;
+	isLinux: boolean;
+	isOsx: boolean;
+	isWindows: boolean;
+	isDocker: boolean;
+	mode: 'console' | string;
+	branch: string;
+	databaseType: 'sqLite' | string;
+	databaseVersion: string;
+	authentication: 'none' | 'basic' | 'forms' | string;
+	migrationVersion: number;
+	urlBase: string;
+	runtimeVersion: string;
+	runtimeName: string;
+	startTime: string;
+	packageVersion: string;
+	packageAuthor: string;
+	packageUpdateMechanism: 'builtIn' | string;
+	packageUpdateMechanismMessage: string;
+}
--- a/src/utils/config/config.ts
+++ b/src/utils/config/config.ts
@@ -4,12 +4,18 @@

 class Config {
 	private basePath: string;
+	public readonly timezone: string;

 	constructor() {
 		// Default base path logic:
 		// 1. Check environment variable
 		// 2. Fall back to /app (Docker default)
 		this.basePath = Deno.env.get('APP_BASE_PATH') || '/app';
+
+		// Timezone configuration:
+		// 1. Check TZ environment variable
+		// 2. Fall back to system timezone
+		this.timezone = Deno.env.get('TZ') || Intl.DateTimeFormat().resolvedOptions().timeZone;
 	}

 	/**
@@ -18,6 +24,7 @@ class Config {
 	 */
 	async init(): Promise<void> {
 		await Deno.mkdir(this.paths.logs, { recursive: true });
+		await Deno.mkdir(this.paths.data, { recursive: true });
 	}

 	/**
@@ -39,7 +46,13 @@ class Config {
 		},
 		get logFile(): string {
 			return `${config.basePath}/logs/app.log`;
-		}
+		},
+		get data(): string {
+			return `${config.basePath}/data`;
+		},
+		get database(): string {
+			return `${config.basePath}/data/profilarr.db`;
+		},
 	};
 }

--- a/src/utils/http/client.ts
+++ b/src/utils/http/client.ts
@@ -0,0 +1,180 @@
+import type { HttpClientOptions, RequestOptions } from './types.ts';
+import { HttpError } from './types.ts';
+
+/**
+ * Base HTTP client with connection pooling and generic request capabilities
+ */
+export class BaseHttpClient {
+	protected baseUrl: string;
+	protected defaultHeaders: Record<string, string>;
+	protected timeout: number;
+	protected retries: number;
+	protected retryDelay: number;
+	protected retryStatusCodes: number[];
+	protected httpClient: Deno.HttpClient;
+
+	constructor(baseUrl: string, options?: HttpClientOptions) {
+		// Ensure baseUrl doesn't have trailing slash
+		this.baseUrl = baseUrl.replace(/\/$/, '');
+		this.timeout = options?.timeout ?? 30000;
+		this.retries = options?.retries ?? 3;
+		this.retryDelay = options?.retryDelay ?? 500;
+		this.retryStatusCodes = options?.retryStatusCodes ?? [500, 502, 503, 504];
+		this.defaultHeaders = {
+			'Content-Type': 'application/json',
+			...options?.headers
+		};
+
+		// Create HTTP client with connection pooling
+		this.httpClient = Deno.createHttpClient({
+			poolMaxIdlePerHost: options?.poolMaxIdlePerHost ?? 5,
+			poolIdleTimeout: options?.poolIdleTimeout ?? 30000
+		});
+	}
+
+	/**
+	 * Sleep for specified milliseconds
+	 */
+	private sleep(ms: number): Promise<void> {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	/**
+	 * Make an HTTP request with retry logic
+	 */
+	protected async request<T>(
+		method: string,
+		path: string,
+		options?: RequestOptions & { body?: unknown }
+	): Promise<T> {
+		let lastError: HttpError | undefined;
+
+		// Retry loop
+		for (let attempt = 0; attempt <= this.retries; attempt++) {
+			try {
+				const url = `${this.baseUrl}${path}`;
+				const timeout = options?.timeout ?? this.timeout;
+
+				// Create abort controller for timeout
+				const controller = new AbortController();
+				const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+				try {
+					const headers = {
+						...this.defaultHeaders,
+						...options?.headers
+					};
+
+					const response = await fetch(url, {
+						method,
+						headers,
+						body: options?.body ? JSON.stringify(options.body) : undefined,
+						signal: options?.signal ?? controller.signal,
+						client: this.httpClient
+					});
+
+					clearTimeout(timeoutId);
+
+					// Parse response
+					const data = await response.json();
+
+					// Check for HTTP errors
+					if (!response.ok) {
+						const error = new HttpError(
+							`HTTP ${response.status}: ${response.statusText}`,
+							response.status,
+							data
+						);
+
+						// Retry on specific status codes
+						if (this.retryStatusCodes.includes(response.status) && attempt < this.retries) {
+							lastError = error;
+							// Exponential backoff: delay * (2 ^ attempt)
+							const delay = this.retryDelay * Math.pow(2, attempt);
+							await this.sleep(delay);
+							continue;
+						}
+
+						throw error;
+					}
+
+					return data as T;
+				} catch (error) {
+					clearTimeout(timeoutId);
+
+					// Handle abort/timeout
+					if (error instanceof Error && error.name === 'AbortError') {
+						throw new HttpError('Request timeout', 408);
+					}
+
+					// Re-throw HttpError (might be retryable)
+					if (error instanceof HttpError) {
+						throw error;
+					}
+
+					// Wrap other errors
+					throw new HttpError(
+						error instanceof Error ? error.message : 'Unknown error',
+						0
+					);
+				}
+			} catch (error) {
+				// If it's not an HttpError or not retryable, throw immediately
+				if (error instanceof HttpError) {
+					if (this.retryStatusCodes.includes(error.status) && attempt < this.retries) {
+						lastError = error;
+						const delay = this.retryDelay * Math.pow(2, attempt);
+						await this.sleep(delay);
+						continue;
+					}
+				}
+				throw error;
+			}
+		}
+
+		// If we exhausted retries, throw the last error
+		throw lastError ?? new HttpError('Request failed after retries', 0);
+	}
+
+	/**
+	 * GET request
+	 */
+	get<T>(path: string, options?: RequestOptions): Promise<T> {
+		return this.request<T>('GET', path, options);
+	}
+
+	/**
+	 * POST request
+	 */
+	post<T>(path: string, body?: unknown, options?: RequestOptions): Promise<T> {
+		return this.request<T>('POST', path, { ...options, body });
+	}
+
+	/**
+	 * PUT request
+	 */
+	put<T>(path: string, body?: unknown, options?: RequestOptions): Promise<T> {
+		return this.request<T>('PUT', path, { ...options, body });
+	}
+
+	/**
+	 * DELETE request
+	 */
+	delete<T>(path: string, options?: RequestOptions): Promise<T> {
+		return this.request<T>('DELETE', path, options);
+	}
+
+	/**
+	 * PATCH request
+	 */
+	patch<T>(path: string, body?: unknown, options?: RequestOptions): Promise<T> {
+		return this.request<T>('PATCH', path, { ...options, body });
+	}
+
+	/**
+	 * Close the HTTP client and cleanup resources
+	 */
+	close(): void {
+		this.httpClient.close();
+	}
+}
--- a/src/utils/http/types.ts
+++ b/src/utils/http/types.ts
@@ -0,0 +1,30 @@
+/**
+ * HTTP Client Types
+ */
+
+export interface HttpClientOptions {
+	timeout?: number; // Request timeout in milliseconds (default: 30000)
+	headers?: Record<string, string>; // Default headers to include in all requests
+	retries?: number; // Number of retries (default: 3)
+	retryDelay?: number; // Initial retry delay in ms (default: 500)
+	retryStatusCodes?: number[]; // Status codes to retry on (default: [500, 502, 503, 504])
+	poolMaxIdlePerHost?: number; // Max idle connections per host (default: 5)
+	poolIdleTimeout?: number; // Idle connection timeout in ms (default: 30000)
+}
+
+export interface RequestOptions {
+	headers?: Record<string, string>; // Additional headers for this request
+	timeout?: number; // Override timeout for this request
+	signal?: AbortSignal; // Abort signal for cancellation
+}
+
+export class HttpError extends Error {
+	constructor(
+		message: string,
+		public status: number,
+		public response?: unknown
+	) {
+		super(message);
+		this.name = 'HttpError';
+	}
+}
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,10 +11,15 @@ const config = {
 		}),
 		alias: {
 			$config: './src/utils/config/config.ts',
+			$logger: './src/utils/logger/logger.ts',
 			$stores: './src/stores',
 			$components: './src/components',
 			$static: './src/static',
-			$server: './src/server'
+			$server: './src/server',
+			$db: './src/db',
+			$arr: './src/utils/arr',
+			$http: './src/utils/http',
+			$api: './src/utils/api/request.ts'
 		}
 	}
 };