new webapp

.env.development

@@ -0,0 +1,18 @@
+# API Configuration
+VITE_API_URL=http://localhost:4004
+VITE_API_TIMEOUT=30000
+
+# Authentication
+VITE_ENABLE_MOCK_AUTH=true
+VITE_MOCK_USER_ID=testuser
+VITE_MOCK_USERNAME=Test User
+[email protected]
+
+# OAuth (for production)
+VITE_OAUTH_CLIENT_ID=
+VITE_OAUTH_REDIRECT_URI=http://localhost:5173/auth/callback
+VITE_OAUTH_PROVIDER_URL=https://huggingface.co
+
+# Feature Flags
+VITE_ENABLE_COMPARISON=true
+VITE_SESSION_LIMIT=20

.env.example

@@ -0,0 +1,22 @@
+# Flask Configuration
+FLASK_APP=src.app:app
+FLASK_ENV=development
+SECRET_KEY=your-secret-key-here-generate-with-secrets-token-hex
+
+# HuggingFace OAuth
+HF_CLIENT_ID=your-huggingface-client-id
+HF_CLIENT_SECRET=your-huggingface-client-secret
+HF_REDIRECT_URI=http://localhost:5000/callback
+
+# Backend API
+BACKEND_API_URL=http://localhost:8080/v1
+BACKEND_API_TIMEOUT=5
+
+# Database
+DATABASE_PATH=data/contacts.db
+
+# Session Configuration
+SESSION_COOKIE_SECURE=False
+SESSION_COOKIE_HTTPONLY=True
+SESSION_COOKIE_SAMESITE=Lax
+PERMANENT_SESSION_LIFETIME=2592000

.env.production

@@ -0,0 +1,13 @@
+# API Configuration
+VITE_API_URL=https://api.your-domain.com
+VITE_API_TIMEOUT=30000
+
+# Authentication
+VITE_ENABLE_MOCK_AUTH=false
+VITE_OAUTH_CLIENT_ID=production-client-id
+VITE_OAUTH_REDIRECT_URI=https://your-domain.com/auth/callback
+VITE_OAUTH_PROVIDER_URL=https://huggingface.co
+
+# Feature Flags
+VITE_ENABLE_COMPARISON=true
+VITE_SESSION_LIMIT=20

.pytest_cache/CACHEDIR.TAG

@@ -0,0 +1,4 @@
+Signature: 8a477f597d28d172789f06886806bc55
+# This file is a cache directory tag created by pytest.
+# For information about cache directory tags, see:
+#	https://bford.info/cachedir/spec.html

.pytest_cache/README.md

@@ -0,0 +1,8 @@
+# pytest cache directory #
+
+This directory contains data from the pytest's cache plugin,
+which provides the `--lf` and `--ff` options, as well as the `cache` fixture.
+
+**Do not** commit this to version control.
+
+See [the docs](https://docs.pytest.org/en/stable/how-to/cache.html) for more information.

.pytest_cache/v/cache/lastfailed

@@ -0,0 +1 @@
+{}

.pytest_cache/v/cache/nodeids

@@ -0,0 +1,29 @@
+[
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_apostrophes_removed",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_basic_lowercase",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_case_insensitivity",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_collision_scenarios",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_dots_removed",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_empty_string",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_hyphens_removed",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_idempotency",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_leading_trailing_special_chars",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_mixed_special_characters",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_numbers_preserved",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_only_special_chars",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_real_world_examples",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_spaces_removed",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_special_characters",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_underscores_and_symbols",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_unicode_letters_preserved",
+  "tests/unit/test_contact_utils.py::TestNormalizeContactName::test_whitespace_variations",
+  "tests/unit/test_storage_service.py::TestGetNextSequenceNumber::test_collision_prevention",
+  "tests/unit/test_storage_service.py::TestGetNextSequenceNumber::test_different_normalized_names_separate_sequences",
+  "tests/unit/test_storage_service.py::TestGetNextSequenceNumber::test_different_users_separate_sequences",
+  "tests/unit/test_storage_service.py::TestGetNextSequenceNumber::test_first_sequence_number",
+  "tests/unit/test_storage_service.py::TestGetNextSequenceNumber::test_gaps_in_sequence",
+  "tests/unit/test_storage_service.py::TestGetNextSequenceNumber::test_incremental_sequence",
+  "tests/unit/test_storage_service.py::TestGetNextSequenceNumber::test_multiple_sequences",
+  "tests/unit/test_storage_service.py::TestProducerIdFormat::test_collision_examples",
+  "tests/unit/test_storage_service.py::TestProducerIdFormat::test_producer_id_format"
+]

.svelte-kit/ambient.d.ts

@@ -0,0 +1,321 @@
+
+// this file is generated — do not edit it
+
+
+/// <reference types="@sveltejs/kit" />
+
+/**
+ * Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://svelte.dev/docs/kit/configuration#env) (if configured).
+ * 
+ * _Unlike_ [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.
+ * 
+ * ```ts
+ * import { API_KEY } from '$env/static/private';
+ * ```
+ * 
+ * Note that all environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:
+ * 
+ * ```
+ * MY_FEATURE_FLAG=""
+ * ```
+ * 
+ * You can override `.env` values from the command line like so:
+ * 
+ * ```sh
+ * MY_FEATURE_FLAG="enabled" npm run dev
+ * ```
+ */
+declare module '$env/static/private' {
+	export const VITE_API_URL: string;
+	export const VITE_API_TIMEOUT: string;
+	export const VITE_ENABLE_MOCK_AUTH: string;
+	export const VITE_MOCK_USER_ID: string;
+	export const VITE_MOCK_USERNAME: string;
+	export const VITE_MOCK_EMAIL: string;
+	export const VITE_OAUTH_CLIENT_ID: string;
+	export const VITE_OAUTH_REDIRECT_URI: string;
+	export const VITE_OAUTH_PROVIDER_URL: string;
+	export const VITE_ENABLE_COMPARISON: string;
+	export const VITE_SESSION_LIMIT: string;
+	export const SHELL: string;
+	export const npm_command: string;
+	export const LSCOLORS: string;
+	export const USER_ZDOTDIR: string;
+	export const npm_config_userconfig: string;
+	export const COLORTERM: string;
+	export const XDG_CONFIG_DIRS: string;
+	export const VSCODE_DEBUGPY_ADAPTER_ENDPOINTS: string;
+	export const npm_config_cache: string;
+	export const API_PORT: string;
+	export const LESS: string;
+	export const XPC_FLAGS: string;
+	export const TERM_PROGRAM_VERSION: string;
+	export const JAEGER_AGENT_PORT: string;
+	export const NODE: string;
+	export const MOCK_OAUTH_USER_NAME: string;
+	export const JAVA_HOME: string;
+	export const __CFBundleIdentifier: string;
+	export const SSH_AUTH_SOCK: string;
+	export const MallocNanoZone: string;
+	export const MOCK_OAUTH_ENABLED: string;
+	export const JAEGER_AGENT_HOST: string;
+	export const PYDEVD_DISABLE_FILE_VALIDATION: string;
+	export const OSLogRateLimit: string;
+	export const JAEGER_SAMPLER_TYPE: string;
+	export const COLOR: string;
+	export const OPENAI_API_KEY: string;
+	export const STREAMLIT_SERVER_ADDRESS: string;
+	export const npm_config_local_prefix: string;
+	export const SDKMAN_CANDIDATES_DIR: string;
+	export const HOMEBREW_PREFIX: string;
+	export const npm_config_globalconfig: string;
+	export const OPENAI_MODEL: string;
+	export const EDITOR: string;
+	export const PWD: string;
+	export const NIX_PROFILES: string;
+	export const JAEGER_SAMPLER_PARAM: string;
+	export const LOGNAME: string;
+	export const PORT: string;
+	export const npm_config_init_module: string;
+	export const BUILDKIT_PROGRESS: string;
+	export const __NIX_DARWIN_SET_ENVIRONMENT_DONE: string;
+	export const _: string;
+	export const BUNDLED_DEBUGPY_PATH: string;
+	export const VSCODE_GIT_ASKPASS_NODE: string;
+	export const VSCODE_INJECTION: string;
+	export const COMMAND_MODE: string;
+	export const HOME: string;
+	export const LANG: string;
+	export const LS_COLORS: string;
+	export const npm_package_version: string;
+	export const LLM_PROVIDER: string;
+	export const PYTHONSTARTUP: string;
+	export const NIX_SSL_CERT_FILE: string;
+	export const MEMORY_BACKEND_PORT: string;
+	export const TMPDIR: string;
+	export const GIT_ASKPASS: string;
+	export const JAEGER_ENABLED: string;
+	export const JAEGER_UI_PORT: string;
+	export const PROMPT: string;
+	export const INIT_CWD: string;
+	export const NIX_USER_PROFILE_DIR: string;
+	export const INFOPATH: string;
+	export const npm_lifecycle_script: string;
+	export const MOCK_OAUTH_USER_AVATAR: string;
+	export const VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
+	export const VSCODE_PYTHON_AUTOACTIVATE_GUARD: string;
+	export const npm_config_npm_version: string;
+	export const STREAMLIT_SERVER_PORT: string;
+	export const TERM: string;
+	export const npm_package_name: string;
+	export const PYTHON_BASIC_REPL: string;
+	export const ZSH: string;
+	export const npm_config_prefix: string;
+	export const ZDOTDIR: string;
+	export const OPENAI_MAX_TOKENS: string;
+	export const USER: string;
+	export const GIT_PAGER: string;
+	export const VSCODE_GIT_IPC_HANDLE: string;
+	export const HOMEBREW_CELLAR: string;
+	export const SDKMAN_DIR: string;
+	export const API_BEARER_TOKEN: string;
+	export const npm_lifecycle_event: string;
+	export const SHLVL: string;
+	export const PAGER: string;
+	export const HOMEBREW_REPOSITORY: string;
+	export const SDKMAN_CANDIDATES_API: string;
+	export const STREAMLIT_BROWSER_GATHER_USAGE_STATS: string;
+	export const XPC_SERVICE_NAME: string;
+	export const npm_config_user_agent: string;
+	export const OPENAI_TEMPERATURE: string;
+	export const MOCK_OAUTH_USER_EMAIL: string;
+	export const TERMINFO_DIRS: string;
+	export const npm_execpath: string;
+	export const npm_package_json: string;
+	export const VSCODE_GIT_ASKPASS_MAIN: string;
+	export const XDG_DATA_DIRS: string;
+	export const npm_config_noproxy: string;
+	export const APP_PORT: string;
+	export const PATH: string;
+	export const npm_config_node_gyp: string;
+	export const ORIGINAL_XDG_CURRENT_DESKTOP: string;
+	export const MOCK_OAUTH_USER_ID: string;
+	export const SDKMAN_PLATFORM: string;
+	export const npm_config_global_prefix: string;
+	export const npm_node_execpath: string;
+	export const API_AUTH_TOKEN: string;
+	export const OLDPWD: string;
+	export const __CF_USER_TEXT_ENCODING: string;
+	export const TERM_PROGRAM: string;
+	export const NODE_ENV: string;
+}
+
+/**
+ * Similar to [`$env/static/private`](https://svelte.dev/docs/kit/$env-static-private), except that it only includes environment variables that begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+ * 
+ * Values are replaced statically at build time.
+ * 
+ * ```ts
+ * import { PUBLIC_BASE_URL } from '$env/static/public';
+ * ```
+ */
+declare module '$env/static/public' {
+	
+}
+
+/**
+ * This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](https://svelte.dev/docs/kit/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://svelte.dev/docs/kit/configuration#env) (if configured).
+ * 
+ * This module cannot be imported into client-side code.
+ * 
+ * ```ts
+ * import { env } from '$env/dynamic/private';
+ * console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);
+ * ```
+ * 
+ * > [!NOTE] In `dev`, `$env/dynamic` always includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.
+ */
+declare module '$env/dynamic/private' {
+	export const env: {
+		VITE_API_URL: string;
+		VITE_API_TIMEOUT: string;
+		VITE_ENABLE_MOCK_AUTH: string;
+		VITE_MOCK_USER_ID: string;
+		VITE_MOCK_USERNAME: string;
+		VITE_MOCK_EMAIL: string;
+		VITE_OAUTH_CLIENT_ID: string;
+		VITE_OAUTH_REDIRECT_URI: string;
+		VITE_OAUTH_PROVIDER_URL: string;
+		VITE_ENABLE_COMPARISON: string;
+		VITE_SESSION_LIMIT: string;
+		SHELL: string;
+		npm_command: string;
+		LSCOLORS: string;
+		USER_ZDOTDIR: string;
+		npm_config_userconfig: string;
+		COLORTERM: string;
+		XDG_CONFIG_DIRS: string;
+		VSCODE_DEBUGPY_ADAPTER_ENDPOINTS: string;
+		npm_config_cache: string;
+		API_PORT: string;
+		LESS: string;
+		XPC_FLAGS: string;
+		TERM_PROGRAM_VERSION: string;
+		JAEGER_AGENT_PORT: string;
+		NODE: string;
+		MOCK_OAUTH_USER_NAME: string;
+		JAVA_HOME: string;
+		__CFBundleIdentifier: string;
+		SSH_AUTH_SOCK: string;
+		MallocNanoZone: string;
+		MOCK_OAUTH_ENABLED: string;
+		JAEGER_AGENT_HOST: string;
+		PYDEVD_DISABLE_FILE_VALIDATION: string;
+		OSLogRateLimit: string;
+		JAEGER_SAMPLER_TYPE: string;
+		COLOR: string;
+		OPENAI_API_KEY: string;
+		STREAMLIT_SERVER_ADDRESS: string;
+		npm_config_local_prefix: string;
+		SDKMAN_CANDIDATES_DIR: string;
+		HOMEBREW_PREFIX: string;
+		npm_config_globalconfig: string;
+		OPENAI_MODEL: string;
+		EDITOR: string;
+		PWD: string;
+		NIX_PROFILES: string;
+		JAEGER_SAMPLER_PARAM: string;
+		LOGNAME: string;
+		PORT: string;
+		npm_config_init_module: string;
+		BUILDKIT_PROGRESS: string;
+		__NIX_DARWIN_SET_ENVIRONMENT_DONE: string;
+		_: string;
+		BUNDLED_DEBUGPY_PATH: string;
+		VSCODE_GIT_ASKPASS_NODE: string;
+		VSCODE_INJECTION: string;
+		COMMAND_MODE: string;
+		HOME: string;
+		LANG: string;
+		LS_COLORS: string;
+		npm_package_version: string;
+		LLM_PROVIDER: string;
+		PYTHONSTARTUP: string;
+		NIX_SSL_CERT_FILE: string;
+		MEMORY_BACKEND_PORT: string;
+		TMPDIR: string;
+		GIT_ASKPASS: string;
+		JAEGER_ENABLED: string;
+		JAEGER_UI_PORT: string;
+		PROMPT: string;
+		INIT_CWD: string;
+		NIX_USER_PROFILE_DIR: string;
+		INFOPATH: string;
+		npm_lifecycle_script: string;
+		MOCK_OAUTH_USER_AVATAR: string;
+		VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
+		VSCODE_PYTHON_AUTOACTIVATE_GUARD: string;
+		npm_config_npm_version: string;
+		STREAMLIT_SERVER_PORT: string;
+		TERM: string;
+		npm_package_name: string;
+		PYTHON_BASIC_REPL: string;
+		ZSH: string;
+		npm_config_prefix: string;
+		ZDOTDIR: string;
+		OPENAI_MAX_TOKENS: string;
+		USER: string;
+		GIT_PAGER: string;
+		VSCODE_GIT_IPC_HANDLE: string;
+		HOMEBREW_CELLAR: string;
+		SDKMAN_DIR: string;
+		API_BEARER_TOKEN: string;
+		npm_lifecycle_event: string;
+		SHLVL: string;
+		PAGER: string;
+		HOMEBREW_REPOSITORY: string;
+		SDKMAN_CANDIDATES_API: string;
+		STREAMLIT_BROWSER_GATHER_USAGE_STATS: string;
+		XPC_SERVICE_NAME: string;
+		npm_config_user_agent: string;
+		OPENAI_TEMPERATURE: string;
+		MOCK_OAUTH_USER_EMAIL: string;
+		TERMINFO_DIRS: string;
+		npm_execpath: string;
+		npm_package_json: string;
+		VSCODE_GIT_ASKPASS_MAIN: string;
+		XDG_DATA_DIRS: string;
+		npm_config_noproxy: string;
+		APP_PORT: string;
+		PATH: string;
+		npm_config_node_gyp: string;
+		ORIGINAL_XDG_CURRENT_DESKTOP: string;
+		MOCK_OAUTH_USER_ID: string;
+		SDKMAN_PLATFORM: string;
+		npm_config_global_prefix: string;
+		npm_node_execpath: string;
+		API_AUTH_TOKEN: string;
+		OLDPWD: string;
+		__CF_USER_TEXT_ENCODING: string;
+		TERM_PROGRAM: string;
+		NODE_ENV: string;
+		[key: `PUBLIC_${string}`]: undefined;
+		[key: `${string}`]: string | undefined;
+	}
+}
+
+/**
+ * Similar to [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private), but only includes variables that begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+ * 
+ * Note that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use `$env/static/public` instead.
+ * 
+ * ```ts
+ * import { env } from '$env/dynamic/public';
+ * console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);
+ * ```
+ */
+declare module '$env/dynamic/public' {
+	export const env: {
+		[key: `PUBLIC_${string}`]: string | undefined;
+	}
+}

.svelte-kit/generated/client/app.js

@@ -0,0 +1,35 @@
+export { matchers } from './matchers.js';
+
+export const nodes = [
+	() => import('./nodes/0'),
+	() => import('./nodes/1'),
+	() => import('./nodes/2'),
+	() => import('./nodes/3'),
+	() => import('./nodes/4'),
+	() => import('./nodes/5')
+];
+
+export const server_loads = [];
+
+export const dictionary = {
+		"/": [2],
+		"/auth/callback": [3],
+		"/login": [4],
+		"/session/[id]": [5]
+	};
+
+export const hooks = {
+	handleError: (({ error }) => { console.error(error) }),
+	
+	reroute: (() => {}),
+	transport: {}
+};
+
+export const decoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.decode]));
+export const encoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.encode]));
+
+export const hash = false;
+
+export const decode = (type, value) => decoders[type](value);
+
+export { default as root } from '../root.svelte';

.svelte-kit/generated/client/matchers.js

@@ -0,0 +1 @@
+export const matchers = {};

.svelte-kit/generated/client/nodes/0.js

@@ -0,0 +1,3 @@
+import * as universal from "../../../../src/routes/+layout.ts";
+export { universal };
+export { default as component } from "../../../../src/routes/+layout.svelte";

.svelte-kit/generated/client/nodes/1.js

@@ -0,0 +1 @@
+export { default as component } from "../../../../node_modules/@sveltejs/kit/src/runtime/components/svelte-4/error.svelte";

.svelte-kit/generated/client/nodes/2.js

@@ -0,0 +1 @@
+export { default as component } from "../../../../src/routes/+page.svelte";

.svelte-kit/generated/client/nodes/3.js

@@ -0,0 +1,2 @@
+import * as universal from "../../../../src/routes/auth/callback/+page.ts";
+export { universal };

.svelte-kit/generated/client/nodes/4.js

@@ -0,0 +1 @@
+export { default as component } from "../../../../src/routes/login/+page.svelte";

.svelte-kit/generated/client/nodes/5.js

@@ -0,0 +1,3 @@
+import * as universal from "../../../../src/routes/session/[id]/+page.ts";
+export { universal };
+export { default as component } from "../../../../src/routes/session/[id]/+page.svelte";

.svelte-kit/generated/root.svelte

@@ -0,0 +1,61 @@
+<!-- This file is generated by @sveltejs/kit — do not edit it! -->
+
+<script>
+	import { setContext, afterUpdate, onMount, tick } from 'svelte';
+	import { browser } from '$app/environment';
+
+	// stores
+	export let stores;
+	export let page;
+	
+	export let constructors;
+	export let components = [];
+	export let form;
+	export let data_0 = null;
+	export let data_1 = null;
+
+	if (!browser) {
+		setContext('__svelte__', stores);
+	}
+
+	$: stores.page.set(page);
+	afterUpdate(stores.page.notify);
+
+	let mounted = false;
+	let navigated = false;
+	let title = null;
+
+	onMount(() => {
+		const unsubscribe = stores.page.subscribe(() => {
+			if (mounted) {
+				navigated = true;
+				tick().then(() => {
+					title = document.title || 'untitled page';
+				});
+			}
+		});
+
+		mounted = true;
+		return unsubscribe;
+	});
+
+	
+</script>
+
+{#if constructors[1]}
+	<svelte:component this={constructors[0]} bind:this={components[0]} data={data_0} params={page.params}>
+						<svelte:component this={constructors[1]} bind:this={components[1]} data={data_1} {form} params={page.params} />
+					</svelte:component>
+
+{:else}
+	<svelte:component this={constructors[0]} bind:this={components[0]} data={data_0} {form} params={page.params} />
+
+{/if}
+
+{#if mounted}
+	<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px">
+		{#if navigated}
+			{title}
+		{/if}
+	</div>
+{/if}

.svelte-kit/generated/server/internal.js

@@ -0,0 +1,53 @@
+
+import root from '../root.svelte';
+import { set_building, set_prerendering } from '__sveltekit/environment';
+import { set_assets } from '$app/paths/internal/server';
+import { set_manifest, set_read_implementation } from '__sveltekit/server';
+import { set_private_env, set_public_env } from '../../../node_modules/@sveltejs/kit/src/runtime/shared-server.js';
+
+export const options = {
+	app_template_contains_nonce: false,
+	async: false,
+	csp: {"mode":"auto","directives":{"upgrade-insecure-requests":false,"block-all-mixed-content":false},"reportOnly":{"upgrade-insecure-requests":false,"block-all-mixed-content":false}},
+	csrf_check_origin: true,
+	csrf_trusted_origins: [],
+	embedded: false,
+	env_public_prefix: 'PUBLIC_',
+	env_private_prefix: '',
+	hash_routing: false,
+	hooks: null, // added lazily, via `get_hooks`
+	preload_strategy: "modulepreload",
+	root,
+	service_worker: false,
+	service_worker_options: undefined,
+	templates: {
+		app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t<meta name=\"description\" content=\"PrepMate - Chat session manager with memory integration\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.ico\" />\n\t\t\n\t\t<!-- Bootstrap CSS -->\n\t\t<link \n\t\t\thref=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\" \n\t\t\trel=\"stylesheet\" \n\t\t\tintegrity=\"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM\" \n\t\t\tcrossorigin=\"anonymous\"\n\t\t/>\n\t\t\n\t\t<!-- Bootstrap Icons -->\n\t\t<link \n\t\t\trel=\"stylesheet\" \n\t\t\thref=\"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css\"\n\t\t/>\n\t\t\n\t\t" + head + "\n\t</head>\n\t<body>\n\t\t<div style=\"display: contents\">" + body + "</div>\n\t\t\n\t\t<!-- Bootstrap JS Bundle -->\n\t\t<script \n\t\t\tsrc=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js\" \n\t\t\tintegrity=\"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz\" \n\t\t\tcrossorigin=\"anonymous\"\n\t\t></script>\n\t</body>\n</html>\n",
+		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
+	},
+	version_hash: "n000i8"
+};
+
+export async function get_hooks() {
+	let handle;
+	let handleFetch;
+	let handleError;
+	let handleValidationError;
+	let init;
+	
+
+	let reroute;
+	let transport;
+	
+
+	return {
+		handle,
+		handleFetch,
+		handleError,
+		handleValidationError,
+		init,
+		reroute,
+		transport
+	};
+}
+
+export { set_assets, set_building, set_manifest, set_prerendering, set_private_env, set_public_env, set_read_implementation };

.svelte-kit/non-ambient.d.ts

@@ -0,0 +1,46 @@
+
+// this file is generated — do not edit it
+
+
+declare module "svelte/elements" {
+	export interface HTMLAttributes<T> {
+		'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
+		'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
+		'data-sveltekit-preload-code'?:
+			| true
+			| ''
+			| 'eager'
+			| 'viewport'
+			| 'hover'
+			| 'tap'
+			| 'off'
+			| undefined
+			| null;
+		'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
+		'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
+		'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
+	}
+}
+
+export {};
+
+
+declare module "$app/types" {
+	export interface AppTypes {
+		RouteId(): "/" | "/auth" | "/auth/callback" | "/login" | "/session" | "/session/[id]";
+		RouteParams(): {
+			"/session/[id]": { id: string }
+		};
+		LayoutParams(): {
+			"/": { id?: string };
+			"/auth": Record<string, never>;
+			"/auth/callback": Record<string, never>;
+			"/login": Record<string, never>;
+			"/session": { id?: string };
+			"/session/[id]": { id: string }
+		};
+		Pathname(): "/" | "/auth" | "/auth/" | "/auth/callback" | "/auth/callback/" | "/login" | "/login/" | "/session" | "/session/" | `/session/${string}` & {} | `/session/${string}/` & {};
+		ResolvedPathname(): `${"" | `/${string}`}${ReturnType<AppTypes['Pathname']>}`;
+		Asset(): "/favicon.ico" | "/robots.txt" | string & {};
+	}
+}

.svelte-kit/tsconfig.json

@@ -0,0 +1,52 @@
+{
+	"compilerOptions": {
+		"paths": {
+			"$lib": [
+				"../src/lib"
+			],
+			"$lib/*": [
+				"../src/lib/*"
+			],
+			"$app/types": [
+				"./types/index.d.ts"
+			]
+		},
+		"rootDirs": [
+			"..",
+			"./types"
+		],
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"lib": [
+			"esnext",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"noEmit": true,
+		"target": "esnext"
+	},
+	"include": [
+		"ambient.d.ts",
+		"non-ambient.d.ts",
+		"./types/**/$types.d.ts",
+		"../vite.config.js",
+		"../vite.config.ts",
+		"../src/**/*.js",
+		"../src/**/*.ts",
+		"../src/**/*.svelte",
+		"../tests/**/*.js",
+		"../tests/**/*.ts",
+		"../tests/**/*.svelte"
+	],
+	"exclude": [
+		"../node_modules/**",
+		"../src/service-worker.js",
+		"../src/service-worker/**/*.js",
+		"../src/service-worker.ts",
+		"../src/service-worker/**/*.ts",
+		"../src/service-worker.d.ts",
+		"../src/service-worker/**/*.d.ts"
+	]
+}

.svelte-kit/types/route_meta_data.json

@@ -0,0 +1,17 @@
+{
+	"/": [
+		"src/routes/+layout.ts",
+		"src/routes/+layout.ts"
+	],
+	"/auth/callback": [
+		"src/routes/auth/callback/+page.ts",
+		"src/routes/+layout.ts"
+	],
+	"/login": [
+		"src/routes/+layout.ts"
+	],
+	"/session/[id]": [
+		"src/routes/session/[id]/+page.ts",
+		"src/routes/+layout.ts"
+	]
+}

.svelte-kit/types/src/routes/$types.d.ts

@@ -0,0 +1,26 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = {  };
+type RouteId = '/';
+type MaybeWithVoid<T> = {} extends T ? T | void : T;
+export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
+type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
+type EnsureDefined<T> = T extends null | undefined ? {} : T;
+type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+export type Snapshot<T = any> = Kit.Snapshot<T>;
+type PageParentData = EnsureDefined<LayoutData>;
+type LayoutRouteId = RouteId | "/" | "/auth/callback" | "/login" | "/session/[id]" | null
+type LayoutParams = RouteParams & { id?: string }
+type LayoutParentData = EnsureDefined<{}>;
+
+export type PageServerData = null;
+export type PageData = Expand<PageParentData>;
+export type PageProps = { params: RouteParams; data: PageData }
+export type LayoutServerData = null;
+export type LayoutLoad<OutputData extends OutputDataShape<LayoutParentData> = OutputDataShape<LayoutParentData>> = Kit.Load<LayoutParams, LayoutServerData, LayoutParentData, OutputData, LayoutRouteId>;
+export type LayoutLoadEvent = Parameters<LayoutLoad>[0];
+export type LayoutData = Expand<Omit<LayoutParentData, keyof Kit.LoadProperties<Awaited<ReturnType<typeof import('./proxy+layout.js').load>>>> & OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('./proxy+layout.js').load>>>>>>;
+export type LayoutProps = { params: LayoutParams; data: LayoutData; children: import("svelte").Snippet }

.svelte-kit/types/src/routes/auth/callback/$types.d.ts

@@ -0,0 +1,20 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = {  };
+type RouteId = '/auth/callback';
+type MaybeWithVoid<T> = {} extends T ? T | void : T;
+export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
+type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
+type EnsureDefined<T> = T extends null | undefined ? {} : T;
+type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+export type Snapshot<T = any> = Kit.Snapshot<T>;
+type PageParentData = EnsureDefined<import('../../$types.js').LayoutData>;
+
+export type PageServerData = null;
+export type PageLoad<OutputData extends OutputDataShape<PageParentData> = OutputDataShape<PageParentData>> = Kit.Load<RouteParams, PageServerData, PageParentData, OutputData, RouteId>;
+export type PageLoadEvent = Parameters<PageLoad>[0];
+export type PageData = Expand<Omit<PageParentData, keyof Kit.LoadProperties<Awaited<ReturnType<typeof import('./proxy+page.js').load>>>> & OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('./proxy+page.js').load>>>>>>;
+export type PageProps = { params: RouteParams; data: PageData }

.svelte-kit/types/src/routes/auth/callback/proxy+page.ts

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+import { handleOAuthCallback } from '$lib/services/auth';
+import { browser } from '$app/environment';
+
+export const load = async ({ url }: Parameters<PageLoad>[0]) => {
+	if (!browser) {
+		return {};
+	}
+
+	const code = url.searchParams.get('code');
+	const state = url.searchParams.get('state');
+	const error = url.searchParams.get('error');
+
+	// Handle OAuth error
+	if (error) {
+		console.error('OAuth error:', error);
+		throw redirect(302, '/login?error=' + encodeURIComponent(error));
+	}
+
+	// Handle successful authorization
+	if (code && state) {
+		try {
+			await handleOAuthCallback(code, state);
+			// Redirect to home on success
+			throw redirect(302, '/');
+		} catch (err) {
+			console.error('OAuth callback error:', err);
+			const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
+			throw redirect(302, '/login?error=' + encodeURIComponent(errorMessage));
+		}
+	}
+
+	// No code or state - redirect to login
+	throw redirect(302, '/login');
+};

.svelte-kit/types/src/routes/login/$types.d.ts

@@ -0,0 +1,18 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = {  };
+type RouteId = '/login';
+type MaybeWithVoid<T> = {} extends T ? T | void : T;
+export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
+type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
+type EnsureDefined<T> = T extends null | undefined ? {} : T;
+type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+export type Snapshot<T = any> = Kit.Snapshot<T>;
+type PageParentData = EnsureDefined<import('../$types.js').LayoutData>;
+
+export type PageServerData = null;
+export type PageData = Expand<PageParentData>;
+export type PageProps = { params: RouteParams; data: PageData }

.svelte-kit/types/src/routes/proxy+layout.ts

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import { redirect } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { getItem } from '$lib/services/storage';
+import { STORAGE_KEY_AUTH_TOKEN } from '$lib/utils/constants';
+import type { LayoutLoad } from './$types';
+
+export const load = async ({ url }: Parameters<LayoutLoad>[0]) => {
+	if (!browser) {
+		return {};
+	}
+
+	// Check if user is authenticated
+	const token = getItem<string>(STORAGE_KEY_AUTH_TOKEN);
+	const isAuthenticated = !!token;
+
+	// Define public routes that don't require authentication
+	const publicRoutes = ['/login', '/auth/callback', '/'];
+	const isPublicRoute = publicRoutes.some((route) => url.pathname.startsWith(route));
+
+	// Redirect to login if not authenticated and trying to access protected route
+	if (!isAuthenticated && !isPublicRoute) {
+		throw redirect(302, '/login');
+	}
+
+	// Redirect to home if authenticated and trying to access login page
+	if (isAuthenticated && url.pathname === '/login') {
+		throw redirect(302, '/');
+	}
+
+	return {};
+};

.svelte-kit/types/src/routes/session/[id]/$types.d.ts

@@ -0,0 +1,21 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = { id: string };
+type RouteId = '/session/[id]';
+type MaybeWithVoid<T> = {} extends T ? T | void : T;
+export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
+type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
+type EnsureDefined<T> = T extends null | undefined ? {} : T;
+type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+export type Snapshot<T = any> = Kit.Snapshot<T>;
+type PageParentData = EnsureDefined<import('../../$types.js').LayoutData>;
+
+export type EntryGenerator = () => Promise<Array<RouteParams>> | Array<RouteParams>;
+export type PageServerData = null;
+export type PageLoad<OutputData extends OutputDataShape<PageParentData> = OutputDataShape<PageParentData>> = Kit.Load<RouteParams, PageServerData, PageParentData, OutputData, RouteId>;
+export type PageLoadEvent = Parameters<PageLoad>[0];
+export type PageData = Expand<Omit<PageParentData, keyof Kit.LoadProperties<Awaited<ReturnType<typeof import('./proxy+page.js').load>>>> & OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('./proxy+page.js').load>>>>>>;
+export type PageProps = { params: RouteParams; data: PageData }

.svelte-kit/types/src/routes/session/[id]/proxy+page.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import type { PageLoad } from './$types';
+import { sessionStore } from '$lib/stores/session';
+import { error } from '@sveltejs/kit';
+
+export const load = async ({ params }: Parameters<PageLoad>[0]) => {
+	const { id } = params;
+
+	if (!id) {
+		throw error(404, 'Session not found');
+	}
+
+	// Load session data
+	await sessionStore.loadSession(id);
+
+	return {
+		sessionId: id
+	};
+};

Dockerfile

@@ -1,40 +1,20 @@
-# Dockerfile for API Session Chat Frontend
-# Optimized for Hugging Face Spaces (2 vCPU, 16 GB RAM)
-
 FROM python:3.11-slim
 
-# Set working directory
 WORKDIR /app
 
-# Set environment variables
-ENV PYTHONUNBUFFERED=1 \
-    PYTHONDONTWRITEBYTECODE=1 \
-    PIP_NO_CACHE_DIR=1 \
-    PIP_DISABLE_PIP_VERSION_CHECK=1
-
-# Install system dependencies (minimal for requests[security])
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    build-essential \
-    && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y build-essential && rm -rf /var/lib/apt/lists/*
 
-# Copy requirements first for better caching
 COPY requirements.txt .
-
-# Install Python dependencies
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application code
-COPY . .
-
-# Create data directory
-RUN mkdir -p data/sessions
+COPY src/ src/
+COPY migrations/ migrations/
 
-# Expose Streamlit port
-EXPOSE 8501
+RUN mkdir -p data
 
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:8501/_stcore/health || exit 1
+EXPOSE 7860
 
-# Run the application
-CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0", "--server.headless=true"]
+# Run with single worker to fix OAuth session persistence
+# TODO: Implement server-side session storage (Redis/Memcached) for multi-worker support
+# Increase timeout to 120s to handle slow LLM responses
+CMD ["gunicorn", "-w", "1", "-b", "0.0.0.0:7860", "--timeout", "120", "--graceful-timeout", "120", "src.app:app"]

README.md

@@ -1,17 +1,406 @@
----
-title: MemPrepMate
-emoji: 📚
-colorFrom: green
-colorTo: purple
-sdk: docker
-pinned: false
-short_description: AI Agent with MemMachine to prepare for conversations
-app_port: 8501
-hf_oauth: true
-hf_oauth_scopes:
- - email
-hf_oauth_authorized_org:
-  - Memverge
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# PrepMate Webapp - Profile and Contact Management UI# PrepMate Webapp
+
+
+
+Flask-based web application for managing user profiles and contact sessions with HuggingFace OAuth authentication.Modern web application for PrepMate built with Svelte, SvelteKit, and Bootstrap 5.
+
+
+
+## Quick Start## Technology Stack
+
+
+
+### Prerequisites- **Framework**: Svelte 4.2+ with SvelteKit 2.0+
+
+- **Language**: TypeScript 5.3+ (strict mode)
+
+- Python 3.11+- **Styling**: Bootstrap 5.3 + Bootstrap Icons 1.11
+
+- HuggingFace OAuth app credentials- **Build Tool**: Vite 5.0+
+
+- Backend API running (Go server)- **Testing**: Vitest (unit) + Playwright (e2e)
+
+- **HTTP Client**: Native Fetch API
+
+### Local Development
+
+## Prerequisites
+
+1. **Install dependencies:**
+
+   ```bash- Node.js 20.x or later
+
+   pip install -r requirements.txt- npm 10.x or later
+
+   ```- Docker (for backend services)
+
+
+
+2. **Configure environment:**## Quick Start
+
+   ```bash
+
+   cp .env.example .env### 1. Install Dependencies
+
+   # Edit .env with your HF OAuth credentials
+
+   ``````bash
+
+npm install
+
+3. **Initialize database:**```
+
+   ```bash
+
+   python -c "from src.services.storage_service import init_db; init_db()"### 2. Start Backend Services
+
+   ```
+
+From the repository root:
+
+4. **Run development server:**
+
+   ```bash```bash
+
+   export FLASK_APP=src.app:appdocker compose up -d api postgres memory-backend
+
+   export FLASK_ENV=development```
+
+   flask run --port=5000
+
+   ```### 3. Start Development Server
+
+
+
+   Access at: http://localhost:5000```bash
+
+npm run dev
+
+### Docker Development```
+
+
+
+```bashThe webapp will be available at `http://localhost:5173`
+
+# From repository root
+
+docker-compose up webapp## Development
+
+```
+
+### Available Scripts
+
+Access at: http://localhost:5000
+
+- `npm run dev` - Start development server with hot reload
+
+## Project Structure- `npm run build` - Build for production
+
+- `npm run preview` - Preview production build locally
+
+```- `npm test` - Run unit tests in watch mode
+
+webapp/- `npm run test:unit` - Run unit tests once
+
+├── src/- `npm run test:e2e` - Run end-to-end tests
+
+│   ├── app.py                 # Flask application- `npm run test:e2e:ui` - Run e2e tests with UI
+
+│   ├── models/                # Data models- `npm run check` - Type-check TypeScript
+
+│   ├── services/              # Business logic- `npm run lint` - Lint code with ESLint
+
+│   ├── routes/                # HTTP routes- `npm run format` - Format code with Prettier
+
+│   ├── templates/             # Jinja2 templates
+
+│   └── static/                # CSS/JS assets### Project Structure
+
+├── tests/                     # Unit and integration tests
+
+├── data/                      # SQLite database```
+
+├── migrations/                # Database migrationswebapp/
+
+└── requirements.txt           # Python dependencies├── src/
+
+```│   ├── lib/
+
+│   │   ├── components/   # Svelte UI components
+
+## Features│   │   ├── services/     # Business logic & API clients
+
+│   │   ├── stores/       # Svelte stores (state management)
+
+- **User Profile Management**: Maintain personal facts via HuggingFace OAuth│   │   ├── types/        # TypeScript type definitions
+
+- **Contact Sessions**: Create isolated sessions for different contacts│   │   └── utils/        # Helper functions
+
+- **Fact Management**: Add/edit facts with 2000 character limit│   ├── routes/           # SvelteKit pages (file-based routing)
+
+- **Message Exchange**: Send/receive messages with backend LLM integration│   └── app.html          # HTML template
+
+- **Contact Navigation**: Search and sort contacts by recent activity├── static/               # Static assets (favicon, robots.txt)
+
+├── tests/
+
+## Testing│   ├── unit/             # Vitest unit tests
+
+│   └── e2e/              # Playwright e2e tests
+
+```bash└── package.json
+
+# Unit tests```
+
+pytest tests/unit/ -v
+
+### Environment Variables
+
+# Integration tests
+
+pytest tests/integration/ -vCreate `.env.development` for local development:
+
+
+
+# Coverage report```bash
+
+pytest --cov=src --cov-report=html# API Configuration
+
+```VITE_API_URL=http://localhost:4004
+
+VITE_API_TIMEOUT=30000
+
+## Configuration
+
+# Authentication
+
+See `.env.example` for all available environment variables.VITE_ENABLE_MOCK_AUTH=true
+
+VITE_MOCK_USER_ID=testuser
+
+Key settings:VITE_MOCK_USERNAME=Test User
+
+- `HF_CLIENT_ID`: HuggingFace OAuth app client [email protected]
+
+- `HF_CLIENT_SECRET`: HuggingFace OAuth app secret
+
+- `BACKEND_API_URL`: Backend API base URL (default: http://api:4004/v1)# Feature Flags
+
+- `SECRET_KEY`: Flask session secret (generate with `python -c "import secrets; print(secrets.token_hex(32))"`)VITE_ENABLE_COMPARISON=true
+
+VITE_SESSION_LIMIT=20
+
+## Troubleshooting```
+
+
+
+See [quickstart.md](../specs/012-profile-contact-ui/quickstart.md) for detailed setup instructions and troubleshooting.## Testing
+
+
+### Unit Tests
+
+```bash
+# Run all unit tests
+npm test
+
+# Run specific test file
+npm test -- src/lib/services/api.test.ts
+
+# Run with coverage
+npm test -- --coverage
+```
+
+### End-to-End Tests
+
+```bash
+# Run all e2e tests
+npm run test:e2e
+
+# Run with UI
+npm run test:e2e:ui
+
+# Run specific browser
+npm run test:e2e -- --project=chromium
+```
+
+## Building for Production
+
+```bash
+# Create optimized production build
+npm run build
+
+# Preview production build locally
+npm run preview
+```
+
+The build output will be in the `build/` directory.
+
+## Docker
+
+### Build and Run
+
+```bash
+# Build Docker image
+docker build -t prepmate-webapp .
+
+# Run container
+docker run -p 5173:80 prepmate-webapp
+```
+
+### Docker Compose
+
+From the repository root:
+
+```bash
+# Start all services including webapp
+docker compose up -d
+
+# View logs
+docker compose logs -f webapp
+
+# Rebuild after changes
+docker compose build webapp && docker compose up -d webapp
+```
+
+The webapp will be available at `http://localhost:5173`
+
+## Architecture
+
+### State Management
+
+The webapp uses Svelte stores for reactive state management:
+
+- **Auth Store** (`stores/auth.ts`): User authentication state
+- **Session Store** (`stores/session.ts`): Active session and sessions list
+- **UI Store** (`stores/ui.ts`): UI state (sidebar visibility, loading, errors)
+
+### API Integration
+
+The webapp communicates with the Go API backend using a centralized API client (`services/api.ts`) that:
+
+- Wraps native Fetch API
+- Handles authentication (Bearer token + X-User-ID headers)
+- Implements retry logic and timeout handling
+- Provides type-safe methods for all endpoints
+
+### Routing
+
+SvelteKit provides file-based routing:
+
+- `/` - Home page (session list)
+- `/login` - Login page (OAuth or mock)
+- `/session/[id]` - Session detail (chat interface)
+- `/auth/callback` - OAuth callback handler
+
+## Contributing
+
+### Code Style
+
+- TypeScript strict mode enabled
+- ESLint for linting
+- Prettier for formatting
+- Follow existing patterns in components and services
+
+### Testing Requirements
+
+- Unit tests for all services and stores (>80% coverage goal)
+- Unit tests for complex components
+- E2e tests for critical user flows
+- All tests must pass before committing
+
+### Pull Request Process
+
+1. Create feature branch from `main`
+2. Implement changes with tests
+3. Run `npm run check` and `npm run lint`
+4. Run all tests (`npm test` and `npm run test:e2e`)
+5. Update documentation if needed
+6. Submit PR with clear description
+
+## Troubleshooting
+
+### Port Already in Use
+
+```bash
+# Find process using port 5173
+lsof -i :5173
+
+# Kill process
+kill -9 <PID>
+
+# Or use different port
+npm run dev -- --port 5174
+```
+
+### Node Modules Issues
+
+```bash
+# Clear and reinstall
+rm -rf node_modules package-lock.json
+npm install
+```
+
+### API Connection Errors
+
+```bash
+# Verify API is running
+curl http://localhost:4004/health
+
+# Check docker logs
+docker compose logs api
+
+# Restart API
+docker compose restart api
+```
+
+### Build Errors
+
+```bash
+# Clear caches
+rm -rf .svelte-kit node_modules/.vite
+
+# Rebuild
+npm run build
+```
+
+## Performance
+
+### Bundle Size
+
+Target: <500KB gzipped
+
+Check bundle size after build:
+
+```bash
+npm run build
+ls -lh build/
+```
+
+### Lighthouse Scores
+
+Target: >90 performance score
+
+Run Lighthouse audit in Chrome DevTools or:
+
+```bash
+npm run build
+npm run preview
+# Then run Lighthouse on http://localhost:5173
+```
+
+## Security
+
+- All user inputs are validated and sanitized
+- XSS protection via proper escaping
+- CSRF protection for state-changing operations
+- HTTPS enforced in production
+- Authentication tokens stored securely
+- Dependencies audited regularly (`npm audit`)
+
+## License
+
+See repository root LICENSE file.
+
+## Support
+
+For issues and questions, see the main repository README.

app.py

@@ -1,81 +0,0 @@
-"""
-API Session Chat Frontend
-
-Streamlit-based chat interface for interacting with an external API server.
-Supports session management, multiple message modes, and reference session comparison.
-"""
-
-import streamlit as st
-from src.ui.pages import main
-
-# Configure page
-st.set_page_config(
-    page_title="API Session Chat",
-    page_icon="💬",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-# Add header with MemMachine branding and links
-st.markdown("""
-    <style>
-    .header-links {
-        position: fixed;
-        top: 60px;
-        right: 20px;
-        z-index: 999;
-        display: flex;
-        gap: 15px;
-        align-items: center;
-        background: var(--background-color);
-        padding: 8px;
-        border-radius: 8px;
-    }
-    .header-links .powered-by {
-        color: #0066cc;
-        font-weight: bold;
-        margin-right: 5px;
-        font-size: 20px;
-    }
-    .header-links a {
-        text-decoration: none;
-        color: inherit;
-        display: flex;
-        align-items: center;
-        padding: 5px;
-        border-radius: 5px;
-        transition: background-color 0.2s;
-    }
-    .header-links a:hover {
-        background-color: rgba(128, 128, 128, 0.2);
-    }
-    .header-links img {
-        width: 24px;
-        height: 24px;
-        border-radius: 4px;
-    }
-    .header-links svg {
-        width: 24px;
-        height: 24px;
-    }
-    </style>
-    <div class="header-links">
-        <span class="powered-by">Powered by MemMachine</span>
-        <a href="https://memmachine.ai/" target="_blank" title="MemMachine">
-            <img src="https://avatars.githubusercontent.com/u/226739620?s=48&v=4" alt="MemMachine"/>
-        </a>
-        <a href="https://github.com/MemMachine/MemMachine" target="_blank" title="GitHub Repository">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-            </svg>
-        </a>
-        <a href="https://discord.gg/usydANvKqD" target="_blank" title="Discord Community">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
-            </svg>
-        </a>
-    </div>
-""", unsafe_allow_html=True)
-
-if __name__ == "__main__":
-    main.render()

data/migrations/001_add_producer_fields.sql

@@ -0,0 +1,16 @@
+-- Migration: Add producer identifier fields to contact_sessions table
+-- Date: 2025-11-17
+-- Feature: 001-refine-memory-producer-logic
+-- Purpose: Enable unique producer identifiers for contact-specific facts
+
+BEGIN TRANSACTION;
+
+-- Add new columns for producer logic
+ALTER TABLE contact_sessions ADD COLUMN normalized_name TEXT;
+ALTER TABLE contact_sessions ADD COLUMN sequence_number INTEGER DEFAULT 1;
+ALTER TABLE contact_sessions ADD COLUMN producer_id TEXT;
+
+-- Create index for efficient sequence number lookups
+CREATE INDEX IF NOT EXISTS idx_contact_sessions_normalized ON contact_sessions(user_id, normalized_name);
+
+COMMIT;

migrations/001_create_tables.sql

@@ -0,0 +1,30 @@
+-- Database Schema for Profile and Contact Management UI
+-- Feature: 012-profile-contact-ui
+-- Version: 1.0.0
+
+-- User profiles table
+CREATE TABLE IF NOT EXISTS user_profiles (
+    user_id VARCHAR(255) PRIMARY KEY NOT NULL,
+    display_name VARCHAR(255) NOT NULL,
+    profile_picture_url TEXT,
+    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    last_login TIMESTAMP NOT NULL,
+    session_id VARCHAR(255) NOT NULL UNIQUE
+);
+
+-- Contact sessions table
+CREATE TABLE IF NOT EXISTS contact_sessions (
+    session_id VARCHAR(255) PRIMARY KEY NOT NULL,
+    user_id VARCHAR(255) NOT NULL,
+    contact_name VARCHAR(255) NOT NULL,
+    contact_description TEXT CHECK(LENGTH(contact_description) <= 500),
+    is_reference BOOLEAN NOT NULL DEFAULT 0,
+    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    last_interaction TIMESTAMP NOT NULL,
+    FOREIGN KEY (user_id) REFERENCES user_profiles(user_id) ON DELETE CASCADE
+);
+
+-- Indexes for performance
+CREATE INDEX IF NOT EXISTS idx_contact_sessions_user ON contact_sessions(user_id);
+CREATE INDEX IF NOT EXISTS idx_contact_sessions_sort ON contact_sessions(user_id, last_interaction DESC);
+CREATE INDEX IF NOT EXISTS idx_contact_sessions_reference ON contact_sessions(is_reference);

pyproject.toml

@@ -0,0 +1,33 @@
+[project]
+name = "prepmate-webapp"
+version = "0.1.0"
+description = "Profile and Contact Management UI for PrepMate"
+requires-python = ">=3.11"
+
+[tool.ruff]
+target-version = "py311"
+line-length = 100
+
+[tool.ruff.lint]
+select = [
+    "E",  # pycodestyle errors
+    "W",  # pycodestyle warnings
+    "F",  # pyflakes
+    "I",  # isort
+    "B",  # flake8-bugbear
+    "C4", # flake8-comprehensions
+]
+ignore = [
+    "E501",  # line too long (handled by formatter)
+]
+
+[tool.ruff.format]
+quote-style = "double"
+indent-style = "space"
+
+[tool.pytest.ini_options]
+testpaths = ["tests"]
+python_files = ["test_*.py"]
+python_classes = ["Test*"]
+python_functions = ["test_*"]
+addopts = "-v --strict-markers"

requirements.txt

@@ -1,16 +1,35 @@
-# API Session Chat Frontend - Requirements
-
-# Core Dependencies
-streamlit>=1.28.0
-requests[security]>=2.31.0
-tenacity>=8.2.0  # Retry logic for memory backend
-
-# Testing
-pytest>=7.4.0
-pytest-mock>=3.11.1
-pytest-timeout>=2.1.0
-requests-mock>=1.11.0
-
-# Development
-black>=23.0.0
-ruff>=0.1.0
+# Core web framework
+Flask==3.0.0
+Flask-WTF==1.2.1
+
+# Authentication
+Authlib==1.2.1
+
+# HTTP client
+requests==2.31.0
+
+# Distributed tracing
+opentelemetry-api==1.21.0
+opentelemetry-sdk==1.21.0
+opentelemetry-exporter-otlp-proto-http==1.21.0
+opentelemetry-instrumentation-flask==0.42b0
+opentelemetry-instrumentation-requests==0.42b0
+
+# Database
+SQLAlchemy==2.0.23
+
+# Configuration
+python-dotenv==1.0.0
+
+# WSGI server
+gunicorn==21.2.0
+
+# Development dependencies
+pytest==7.4.3
+pytest-flask==1.3.0
+playwright==1.40.0
+ruff==0.1.7
+
+# Testing utilities
+pytest-cov==4.1.0
+pytest-mock==3.12.0

src/__init__.py

@@ -1 +0,0 @@
-"""Source package for API Session Chat Frontend."""

src/app.py

@@ -0,0 +1,216 @@
+"""
+Flask application entry point.
+Feature: 012-profile-contact-ui
+"""
+
+import json
+import logging
+import os
+import time
+from datetime import timedelta
+
+from flask import Flask, jsonify, request, g
+from dotenv import load_dotenv
+from opentelemetry import trace
+from opentelemetry.trace import Status, StatusCode
+from opentelemetry.trace.propagation.tracecontext import TraceContextTextMapPropagator
+
+from .services.auth_service import auth_service
+from .services.storage_service import init_db
+from .utils.tracing import init_tracer
+
+# Load environment variables
+load_dotenv()
+
+
+class JSONFormatter(logging.Formatter):
+    """Custom JSON formatter for structured logging."""
+
+    def format(self, record):
+        """Format log record as JSON."""
+        log_obj = {
+            "timestamp": self.formatTime(record, self.datefmt),
+            "level": record.levelname,
+            "module": record.module,
+            "message": record.getMessage(),
+        }
+
+        # Add exception info if present
+        if record.exc_info:
+            log_obj["exception"] = self.formatException(record.exc_info)
+
+        # Add extra fields if present
+        if hasattr(record, "request_id"):
+            log_obj["request_id"] = record.request_id
+        if hasattr(record, "user_id"):
+            log_obj["user_id"] = record.user_id
+        if hasattr(record, "duration_ms"):
+            log_obj["duration_ms"] = record.duration_ms
+        if hasattr(record, "backend_latency_ms"):
+            log_obj["backend_latency_ms"] = record.backend_latency_ms
+        if hasattr(record, "status_code"):
+            log_obj["status_code"] = record.status_code
+        if hasattr(record, "method"):
+            log_obj["method"] = record.method
+        if hasattr(record, "path"):
+            log_obj["path"] = record.path
+
+        return json.dumps(log_obj)
+
+
+def create_app():
+    """Create and configure Flask application."""
+    app = Flask(__name__)
+
+    # Configuration
+    app.config["SECRET_KEY"] = os.getenv("SECRET_KEY", "dev-secret-key-change-me")
+    app.config["SESSION_COOKIE_SECURE"] = os.getenv("SESSION_COOKIE_SECURE", "False") == "True"
+    app.config["SESSION_COOKIE_HTTPONLY"] = (
+        os.getenv("SESSION_COOKIE_HTTPONLY", "True") == "True"
+    )
+    app.config["SESSION_COOKIE_SAMESITE"] = os.getenv("SESSION_COOKIE_SAMESITE", "Lax")
+    app.config["PERMANENT_SESSION_LIFETIME"] = timedelta(
+        seconds=int(os.getenv("PERMANENT_SESSION_LIFETIME", "2592000"))
+    )
+
+    # Initialize database
+    init_db()
+
+    # Initialize OAuth
+    auth_service.init_app(app)
+
+    # Initialize Jaeger tracing
+    init_tracer("prepmate-webapp")
+
+    # Configure logging
+    setup_logging(app)
+
+    # Register middleware
+    register_middleware(app)
+
+    # Register blueprints
+    from .routes import auth, profile, contacts
+
+    app.register_blueprint(auth.bp)
+    app.register_blueprint(profile.bp)
+    app.register_blueprint(contacts.contacts_bp)
+
+    # Root route - redirect to login
+    @app.route("/")
+    def index():
+        """Root route - redirect to login page."""
+        from flask import session, redirect, url_for, render_template
+        
+        if "user_id" in session:
+            return redirect(url_for("profile.view_profile"))
+        return render_template("login.html")
+
+    # Health check endpoint
+    @app.route("/health")
+    def health():
+        """Health check endpoint for monitoring."""
+        return jsonify({"status": "ok"}), 200
+
+    return app
+
+
+def setup_logging(app):
+    """Configure structured JSON logging."""
+    log_level = os.getenv("LOG_LEVEL", "INFO")
+
+    # Create handler with JSON formatter
+    handler = logging.StreamHandler()
+    handler.setFormatter(JSONFormatter())
+
+    # Configure root logger
+    logging.basicConfig(
+        level=getattr(logging, log_level),
+        handlers=[handler],
+    )
+
+    # Configure app logger
+    app.logger.handlers = [handler]
+    app.logger.setLevel(getattr(logging, log_level))
+
+
+def register_middleware(app):
+    """Register Flask middleware for request logging and timing."""
+
+    @app.before_request
+    def before_request():
+        """Start request timer and generate request ID, create tracing span."""
+        g.start_time = time.time()
+        g.request_id = request.headers.get("X-Request-ID", os.urandom(8).hex())
+        
+        # Skip tracing for health endpoint
+        if request.path == "/health":
+            return
+        
+        # Extract parent span context from headers if present
+        try:
+            ctx = TraceContextTextMapPropagator().extract(carrier=request.headers)
+        except Exception:
+            ctx = None
+        
+        # Start a new span for this request
+        tracer = trace.get_tracer(__name__)
+        span = tracer.start_span(
+            name=f"{request.method} {request.path}",
+            context=ctx,
+        )
+        span.set_attribute("http.method", request.method)
+        span.set_attribute("http.url", request.url)
+        span.set_attribute("request_id", g.request_id)
+        g.span = span
+
+    @app.after_request
+    def after_request(response):
+        """Log request completion with duration and finish span."""
+        if hasattr(g, "start_time"):
+            duration_ms = (time.time() - g.start_time) * 1000
+
+            # Get user_id from session if available
+            user_id = None
+            try:
+                from flask import session
+
+                user_id = session.get("user_id")
+            except Exception:
+                pass
+
+            # Log request with structured data
+            extra = {
+                "request_id": g.request_id,
+                "duration_ms": round(duration_ms, 2),
+                "status_code": response.status_code,
+                "method": request.method,
+                "path": request.path,
+            }
+            if user_id:
+                extra["user_id"] = user_id
+            if hasattr(g, "backend_latency_ms"):
+                extra["backend_latency_ms"] = round(g.backend_latency_ms, 2)
+
+            app.logger.info(
+                f"{request.method} {request.path} {response.status_code}",
+                extra=extra,
+            )
+        
+        # Finish tracing span
+        if hasattr(g, "span"):
+            span = g.span
+            span.set_attribute("http.status_code", response.status_code)
+            if response.status_code >= 400:
+                span.set_status(Status(StatusCode.ERROR))
+            if hasattr(g, "backend_latency_ms"):
+                span.set_attribute("backend_latency_ms", round(g.backend_latency_ms, 2))
+            span.end()
+
+        return response
+
+
+# Create app instance
+app = create_app()
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=int(os.getenv("PORT", "5000")), debug=True)

src/lib/components/ChatMessage.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import type { Message } from '$lib/types/api';
+	import { formatDateTime, formatTime } from '$lib/utils/formatters';
+
+	export let message: Message;
+	export let isUser = false; // true for user messages, false for assistant messages
+
+	function getModeColor(mode: string): string {
+		switch (mode) {
+			case 'chat':
+				return 'primary';
+			case 'memorize':
+				return 'success';
+			case 'parse':
+				return 'info';
+			default:
+				return 'secondary';
+		}
+	}
+
+	function getModeIcon(mode: string): string {
+		switch (mode) {
+			case 'chat':
+				return 'bi-chat-left-text';
+			case 'memorize':
+				return 'bi-journal-bookmark';
+			case 'parse':
+				return 'bi-code-slash';
+			default:
+				return 'bi-chat-dots';
+		}
+	}
+</script>
+
+<div class="chat-message mb-3" class:user-message={isUser} class:assistant-message={!isUser}>
+	<div class="message-container" class:ms-auto={isUser}>
+		<div class="message-header d-flex justify-content-between align-items-center mb-1">
+			<span class="badge bg-{getModeColor(message.mode)}">
+				<i class="{getModeIcon(message.mode)} me-1"></i>
+				{message.mode}
+			</span>
+			<small class="text-muted ms-2" title={formatDateTime(message.created_at)}>
+				{formatTime(message.created_at)}
+			</small>
+		</div>
+		<div class="message-content">
+			{message.content}
+		</div>
+	</div>
+</div>
+
+<style>
+	.chat-message {
+		display: flex;
+		width: 100%;
+	}
+
+	.message-container {
+		max-width: 70%;
+		padding: 0.75rem 1rem;
+		border-radius: 1rem;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	}
+
+	/* User messages - right-aligned, blue background */
+	.user-message .message-container {
+		background-color: #0d6efd;
+		color: white;
+		border-bottom-right-radius: 0.25rem;
+	}
+
+	.user-message .message-header .badge {
+		background-color: rgba(255, 255, 255, 0.2) !important;
+		color: white;
+	}
+
+	.user-message .message-header .text-muted {
+		color: rgba(255, 255, 255, 0.8) !important;
+	}
+
+	/* Assistant messages - left-aligned, gray background */
+	.assistant-message {
+		justify-content: flex-start;
+	}
+
+	.assistant-message .message-container {
+		background-color: #f8f9fa;
+		color: #212529;
+		border-bottom-left-radius: 0.25rem;
+	}
+
+	.message-content {
+		white-space: pre-wrap;
+		word-break: break-word;
+		line-height: 1.5;
+		font-size: 0.95rem;
+	}
+
+	.message-header {
+		font-size: 0.875rem;
+	}
+
+	/* Responsive breakpoints */
+	@media (max-width: 576px) {
+		.message-container {
+			max-width: 90%;
+			padding: 0.625rem 0.875rem;
+		}
+
+		.message-content {
+			font-size: 0.9rem;
+		}
+
+		.message-header {
+			font-size: 0.8125rem;
+		}
+
+		.badge {
+			font-size: 0.75rem;
+		}
+	}
+
+	@media (min-width: 577px) and (max-width: 768px) {
+		.message-container {
+			max-width: 85%;
+		}
+	}
+
+	@media (min-width: 769px) and (max-width: 992px) {
+		.message-container {
+			max-width: 75%;
+		}
+	}
+
+	@media (min-width: 1200px) {
+		.message-container {
+			max-width: 65%;
+		}
+	}
+</style>

src/lib/components/ErrorAlert.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	// Error alert component with Bootstrap alert styling
+	export let message: string;
+	export let dismissible: boolean = true;
+	export let onDismiss: (() => void) | null = null;
+
+	function handleDismiss() {
+		if (onDismiss) {
+			onDismiss();
+		}
+	}
+</script>
+
+<div class="alert alert-danger {dismissible ? 'alert-dismissible' : ''} fade show" role="alert">
+	<i class="bi bi-exclamation-triangle-fill me-2"></i>
+	{message}
+	{#if dismissible}
+		<button
+			type="button"
+			class="btn-close"
+			data-bs-dismiss="alert"
+			aria-label="Close"
+			on:click={handleDismiss}
+		></button>
+	{/if}
+</div>

src/lib/components/LoadingSpinner.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	// Loading spinner component with Bootstrap styling
+</script>
+
+<div class="d-flex justify-content-center align-items-center p-4">
+	<div class="spinner-border text-primary" role="status">
+		<span class="visually-hidden">Loading...</span>
+	</div>
+</div>
+
+<style>
+	.spinner-border {
+		width: 3rem;
+		height: 3rem;
+	}
+</style>

src/lib/components/LoginForm.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { initiateOAuthLogin } from '$lib/services/auth';
+	import { ENABLE_MOCK_AUTH } from '$lib/utils/constants';
+
+	let loading = false;
+	let error: string | null = null;
+
+	async function handleLogin() {
+		loading = true;
+		error = null;
+
+		try {
+			await initiateOAuthLogin();
+			// OAuth will redirect, mock auth will complete
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Login failed';
+			console.error('Login error:', err);
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<div class="login-form card shadow-sm">
+	<div class="card-body p-3 p-md-4">
+		<div class="text-center mb-3 mb-md-4">
+			<i class="bi bi-chat-dots-fill text-primary login-icon"></i>
+			<h2 class="mt-3 fs-4 fs-md-3">Welcome to PrepMate</h2>
+			<p class="text-muted mb-0 fs-6">Sign in to manage your chat sessions</p>
+		</div>
+
+		{#if error}
+			<div class="alert alert-danger alert-dismissible fade show" role="alert">
+				<i class="bi bi-exclamation-triangle-fill me-2"></i>
+				{error}
+				<button
+					type="button"
+					class="btn-close"
+					aria-label="Close"
+					on:click={() => (error = null)}
+				></button>
+			</div>
+		{/if}
+
+		<div class="d-grid gap-3">
+			<button
+				type="button"
+				class="btn btn-primary btn-lg"
+				on:click={handleLogin}
+				disabled={loading}
+			>
+				{#if loading}
+					<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"
+					></span>
+				{:else}
+					<i class="bi bi-box-arrow-in-right me-2"></i>
+				{/if}
+				{ENABLE_MOCK_AUTH ? 'Login (Mock)' : 'Login with HuggingFace'}
+			</button>
+		</div>
+
+		{#if ENABLE_MOCK_AUTH}
+			<div class="alert alert-warning mt-3 mb-0" role="alert">
+				<i class="bi bi-info-circle-fill me-2"></i>
+				<strong>Development Mode:</strong> Using mock authentication
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.login-form {
+		max-width: 100%;
+		margin: 0 auto;
+	}
+
+	.login-icon {
+		font-size: 2.5rem;
+	}
+
+	/* Mobile optimizations */
+	@media (max-width: 576px) {
+		.login-icon {
+			font-size: 2rem;
+		}
+	}
+
+	/* Larger screens */
+	@media (min-width: 768px) {
+		.login-icon {
+			font-size: 3rem;
+		}
+	}
+</style>

src/lib/components/MessageInput.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { MessageMode } from '$lib/types/enums';
+	import ModeSelector from './ModeSelector.svelte';
+	import { validateMessageContent } from '$lib/utils/validators';
+
+	export let disabled = false;
+	export let loading = false;
+
+	const dispatch = createEventDispatcher<{
+		send: { content: string; mode: MessageMode };
+	}>();
+
+	let content = '';
+	let selectedMode: MessageMode = 'chat';
+	let error: string | null = null;
+
+	function handleKeyDown(event: KeyboardEvent) {
+		// Cmd/Ctrl + Enter to send
+		if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+			event.preventDefault();
+			handleSubmit();
+		}
+	}
+
+	function handleSubmit() {
+		error = null;
+
+		// Validate content
+		const validationError = validateMessageContent(content);
+		if (validationError) {
+			error = validationError;
+			return;
+		}
+
+		// Dispatch send event
+		dispatch('send', {
+			content: content.trim(),
+			mode: selectedMode
+		});
+
+		// Clear input
+		content = '';
+	}
+
+	$: canSend = content.trim().length > 0 && !loading && !disabled;
+</script>
+
+<div class="message-input border-top bg-white p-2 p-md-3">
+	{#if error}
+		<div class="alert alert-danger alert-sm mb-2" role="alert">
+			<i class="bi bi-exclamation-triangle-fill me-2"></i>
+			{error}
+		</div>
+	{/if}
+
+	<div class="input-container">
+		<!-- Mode Selector -->
+		<div class="mb-2">
+			<ModeSelector bind:selectedMode disabled={loading || disabled} />
+		</div>
+
+		<!-- Message Input -->
+		<div class="d-flex gap-2">
+			<textarea
+				class="form-control"
+				placeholder="Type your message..."
+				bind:value={content}
+				on:keydown={handleKeyDown}
+				{disabled}
+				rows="2"
+				maxlength="10000"
+			></textarea>
+
+			<button
+				type="button"
+				class="btn btn-primary send-btn"
+				on:click={handleSubmit}
+				disabled={!canSend}
+				title="Send message"
+			>
+				{#if loading}
+					<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+				{:else}
+					<i class="bi bi-send-fill"></i>
+				{/if}
+			</button>
+		</div>
+
+		<!-- Character Counter -->
+		<div class="d-flex justify-content-between align-items-center mt-2">
+			<small class="text-muted d-none d-sm-block">
+				<i class="bi bi-info-circle me-1"></i>
+				<span class="d-none d-md-inline">Press Cmd/Ctrl+Enter to send</span>
+				<span class="d-inline d-md-none">Cmd/Ctrl+Enter</span>
+			</small>
+			<small class="text-muted ms-auto">
+				{content.length} / 10k
+			</small>
+		</div>
+	</div>
+</div>
+
+<style>
+	.message-input {
+		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+	}
+
+	.input-container {
+		max-width: 100%;
+	}
+
+	textarea {
+		resize: vertical;
+		min-height: 60px;
+		max-height: 200px;
+		font-size: 1rem;
+	}
+
+	.send-btn {
+		min-width: 48px;
+		height: auto;
+		align-self: stretch;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.alert-sm {
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	/* Mobile optimizations */
+	@media (max-width: 576px) {
+		textarea {
+			min-height: 50px;
+			font-size: 16px; /* Prevents zoom on iOS */
+		}
+
+		.send-btn {
+			min-width: 44px;
+			padding: 0.5rem;
+		}
+
+		.message-input {
+			padding: 0.5rem !important;
+		}
+	}
+
+	/* Tablet and up */
+	@media (min-width: 768px) {
+		textarea {
+			min-height: 80px;
+		}
+	}
+</style>

src/lib/components/ModeSelector.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { MessageMode } from '$lib/types/enums';
+
+	export let selectedMode: MessageMode = 'chat';
+	export let disabled = false;
+
+	const modes: { value: MessageMode; label: string; icon: string; color: string }[] = [
+		{ value: 'chat', label: 'Chat', icon: 'bi-chat-left-text', color: 'primary' },
+		{ value: 'memorize', label: 'Memorize', icon: 'bi-journal-bookmark', color: 'success' },
+		{ value: 'parse', label: 'Parse', icon: 'bi-code-slash', color: 'info' }
+	];
+
+	function selectMode(mode: MessageMode) {
+		if (!disabled) {
+			selectedMode = mode;
+		}
+	}
+</script>
+
+<div class="mode-selector">
+	<div class="btn-group" role="group" aria-label="Message mode selector">
+		{#each modes as mode}
+			<button
+				type="button"
+				class="btn btn-outline-{mode.color}"
+				class:active={selectedMode === mode.value}
+				on:click={() => selectMode(mode.value)}
+				{disabled}
+				title="{mode.label} mode"
+			>
+				<i class="{mode.icon} me-1"></i>
+				<span class="mode-label">{mode.label}</span>
+			</button>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.mode-selector .btn-group {
+		width: 100%;
+	}
+
+	.mode-selector .btn {
+		flex: 1;
+		font-size: 0.875rem;
+		padding: 0.5rem 0.75rem;
+	}
+
+	.mode-selector .btn.active {
+		font-weight: 600;
+	}
+
+	/* Mobile optimizations */
+	@media (max-width: 576px) {
+		.mode-selector .btn {
+			font-size: 0.8125rem;
+			padding: 0.4rem 0.5rem;
+		}
+
+		.mode-label {
+			display: inline;
+		}
+	}
+
+	/* Very small screens - icon only */
+	@media (max-width: 380px) {
+		.mode-label {
+			display: none;
+		}
+
+		.mode-selector .btn {
+			padding: 0.5rem;
+		}
+
+		.mode-selector .btn i {
+			margin: 0 !important;
+		}
+	}
+
+	/* Larger screens */
+	@media (min-width: 768px) {
+		.mode-selector .btn {
+			font-size: 0.9375rem;
+			padding: 0.5rem 1rem;
+		}
+	}
+</style>

src/lib/components/SessionHeader.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { sessionStore, activeSession } from '$lib/stores/session';
+	import { formatDateTime } from '$lib/utils/formatters';
+	import type { Session } from '$lib/types/api';
+
+	export let session: Session;
+
+	let updatingReference = false;
+
+	async function toggleReference() {
+		updatingReference = true;
+		await sessionStore.updateSessionReference(session.id, !session.is_reference);
+		updatingReference = false;
+	}
+</script>
+
+<div class="session-header border-bottom bg-white p-2 p-md-3 shadow-sm">
+	<div class="d-flex justify-content-between align-items-start">
+		<div class="flex-grow-1 min-w-0 me-2">
+			<div class="d-flex align-items-center mb-1 mb-md-2">
+				<h4 class="mb-0 me-2 text-truncate session-title">{session.title}</h4>
+				{#if session.is_reference}
+					<span class="badge bg-info flex-shrink-0">
+						<i class="bi bi-star-fill me-1"></i>
+						<span class="d-none d-md-inline">Reference</span>
+					</span>
+				{/if}
+			</div>
+			<div class="text-muted small session-meta">
+				<span class="d-inline-block">
+					<i class="bi bi-calendar3 me-1"></i>
+					<span class="d-none d-md-inline">Created </span>{formatDateTime(session.created_at)}
+				</span>
+				<span class="ms-2 ms-md-3 d-inline-block">
+					<i class="bi bi-chat-dots me-1"></i>
+					{session.messages.length} <span class="d-none d-sm-inline">messages</span>
+				</span>
+			</div>
+		</div>
+
+		<div class="btn-group flex-shrink-0" role="group">
+			<button
+				type="button"
+				class="btn btn-outline-secondary btn-sm"
+				class:active={session.is_reference}
+				on:click={toggleReference}
+				disabled={updatingReference}
+				title={session.is_reference ? 'Remove from reference' : 'Mark as reference'}
+			>
+				{#if updatingReference}
+					<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+				{:else}
+					<i class="bi bi-star{session.is_reference ? '-fill' : ''}"></i>
+				{/if}
+			</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.session-header {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
+
+	.min-w-0 {
+		min-width: 0;
+	}
+
+	.session-title {
+		font-size: 1.25rem;
+	}
+
+	.session-meta {
+		font-size: 0.875rem;
+	}
+
+	.btn-group .btn.active {
+		background-color: #0dcaf0;
+		border-color: #0dcaf0;
+		color: white;
+	}
+
+	/* Mobile optimizations */
+	@media (max-width: 576px) {
+		.session-title {
+			font-size: 1rem;
+		}
+
+		.session-meta {
+			font-size: 0.8125rem;
+		}
+
+		.badge {
+			font-size: 0.7rem;
+			padding: 0.2rem 0.35rem;
+		}
+	}
+
+	/* Tablet and up */
+	@media (min-width: 768px) {
+		.session-title {
+			font-size: 1.5rem;
+		}
+	}
+</style>

src/lib/components/SessionList.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+	import { sessionStore, activeSessions, sessionCount } from '$lib/stores/session';
+	import { formatRelativeTime } from '$lib/utils/formatters';
+	import { validateSessionTitle } from '$lib/utils/validators';
+	import { SESSION_LIMIT, SESSION_LIMIT_WARNING } from '$lib/utils/constants';
+	import { goto } from '$app/navigation';
+
+	// Modal state
+	let showCreateModal = false;
+	let showDeleteModal = false;
+	let deleteSessionId: string | null = null;
+	let deleteSessionTitle = '';
+
+	// Form state
+	let newSessionTitle = '';
+	let titleError = '';
+	let creating = false;
+
+	function openCreateModal() {
+		newSessionTitle = '';
+		titleError = '';
+		showCreateModal = true;
+	}
+
+	function closeCreateModal() {
+		showCreateModal = false;
+		newSessionTitle = '';
+		titleError = '';
+	}
+
+	async function handleCreateSession() {
+		// Validate title
+		const validationError = validateSessionTitle(newSessionTitle);
+		if (validationError) {
+			titleError = validationError;
+			return;
+		}
+
+		creating = true;
+		const sessionId = await sessionStore.createSession(newSessionTitle);
+		creating = false;
+
+		if (sessionId) {
+			closeCreateModal();
+			// Navigate to new session
+			goto(`/session/${sessionId}`);
+		}
+	}
+
+	function openDeleteModal(sessionId: string, title: string) {
+		deleteSessionId = sessionId;
+		deleteSessionTitle = title;
+		showDeleteModal = true;
+	}
+
+	function closeDeleteModal() {
+		showDeleteModal = false;
+		deleteSessionId = null;
+		deleteSessionTitle = '';
+	}
+
+	async function handleDeleteSession() {
+		if (!deleteSessionId) return;
+
+		const success = await sessionStore.deleteSession(deleteSessionId);
+		if (success) {
+			closeDeleteModal();
+		}
+	}
+
+	function handleSessionClick(sessionId: string) {
+		goto(`/session/${sessionId}`);
+	}
+
+	// Check if at limit
+	$: atLimit = $sessionCount >= SESSION_LIMIT;
+	$: nearLimit = $sessionCount >= SESSION_LIMIT_WARNING;
+</script>
+
+<div class="session-list h-100 d-flex flex-column">
+	<!-- Header -->
+	<div class="session-list-header p-2 p-md-3 border-bottom bg-light">
+		<div class="d-flex justify-content-between align-items-center mb-2">
+			<h5 class="mb-0 fs-6 fs-md-5">
+				<i class="bi bi-chat-left-dots me-2"></i>
+				<span class="d-none d-sm-inline">Sessions</span>
+			</h5>
+			<button
+				class="btn btn-primary btn-sm"
+				on:click={openCreateModal}
+				disabled={atLimit}
+				title={atLimit ? 'Session limit reached' : 'Create new session'}
+			>
+				<i class="bi bi-plus-lg"></i>
+				<span class="d-none d-lg-inline ms-1">New</span>
+			</button>
+		</div>
+
+		{#if nearLimit}
+			<div class="alert alert-{atLimit ? 'danger' : 'warning'} alert-sm mb-0 py-1 px-2" role="alert">
+				<small>
+					{#if atLimit}
+						<i class="bi bi-exclamation-triangle-fill me-1"></i>
+						Session limit reached ({$sessionCount}/{SESSION_LIMIT})
+					{:else}
+						<i class="bi bi-info-circle-fill me-1"></i>
+						{$sessionCount}/{SESSION_LIMIT} sessions
+					{/if}
+				</small>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Session List -->
+	<div class="session-list-body flex-grow-1 overflow-auto">
+		{#if $activeSessions.length === 0}
+			<div class="text-center text-muted p-4">
+				<i class="bi bi-chat-dots" style="font-size: 3rem; opacity: 0.3;"></i>
+				<p class="mt-2 mb-0">No sessions yet</p>
+				<small>Create a session to get started</small>
+			</div>
+		{:else}
+			<div class="list-group list-group-flush">
+				{#each $activeSessions as session (session.id)}
+					<button
+						type="button"
+						class="list-group-item list-group-item-action px-2 px-md-3 py-2"
+						class:active={session.is_active}
+						on:click={() => handleSessionClick(session.id)}
+					>
+						<div class="d-flex w-100 justify-content-between align-items-start">
+							<div class="flex-grow-1 text-start me-2 min-w-0">
+								<div class="d-flex align-items-center mb-1">
+									<h6 class="mb-0 text-truncate session-title">
+										{session.title}
+									</h6>
+									{#if session.is_reference}
+										<span class="badge bg-info ms-2 flex-shrink-0" title="Reference session">
+											<i class="bi bi-star-fill"></i>
+										</span>
+									{/if}
+								</div>
+								<small class="text-muted d-block text-truncate">
+									<span class="d-none d-md-inline">{formatRelativeTime(session.last_interaction)} · </span>
+									{session.message_count} msg
+								</small>
+							</div>
+							<button
+								type="button"
+								class="btn btn-sm btn-outline-danger flex-shrink-0"
+								on:click|stopPropagation={() => openDeleteModal(session.id, session.title)}
+								title="Delete session"
+							>
+								<i class="bi bi-trash"></i>
+							</button>
+						</div>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Create Session Modal -->
+{#if showCreateModal}
+	<div class="modal show d-block" tabindex="-1" role="dialog">
+		<div class="modal-dialog modal-dialog-centered" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">Create New Session</h5>
+					<button
+						type="button"
+						class="btn-close"
+						aria-label="Close"
+						on:click={closeCreateModal}
+					></button>
+				</div>
+				<div class="modal-body">
+					<form on:submit|preventDefault={handleCreateSession}>
+						<div class="mb-3">
+							<label for="sessionTitle" class="form-label">Session Title</label>
+							<input
+								type="text"
+								class="form-control"
+								class:is-invalid={titleError}
+								id="sessionTitle"
+								bind:value={newSessionTitle}
+								placeholder="Enter session title..."
+								maxlength="200"
+								required
+							/>
+							{#if titleError}
+								<div class="invalid-feedback">{titleError}</div>
+							{/if}
+							<small class="form-text text-muted">Max 200 characters</small>
+						</div>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" on:click={closeCreateModal}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						class="btn btn-primary"
+						on:click={handleCreateSession}
+						disabled={creating || !newSessionTitle.trim()}
+					>
+						{#if creating}
+							<span class="spinner-border spinner-border-sm me-2" role="status"></span>
+						{/if}
+						Create
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-backdrop show"></div>
+{/if}
+
+<!-- Delete Confirmation Modal -->
+{#if showDeleteModal}
+	<div class="modal show d-block" tabindex="-1" role="dialog">
+		<div class="modal-dialog modal-dialog-centered" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">Delete Session</h5>
+					<button
+						type="button"
+						class="btn-close"
+						aria-label="Close"
+						on:click={closeDeleteModal}
+					></button>
+				</div>
+				<div class="modal-body">
+					<p>Are you sure you want to delete this session?</p>
+					<p class="text-muted mb-0">
+						<strong>{deleteSessionTitle}</strong>
+					</p>
+					<p class="text-danger mt-2 mb-0">
+						<i class="bi bi-exclamation-triangle-fill me-2"></i>
+						This action cannot be undone.
+					</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" on:click={closeDeleteModal}>
+						Cancel
+					</button>
+					<button type="button" class="btn btn-danger" on:click={handleDeleteSession}>
+						<i class="bi bi-trash me-2"></i>
+						Delete
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-backdrop show"></div>
+{/if}
+
+<style>
+	.session-list {
+		background-color: #f8f9fa;
+	}
+
+	.session-list-body {
+		position: relative;
+	}
+
+	.list-group-item {
+		cursor: pointer;
+		border-left: 3px solid transparent;
+		transition: all 0.2s ease;
+	}
+
+	.list-group-item:hover {
+		border-left-color: #0d6efd;
+	}
+
+	.list-group-item.active {
+		border-left-color: #0d6efd;
+		background-color: #e7f1ff;
+		color: #000;
+	}
+
+	.session-title {
+		max-width: 100%;
+		font-size: 0.95rem;
+	}
+
+	.min-w-0 {
+		min-width: 0;
+	}
+
+	.modal {
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+
+	.alert-sm {
+		font-size: 0.875rem;
+	}
+
+	/* Mobile optimizations */
+	@media (max-width: 576px) {
+		.session-title {
+			font-size: 0.875rem;
+		}
+
+		.list-group-item {
+			border-left-width: 2px;
+		}
+
+		.badge {
+			font-size: 0.7rem;
+			padding: 0.2rem 0.35rem;
+		}
+	}
+
+	/* Larger screens */
+	@media (min-width: 1200px) {
+		.session-title {
+			font-size: 1rem;
+		}
+	}
+</style>

src/lib/services/api.ts

@@ -0,0 +1,255 @@
+// Base API client with fetch wrapper
+import {
+	API_URL,
+	API_TIMEOUT,
+	HEADER_AUTHORIZATION,
+	HEADER_USER_ID,
+	HEADER_CONTENT_TYPE,
+	MAX_RETRIES,
+	RETRY_DELAY
+} from '../utils/constants';
+import type {
+	Session,
+	SessionMetadata,
+	ListSessionsResponse,
+	CreateSessionRequest,
+	CreateSessionResponse,
+	SendMessageRequest,
+	SendMessageResponse,
+	UserProfile,
+	APIError,
+	ComparisonResult
+} from '../types/api';
+import type { ClientError } from '../types/client';
+
+class APIClient {
+	private baseURL: string;
+	private token: string | null = null;
+	private userId: string | null = null;
+
+	constructor(baseURL: string = API_URL) {
+		this.baseURL = baseURL;
+	}
+
+	/**
+	 * Set authentication token and user ID
+	 */
+	setAuth(token: string, userId: string): void {
+		this.token = token;
+		this.userId = userId;
+	}
+
+	/**
+	 * Clear authentication
+	 */
+	clearAuth(): void {
+		this.token = null;
+		this.userId = null;
+	}
+
+	/**
+	 * Make HTTP request with retry logic and timeout
+	 */
+	private async request<T>(
+		endpoint: string,
+		options: RequestInit = {},
+		retries: number = MAX_RETRIES
+	): Promise<T> {
+		const url = `${this.baseURL}${endpoint}`;
+
+		// Add authentication headers
+		const headers: Record<string, string> = {
+			[HEADER_CONTENT_TYPE]: 'application/json'
+		};
+
+		// Merge existing headers
+		if (options.headers) {
+			Object.entries(options.headers).forEach(([key, value]) => {
+				if (typeof value === 'string') {
+					headers[key] = value;
+				}
+			});
+		}
+
+		if (this.token) {
+			headers[HEADER_AUTHORIZATION] = `Bearer ${this.token}`;
+		}
+
+		if (this.userId && !endpoint.includes('/user/profile')) {
+			headers[HEADER_USER_ID] = this.userId;
+		}
+
+		// Create abort controller for timeout
+		const controller = new AbortController();
+		const timeoutId = setTimeout(() => controller.abort(), API_TIMEOUT);
+
+		try {
+			const response = await fetch(url, {
+				...options,
+				headers,
+				signal: controller.signal
+			});
+
+			clearTimeout(timeoutId);
+
+			if (!response.ok) {
+				const error: APIError = await response.json();
+				throw this.createClientError(error, response.status, false);
+			}
+
+			// Handle 204 No Content
+			if (response.status === 204) {
+				return {} as T;
+			}
+
+			return await response.json();
+		} catch (error) {
+			clearTimeout(timeoutId);
+
+			// Handle abort/timeout
+			if (error instanceof Error && error.name === 'AbortError') {
+				if (retries > 0) {
+					await this.delay(RETRY_DELAY);
+					return this.request<T>(endpoint, options, retries - 1);
+				}
+				throw this.createClientError(
+					{ error: 'Request timeout', status: 408 },
+					408,
+					true
+				);
+			}
+
+			// Handle network errors
+			if (error instanceof TypeError) {
+				if (retries > 0) {
+					await this.delay(RETRY_DELAY);
+					return this.request<T>(endpoint, options, retries - 1);
+				}
+				throw this.createClientError(
+					{ error: 'Network error', status: 0 },
+					0,
+					true
+				);
+			}
+
+			// Re-throw client errors
+			if (this.isClientError(error)) {
+				throw error;
+			}
+
+			// Unknown error
+			throw this.createClientError({ error: String(error), status: 500 }, 500, false);
+		}
+	}
+
+	/**
+	 * Create typed client error
+	 */
+	private createClientError(apiError: APIError, status: number, retryable: boolean): ClientError {
+		let type: ClientError['type'] = 'unknown';
+
+		if (status === 401 || status === 403) {
+			type = 'auth';
+		} else if (status >= 400 && status < 500) {
+			type = 'validation';
+		} else if (status >= 500) {
+			type = 'server';
+		} else if (status === 0 || status === 408) {
+			type = 'network';
+		}
+
+		return {
+			message: apiError.error,
+			type,
+			cause: apiError,
+			retryable
+		};
+	}
+
+	/**
+	 * Type guard for ClientError
+	 */
+	private isClientError(error: unknown): error is ClientError {
+		return (
+			typeof error === 'object' &&
+			error !== null &&
+			'message' in error &&
+			'type' in error &&
+			'retryable' in error
+		);
+	}
+
+	/**
+	 * Delay utility for retry logic
+	 */
+	private delay(ms: number): Promise<void> {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	// Session Management Methods
+	async createSession(title: string): Promise<CreateSessionResponse> {
+		const request: CreateSessionRequest = {
+			title,
+			user_id: this.userId || ''
+		};
+
+		return this.request<CreateSessionResponse>('/v1/sessions', {
+			method: 'POST',
+			body: JSON.stringify(request)
+		});
+	}
+
+	async listSessions(): Promise<SessionMetadata[]> {
+		const response = await this.request<ListSessionsResponse>('/v1/sessions', {
+			method: 'GET'
+		});
+		return response.sessions;
+	}
+
+	async getSession(sessionId: string): Promise<Session> {
+		return this.request<Session>(`/v1/sessions/${sessionId}`, {
+			method: 'GET'
+		});
+	}
+
+	async updateSession(sessionId: string, isReference: boolean): Promise<CreateSessionResponse> {
+		return this.request<CreateSessionResponse>(`/v1/sessions/${sessionId}`, {
+			method: 'PATCH',
+			body: JSON.stringify({ is_reference: isReference })
+		});
+	}
+
+	async deleteSession(sessionId: string): Promise<void> {
+		await this.request<void>(`/v1/sessions/${sessionId}`, {
+			method: 'DELETE'
+		});
+	}
+
+	async sendMessage(
+		sessionId: string,
+		request: SendMessageRequest
+	): Promise<SendMessageResponse> {
+		return this.request<SendMessageResponse>(`/v1/sessions/${sessionId}/messages`, {
+			method: 'POST',
+			body: JSON.stringify(request)
+		});
+	}
+
+	async compareSession(sessionId: string, referenceSessionId: string): Promise<ComparisonResult> {
+		return this.request<ComparisonResult>(
+			`/v1/sessions/${sessionId}/compare?reference_id=${referenceSessionId}`,
+			{
+				method: 'GET'
+			}
+		);
+	}
+
+	async getUserProfile(): Promise<UserProfile> {
+		return this.request<UserProfile>('/v1/user/profile', {
+			method: 'GET'
+		});
+	}
+}
+
+// Export singleton instance
+export const apiClient = new APIClient();

src/lib/services/auth.ts

@@ -0,0 +1,206 @@
+import { authStore } from '$lib/stores/auth';
+import { apiClient } from '$lib/services/api';
+import {
+	OAUTH_CLIENT_ID,
+	OAUTH_REDIRECT_URI,
+	OAUTH_PROVIDER_URL,
+	ENABLE_MOCK_AUTH,
+	MOCK_USER_ID,
+	MOCK_USERNAME,
+	MOCK_EMAIL,
+	API_TOKEN
+} from '$lib/utils/constants';
+import type { UserProfile } from '$lib/types/api';
+
+/**
+ * Authentication service for OAuth2 PKCE and mock auth
+ */
+
+// PKCE helper functions
+function generateRandomString(length: number): string {
+	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+	const values = crypto.getRandomValues(new Uint8Array(length));
+	return Array.from(values)
+		.map((x) => possible[x % possible.length])
+		.join('');
+}
+
+async function sha256(plain: string): Promise<ArrayBuffer> {
+	const encoder = new TextEncoder();
+	const data = encoder.encode(plain);
+	return crypto.subtle.digest('SHA-256', data);
+}
+
+function base64urlencode(buffer: ArrayBuffer): string {
+	const bytes = new Uint8Array(buffer);
+	let str = '';
+	for (const byte of bytes) {
+		str += String.fromCharCode(byte);
+	}
+	return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+/**
+ * Generate PKCE code verifier and challenge
+ */
+export async function generatePKCE(): Promise<{ verifier: string; challenge: string }> {
+	const verifier = generateRandomString(128);
+	const hashed = await sha256(verifier);
+	const challenge = base64urlencode(hashed);
+	return { verifier, challenge };
+}
+
+/**
+ * Initiate OAuth2 login flow
+ */
+export async function initiateOAuthLogin(): Promise<void | UserProfile> {
+	if (ENABLE_MOCK_AUTH) {
+		// Use mock auth in development
+		return mockLogin();
+	}
+
+	// Generate PKCE parameters
+	const { verifier, challenge } = await generatePKCE();
+
+	// Store verifier in sessionStorage for callback
+	sessionStorage.setItem('pkce_verifier', verifier);
+
+	// Build authorization URL
+	const params = new URLSearchParams({
+		client_id: OAUTH_CLIENT_ID,
+		redirect_uri: OAUTH_REDIRECT_URI,
+		response_type: 'code',
+		scope: 'openid profile email',
+		code_challenge: challenge,
+		code_challenge_method: 'S256',
+		state: generateRandomString(32) // CSRF protection
+	});
+
+	// Store state for validation
+	sessionStorage.setItem('oauth_state', params.get('state')!);
+
+	// Redirect to OAuth provider
+	window.location.href = `${OAUTH_PROVIDER_URL}?${params.toString()}`;
+}
+
+/**
+ * Handle OAuth callback after authorization
+ */
+export async function handleOAuthCallback(
+	code: string,
+	state: string
+): Promise<UserProfile | null> {
+	// Validate state
+	const storedState = sessionStorage.getItem('oauth_state');
+	if (!storedState || storedState !== state) {
+		throw new Error('Invalid OAuth state - possible CSRF attack');
+	}
+
+	// Get verifier
+	const verifier = sessionStorage.getItem('pkce_verifier');
+	if (!verifier) {
+		throw new Error('PKCE verifier not found');
+	}
+
+	// Clean up stored values
+	sessionStorage.removeItem('oauth_state');
+	sessionStorage.removeItem('pkce_verifier');
+
+	// Exchange authorization code for token
+	const tokenResponse = await fetch(`${OAUTH_PROVIDER_URL}/token`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/x-www-form-urlencoded'
+		},
+		body: new URLSearchParams({
+			client_id: OAUTH_CLIENT_ID,
+			code,
+			code_verifier: verifier,
+			grant_type: 'authorization_code',
+			redirect_uri: OAUTH_REDIRECT_URI
+		})
+	});
+
+	if (!tokenResponse.ok) {
+		throw new Error('Failed to exchange authorization code for token');
+	}
+
+	const tokenData = await tokenResponse.json();
+	const accessToken = tokenData.access_token;
+	const expiresIn = tokenData.expires_in || 3600; // Default 1 hour
+
+	// Set auth headers for API client
+	apiClient.setAuth(accessToken, ''); // user_id will be set after profile fetch
+
+	// Fetch user profile from backend
+	const userProfile = await apiClient.getUserProfile();
+
+	// Calculate token expiry
+	const tokenExpiry = Date.now() + expiresIn * 1000;
+
+	// Update API client with user_id
+	apiClient.setAuth(accessToken, userProfile.user_id);
+
+	// Update auth store
+	authStore.login(
+		{
+			user_id: userProfile.user_id,
+			username: userProfile.username,
+			email: userProfile.email,
+			avatar_url: userProfile.avatar_url,
+			tokenExpiry
+		},
+		accessToken,
+		tokenExpiry
+	);
+
+	return userProfile;
+}
+
+/**
+ * Mock authentication for development
+ */
+export async function mockLogin(): Promise<UserProfile> {
+	// Use configured API token for mock auth
+	const mockToken = API_TOKEN;
+	const tokenExpiry = Date.now() + 24 * 60 * 60 * 1000; // 24 hours
+
+	// Set auth headers
+	apiClient.setAuth(mockToken, MOCK_USER_ID);
+
+	// Create mock user profile
+	const mockProfile: UserProfile = {
+		user_id: MOCK_USER_ID,
+		username: MOCK_USERNAME,
+		email: MOCK_EMAIL,
+		avatar_url: undefined
+	};
+
+	// Update auth store
+	authStore.login(
+		{
+			...mockProfile,
+			tokenExpiry
+		},
+		mockToken,
+		tokenExpiry
+	);
+
+	return mockProfile;
+}
+
+/**
+ * Logout user
+ */
+export function logout(): void {
+	// Clear API client auth
+	apiClient.clearAuth();
+
+	// Clear auth store
+	authStore.logout();
+
+	// Redirect to home
+	if (typeof window !== 'undefined') {
+		window.location.href = '/';
+	}
+}