feat: frontend pages

frontend/src/app.css

@@ -66,7 +66,8 @@
   --text-headline-sm: 1.25rem;
   --text-title-lg:    1.125rem;
   --text-title-md:    1rem;
-  --text-body-lg:     1rem;      /* long-form reading standard */
+  --text-body-xl:     1.25rem;      /* long-form reading standard */
+  --text-body-lg:     1rem;      
   --text-body-md:     0.9375rem;
   --text-body-sm:     0.875rem;
   --text-label-lg:    0.875rem;

frontend/src/client/index.ts

@@ -1,4 +1,4 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-export { analyzePosApiPosPost, createGenerationJobApiGeneratePost, getArticlesBffArticlesGet, getJobApiJobsJobIdGet, getJobsApiJobsGet, getMediaFileMediaFilenameGet, healthHealthGet, loginAuthLoginPost, type Options, regenerateAudioApiJobsJobIdRegenerateAudioPost, registerAuthRegisterPost, translateTextApiTranslateGet } from './sdk.gen';
+export { analyzePosApiPosPost, createGenerationJobApiGeneratePost, getArticleBffArticlesArticleIdGet, getJobApiJobsJobIdGet, getJobsApiJobsGet, getMediaFileMediaFilenameGet, getUserProfileBffUserProfileGet, healthHealthGet, listArticlesBffArticlesGet, loginAuthLoginPost, type Options, regenerateAudioApiJobsJobIdRegenerateAudioPost, registerAuthRegisterPost, translateTextApiTranslateGet, upsertLearnableLanguageApiLearnableLanguagesPost } from './sdk.gen';
-export type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostError, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponse, AnalyzePosApiPosPostResponses, ArticleResponse, ArticlesResponse, ClientOptions, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostError, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponse, CreateGenerationJobApiGeneratePostResponses, GenerationRequest, GenerationResponse, GetArticlesBffArticlesGetData, GetArticlesBffArticlesGetResponse, GetArticlesBffArticlesGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetError, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponse, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponse, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetError, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, HealthHealthGetData, HealthHealthGetResponse, HealthHealthGetResponses, HttpValidationError, JobListResponse, JobResponse, JobSummary, LoginAuthLoginPostData, LoginAuthLoginPostError, LoginAuthLoginPostErrors, LoginAuthLoginPostResponse, LoginAuthLoginPostResponses, LoginRequest, PosRequest, PosResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostError, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostError, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, RegisterRequest, TokenInfo, TokenResponse, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetError, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponse, TranslateTextApiTranslateGetResponses, TranslationResponse, ValidationError } from './types.gen';
+export type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostError, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponse, AnalyzePosApiPosPostResponses, ArticleDetail, ArticleItem, ArticleListResponse, ClientOptions, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostError, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponse, CreateGenerationJobApiGeneratePostResponses, GenerationRequest, GenerationResponse, GetArticleBffArticlesArticleIdGetData, GetArticleBffArticlesArticleIdGetError, GetArticleBffArticlesArticleIdGetErrors, GetArticleBffArticlesArticleIdGetResponse, GetArticleBffArticlesArticleIdGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetError, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponse, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponse, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetError, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, GetUserProfileBffUserProfileGetData, GetUserProfileBffUserProfileGetResponse, GetUserProfileBffUserProfileGetResponses, HealthHealthGetData, HealthHealthGetResponse, HealthHealthGetResponses, HttpValidationError, JobListResponse, JobResponse, JobSummary, LearnableLanguageItem, LearnableLanguageRequest, LearnableLanguageResponse, ListArticlesBffArticlesGetData, ListArticlesBffArticlesGetError, ListArticlesBffArticlesGetErrors, ListArticlesBffArticlesGetResponse, ListArticlesBffArticlesGetResponses, LoginAuthLoginPostData, LoginAuthLoginPostError, LoginAuthLoginPostErrors, LoginAuthLoginPostResponse, LoginAuthLoginPostResponses, LoginRequest, PosRequest, PosResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostError, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostError, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, RegisterRequest, TokenInfo, TokenResponse, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetError, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponse, TranslateTextApiTranslateGetResponses, TranslationResponse, UpsertLearnableLanguageApiLearnableLanguagesPostData, UpsertLearnableLanguageApiLearnableLanguagesPostError, UpsertLearnableLanguageApiLearnableLanguagesPostErrors, UpsertLearnableLanguageApiLearnableLanguagesPostResponse, UpsertLearnableLanguageApiLearnableLanguagesPostResponses, UserProfileResponse, ValidationError } from './types.gen';

frontend/src/client/sdk.gen.ts

@@ -2,7 +2,7 @@
 
 import type { Client, Options as Options2, TDataShape } from './client';
 import { client } from './client.gen';
-import type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponses, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponses, GetArticlesBffArticlesGetData, GetArticlesBffArticlesGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, HealthHealthGetData, HealthHealthGetResponses, LoginAuthLoginPostData, LoginAuthLoginPostErrors, LoginAuthLoginPostResponses, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponses } from './types.gen';
+import type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponses, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponses, GetArticleBffArticlesArticleIdGetData, GetArticleBffArticlesArticleIdGetErrors, GetArticleBffArticlesArticleIdGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, GetUserProfileBffUserProfileGetData, GetUserProfileBffUserProfileGetResponses, HealthHealthGetData, HealthHealthGetResponses, ListArticlesBffArticlesGetData, ListArticlesBffArticlesGetErrors, ListArticlesBffArticlesGetResponses, LoginAuthLoginPostData, LoginAuthLoginPostErrors, LoginAuthLoginPostResponses, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponses, UpsertLearnableLanguageApiLearnableLanguagesPostData, UpsertLearnableLanguageApiLearnableLanguagesPostErrors, UpsertLearnableLanguageApiLearnableLanguagesPostResponses } from './types.gen';
 
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
     /**
@@ -81,9 +81,44 @@ export const regenerateAudioApiJobsJobIdRegenerateAudioPost = <ThrowOnError exte
 });
 
 /**
- * Get Articles
+ * Upsert Learnable Language
  */
-export const getArticlesBffArticlesGet = <ThrowOnError extends boolean = false>(options?: Options<GetArticlesBffArticlesGetData, ThrowOnError>) => (options?.client ?? client).get<GetArticlesBffArticlesGetResponses, unknown, ThrowOnError>({ url: '/bff/articles', ...options });
+export const upsertLearnableLanguageApiLearnableLanguagesPost = <ThrowOnError extends boolean = false>(options: Options<UpsertLearnableLanguageApiLearnableLanguagesPostData, ThrowOnError>) => (options.client ?? client).post<UpsertLearnableLanguageApiLearnableLanguagesPostResponses, UpsertLearnableLanguageApiLearnableLanguagesPostErrors, ThrowOnError>({
+    security: [{ scheme: 'bearer', type: 'http' }],
+    url: '/api/learnable_languages',
+    ...options,
+    headers: {
+        'Content-Type': 'application/json',
+        ...options.headers
+    }
+});
+
+/**
+ * List Articles
+ */
+export const listArticlesBffArticlesGet = <ThrowOnError extends boolean = false>(options?: Options<ListArticlesBffArticlesGetData, ThrowOnError>) => (options?.client ?? client).get<ListArticlesBffArticlesGetResponses, ListArticlesBffArticlesGetErrors, ThrowOnError>({
+    security: [{ scheme: 'bearer', type: 'http' }],
+    url: '/bff/articles',
+    ...options
+});
+
+/**
+ * Get Article
+ */
+export const getArticleBffArticlesArticleIdGet = <ThrowOnError extends boolean = false>(options: Options<GetArticleBffArticlesArticleIdGetData, ThrowOnError>) => (options.client ?? client).get<GetArticleBffArticlesArticleIdGetResponses, GetArticleBffArticlesArticleIdGetErrors, ThrowOnError>({
+    security: [{ scheme: 'bearer', type: 'http' }],
+    url: '/bff/articles/{article_id}',
+    ...options
+});
+
+/**
+ * Get User Profile
+ */
+export const getUserProfileBffUserProfileGet = <ThrowOnError extends boolean = false>(options?: Options<GetUserProfileBffUserProfileGetData, ThrowOnError>) => (options?.client ?? client).get<GetUserProfileBffUserProfileGetResponses, unknown, ThrowOnError>({
+    security: [{ scheme: 'bearer', type: 'http' }],
+    url: '/bff/user_profile',
+    ...options
+});
 
 /**
  * Register

frontend/src/client/types.gen.ts

@@ -5,31 +5,105 @@ export type ClientOptions = {
 };
 
 /**
- * ArticleResponse
+ * ArticleDetail
  */
-export type ArticleResponse = {
+export type ArticleDetail = {
+    /**
+     * Id
+     */
+    id: string;
+    /**
+     * Published At
+     */
+    published_at: string;
+    /**
+     * Source Language
+     */
+    source_language: string;
+    /**
+     * Source Title
+     */
+    source_title: string;
+    /**
+     * Source Body
+     */
+    source_body: string;
     /**
      * Target Language
      */
     target_language: string;
     /**
-     * Complexity Level
+     * Target Complexities
      */
-    complexity_level: string;
+    target_complexities: Array<string>;
     /**
-     * Input Texts
+     * Target Title
      */
-    input_texts: Array<string>;
+    target_title: string;
+    /**
+     * Target Body
+     */
+    target_body: string;
+    /**
+     * Target Audio Url
+     */
+    target_audio_url: string | null;
+    /**
+     * Target Body Pos
+     */
+    target_body_pos: {
+        [key: string]: unknown;
+    } | null;
+    /**
+     * Target Body Transcript
+     */
+    target_body_transcript: {
+        [key: string]: unknown;
+    } | null;
 };
 
 /**
- * ArticlesResponse
+ * ArticleItem
  */
-export type ArticlesResponse = {
+export type ArticleItem = {
+    /**
+     * Id
+     */
+    id: string;
+    /**
+     * Published At
+     */
+    published_at: string;
+    /**
+     * Source Language
+     */
+    source_language: string;
+    /**
+     * Source Title
+     */
+    source_title: string;
+    /**
+     * Target Language
+     */
+    target_language: string;
+    /**
+     * Target Complexities
+     */
+    target_complexities: Array<string>;
+    /**
+     * Target Title
+     */
+    target_title: string;
+};
+
+/**
+ * ArticleListResponse
+ */
+export type ArticleListResponse = {
     /**
      * Articles
      */
-    articles: Array<ArticleResponse>;
+    articles: Array<ArticleItem>;
 };
 
 /**
@@ -186,6 +260,68 @@ export type JobSummary = {
     error_message?: string | null;
 };
 
+/**
+ * LearnableLanguageItem
+ */
+export type LearnableLanguageItem = {
+    /**
+     * Id
+     */
+    id: string;
+    /**
+     * Source Language
+     */
+    source_language: string;
+    /**
+     * Target Language
+     */
+    target_language: string;
+    /**
+     * Proficiencies
+     */
+    proficiencies: Array<string>;
+};
+
+/**
+ * LearnableLanguageRequest
+ */
+export type LearnableLanguageRequest = {
+    /**
+     * Source Language
+     */
+    source_language: string;
+    /**
+     * Target Language
+     */
+    target_language: string;
+    /**
+     * Proficiencies
+     */
+    proficiencies: Array<string>;
+};
+
+/**
+ * LearnableLanguageResponse
+ */
+export type LearnableLanguageResponse = {
+    /**
+     * Id
+     */
+    id: string;
+    /**
+     * Source Language
+     */
+    source_language: string;
+    /**
+     * Target Language
+     */
+    target_language: string;
+    /**
+     * Proficiencies
+     */
+    proficiencies: Array<string>;
+};
+
 /**
  * LoginRequest
  */
@@ -304,6 +440,16 @@ export type TranslationResponse = {
     translated_text: string;
 };
 
+/**
+ * UserProfileResponse
+ */
+export type UserProfileResponse = {
+    /**
+     * Learnable Languages
+     */
+    learnable_languages: Array<LearnableLanguageItem>;
+};
+
 /**
  * ValidationError
  */
@@ -500,21 +646,106 @@ export type RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses = {
 
 export type RegenerateAudioApiJobsJobIdRegenerateAudioPostResponse = RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses[keyof RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses];
 
-export type GetArticlesBffArticlesGetData = {
+export type UpsertLearnableLanguageApiLearnableLanguagesPostData = {
-    body?: never;
+    body: LearnableLanguageRequest;
     path?: never;
     query?: never;
-    url: '/bff/articles';
+    url: '/api/learnable_languages';
 };
 
-export type GetArticlesBffArticlesGetResponses = {
+export type UpsertLearnableLanguageApiLearnableLanguagesPostErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type UpsertLearnableLanguageApiLearnableLanguagesPostError = UpsertLearnableLanguageApiLearnableLanguagesPostErrors[keyof UpsertLearnableLanguageApiLearnableLanguagesPostErrors];
+
+export type UpsertLearnableLanguageApiLearnableLanguagesPostResponses = {
     /**
      * Successful Response
      */
-    200: ArticlesResponse;
+    200: LearnableLanguageResponse;
 };
 
-export type GetArticlesBffArticlesGetResponse = GetArticlesBffArticlesGetResponses[keyof GetArticlesBffArticlesGetResponses];
+export type UpsertLearnableLanguageApiLearnableLanguagesPostResponse = UpsertLearnableLanguageApiLearnableLanguagesPostResponses[keyof UpsertLearnableLanguageApiLearnableLanguagesPostResponses];
+
+export type ListArticlesBffArticlesGetData = {
+    body?: never;
+    path?: never;
+    query?: {
+        /**
+         * Target Language
+         */
+        target_language?: string;
+    };
+    url: '/bff/articles';
+};
+
+export type ListArticlesBffArticlesGetErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type ListArticlesBffArticlesGetError = ListArticlesBffArticlesGetErrors[keyof ListArticlesBffArticlesGetErrors];
+
+export type ListArticlesBffArticlesGetResponses = {
+    /**
+     * Successful Response
+     */
+    200: ArticleListResponse;
+};
+
+export type ListArticlesBffArticlesGetResponse = ListArticlesBffArticlesGetResponses[keyof ListArticlesBffArticlesGetResponses];
+
+export type GetArticleBffArticlesArticleIdGetData = {
+    body?: never;
+    path: {
+        /**
+         * Article Id
+         */
+        article_id: string;
+    };
+    query?: never;
+    url: '/bff/articles/{article_id}';
+};
+
+export type GetArticleBffArticlesArticleIdGetErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type GetArticleBffArticlesArticleIdGetError = GetArticleBffArticlesArticleIdGetErrors[keyof GetArticleBffArticlesArticleIdGetErrors];
+
+export type GetArticleBffArticlesArticleIdGetResponses = {
+    /**
+     * Successful Response
+     */
+    200: ArticleDetail;
+};
+
+export type GetArticleBffArticlesArticleIdGetResponse = GetArticleBffArticlesArticleIdGetResponses[keyof GetArticleBffArticlesArticleIdGetResponses];
+
+export type GetUserProfileBffUserProfileGetData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/bff/user_profile';
+};
+
+export type GetUserProfileBffUserProfileGetResponses = {
+    /**
+     * Successful Response
+     */
+    200: UserProfileResponse;
+};
+
+export type GetUserProfileBffUserProfileGetResponse = GetUserProfileBffUserProfileGetResponses[keyof GetUserProfileBffUserProfileGetResponses];
 
 export type RegisterAuthRegisterPostData = {
     body: RegisterRequest;

frontend/src/lib/components/TopNav.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	const isActive = (prefix: string) => page.url.pathname.startsWith(prefix);
+</script>
+
+<header class="topnav" role="banner">
+	<div class="topnav-inner">
+		<a href="/app" class="wordmark" aria-label="Home">
+			<span class="wordmark-text">Language Learning App</span>
+		</a>
+
+		<nav aria-label="Main navigation">
+			<ul class="nav-links" role="list">
+				<li>
+					<a
+						href="/app/articles"
+						class="nav-link"
+						class:is-active={isActive('/app/articles')}
+						aria-current={isActive('/app/articles') ? 'page' : undefined}
+					>
+						Articles
+					</a>
+				</li>
+				<li>
+					<a
+						href="/app/profile"
+						class="nav-link"
+						class:is-active={isActive('/app/profile')}
+						aria-current={isActive('/app/profile') ? 'page' : undefined}
+					>
+						Profile
+					</a>
+				</li>
+			</ul>
+		</nav>
+	</div>
+</header>
+
+<style>
+	.topnav {
+		position: sticky;
+		top: 0;
+		z-index: 100;
+		background-color: var(--glass-bg);
+		backdrop-filter: blur(var(--glass-blur));
+		-webkit-backdrop-filter: blur(var(--glass-blur));
+		box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
+	}
+
+	.topnav-inner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-6);
+		max-width: 82rem;
+		margin: 0 auto;
+		padding: 0 var(--space-6);
+		height: 3.25rem;
+	}
+
+	/* --- Wordmark --- */
+
+	.wordmark {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		text-decoration: none;
+		flex-shrink: 0;
+	}
+
+	.mark {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.625rem;
+		height: 1.625rem;
+		border-radius: 50%;
+		background-color: var(--color-primary);
+		color: var(--color-on-primary);
+		font-family: var(--font-display);
+		font-size: 0.75rem;
+		font-weight: var(--weight-bold);
+		letter-spacing: 0;
+		flex-shrink: 0;
+	}
+
+	.wordmark-text {
+		font-family: var(--font-display);
+		font-size: var(--text-body-md);
+		font-weight: var(--weight-semibold);
+		color: var(--color-on-surface);
+		letter-spacing: var(--tracking-wide);
+	}
+
+	/* --- Nav links --- */
+
+	.nav-links {
+		display: flex;
+		align-items: center;
+		gap: var(--space-1);
+		list-style: none;
+	}
+
+	.nav-link {
+		display: inline-block;
+		padding: var(--space-1) var(--space-3);
+		font-family: var(--font-label);
+		font-size: var(--text-label-lg);
+		font-weight: var(--weight-medium);
+		letter-spacing: var(--tracking-wide);
+		color: var(--color-on-surface-variant);
+		text-decoration: none;
+		border-radius: var(--radius-md);
+		transition:
+			color var(--duration-fast) var(--ease-standard),
+			background-color var(--duration-fast) var(--ease-standard);
+	}
+
+	.nav-link:hover {
+		color: var(--color-on-surface);
+		background-color: color-mix(in srgb, var(--color-on-surface) 5%, transparent);
+	}
+
+	.nav-link.is-active {
+		color: var(--color-primary);
+		background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+	}
+
+	@media (max-width: 640px) {
+		.topnav-inner {
+			padding: 0 var(--space-4);
+			gap: var(--space-3);
+		}
+
+		.wordmark-text {
+			display: none;
+		}
+	}
+</style>

frontend/src/routes/app/+layout.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import TopNav from '$lib/components/TopNav.svelte';
+
+	const { children } = $props();
+</script>
+
+<TopNav />
+
+{@render children()}

frontend/src/routes/app/+page.svelte

@@ -1,6 +1,172 @@
-<h1>App</h1>
+<script lang="ts">
+	const hour = new Date().getHours();
+	const greeting = hour < 12 ? 'Good morning' : hour < 17 ? 'Good afternoon' : 'Good evening';
+</script>
 
-<menu>
+<div class="page">
-	<li><a href="/app/generate/summary">Generate Summary Job</a></li>
+	<div class="hero">
-	<li><a href="/app/jobs">Jobs</a></li>
+		<p class="eyebrow label-md">Dashboard</p>
-</menu>
+		<h1 class="hero-heading">{greeting}.</h1>
+		<p class="hero-sub">What will you learn today?</p>
+	</div>
+
+	<div class="card-grid">
+		<a href="/app/articles" class="card card--primary">
+			<div class="card-kicker label-md">Read</div>
+			<h2 class="card-title">Articles</h2>
+			<p class="card-body">Browse your reading library and practice with word-by-word translations.</p>
+			<span class="card-cta" aria-hidden="true">Open library →</span>
+		</a>
+
+		<a href="/app/generate/summary" class="card">
+			<div class="card-kicker label-md">Create</div>
+			<h2 class="card-title">New article</h2>
+			<p class="card-body">Generate a new reading from any text in the language you're learning.</p>
+			<span class="card-cta" aria-hidden="true">Get started →</span>
+		</a>
+
+		<a href="/app/jobs" class="card">
+			<div class="card-kicker label-md">History</div>
+			<h2 class="card-title">Jobs</h2>
+			<p class="card-body">Review the status of your generation jobs and access completed content.</p>
+			<span class="card-cta" aria-hidden="true">View jobs →</span>
+		</a>
+	</div>
+</div>
+
+<style>
+	.page {
+		max-width: 60rem;
+		margin: 0 auto;
+		padding: var(--space-12) var(--space-6) var(--space-8);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-10);
+	}
+
+	/* --- Hero --- */
+
+	.hero {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	.eyebrow {
+		color: var(--color-on-surface-variant);
+	}
+
+	.hero-heading {
+		font-family: var(--font-display);
+		font-size: var(--text-display-md);
+		font-weight: var(--weight-bold);
+		line-height: var(--leading-tight);
+		letter-spacing: var(--tracking-tight);
+		color: var(--color-on-surface);
+	}
+
+	.hero-sub {
+		font-family: var(--font-body);
+		font-size: var(--text-body-lg);
+		color: var(--color-on-surface-variant);
+		margin-top: var(--space-1);
+	}
+
+	/* --- Card grid --- */
+
+	.card-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+		gap: var(--space-4);
+	}
+
+	/* --- Card --- */
+
+	.card {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		padding: var(--space-6);
+		background-color: var(--color-surface-container-low);
+		border-radius: var(--radius-xl);
+		text-decoration: none;
+		color: inherit;
+		transition: background-color var(--duration-fast) var(--ease-standard);
+	}
+
+	.card:hover {
+		background-color: var(--color-surface-container);
+	}
+
+	.card--primary {
+		background-color: var(--color-primary-container);
+	}
+
+	.card--primary:hover {
+		background-color: color-mix(in srgb, var(--color-primary-container) 80%, var(--color-primary));
+	}
+
+	.card-kicker {
+		color: var(--color-on-surface-variant);
+		margin-bottom: var(--space-1);
+	}
+
+	.card--primary .card-kicker {
+		color: var(--color-on-primary-container);
+		opacity: 0.75;
+	}
+
+	.card-title {
+		font-family: var(--font-display);
+		font-size: var(--text-headline-md);
+		font-weight: var(--weight-semibold);
+		line-height: var(--leading-snug);
+		color: var(--color-on-surface);
+	}
+
+	.card--primary .card-title {
+		color: var(--color-on-primary-container);
+	}
+
+	.card-body {
+		font-family: var(--font-body);
+		font-size: var(--text-body-sm);
+		color: var(--color-on-surface-variant);
+		line-height: var(--leading-relaxed);
+		flex: 1;
+	}
+
+	.card--primary .card-body {
+		color: var(--color-on-primary-container);
+		opacity: 0.8;
+	}
+
+	.card-cta {
+		font-family: var(--font-label);
+		font-size: var(--text-label-lg);
+		font-weight: var(--weight-medium);
+		color: var(--color-primary);
+		margin-top: var(--space-2);
+	}
+
+	.card--primary .card-cta {
+		color: var(--color-on-primary-container);
+	}
+
+	/* --- Responsive --- */
+
+	@media (max-width: 640px) {
+		.page {
+			padding: var(--space-8) var(--space-4) var(--space-6);
+			gap: var(--space-8);
+		}
+
+		.hero-heading {
+			font-size: var(--text-headline-lg);
+		}
+
+		.card-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

frontend/src/routes/app/articles/+page.server.ts

@@ -0,0 +1,18 @@
+import type { PageServerLoad } from './$types';
+import { listArticlesBffArticlesGet } from '../../../client/sdk.gen.ts';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	const { data, response } = await listArticlesBffArticlesGet({
+		headers: { Authorization: `Bearer ${locals.authToken ?? ''}` }
+	});
+
+	if (!data || response.status !== 200) {
+		return { articles: [] };
+	}
+
+	const articles = [...data.articles].sort(
+		(a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime()
+	);
+
+	return { articles };
+};

frontend/src/routes/app/articles/+page.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	const { data }: PageProps = $props();
+
+	const languageNames: Record<string, string> = {
+		en: 'English',
+		fr: 'French',
+		es: 'Spanish',
+		it: 'Italian',
+		de: 'German',
+		pt: 'Portuguese',
+		ja: 'Japanese',
+		zh: 'Chinese',
+		ko: 'Korean'
+	};
+
+	const lang = (code: string) => languageNames[code] ?? code.toUpperCase();
+
+	const fmt = (iso: string) =>
+		new Intl.DateTimeFormat('en-GB', {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		}).format(new Date(iso));
+</script>
+
+<div class="page">
+	<header class="page-header">
+		<p class="form-eyebrow">Reading</p>
+		<h1 class="form-title">Articles</h1>
+	</header>
+
+	{#if data.articles.length > 0}
+		<ul class="article-list" role="list">
+			{#each data.articles as article}
+				<li class="article-item">
+					<a href="/app/articles/{article.id}" class="article-link">
+						<div class="article-meta">
+							<span class="label-md meta-lang">{lang(article.target_language)}</span>
+							{#each article.target_complexities as level}
+								<span class="complexity-tag label-md">{level}</span>
+							{/each}
+						</div>
+						<h2 class="article-title">{article.target_title}</h2>
+						<p class="article-source">{article.source_title}</p>
+						<time class="article-date label-md" datetime={article.published_at}>{fmt(article.published_at)}</time>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<div class="empty-state">
+			<p class="empty-heading">No articles yet</p>
+			<p class="empty-body">Generate content to see articles here.</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.page {
+		max-width: 52rem;
+		margin: 0 auto;
+		padding: var(--space-8) var(--space-6);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-6);
+	}
+
+	/* --- Article list --- */
+
+	.article-list {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+
+	.article-item {
+		background-color: var(--color-surface-container-low);
+		border-radius: var(--radius-lg);
+		transition: background-color var(--duration-fast) var(--ease-standard);
+	}
+
+	.article-item:hover {
+		background-color: var(--color-surface-container);
+	}
+
+	.article-link {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		padding: var(--space-5) var(--space-6);
+		text-decoration: none;
+		color: inherit;
+	}
+
+	/* --- Article metadata --- */
+
+	.article-meta {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		flex-wrap: wrap;
+	}
+
+	.meta-lang {
+		color: var(--color-primary);
+	}
+
+	.complexity-tag {
+		color: var(--color-on-surface-variant);
+		background-color: var(--color-surface-container-high);
+		padding: 0.15em 0.5em;
+		border-radius: var(--radius-full);
+	}
+
+	/* --- Article content --- */
+
+	.article-title {
+		font-family: var(--font-display);
+		font-size: var(--text-headline-md);
+		font-weight: var(--weight-semibold);
+		line-height: var(--leading-snug);
+		color: var(--color-on-surface);
+	}
+
+	.article-source {
+		font-family: var(--font-body);
+		font-size: var(--text-body-sm);
+		color: var(--color-on-surface-variant);
+		font-style: italic;
+	}
+
+	.article-date {
+		color: var(--color-on-surface-variant);
+		margin-top: var(--space-1);
+	}
+
+	/* --- Empty state --- */
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-3);
+		padding: var(--space-10) var(--space-6);
+		text-align: center;
+		background-color: var(--color-surface-container-low);
+		border-radius: var(--radius-xl);
+	}
+
+	.empty-heading {
+		font-family: var(--font-display);
+		font-size: var(--text-title-lg);
+		font-weight: var(--weight-semibold);
+		color: var(--color-on-surface);
+	}
+
+	.empty-body {
+		font-size: var(--text-body-md);
+		color: var(--color-on-surface-variant);
+		max-width: 20rem;
+	}
+
+	@media (max-width: 640px) {
+		.page {
+			padding: var(--space-6) var(--space-4);
+		}
+
+		.article-link {
+			padding: var(--space-4);
+		}
+	}
+</style>

frontend/src/routes/app/articles/[article_id]/+page.server.ts

@@ -0,0 +1,21 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { getArticleBffArticlesArticleIdGet } from '../../../../client/sdk.gen.ts';
+import { PUBLIC_API_BASE_URL } from '$env/static/public';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	const { data, response } = await getArticleBffArticlesArticleIdGet({
+		headers: { Authorization: `Bearer ${locals.authToken ?? ''}` },
+		path: { article_id: params.article_id }
+	});
+
+	if (!data || response.status !== 200) {
+		error(response.status === 404 ? 404 : 500, 'Article not found');
+	}
+
+	const audioUrl = data.target_audio_url
+		? `${PUBLIC_API_BASE_URL}/media/${data.target_audio_url}`
+		: null;
+
+	return { article: data, audioUrl };
+};

frontend/src/routes/app/articles/[article_id]/+page.svelte

@@ -0,0 +1,578 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	const { data }: PageProps = $props();
+	const { article, audioUrl } = data;
+
+	// -------------------------------------------------------------------------
+	// Body parsing: split into paragraphs → sentences → tokens
+	// -------------------------------------------------------------------------
+
+	type WordToken = { type: 'word'; text: string; wordIdx: number };
+	type OtherToken = { type: 'other'; text: string };
+	type Token = WordToken | OtherToken;
+
+	type Sentence = {
+		tokens: Token[];
+		idx: number; // global sentence index
+		startWordIdx: number;
+		endWordIdx: number;
+	};
+
+	type Paragraph = { sentences: Sentence[] };
+
+	function parseBody(text: string): { paragraphs: Paragraph[]; totalWords: number } {
+		const paragraphs: Paragraph[] = [];
+		let wordIdx = 0;
+		let sentenceIdx = 0;
+
+		for (const paraText of text.split(/\n\n+/)) {
+			if (!paraText.trim()) continue;
+
+			// Split into alternating word / non-word tokens
+			const rawTokens = paraText.match(/[\p{L}\p{N}\u2019'''-]+|[^\p{L}\p{N}\u2019'''-]+/gu) ?? [];
+
+			const sentences: Sentence[] = [];
+			let currentTokens: Token[] = [];
+			let startWordIdx = wordIdx;
+			let hasWord = false;
+
+			for (const raw of rawTokens) {
+				if (/[\p{L}\p{N}]/u.test(raw)) {
+					currentTokens.push({ type: 'word', text: raw, wordIdx: wordIdx++ });
+					hasWord = true;
+				} else {
+					currentTokens.push({ type: 'other', text: raw });
+					// Flush sentence on sentence-ending punctuation
+					if (hasWord && /[.!?]/.test(raw)) {
+						sentences.push({
+							tokens: [...currentTokens],
+							idx: sentenceIdx++,
+							startWordIdx,
+							endWordIdx: wordIdx - 1
+						});
+						currentTokens = [];
+						startWordIdx = wordIdx;
+						hasWord = false;
+					}
+				}
+			}
+
+			if (currentTokens.length > 0) {
+				sentences.push({
+					tokens: currentTokens,
+					idx: sentenceIdx++,
+					startWordIdx,
+					endWordIdx: wordIdx - 1
+				});
+			}
+
+			if (sentences.length > 0) {
+				paragraphs.push({ sentences });
+			}
+		}
+
+		return { paragraphs, totalWords: wordIdx };
+	}
+
+	const { paragraphs } = parseBody(article.target_body);
+
+	// Flat sentence list for O(n) audio-time lookup
+	const allSentences: Array<{ idx: number; startWordIdx: number; endWordIdx: number }> = [];
+	for (const para of paragraphs) {
+		for (const s of para.sentences) {
+			allSentences.push({ idx: s.idx, startWordIdx: s.startWordIdx, endWordIdx: s.endWordIdx });
+		}
+	}
+
+	// -------------------------------------------------------------------------
+	// Transcript: extract per-word timings from Deepgram response
+	// -------------------------------------------------------------------------
+
+	type WordTiming = { start: number; end: number };
+
+	function extractWordTimings(transcript: Record<string, unknown> | null): WordTiming[] {
+		if (!transcript) return [];
+		try {
+			const words = (transcript as any)?.results?.channels?.[0]?.alternatives?.[0]?.words;
+			if (!Array.isArray(words)) return [];
+			return words.map((w: any) => ({ start: Number(w.start), end: Number(w.end) }));
+		} catch {
+			return [];
+		}
+	}
+
+	const wordTimings = extractWordTimings(article.target_body_transcript);
+
+	// -------------------------------------------------------------------------
+	// Reactive state
+	// -------------------------------------------------------------------------
+
+	let audioEl: HTMLAudioElement | null = $state(null);
+	let activeSentenceIdx = $state(-1);
+	let selectedWord: WordToken | null = $state(null);
+	let translatedText: string | null = $state(null);
+	let translating = $state(false);
+
+	// -------------------------------------------------------------------------
+	// Audio: sentence highlighting
+	// -------------------------------------------------------------------------
+
+	function handleTimeUpdate() {
+		if (!audioEl || wordTimings.length === 0) return;
+		const t = audioEl.currentTime;
+
+		// Find the word index at current playback time
+		let wordIdx = -1;
+		for (let i = 0; i < wordTimings.length; i++) {
+			if (wordTimings[i].start <= t && t <= wordTimings[i].end) {
+				wordIdx = i;
+				break;
+			}
+			// Between words: use the most recently started word
+			if (wordTimings[i].start > t) {
+				wordIdx = i - 1;
+				break;
+			}
+		}
+		if (wordIdx < 0) return;
+
+		for (const s of allSentences) {
+			if (s.startWordIdx <= wordIdx && wordIdx <= s.endWordIdx) {
+				activeSentenceIdx = s.idx;
+				return;
+			}
+		}
+	}
+
+	// -------------------------------------------------------------------------
+	// Word click: fetch translation
+	// -------------------------------------------------------------------------
+
+	async function handleWordClick(token: WordToken) {
+		selectedWord = token;
+		translatedText = null;
+		translating = true;
+
+		try {
+			const params = new URLSearchParams({
+				text: token.text,
+				target_language: article.source_language
+			});
+			const res = await fetch(`/app/translate?${params}`);
+			if (res.ok) {
+				const body = await res.json();
+				translatedText = body.translated_text ?? null;
+			}
+		} catch {
+			translatedText = null;
+		} finally {
+			translating = false;
+		}
+	}
+
+	function closePanel() {
+		selectedWord = null;
+		translatedText = null;
+	}
+
+	// -------------------------------------------------------------------------
+	// Display helpers
+	// -------------------------------------------------------------------------
+
+	const languageNames: Record<string, string> = {
+		en: 'English',
+		fr: 'French',
+		es: 'Spanish',
+		it: 'Italian',
+		de: 'German',
+		pt: 'Portuguese',
+		ja: 'Japanese',
+		zh: 'Chinese',
+		ko: 'Korean'
+	};
+
+	const targetLang =
+		languageNames[article.target_language] ?? article.target_language.toUpperCase();
+
+	const publishedDate = new Intl.DateTimeFormat('en-GB', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric'
+	}).format(new Date(article.published_at));
+</script>
+
+<!-- Reading progress bar (CSS scroll-driven animation) -->
+<div class="progress-bar" aria-hidden="true"></div>
+
+<div class="page">
+	<nav class="breadcrumb">
+		<a href="/app/articles" class="link">← Articles</a>
+	</nav>
+
+	<header class="article-header">
+		<p class="article-eyebrow label-md">{targetLang} · {publishedDate}</p>
+		<h1 class="article-title">{article.target_title}</h1>
+	</header>
+
+	<div class="article-layout">
+		<!-- Main content: audio + body -->
+		<div class="article-main">
+			{#if audioUrl}
+				<div class="audio-section">
+					<audio
+						bind:this={audioEl}
+						src={audioUrl}
+						controls
+						ontimeupdate={handleTimeUpdate}
+						class="audio-player"
+					>
+						Your browser does not support the audio element.
+					</audio>
+				</div>
+			{/if}
+
+			<div class="article-body" lang={article.target_language}>
+				{#each paragraphs as para}
+					<p class="paragraph">
+						{#each para.sentences as sentence}<span
+								class="sentence"
+								class:sentence--active={activeSentenceIdx === sentence.idx}
+								>{#each sentence.tokens as token}{#if token.type === 'word'}<button
+											class="word"
+											class:word--selected={selectedWord?.wordIdx === token.wordIdx}
+											onclick={() => handleWordClick(token)}>{token.text}</button
+										>{:else}{token.text}{/if}{/each}</span
+							>{/each}
+					</p>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Translation panel (desktop: sticky sidebar; mobile: bottom drawer) -->
+		<aside
+			class="translation-panel"
+			class:is-open={selectedWord !== null}
+			aria-label="Word translation"
+		>
+			{#if selectedWord}
+				<div class="panel-header">
+					<p class="panel-word">{selectedWord.text}</p>
+					<button class="btn btn-ghost panel-close" onclick={closePanel} aria-label="Close panel">
+						✕
+					</button>
+				</div>
+
+				{#if translating}
+					<div class="panel-loading">
+						<div class="spinner" aria-hidden="true"></div>
+						<span>Translating…</span>
+					</div>
+				{:else if translatedText}
+					<p class="panel-translation">{translatedText}</p>
+					<button class="btn btn-secondary panel-save" disabled aria-disabled="true">
+						Add to flashcard
+					</button>
+				{:else}
+					<p class="panel-error">Could not load translation.</p>
+				{/if}
+			{:else}
+				<p class="panel-hint">Tap any word for a translation</p>
+			{/if}
+		</aside>
+	</div>
+</div>
+
+<!-- Mobile backdrop: closes the drawer when tapped outside -->
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div
+	class="drawer-backdrop"
+	class:is-visible={selectedWord !== null}
+	onclick={closePanel}
+	aria-hidden="true"
+></div>
+
+<style>
+	/* --- Reading progress bar (CSS scroll-driven animation) --- */
+	/* Sits at the bottom edge of the sticky topnav (3.25rem) */
+	.progress-bar {
+		position: fixed;
+		top: 3.25rem;
+		left: 0;
+		right: 0;
+		height: 2px;
+		background: var(--color-primary);
+		transform-origin: left;
+		transform: scaleX(0);
+		animation: reading-progress linear both;
+		animation-timeline: scroll(root);
+		z-index: 99;
+		pointer-events: none;
+	}
+
+	@keyframes reading-progress {
+		from {
+			transform: scaleX(0);
+		}
+		to {
+			transform: scaleX(1);
+		}
+	}
+
+	/* --- Page shell --- */
+	.page {
+		padding: var(--space-8) var(--space-6);
+		max-width: 82rem;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-5);
+	}
+
+	/* --- Breadcrumb --- */
+	.breadcrumb {
+		font-family: var(--font-label);
+		font-size: var(--text-label-lg);
+	}
+
+	/* --- Header --- */
+	.article-header {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		padding-top: var(--space-2);
+	}
+
+	.article-eyebrow {
+		color: var(--color-on-surface-variant);
+	}
+
+	.article-title {
+		font-family: var(--font-display);
+		font-size: var(--text-display-md);
+		font-weight: var(--weight-bold);
+		line-height: var(--leading-tight);
+		letter-spacing: var(--tracking-tight);
+		color: var(--color-on-surface);
+		max-width: 38rem;
+	}
+
+	/* --- Two-column layout --- */
+	.article-layout {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: var(--space-6);
+		align-items: start;
+	}
+
+	@media (min-width: 768px) {
+		.article-layout {
+			grid-template-columns: 1fr 22rem;
+		}
+	}
+
+	/* --- Audio --- */
+	.audio-section {
+		margin-bottom: var(--space-5);
+	}
+
+	.audio-player {
+		width: 100%;
+		accent-color: var(--color-primary);
+	}
+
+	/* --- Article body --- */
+	.article-body {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-4);
+	}
+
+	.paragraph {
+		font-family: var(--font-body);
+		font-size: var(--text-body-xl);
+		line-height: 2;
+		color: var(--color-on-surface);
+	}
+
+	/* Sentence: highlighted when audio is at that point */
+	.sentence {
+		border-radius: var(--radius-xs);
+		transition: background-color var(--duration-normal) var(--ease-standard);
+	}
+
+	.sentence--active {
+		background-color: var(--color-primary-container);
+	}
+
+	/* --- Word buttons --- */
+	.word {
+		display: inline;
+		background: none;
+		border: none;
+		padding: 0 0.05em;
+		margin: 0;
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+		border-radius: var(--radius-xs);
+		transition:
+			background-color var(--duration-fast) var(--ease-standard),
+			color var(--duration-fast) var(--ease-standard);
+	}
+
+	.word:hover {
+		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+		color: var(--color-primary);
+	}
+
+	.word--selected {
+		background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+		color: var(--color-primary);
+		font-weight: var(--weight-medium);
+	}
+
+	/* --- Translation panel: Desktop (sticky sidebar) --- */
+	@media (min-width: 768px) {
+		.translation-panel {
+			position: sticky;
+			top: var(--space-6);
+			background-color: var(--color-surface-container-lowest);
+			border-radius: var(--radius-xl);
+			padding: var(--space-5);
+			min-height: 16rem;
+			box-shadow: var(--shadow-tonal-sm);
+		}
+
+		.drawer-backdrop {
+			display: none;
+		}
+	}
+
+	/* --- Translation panel: Mobile (bottom drawer) --- */
+	@media (max-width: 767px) {
+		.translation-panel {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 300;
+			background-color: var(--color-surface-container-lowest);
+			border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+			padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
+			max-height: 55vh;
+			overflow-y: auto;
+			transform: translateY(100%);
+			transition: transform var(--duration-slow) var(--ease-standard);
+			box-shadow: 0 -8px 32px color-mix(in srgb, var(--color-on-surface) 8%, transparent);
+		}
+
+		.translation-panel.is-open {
+			transform: translateY(0);
+		}
+
+		.drawer-backdrop {
+			position: fixed;
+			inset: 0;
+			z-index: 200;
+			background: color-mix(in srgb, var(--color-on-surface) 20%, transparent);
+			opacity: 0;
+			pointer-events: none;
+			transition: opacity var(--duration-slow) var(--ease-standard);
+		}
+
+		.drawer-backdrop.is-visible {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	/* --- Panel internals --- */
+	.panel-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--space-2);
+		margin-bottom: var(--space-4);
+	}
+
+	.panel-word {
+		font-family: var(--font-display);
+		font-size: var(--text-headline-md);
+		font-weight: var(--weight-semibold);
+		line-height: var(--leading-snug);
+		color: var(--color-on-surface);
+	}
+
+	.panel-close {
+		flex-shrink: 0;
+		color: var(--color-on-surface-variant);
+		font-size: var(--text-body-lg);
+		line-height: 1;
+	}
+
+	.panel-translation {
+		font-family: var(--font-body);
+		font-size: var(--text-body-lg);
+		line-height: var(--leading-relaxed);
+		color: var(--color-on-surface-variant);
+		font-style: italic;
+		margin-bottom: var(--space-4);
+	}
+
+	.panel-save {
+		width: 100%;
+		padding-block: var(--space-2);
+		opacity: 0.6;
+	}
+
+	.panel-hint {
+		font-family: var(--font-label);
+		font-size: var(--text-body-sm);
+		color: var(--color-on-surface-variant);
+		text-align: center;
+		padding: var(--space-4) 0;
+	}
+
+	.panel-error {
+		font-family: var(--font-label);
+		font-size: var(--text-body-sm);
+		color: var(--color-on-surface-variant);
+	}
+
+	.panel-loading {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		font-family: var(--font-label);
+		font-size: var(--text-body-sm);
+		color: var(--color-on-surface-variant);
+	}
+
+	.spinner {
+		flex-shrink: 0;
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid var(--color-outline-variant);
+		border-top-color: var(--color-primary);
+		border-radius: 50%;
+		animation: spin 0.9s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* --- Responsive --- */
+	@media (max-width: 640px) {
+		.page {
+			padding: var(--space-6) var(--space-4);
+		}
+
+		.article-title {
+			font-size: var(--text-headline-lg);
+		}
+	}
+</style>

frontend/src/routes/app/jobs/[job_id]/+page.svelte

@@ -119,7 +119,7 @@
 	{#if job.audio_transcript}
 		<section class="content-section">
 			<h2 class="section-title">Audio Transcript</h2>
-			<div class="pos-text">{JSON.stringify(JSON.parse(job.audio_transcript as any), null, 2)}</div>
+			<div class="pos-text">{JSON.stringify(job.audio_transcript, null, 2)}</div>
 		</section>
 	{/if}
 
@@ -136,7 +136,6 @@
 			<div class="pos-text">{JSON.stringify(job.translated_text_pos, null, 2)}</div>
 		</section>
 	{/if}
-
 </div>
 
 <style>
@@ -316,7 +315,6 @@
 		overflow-y: scroll;
 		max-height: 300px;
 		white-space: pre-wrap;
-
 	}
 
 	/* --- Audio --- */

frontend/src/routes/app/profile/+page.svelte

@@ -0,0 +1,27 @@
+<div class="page">
+	<header>
+		<p class="form-eyebrow">Account</p>
+		<h1 class="form-title">Profile</h1>
+	</header>
+
+	<p class="coming-soon">Profile settings coming soon.</p>
+
+	<a href="/logout" class="btn btn-ghost">Sign out</a>
+</div>
+
+<style>
+	.page {
+		max-width: 40rem;
+		margin: 0 auto;
+		padding: var(--space-8) var(--space-6);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-5);
+	}
+
+	.coming-soon {
+		font-family: var(--font-body);
+		font-size: var(--text-body-md);
+		color: var(--color-on-surface-variant);
+	}
+</style>

frontend/src/routes/app/translate/+server.ts

@@ -0,0 +1,20 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { translateTextApiTranslateGet } from '../../../client/sdk.gen.ts';
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+	const text = url.searchParams.get('text') ?? '';
+	const targetLanguage = url.searchParams.get('target_language') ?? 'en';
+	const context = url.searchParams.get('context') ?? undefined;
+
+	const { data, response } = await translateTextApiTranslateGet({
+		headers: { Authorization: `Bearer ${locals.authToken ?? ''}` },
+		query: { text, target_language: targetLanguage, context }
+	});
+
+	if (!data || response.status !== 200) {
+		return json({ error: 'Translation failed' }, { status: 500 });
+	}
+
+	return json(data);
+};

frontend/src/routes/login/+page.server.ts

@@ -31,7 +31,7 @@ export const actions = {
 				expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days
 			});
 
-			return redirect(307, '/');
+			return { success: true };
 		}
 
 		return { success: response.status === 200, error: response.status !== 200 ? data : null };

frontend/src/routes/login/+page.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
-	import type { PageProps } from './$types';
+	import { onMount } from 'svelte';
+	import type { PageData, PageProps } from './$types';
+	import { goto } from '$app/navigation';
+	const { form }: PageProps = $props();
+
+	onMount(() => {
+		if (form?.success) {
+			goto('/app');
+		}
+	});
 </script>
 
 <div class="page">