Initial commit

app/src/lib/api/.gitkeep

@@ -0,0 +1 @@
+# Generated OpenAPI client will be placed here

app/src/lib/api/client.ts

@@ -0,0 +1,757 @@
+import type { LanguageCode } from '@/lib/constants/languages';
+import { useServerStore } from '@/stores/serverStore';
+import type {
+  ActiveTasksResponse,
+  ApplyEffectsRequest,
+  AvailableEffectsResponse,
+  CudaStatus,
+  EffectConfig,
+  EffectPresetCreate,
+  EffectPresetResponse,
+  GenerationRequest,
+  GenerationResponse,
+  GenerationVersionResponse,
+  HealthResponse,
+  HistoryListResponse,
+  HistoryQuery,
+  HistoryResponse,
+  ModelDownloadRequest,
+  ModelStatusListResponse,
+  PresetVoice,
+  ProfileSampleResponse,
+  StoryCreate,
+  StoryDetailResponse,
+  StoryItemBatchUpdate,
+  StoryItemCreate,
+  StoryItemDetail,
+  StoryItemMove,
+  StoryItemReorder,
+  StoryItemSplit,
+  StoryItemTrim,
+  StoryItemVersionUpdate,
+  StoryResponse,
+  TranscriptionResponse,
+  VoiceProfileCreate,
+  VoiceProfileResponse,
+  WhisperModelSize,
+} from './types';
+
+function formatErrorDetail(detail: unknown, fallback: string): string {
+  if (typeof detail === 'string') return detail;
+  if (Array.isArray(detail)) {
+    return detail
+      .map((e: Record<string, unknown>) => e.msg || e.message || JSON.stringify(e))
+      .join('; ');
+  }
+  if (detail && typeof detail === 'object') {
+    const obj = detail as Record<string, unknown>;
+    if (typeof obj.message === 'string') return obj.message;
+    return JSON.stringify(detail);
+  }
+  return fallback;
+}
+
+class ApiClient {
+  private getBaseUrl(): string {
+    const serverUrl = useServerStore.getState().serverUrl;
+    return serverUrl;
+  }
+
+  private async request<T>(endpoint: string, options?: RequestInit): Promise<T> {
+    const url = `${this.getBaseUrl()}${endpoint}`;
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.json();
+  }
+
+  // Health
+  async getHealth(): Promise<HealthResponse> {
+    return this.request<HealthResponse>('/health');
+  }
+
+  // Profiles
+  async createProfile(data: VoiceProfileCreate): Promise<VoiceProfileResponse> {
+    return this.request<VoiceProfileResponse>('/profiles', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async listProfiles(): Promise<VoiceProfileResponse[]> {
+    return this.request<VoiceProfileResponse[]>('/profiles');
+  }
+
+  async getProfile(profileId: string): Promise<VoiceProfileResponse> {
+    return this.request<VoiceProfileResponse>(`/profiles/${profileId}`);
+  }
+
+  async listPresetVoices(engine: string): Promise<{ engine: string; voices: PresetVoice[] }> {
+    return this.request<{ engine: string; voices: PresetVoice[] }>(`/profiles/presets/${engine}`);
+  }
+
+  async updateProfile(profileId: string, data: VoiceProfileCreate): Promise<VoiceProfileResponse> {
+    return this.request<VoiceProfileResponse>(`/profiles/${profileId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteProfile(profileId: string): Promise<void> {
+    await this.request<void>(`/profiles/${profileId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async addProfileSample(
+    profileId: string,
+    file: File,
+    referenceText: string,
+  ): Promise<ProfileSampleResponse> {
+    const url = `${this.getBaseUrl()}/profiles/${profileId}/samples`;
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('reference_text', referenceText);
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.json();
+  }
+
+  async listProfileSamples(profileId: string): Promise<ProfileSampleResponse[]> {
+    return this.request<ProfileSampleResponse[]>(`/profiles/${profileId}/samples`);
+  }
+
+  async deleteProfileSample(sampleId: string): Promise<void> {
+    await this.request<void>(`/profiles/samples/${sampleId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async updateProfileSample(
+    sampleId: string,
+    referenceText: string,
+  ): Promise<ProfileSampleResponse> {
+    return this.request<ProfileSampleResponse>(`/profiles/samples/${sampleId}`, {
+      method: 'PUT',
+      body: JSON.stringify({ reference_text: referenceText }),
+    });
+  }
+
+  async exportProfile(profileId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/profiles/${profileId}/export`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.blob();
+  }
+
+  async importProfile(file: File): Promise<VoiceProfileResponse> {
+    const url = `${this.getBaseUrl()}/profiles/import`;
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.json();
+  }
+
+  async uploadAvatar(profileId: string, file: File): Promise<VoiceProfileResponse> {
+    const url = `${this.getBaseUrl()}/profiles/${profileId}/avatar`;
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.json();
+  }
+
+  async deleteAvatar(profileId: string): Promise<void> {
+    await this.request<void>(`/profiles/${profileId}/avatar`, {
+      method: 'DELETE',
+    });
+  }
+
+  // Generation
+  async generateSpeech(data: GenerationRequest): Promise<GenerationResponse> {
+    return this.request<GenerationResponse>('/generate', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async retryGeneration(generationId: string): Promise<GenerationResponse> {
+    return this.request<GenerationResponse>(`/generate/${generationId}/retry`, {
+      method: 'POST',
+    });
+  }
+
+  async cancelGeneration(generationId: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>(`/generate/${generationId}/cancel`, {
+      method: 'POST',
+    });
+  }
+
+  async regenerateGeneration(generationId: string): Promise<GenerationResponse> {
+    return this.request<GenerationResponse>(`/generate/${generationId}/regenerate`, {
+      method: 'POST',
+    });
+  }
+
+  async toggleFavorite(generationId: string): Promise<{ is_favorited: boolean }> {
+    return this.request<{ is_favorited: boolean }>(`/history/${generationId}/favorite`, {
+      method: 'POST',
+    });
+  }
+
+  // History
+  async listHistory(query?: HistoryQuery): Promise<HistoryListResponse> {
+    const params = new URLSearchParams();
+    if (query?.profile_id) params.append('profile_id', query.profile_id);
+    if (query?.search) params.append('search', query.search);
+    if (query?.limit) params.append('limit', query.limit.toString());
+    if (query?.offset) params.append('offset', query.offset.toString());
+
+    const queryString = params.toString();
+    const endpoint = queryString ? `/history?${queryString}` : '/history';
+
+    return this.request<HistoryListResponse>(endpoint);
+  }
+
+  async getGeneration(generationId: string): Promise<HistoryResponse> {
+    return this.request<HistoryResponse>(`/history/${generationId}`);
+  }
+
+  async deleteGeneration(generationId: string): Promise<void> {
+    await this.request<void>(`/history/${generationId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async clearFailedGenerations(): Promise<{ deleted: number }> {
+    return this.request<{ deleted: number }>(`/history/failed`, {
+      method: 'DELETE',
+    });
+  }
+
+  async exportGeneration(generationId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/history/${generationId}/export`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.blob();
+  }
+
+  async exportGenerationAudio(generationId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/history/${generationId}/export-audio`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.blob();
+  }
+
+  async importGeneration(file: File): Promise<{
+    id: string;
+    profile_id: string;
+    profile_name: string;
+    text: string;
+    message: string;
+  }> {
+    const url = `${this.getBaseUrl()}/history/import`;
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.json();
+  }
+
+  // Generation status SSE
+  getGenerationStatusUrl(generationId: string): string {
+    return `${this.getBaseUrl()}/generate/${generationId}/status`;
+  }
+
+  // Audio
+  getAudioUrl(audioId: string): string {
+    return `${this.getBaseUrl()}/audio/${audioId}`;
+  }
+
+  getSampleUrl(sampleId: string): string {
+    return `${this.getBaseUrl()}/samples/${sampleId}`;
+  }
+
+  // Transcription
+  async transcribeAudio(
+    file: File,
+    language?: LanguageCode,
+    model?: WhisperModelSize,
+  ): Promise<TranscriptionResponse> {
+    const formData = new FormData();
+    formData.append('file', file);
+    if (language) {
+      formData.append('language', language);
+    }
+    if (model) {
+      formData.append('model', model);
+    }
+
+    const url = `${this.getBaseUrl()}/transcribe`;
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.json();
+  }
+
+  // Model Management
+  async getModelStatus(): Promise<ModelStatusListResponse> {
+    return this.request<ModelStatusListResponse>('/models/status');
+  }
+
+  async getModelsCacheDir(): Promise<{ path: string }> {
+    return this.request<{ path: string }>('/models/cache-dir');
+  }
+
+  async migrateModels(
+    destination: string,
+  ): Promise<{ source: string; destination: string; moved: number; errors: string[] }> {
+    return this.request('/models/migrate', {
+      method: 'POST',
+      body: JSON.stringify({ destination }),
+    });
+  }
+
+  getMigrationProgressUrl(): string {
+    return `${this.getBaseUrl()}/models/migrate/progress`;
+  }
+
+  async triggerModelDownload(modelName: string): Promise<{ message: string }> {
+    console.log(
+      '[API] triggerModelDownload called for:',
+      modelName,
+      'at',
+      new Date().toISOString(),
+    );
+    const result = await this.request<{ message: string }>('/models/download', {
+      method: 'POST',
+      body: JSON.stringify({ model_name: modelName } as ModelDownloadRequest),
+    });
+    console.log('[API] triggerModelDownload response:', result);
+    return result;
+  }
+
+  async deleteModel(modelName: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>(`/models/${modelName}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async unloadModel(modelName: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>(`/models/${modelName}/unload`, {
+      method: 'POST',
+    });
+  }
+
+  async cancelDownload(modelName: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>('/models/download/cancel', {
+      method: 'POST',
+      body: JSON.stringify({ model_name: modelName } as ModelDownloadRequest),
+    });
+  }
+
+  // Task Management
+  async getActiveTasks(): Promise<ActiveTasksResponse> {
+    return this.request<ActiveTasksResponse>('/tasks/active');
+  }
+
+  async clearAllTasks(): Promise<{ message: string }> {
+    return this.request<{ message: string }>('/tasks/clear', { method: 'POST' });
+  }
+
+  // Audio Channels
+  async listChannels(): Promise<
+    Array<{
+      id: string;
+      name: string;
+      is_default: boolean;
+      device_ids: string[];
+      created_at: string;
+    }>
+  > {
+    return this.request('/channels');
+  }
+
+  async createChannel(data: { name: string; device_ids: string[] }): Promise<{
+    id: string;
+    name: string;
+    is_default: boolean;
+    device_ids: string[];
+    created_at: string;
+  }> {
+    return this.request('/channels', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateChannel(
+    channelId: string,
+    data: {
+      name?: string;
+      device_ids?: string[];
+    },
+  ): Promise<{
+    id: string;
+    name: string;
+    is_default: boolean;
+    device_ids: string[];
+    created_at: string;
+  }> {
+    return this.request(`/channels/${channelId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteChannel(channelId: string): Promise<{ message: string }> {
+    return this.request(`/channels/${channelId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async getChannelVoices(channelId: string): Promise<{ profile_ids: string[] }> {
+    return this.request(`/channels/${channelId}/voices`);
+  }
+
+  async setChannelVoices(channelId: string, profileIds: string[]): Promise<{ message: string }> {
+    return this.request(`/channels/${channelId}/voices`, {
+      method: 'PUT',
+      body: JSON.stringify({ profile_ids: profileIds }),
+    });
+  }
+
+  async getProfileChannels(profileId: string): Promise<{ channel_ids: string[] }> {
+    return this.request(`/profiles/${profileId}/channels`);
+  }
+
+  async setProfileChannels(profileId: string, channelIds: string[]): Promise<{ message: string }> {
+    return this.request(`/profiles/${profileId}/channels`, {
+      method: 'PUT',
+      body: JSON.stringify({ channel_ids: channelIds }),
+    });
+  }
+
+  // CUDA Backend Management
+  async getCudaStatus(): Promise<CudaStatus> {
+    return this.request<CudaStatus>('/backend/cuda-status');
+  }
+
+  async downloadCudaBackend(): Promise<{ message: string; progress_key: string }> {
+    return this.request<{ message: string; progress_key: string }>('/backend/download-cuda', {
+      method: 'POST',
+    });
+  }
+
+  async deleteCudaBackend(): Promise<{ message: string }> {
+    return this.request<{ message: string }>('/backend/cuda', {
+      method: 'DELETE',
+    });
+  }
+
+  // Stories
+  async listStories(): Promise<StoryResponse[]> {
+    return this.request<StoryResponse[]>('/stories');
+  }
+
+  async createStory(data: StoryCreate): Promise<StoryResponse> {
+    return this.request<StoryResponse>('/stories', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async getStory(storyId: string): Promise<StoryDetailResponse> {
+    return this.request<StoryDetailResponse>(`/stories/${storyId}`);
+  }
+
+  async updateStory(storyId: string, data: StoryCreate): Promise<StoryResponse> {
+    return this.request<StoryResponse>(`/stories/${storyId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteStory(storyId: string): Promise<void> {
+    await this.request<void>(`/stories/${storyId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async addStoryItem(storyId: string, data: StoryItemCreate): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async removeStoryItem(storyId: string, itemId: string): Promise<void> {
+    await this.request<void>(`/stories/${storyId}/items/${itemId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async updateStoryItemTimes(storyId: string, data: StoryItemBatchUpdate): Promise<void> {
+    await this.request<void>(`/stories/${storyId}/items/times`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async reorderStoryItems(storyId: string, data: StoryItemReorder): Promise<StoryItemDetail[]> {
+    return this.request<StoryItemDetail[]>(`/stories/${storyId}/items/reorder`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async moveStoryItem(
+    storyId: string,
+    itemId: string,
+    data: StoryItemMove,
+  ): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${itemId}/move`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async trimStoryItem(
+    storyId: string,
+    itemId: string,
+    data: StoryItemTrim,
+  ): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${itemId}/trim`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async splitStoryItem(
+    storyId: string,
+    itemId: string,
+    data: StoryItemSplit,
+  ): Promise<StoryItemDetail[]> {
+    return this.request<StoryItemDetail[]>(`/stories/${storyId}/items/${itemId}/split`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async duplicateStoryItem(storyId: string, itemId: string): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${itemId}/duplicate`, {
+      method: 'POST',
+    });
+  }
+
+  async setStoryItemVersion(
+    storyId: string,
+    itemId: string,
+    data: StoryItemVersionUpdate,
+  ): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${itemId}/version`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async exportStoryAudio(storyId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/stories/${storyId}/export-audio`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.blob();
+  }
+
+  // Effects & Versions
+  async getAvailableEffects(): Promise<AvailableEffectsResponse> {
+    return this.request<AvailableEffectsResponse>('/effects/available');
+  }
+
+  async listEffectPresets(): Promise<EffectPresetResponse[]> {
+    return this.request<EffectPresetResponse[]>('/effects/presets');
+  }
+
+  async createEffectPreset(data: EffectPresetCreate): Promise<EffectPresetResponse> {
+    return this.request<EffectPresetResponse>('/effects/presets', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateEffectPreset(
+    presetId: string,
+    data: { name?: string; description?: string; effects_chain?: EffectConfig[] },
+  ): Promise<EffectPresetResponse> {
+    return this.request<EffectPresetResponse>(`/effects/presets/${presetId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteEffectPreset(presetId: string): Promise<void> {
+    await this.request<void>(`/effects/presets/${presetId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async listGenerationVersions(generationId: string): Promise<GenerationVersionResponse[]> {
+    return this.request<GenerationVersionResponse[]>(`/generations/${generationId}/versions`);
+  }
+
+  async applyEffectsToGeneration(
+    generationId: string,
+    data: ApplyEffectsRequest,
+  ): Promise<GenerationVersionResponse> {
+    return this.request<GenerationVersionResponse>(
+      `/generations/${generationId}/versions/apply-effects`,
+      {
+        method: 'POST',
+        body: JSON.stringify(data),
+      },
+    );
+  }
+
+  async setDefaultVersion(
+    generationId: string,
+    versionId: string,
+  ): Promise<GenerationVersionResponse> {
+    return this.request<GenerationVersionResponse>(
+      `/generations/${generationId}/versions/${versionId}/set-default`,
+      { method: 'PUT' },
+    );
+  }
+
+  async deleteGenerationVersion(generationId: string, versionId: string): Promise<void> {
+    await this.request<void>(`/generations/${generationId}/versions/${versionId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  getVersionAudioUrl(versionId: string): string {
+    return `${this.getBaseUrl()}/audio/version/${versionId}`;
+  }
+
+  async updateProfileEffects(
+    profileId: string,
+    effectsChain: EffectConfig[] | null,
+  ): Promise<VoiceProfileResponse> {
+    return this.request<VoiceProfileResponse>(`/profiles/${profileId}/effects`, {
+      method: 'PUT',
+      body: JSON.stringify({ effects_chain: effectsChain }),
+    });
+  }
+
+  async previewEffects(generationId: string, effectsChain: EffectConfig[]): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/effects/preview/${generationId}`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ effects_chain: effectsChain }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(formatErrorDetail(error.detail, `HTTP error! status: ${response.status}`));
+    }
+
+    return response.blob();
+  }
+}
+
+export const apiClient = new ApiClient();

app/src/lib/api/core/ApiError.ts

@@ -0,0 +1,25 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { ApiResult } from './ApiResult';
+
+export class ApiError extends Error {
+  public readonly url: string;
+  public readonly status: number;
+  public readonly statusText: string;
+  public readonly body: any;
+  public readonly request: ApiRequestOptions;
+
+  constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
+    super(message);
+
+    this.name = 'ApiError';
+    this.url = response.url;
+    this.status = response.status;
+    this.statusText = response.statusText;
+    this.body = response.body;
+    this.request = request;
+  }
+}

app/src/lib/api/core/ApiRequestOptions.ts

@@ -0,0 +1,17 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ApiRequestOptions = {
+  readonly method: 'GET' | 'PUT' | 'POST' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH';
+  readonly url: string;
+  readonly path?: Record<string, any>;
+  readonly cookies?: Record<string, any>;
+  readonly headers?: Record<string, any>;
+  readonly query?: Record<string, any>;
+  readonly formData?: Record<string, any>;
+  readonly body?: any;
+  readonly mediaType?: string;
+  readonly responseHeader?: string;
+  readonly errors?: Record<number, string>;
+};

app/src/lib/api/core/ApiResult.ts

@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ApiResult = {
+  readonly url: string;
+  readonly ok: boolean;
+  readonly status: number;
+  readonly statusText: string;
+  readonly body: any;
+};

app/src/lib/api/core/CancelablePromise.ts

@@ -0,0 +1,130 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export class CancelError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'CancelError';
+  }
+
+  public get isCancelled(): boolean {
+    return true;
+  }
+}
+
+export interface OnCancel {
+  readonly isResolved: boolean;
+  readonly isRejected: boolean;
+  readonly isCancelled: boolean;
+
+  (cancelHandler: () => void): void;
+}
+
+export class CancelablePromise<T> implements Promise<T> {
+  #isResolved: boolean;
+  #isRejected: boolean;
+  #isCancelled: boolean;
+  readonly #cancelHandlers: (() => void)[];
+  readonly #promise: Promise<T>;
+  #resolve?: (value: T | PromiseLike<T>) => void;
+  #reject?: (reason?: any) => void;
+
+  constructor(
+    executor: (
+      resolve: (value: T | PromiseLike<T>) => void,
+      reject: (reason?: any) => void,
+      onCancel: OnCancel,
+    ) => void,
+  ) {
+    this.#isResolved = false;
+    this.#isRejected = false;
+    this.#isCancelled = false;
+    this.#cancelHandlers = [];
+    this.#promise = new Promise<T>((resolve, reject) => {
+      this.#resolve = resolve;
+      this.#reject = reject;
+
+      const onResolve = (value: T | PromiseLike<T>): void => {
+        if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+          return;
+        }
+        this.#isResolved = true;
+        if (this.#resolve) this.#resolve(value);
+      };
+
+      const onReject = (reason?: any): void => {
+        if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+          return;
+        }
+        this.#isRejected = true;
+        if (this.#reject) this.#reject(reason);
+      };
+
+      const onCancel = (cancelHandler: () => void): void => {
+        if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+          return;
+        }
+        this.#cancelHandlers.push(cancelHandler);
+      };
+
+      Object.defineProperty(onCancel, 'isResolved', {
+        get: (): boolean => this.#isResolved,
+      });
+
+      Object.defineProperty(onCancel, 'isRejected', {
+        get: (): boolean => this.#isRejected,
+      });
+
+      Object.defineProperty(onCancel, 'isCancelled', {
+        get: (): boolean => this.#isCancelled,
+      });
+
+      return executor(onResolve, onReject, onCancel as OnCancel);
+    });
+  }
+
+  get [Symbol.toStringTag]() {
+    return 'Cancellable Promise';
+  }
+
+  public then<TResult1 = T, TResult2 = never>(
+    onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
+    onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null,
+  ): Promise<TResult1 | TResult2> {
+    return this.#promise.then(onFulfilled, onRejected);
+  }
+
+  public catch<TResult = never>(
+    onRejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null,
+  ): Promise<T | TResult> {
+    return this.#promise.catch(onRejected);
+  }
+
+  public finally(onFinally?: (() => void) | null): Promise<T> {
+    return this.#promise.finally(onFinally);
+  }
+
+  public cancel(): void {
+    if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+      return;
+    }
+    this.#isCancelled = true;
+    if (this.#cancelHandlers.length) {
+      try {
+        for (const cancelHandler of this.#cancelHandlers) {
+          cancelHandler();
+        }
+      } catch (error) {
+        console.warn('Cancellation threw an error', error);
+        return;
+      }
+    }
+    this.#cancelHandlers.length = 0;
+    if (this.#reject) this.#reject(new CancelError('Request aborted'));
+  }
+
+  public get isCancelled(): boolean {
+    return this.#isCancelled;
+  }
+}

app/src/lib/api/core/OpenAPI.ts

@@ -0,0 +1,32 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ApiRequestOptions } from './ApiRequestOptions';
+
+type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
+type Headers = Record<string, string>;
+
+export type OpenAPIConfig = {
+  BASE: string;
+  VERSION: string;
+  WITH_CREDENTIALS: boolean;
+  CREDENTIALS: 'include' | 'omit' | 'same-origin';
+  TOKEN?: string | Resolver<string> | undefined;
+  USERNAME?: string | Resolver<string> | undefined;
+  PASSWORD?: string | Resolver<string> | undefined;
+  HEADERS?: Headers | Resolver<Headers> | undefined;
+  ENCODE_PATH?: ((path: string) => string) | undefined;
+};
+
+export const OpenAPI: OpenAPIConfig = {
+  BASE: '',
+  VERSION: '0.1.0',
+  WITH_CREDENTIALS: false,
+  CREDENTIALS: 'include',
+  TOKEN: undefined,
+  USERNAME: undefined,
+  PASSWORD: undefined,
+  HEADERS: undefined,
+  ENCODE_PATH: undefined,
+};

app/src/lib/api/core/request.ts

@@ -0,0 +1,341 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import { ApiError } from './ApiError';
+import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { ApiResult } from './ApiResult';
+import { CancelablePromise } from './CancelablePromise';
+import type { OnCancel } from './CancelablePromise';
+import type { OpenAPIConfig } from './OpenAPI';
+
+export const isDefined = <T>(
+  value: T | null | undefined,
+): value is Exclude<T, null | undefined> => {
+  return value !== undefined && value !== null;
+};
+
+export const isString = (value: any): value is string => {
+  return typeof value === 'string';
+};
+
+export const isStringWithValue = (value: any): value is string => {
+  return isString(value) && value !== '';
+};
+
+export const isBlob = (value: any): value is Blob => {
+  return (
+    typeof value === 'object' &&
+    typeof value.type === 'string' &&
+    typeof value.stream === 'function' &&
+    typeof value.arrayBuffer === 'function' &&
+    typeof value.constructor === 'function' &&
+    typeof value.constructor.name === 'string' &&
+    /^(Blob|File)$/.test(value.constructor.name) &&
+    /^(Blob|File)$/.test(value[Symbol.toStringTag])
+  );
+};
+
+export const isFormData = (value: any): value is FormData => {
+  return value instanceof FormData;
+};
+
+export const base64 = (str: string): string => {
+  try {
+    return btoa(str);
+  } catch (err) {
+    // @ts-ignore
+    return Buffer.from(str).toString('base64');
+  }
+};
+
+export const getQueryString = (params: Record<string, any>): string => {
+  const qs: string[] = [];
+
+  const append = (key: string, value: any) => {
+    qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+  };
+
+  const process = (key: string, value: any) => {
+    if (isDefined(value)) {
+      if (Array.isArray(value)) {
+        value.forEach((v) => {
+          process(key, v);
+        });
+      } else if (typeof value === 'object') {
+        Object.entries(value).forEach(([k, v]) => {
+          process(`${key}[${k}]`, v);
+        });
+      } else {
+        append(key, value);
+      }
+    }
+  };
+
+  Object.entries(params).forEach(([key, value]) => {
+    process(key, value);
+  });
+
+  if (qs.length > 0) {
+    return `?${qs.join('&')}`;
+  }
+
+  return '';
+};
+
+const getUrl = (config: OpenAPIConfig, options: ApiRequestOptions): string => {
+  const encoder = config.ENCODE_PATH || encodeURI;
+
+  const path = options.url
+    .replace('{api-version}', config.VERSION)
+    .replace(/{(.*?)}/g, (substring: string, group: string) => {
+      if (options.path?.hasOwnProperty(group)) {
+        return encoder(String(options.path[group]));
+      }
+      return substring;
+    });
+
+  const url = `${config.BASE}${path}`;
+  if (options.query) {
+    return `${url}${getQueryString(options.query)}`;
+  }
+  return url;
+};
+
+export const getFormData = (options: ApiRequestOptions): FormData | undefined => {
+  if (options.formData) {
+    const formData = new FormData();
+
+    const process = (key: string, value: any) => {
+      if (isString(value) || isBlob(value)) {
+        formData.append(key, value);
+      } else {
+        formData.append(key, JSON.stringify(value));
+      }
+    };
+
+    Object.entries(options.formData)
+      .filter(([_, value]) => isDefined(value))
+      .forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          value.forEach((v) => process(key, v));
+        } else {
+          process(key, value);
+        }
+      });
+
+    return formData;
+  }
+  return undefined;
+};
+
+type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
+
+export const resolve = async <T>(
+  options: ApiRequestOptions,
+  resolver?: T | Resolver<T>,
+): Promise<T | undefined> => {
+  if (typeof resolver === 'function') {
+    return (resolver as Resolver<T>)(options);
+  }
+  return resolver;
+};
+
+export const getHeaders = async (
+  config: OpenAPIConfig,
+  options: ApiRequestOptions,
+): Promise<Headers> => {
+  const [token, username, password, additionalHeaders] = await Promise.all([
+    resolve(options, config.TOKEN),
+    resolve(options, config.USERNAME),
+    resolve(options, config.PASSWORD),
+    resolve(options, config.HEADERS),
+  ]);
+
+  const headers = Object.entries({
+    Accept: 'application/json',
+    ...additionalHeaders,
+    ...options.headers,
+  })
+    .filter(([_, value]) => isDefined(value))
+    .reduce(
+      (headers, [key, value]) => ({
+        ...headers,
+        [key]: String(value),
+      }),
+      {} as Record<string, string>,
+    );
+
+  if (isStringWithValue(token)) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  if (isStringWithValue(username) && isStringWithValue(password)) {
+    const credentials = base64(`${username}:${password}`);
+    headers['Authorization'] = `Basic ${credentials}`;
+  }
+
+  if (options.body !== undefined) {
+    if (options.mediaType) {
+      headers['Content-Type'] = options.mediaType;
+    } else if (isBlob(options.body)) {
+      headers['Content-Type'] = options.body.type || 'application/octet-stream';
+    } else if (isString(options.body)) {
+      headers['Content-Type'] = 'text/plain';
+    } else if (!isFormData(options.body)) {
+      headers['Content-Type'] = 'application/json';
+    }
+  }
+
+  return new Headers(headers);
+};
+
+export const getRequestBody = (options: ApiRequestOptions): any => {
+  if (options.body !== undefined) {
+    if (options.mediaType?.includes('/json')) {
+      return JSON.stringify(options.body);
+    } else if (isString(options.body) || isBlob(options.body) || isFormData(options.body)) {
+      return options.body;
+    } else {
+      return JSON.stringify(options.body);
+    }
+  }
+  return undefined;
+};
+
+export const sendRequest = async (
+  config: OpenAPIConfig,
+  options: ApiRequestOptions,
+  url: string,
+  body: any,
+  formData: FormData | undefined,
+  headers: Headers,
+  onCancel: OnCancel,
+): Promise<Response> => {
+  const controller = new AbortController();
+
+  const request: RequestInit = {
+    headers,
+    body: body ?? formData,
+    method: options.method,
+    signal: controller.signal,
+  };
+
+  if (config.WITH_CREDENTIALS) {
+    request.credentials = config.CREDENTIALS;
+  }
+
+  onCancel(() => controller.abort());
+
+  return await fetch(url, request);
+};
+
+export const getResponseHeader = (
+  response: Response,
+  responseHeader?: string,
+): string | undefined => {
+  if (responseHeader) {
+    const content = response.headers.get(responseHeader);
+    if (isString(content)) {
+      return content;
+    }
+  }
+  return undefined;
+};
+
+export const getResponseBody = async (response: Response): Promise<any> => {
+  if (response.status !== 204) {
+    try {
+      const contentType = response.headers.get('Content-Type');
+      if (contentType) {
+        const jsonTypes = ['application/json', 'application/problem+json'];
+        const isJSON = jsonTypes.some((type) => contentType.toLowerCase().startsWith(type));
+        if (isJSON) {
+          return await response.json();
+        } else {
+          return await response.text();
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  return undefined;
+};
+
+export const catchErrorCodes = (options: ApiRequestOptions, result: ApiResult): void => {
+  const errors: Record<number, string> = {
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    500: 'Internal Server Error',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    ...options.errors,
+  };
+
+  const error = errors[result.status];
+  if (error) {
+    throw new ApiError(options, result, error);
+  }
+
+  if (!result.ok) {
+    const errorStatus = result.status ?? 'unknown';
+    const errorStatusText = result.statusText ?? 'unknown';
+    const errorBody = (() => {
+      try {
+        return JSON.stringify(result.body, null, 2);
+      } catch (e) {
+        return undefined;
+      }
+    })();
+
+    throw new ApiError(
+      options,
+      result,
+      `Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`,
+    );
+  }
+};
+
+/**
+ * Request method
+ * @param config The OpenAPI configuration object
+ * @param options The request options from the service
+ * @returns CancelablePromise<T>
+ * @throws ApiError
+ */
+export const request = <T>(
+  config: OpenAPIConfig,
+  options: ApiRequestOptions,
+): CancelablePromise<T> => {
+  return new CancelablePromise(async (resolve, reject, onCancel) => {
+    try {
+      const url = getUrl(config, options);
+      const formData = getFormData(options);
+      const body = getRequestBody(options);
+      const headers = await getHeaders(config, options);
+
+      if (!onCancel.isCancelled) {
+        const response = await sendRequest(config, options, url, body, formData, headers, onCancel);
+        const responseBody = await getResponseBody(response);
+        const responseHeader = getResponseHeader(response, options.responseHeader);
+
+        const result: ApiResult = {
+          url,
+          ok: response.ok,
+          status: response.status,
+          statusText: response.statusText,
+          body: responseHeader ?? responseBody,
+        };
+
+        catchErrorCodes(options, result);
+
+        resolve(result.body);
+      }
+    } catch (error) {
+      reject(error);
+    }
+  });
+};

app/src/lib/api/index.ts

@@ -0,0 +1,44 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export { ApiError } from './core/ApiError';
+export { CancelablePromise, CancelError } from './core/CancelablePromise';
+export { OpenAPI } from './core/OpenAPI';
+export type { OpenAPIConfig } from './core/OpenAPI';
+
+export type { Body_add_profile_sample_profiles__profile_id__samples_post } from './models/Body_add_profile_sample_profiles__profile_id__samples_post';
+export type { Body_transcribe_audio_transcribe_post } from './models/Body_transcribe_audio_transcribe_post';
+export type { GenerationRequest } from './models/GenerationRequest';
+export type { GenerationResponse } from './models/GenerationResponse';
+export type { HealthResponse } from './models/HealthResponse';
+export type { HistoryListResponse } from './models/HistoryListResponse';
+export type { HistoryResponse } from './models/HistoryResponse';
+export type { HTTPValidationError } from './models/HTTPValidationError';
+export type { ModelDownloadRequest } from './models/ModelDownloadRequest';
+export type { ModelStatus } from './models/ModelStatus';
+export type { ModelStatusListResponse } from './models/ModelStatusListResponse';
+export type { ProfileSampleResponse } from './models/ProfileSampleResponse';
+export type { TranscriptionResponse } from './models/TranscriptionResponse';
+export type { ValidationError } from './models/ValidationError';
+export type { VoiceProfileCreate } from './models/VoiceProfileCreate';
+export type { VoiceProfileResponse } from './models/VoiceProfileResponse';
+
+export { $Body_add_profile_sample_profiles__profile_id__samples_post } from './schemas/$Body_add_profile_sample_profiles__profile_id__samples_post';
+export { $Body_transcribe_audio_transcribe_post } from './schemas/$Body_transcribe_audio_transcribe_post';
+export { $GenerationRequest } from './schemas/$GenerationRequest';
+export { $GenerationResponse } from './schemas/$GenerationResponse';
+export { $HealthResponse } from './schemas/$HealthResponse';
+export { $HistoryListResponse } from './schemas/$HistoryListResponse';
+export { $HistoryResponse } from './schemas/$HistoryResponse';
+export { $HTTPValidationError } from './schemas/$HTTPValidationError';
+export { $ModelDownloadRequest } from './schemas/$ModelDownloadRequest';
+export { $ModelStatus } from './schemas/$ModelStatus';
+export { $ModelStatusListResponse } from './schemas/$ModelStatusListResponse';
+export { $ProfileSampleResponse } from './schemas/$ProfileSampleResponse';
+export { $TranscriptionResponse } from './schemas/$TranscriptionResponse';
+export { $ValidationError } from './schemas/$ValidationError';
+export { $VoiceProfileCreate } from './schemas/$VoiceProfileCreate';
+export { $VoiceProfileResponse } from './schemas/$VoiceProfileResponse';
+
+export { DefaultService } from './services/DefaultService';

app/src/lib/api/models/Body_add_profile_sample_profiles__profile_id__samples_post.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Body_add_profile_sample_profiles__profile_id__samples_post = {
+  file: Blob;
+  reference_text: string;
+};

app/src/lib/api/models/Body_transcribe_audio_transcribe_post.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Body_transcribe_audio_transcribe_post = {
+  file: Blob;
+  language?: string | null;
+};

app/src/lib/api/models/GenerationRequest.ts

@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Request model for voice generation.
+ */
+export type GenerationRequest = {
+  profile_id: string;
+  text: string;
+  language?: string;
+  seed?: number | null;
+  model_size?: string | null;
+  instruct?: string | null;
+};

app/src/lib/api/models/GenerationResponse.ts

@@ -0,0 +1,18 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Response model for voice generation.
+ */
+export type GenerationResponse = {
+  id: string;
+  profile_id: string;
+  text: string;
+  language: string;
+  audio_path: string;
+  duration: number;
+  seed: number | null;
+  instruct: string | null;
+  created_at: string;
+};

app/src/lib/api/models/HTTPValidationError.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ValidationError } from './ValidationError';
+export type HTTPValidationError = {
+  detail?: Array<ValidationError>;
+};

app/src/lib/api/models/HealthResponse.ts

@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Response model for health check.
+ */
+export type HealthResponse = {
+  status: string;
+  model_loaded: boolean;
+  model_downloaded?: boolean | null;
+  model_size?: string | null;
+  gpu_available: boolean;
+  vram_used_mb?: number | null;
+};

app/src/lib/api/models/HistoryListResponse.ts

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { HistoryResponse } from './HistoryResponse';
+/**
+ * Response model for history list.
+ */
+export type HistoryListResponse = {
+  items: Array<HistoryResponse>;
+  total: number;
+};

app/src/lib/api/models/HistoryResponse.ts

@@ -0,0 +1,19 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Response model for history entry (includes profile name).
+ */
+export type HistoryResponse = {
+  id: string;
+  profile_id: string;
+  profile_name: string;
+  text: string;
+  language: string;
+  audio_path: string;
+  duration: number;
+  seed: number | null;
+  instruct: string | null;
+  created_at: string;
+};

app/src/lib/api/models/ModelDownloadRequest.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Request model for triggering model download.
+ */
+export type ModelDownloadRequest = {
+  model_name: string;
+};

app/src/lib/api/models/ModelStatus.ts

@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Response model for model status.
+ */
+export type ModelStatus = {
+  model_name: string;
+  display_name: string;
+  downloaded: boolean;
+  downloading?: boolean;  // True if download is in progress
+  size_mb?: number | null;
+  loaded?: boolean;
+};

app/src/lib/api/models/ModelStatusListResponse.ts

@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ModelStatus } from './ModelStatus';
+/**
+ * Response model for model status list.
+ */
+export type ModelStatusListResponse = {
+  models: Array<ModelStatus>;
+};

app/src/lib/api/models/ProfileSampleResponse.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Response model for profile sample.
+ */
+export type ProfileSampleResponse = {
+  id: string;
+  profile_id: string;
+  audio_path: string;
+  reference_text: string;
+};

app/src/lib/api/models/TranscriptionResponse.ts

@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Response model for transcription.
+ */
+export type TranscriptionResponse = {
+  text: string;
+  duration: number;
+};

app/src/lib/api/models/ValidationError.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ValidationError = {
+  loc: Array<string | number>;
+  msg: string;
+  type: string;
+};

app/src/lib/api/models/VoiceProfileCreate.ts

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Request model for creating a voice profile.
+ */
+export type VoiceProfileCreate = {
+  name: string;
+  description?: string | null;
+  language?: string;
+};

app/src/lib/api/models/VoiceProfileResponse.ts

@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Response model for voice profile.
+ */
+export type VoiceProfileResponse = {
+  id: string;
+  name: string;
+  description: string | null;
+  language: string;
+  created_at: string;
+  updated_at: string;
+};

app/src/lib/api/schemas/$Body_add_profile_sample_profiles__profile_id__samples_post.ts

@@ -0,0 +1,17 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $Body_add_profile_sample_profiles__profile_id__samples_post = {
+  properties: {
+    file: {
+      type: 'binary',
+      isRequired: true,
+      format: 'binary',
+    },
+    reference_text: {
+      type: 'string',
+      isRequired: true,
+    },
+  },
+} as const;

app/src/lib/api/schemas/$Body_transcribe_audio_transcribe_post.ts

@@ -0,0 +1,24 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $Body_transcribe_audio_transcribe_post = {
+  properties: {
+    file: {
+      type: 'binary',
+      isRequired: true,
+      format: 'binary',
+    },
+    language: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+  },
+} as const;

app/src/lib/api/schemas/$GenerationRequest.ts

@@ -0,0 +1,46 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $GenerationRequest = {
+  description: `Request model for voice generation.`,
+  properties: {
+    profile_id: {
+      type: 'string',
+      isRequired: true,
+    },
+    text: {
+      type: 'string',
+      isRequired: true,
+      maxLength: 5000,
+      minLength: 1,
+    },
+    language: {
+      type: 'string',
+      pattern: '^(en|zh)$',
+    },
+    seed: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'number',
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+    model_size: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'string',
+          pattern: '^(1\\.7B|0\\.6B)$',
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+  },
+} as const;

app/src/lib/api/schemas/$GenerationResponse.ts

@@ -0,0 +1,50 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $GenerationResponse = {
+  description: `Response model for voice generation.`,
+  properties: {
+    id: {
+      type: 'string',
+      isRequired: true,
+    },
+    profile_id: {
+      type: 'string',
+      isRequired: true,
+    },
+    text: {
+      type: 'string',
+      isRequired: true,
+    },
+    language: {
+      type: 'string',
+      isRequired: true,
+    },
+    audio_path: {
+      type: 'string',
+      isRequired: true,
+    },
+    duration: {
+      type: 'number',
+      isRequired: true,
+    },
+    seed: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'number',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      isRequired: true,
+    },
+    created_at: {
+      type: 'string',
+      isRequired: true,
+      format: 'date-time',
+    },
+  },
+} as const;

app/src/lib/api/schemas/$HTTPValidationError.ts

@@ -0,0 +1,14 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $HTTPValidationError = {
+  properties: {
+    detail: {
+      type: 'array',
+      contains: {
+        type: 'ValidationError',
+      },
+    },
+  },
+} as const;

app/src/lib/api/schemas/$HealthResponse.ts

@@ -0,0 +1,54 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $HealthResponse = {
+  description: `Response model for health check.`,
+  properties: {
+    status: {
+      type: 'string',
+      isRequired: true,
+    },
+    model_loaded: {
+      type: 'boolean',
+      isRequired: true,
+    },
+    model_downloaded: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'boolean',
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+    model_size: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+    gpu_available: {
+      type: 'boolean',
+      isRequired: true,
+    },
+    vram_used_mb: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'number',
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+  },
+} as const;

app/src/lib/api/schemas/$HistoryListResponse.ts

@@ -0,0 +1,20 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $HistoryListResponse = {
+  description: `Response model for history list.`,
+  properties: {
+    items: {
+      type: 'array',
+      contains: {
+        type: 'HistoryResponse',
+      },
+      isRequired: true,
+    },
+    total: {
+      type: 'number',
+      isRequired: true,
+    },
+  },
+} as const;

app/src/lib/api/schemas/$HistoryResponse.ts

@@ -0,0 +1,54 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $HistoryResponse = {
+  description: `Response model for history entry (includes profile name).`,
+  properties: {
+    id: {
+      type: 'string',
+      isRequired: true,
+    },
+    profile_id: {
+      type: 'string',
+      isRequired: true,
+    },
+    profile_name: {
+      type: 'string',
+      isRequired: true,
+    },
+    text: {
+      type: 'string',
+      isRequired: true,
+    },
+    language: {
+      type: 'string',
+      isRequired: true,
+    },
+    audio_path: {
+      type: 'string',
+      isRequired: true,
+    },
+    duration: {
+      type: 'number',
+      isRequired: true,
+    },
+    seed: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'number',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      isRequired: true,
+    },
+    created_at: {
+      type: 'string',
+      isRequired: true,
+      format: 'date-time',
+    },
+  },
+} as const;

app/src/lib/api/schemas/$ModelDownloadRequest.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $ModelDownloadRequest = {
+  description: `Request model for triggering model download.`,
+  properties: {
+    model_name: {
+      type: 'string',
+      isRequired: true,
+    },
+  },
+} as const;

app/src/lib/api/schemas/$ModelStatus.ts

@@ -0,0 +1,35 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $ModelStatus = {
+  description: `Response model for model status.`,
+  properties: {
+    model_name: {
+      type: 'string',
+      isRequired: true,
+    },
+    display_name: {
+      type: 'string',
+      isRequired: true,
+    },
+    downloaded: {
+      type: 'boolean',
+      isRequired: true,
+    },
+    size_mb: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'number',
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+    loaded: {
+      type: 'boolean',
+    },
+  },
+} as const;

app/src/lib/api/schemas/$ModelStatusListResponse.ts

@@ -0,0 +1,16 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $ModelStatusListResponse = {
+  description: `Response model for model status list.`,
+  properties: {
+    models: {
+      type: 'array',
+      contains: {
+        type: 'ModelStatus',
+      },
+      isRequired: true,
+    },
+  },
+} as const;

app/src/lib/api/schemas/$ProfileSampleResponse.ts

@@ -0,0 +1,25 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $ProfileSampleResponse = {
+  description: `Response model for profile sample.`,
+  properties: {
+    id: {
+      type: 'string',
+      isRequired: true,
+    },
+    profile_id: {
+      type: 'string',
+      isRequired: true,
+    },
+    audio_path: {
+      type: 'string',
+      isRequired: true,
+    },
+    reference_text: {
+      type: 'string',
+      isRequired: true,
+    },
+  },
+} as const;

app/src/lib/api/schemas/$TranscriptionResponse.ts

@@ -0,0 +1,17 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $TranscriptionResponse = {
+  description: `Response model for transcription.`,
+  properties: {
+    text: {
+      type: 'string',
+      isRequired: true,
+    },
+    duration: {
+      type: 'number',
+      isRequired: true,
+    },
+  },
+} as const;

app/src/lib/api/schemas/$ValidationError.ts

@@ -0,0 +1,31 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $ValidationError = {
+  properties: {
+    loc: {
+      type: 'array',
+      contains: {
+        type: 'any-of',
+        contains: [
+          {
+            type: 'string',
+          },
+          {
+            type: 'number',
+          },
+        ],
+      },
+      isRequired: true,
+    },
+    msg: {
+      type: 'string',
+      isRequired: true,
+    },
+    type: {
+      type: 'string',
+      isRequired: true,
+    },
+  },
+} as const;

app/src/lib/api/schemas/$VoiceProfileCreate.ts

@@ -0,0 +1,31 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $VoiceProfileCreate = {
+  description: `Request model for creating a voice profile.`,
+  properties: {
+    name: {
+      type: 'string',
+      isRequired: true,
+      maxLength: 100,
+      minLength: 1,
+    },
+    description: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'string',
+          maxLength: 500,
+        },
+        {
+          type: 'null',
+        },
+      ],
+    },
+    language: {
+      type: 'string',
+      pattern: '^(en|zh)$',
+    },
+  },
+} as const;

app/src/lib/api/schemas/$VoiceProfileResponse.ts

@@ -0,0 +1,43 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export const $VoiceProfileResponse = {
+  description: `Response model for voice profile.`,
+  properties: {
+    id: {
+      type: 'string',
+      isRequired: true,
+    },
+    name: {
+      type: 'string',
+      isRequired: true,
+    },
+    description: {
+      type: 'any-of',
+      contains: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      isRequired: true,
+    },
+    language: {
+      type: 'string',
+      isRequired: true,
+    },
+    created_at: {
+      type: 'string',
+      isRequired: true,
+      format: 'date-time',
+    },
+    updated_at: {
+      type: 'string',
+      isRequired: true,
+      format: 'date-time',
+    },
+  },
+} as const;

app/src/lib/api/services/DefaultService.ts

@@ -0,0 +1,459 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { Body_add_profile_sample_profiles__profile_id__samples_post } from '../models/Body_add_profile_sample_profiles__profile_id__samples_post';
+import type { Body_transcribe_audio_transcribe_post } from '../models/Body_transcribe_audio_transcribe_post';
+import type { GenerationRequest } from '../models/GenerationRequest';
+import type { GenerationResponse } from '../models/GenerationResponse';
+import type { HealthResponse } from '../models/HealthResponse';
+import type { HistoryListResponse } from '../models/HistoryListResponse';
+import type { HistoryResponse } from '../models/HistoryResponse';
+import type { ModelDownloadRequest } from '../models/ModelDownloadRequest';
+import type { ModelStatusListResponse } from '../models/ModelStatusListResponse';
+import type { ProfileSampleResponse } from '../models/ProfileSampleResponse';
+import type { TranscriptionResponse } from '../models/TranscriptionResponse';
+import type { VoiceProfileCreate } from '../models/VoiceProfileCreate';
+import type { VoiceProfileResponse } from '../models/VoiceProfileResponse';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import { OpenAPI } from '../core/OpenAPI';
+import { request as __request } from '../core/request';
+export class DefaultService {
+  /**
+   * Root
+   * Root endpoint.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static rootGet(): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/',
+    });
+  }
+  /**
+   * Health
+   * Health check endpoint.
+   * @returns HealthResponse Successful Response
+   * @throws ApiError
+   */
+  public static healthHealthGet(): CancelablePromise<HealthResponse> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/health',
+    });
+  }
+  /**
+   * List Profiles
+   * List all voice profiles.
+   * @returns VoiceProfileResponse Successful Response
+   * @throws ApiError
+   */
+  public static listProfilesProfilesGet(): CancelablePromise<Array<VoiceProfileResponse>> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/profiles',
+    });
+  }
+  /**
+   * Create Profile
+   * Create a new voice profile.
+   * @returns VoiceProfileResponse Successful Response
+   * @throws ApiError
+   */
+  public static createProfileProfilesPost({
+    requestBody,
+  }: {
+    requestBody: VoiceProfileCreate;
+  }): CancelablePromise<VoiceProfileResponse> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/profiles',
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Get Profile
+   * Get a voice profile by ID.
+   * @returns VoiceProfileResponse Successful Response
+   * @throws ApiError
+   */
+  public static getProfileProfilesProfileIdGet({
+    profileId,
+  }: {
+    profileId: string;
+  }): CancelablePromise<VoiceProfileResponse> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/profiles/{profile_id}',
+      path: {
+        profile_id: profileId,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Update Profile
+   * Update a voice profile.
+   * @returns VoiceProfileResponse Successful Response
+   * @throws ApiError
+   */
+  public static updateProfileProfilesProfileIdPut({
+    profileId,
+    requestBody,
+  }: {
+    profileId: string;
+    requestBody: VoiceProfileCreate;
+  }): CancelablePromise<VoiceProfileResponse> {
+    return __request(OpenAPI, {
+      method: 'PUT',
+      url: '/profiles/{profile_id}',
+      path: {
+        profile_id: profileId,
+      },
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Delete Profile
+   * Delete a voice profile.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static deleteProfileProfilesProfileIdDelete({
+    profileId,
+  }: {
+    profileId: string;
+  }): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'DELETE',
+      url: '/profiles/{profile_id}',
+      path: {
+        profile_id: profileId,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Add Profile Sample
+   * Add a sample to a voice profile.
+   * @returns ProfileSampleResponse Successful Response
+   * @throws ApiError
+   */
+  public static addProfileSampleProfilesProfileIdSamplesPost({
+    profileId,
+    formData,
+  }: {
+    profileId: string;
+    formData: Body_add_profile_sample_profiles__profile_id__samples_post;
+  }): CancelablePromise<ProfileSampleResponse> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/profiles/{profile_id}/samples',
+      path: {
+        profile_id: profileId,
+      },
+      formData: formData,
+      mediaType: 'multipart/form-data',
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Get Profile Samples
+   * Get all samples for a profile.
+   * @returns ProfileSampleResponse Successful Response
+   * @throws ApiError
+   */
+  public static getProfileSamplesProfilesProfileIdSamplesGet({
+    profileId,
+  }: {
+    profileId: string;
+  }): CancelablePromise<Array<ProfileSampleResponse>> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/profiles/{profile_id}/samples',
+      path: {
+        profile_id: profileId,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Delete Profile Sample
+   * Delete a profile sample.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static deleteProfileSampleProfilesSamplesSampleIdDelete({
+    sampleId,
+  }: {
+    sampleId: string;
+  }): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'DELETE',
+      url: '/profiles/samples/{sample_id}',
+      path: {
+        sample_id: sampleId,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Generate Speech
+   * Generate speech from text using a voice profile.
+   * @returns GenerationResponse Successful Response
+   * @throws ApiError
+   */
+  public static generateSpeechGeneratePost({
+    requestBody,
+  }: {
+    requestBody: GenerationRequest;
+  }): CancelablePromise<GenerationResponse> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/generate',
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * List History
+   * List generation history with optional filters.
+   * @returns HistoryListResponse Successful Response
+   * @throws ApiError
+   */
+  public static listHistoryHistoryGet({
+    profileId,
+    search,
+    limit = 50,
+    offset,
+  }: {
+    profileId?: string | null;
+    search?: string | null;
+    limit?: number;
+    offset?: number;
+  }): CancelablePromise<HistoryListResponse> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/history',
+      query: {
+        profile_id: profileId,
+        search: search,
+        limit: limit,
+        offset: offset,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Get Generation
+   * Get a generation by ID.
+   * @returns HistoryResponse Successful Response
+   * @throws ApiError
+   */
+  public static getGenerationHistoryGenerationIdGet({
+    generationId,
+  }: {
+    generationId: string;
+  }): CancelablePromise<HistoryResponse> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/history/{generation_id}',
+      path: {
+        generation_id: generationId,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Delete Generation
+   * Delete a generation.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static deleteGenerationHistoryGenerationIdDelete({
+    generationId,
+  }: {
+    generationId: string;
+  }): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'DELETE',
+      url: '/history/{generation_id}',
+      path: {
+        generation_id: generationId,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Get Stats
+   * Get generation statistics.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static getStatsHistoryStatsGet(): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/history/stats',
+    });
+  }
+  /**
+   * Transcribe Audio
+   * Transcribe audio file to text.
+   * @returns TranscriptionResponse Successful Response
+   * @throws ApiError
+   */
+  public static transcribeAudioTranscribePost({
+    formData,
+  }: {
+    formData: Body_transcribe_audio_transcribe_post;
+  }): CancelablePromise<TranscriptionResponse> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/transcribe',
+      formData: formData,
+      mediaType: 'multipart/form-data',
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Get Audio
+   * Serve generated audio file.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static getAudioAudioGenerationIdGet({
+    generationId,
+  }: {
+    generationId: string;
+  }): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/audio/{generation_id}',
+      path: {
+        generation_id: generationId,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Load Model
+   * Manually load TTS model.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static loadModelModelsLoadPost({
+    modelSize = '1.7B',
+  }: {
+    modelSize?: string;
+  }): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/models/load',
+      query: {
+        model_size: modelSize,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Unload Model
+   * Unload TTS model to free memory.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static unloadModelModelsUnloadPost(): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/models/unload',
+    });
+  }
+  /**
+   * Get Model Progress
+   * Get model download progress via Server-Sent Events.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static getModelProgressModelsProgressModelNameGet({
+    modelName,
+  }: {
+    modelName: string;
+  }): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/models/progress/{model_name}',
+      path: {
+        model_name: modelName,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+  /**
+   * Get Model Status
+   * Get status of all available models.
+   * @returns ModelStatusListResponse Successful Response
+   * @throws ApiError
+   */
+  public static getModelStatusModelsStatusGet(): CancelablePromise<ModelStatusListResponse> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/models/status',
+    });
+  }
+  /**
+   * Trigger Model Download
+   * Trigger download of a specific model.
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static triggerModelDownloadModelsDownloadPost({
+    requestBody,
+  }: {
+    requestBody: ModelDownloadRequest;
+  }): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/models/download',
+      body: requestBody,
+      mediaType: 'application/json',
+      errors: {
+        422: `Validation Error`,
+      },
+    });
+  }
+}

app/src/lib/api/types.ts

@@ -0,0 +1,369 @@
+// API Types matching backend Pydantic models
+import type { LanguageCode } from '@/lib/constants/languages';
+
+export type VoiceType = 'cloned' | 'preset' | 'designed';
+
+export interface VoiceProfileCreate {
+  name: string;
+  description?: string;
+  language: LanguageCode;
+  voice_type?: VoiceType;
+  preset_engine?: string;
+  preset_voice_id?: string;
+  design_prompt?: string;
+  default_engine?: string;
+}
+
+export interface VoiceProfileResponse {
+  id: string;
+  name: string;
+  description?: string;
+  language: string;
+  avatar_path?: string;
+  effects_chain?: EffectConfig[];
+  voice_type: VoiceType;
+  preset_engine?: string;
+  preset_voice_id?: string;
+  design_prompt?: string;
+  default_engine?: string;
+  generation_count: number;
+  sample_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface PresetVoice {
+  voice_id: string;
+  name: string;
+  gender: 'male' | 'female';
+  language: string;
+}
+
+export interface ProfileSampleCreate {
+  reference_text: string;
+}
+
+export interface ProfileSampleResponse {
+  id: string;
+  profile_id: string;
+  audio_path: string;
+  reference_text: string;
+}
+
+export interface EffectConfig {
+  type: string;
+  enabled: boolean;
+  params: Record<string, number>;
+}
+
+export interface GenerationRequest {
+  profile_id: string;
+  text: string;
+  language: LanguageCode;
+  seed?: number;
+  model_size?: '1.7B' | '0.6B' | '1B' | '3B';
+  engine?:
+    | 'qwen'
+    | 'qwen_custom_voice'
+    | 'luxtts'
+    | 'chatterbox'
+    | 'chatterbox_turbo'
+    | 'tada'
+    | 'kokoro';
+  instruct?: string;
+  max_chunk_chars?: number;
+  crossfade_ms?: number;
+  normalize?: boolean;
+  effects_chain?: EffectConfig[];
+}
+
+export interface GenerationVersionResponse {
+  id: string;
+  generation_id: string;
+  label: string;
+  audio_path: string;
+  effects_chain?: EffectConfig[];
+  source_version_id?: string;
+  is_default: boolean;
+  created_at: string;
+}
+
+export interface GenerationResponse {
+  id: string;
+  profile_id: string;
+  text: string;
+  language: string;
+  audio_path?: string;
+  duration?: number;
+  seed?: number;
+  instruct?: string;
+  engine?: string;
+  model_size?: string;
+  status: 'loading_model' | 'generating' | 'completed' | 'failed';
+  error?: string;
+  is_favorited?: boolean;
+  created_at: string;
+  versions?: GenerationVersionResponse[];
+  active_version_id?: string;
+}
+
+export interface HistoryQuery {
+  profile_id?: string;
+  search?: string;
+  limit?: number;
+  offset?: number;
+}
+
+export interface HistoryResponse extends GenerationResponse {
+  profile_name: string;
+  versions?: GenerationVersionResponse[];
+  active_version_id?: string;
+}
+
+export interface HistoryListResponse {
+  items: HistoryResponse[];
+  total: number;
+}
+
+export type WhisperModelSize = 'base' | 'small' | 'medium' | 'large' | 'turbo';
+
+export interface TranscriptionRequest {
+  language?: LanguageCode;
+  model?: WhisperModelSize;
+}
+
+export interface TranscriptionResponse {
+  text: string;
+  duration: number;
+}
+
+export interface HealthResponse {
+  status: string;
+  model_loaded: boolean;
+  model_downloaded?: boolean;
+  model_size?: string;
+  gpu_available: boolean;
+  gpu_type?: string;
+  vram_used_mb?: number;
+  backend_type?: string;
+  backend_variant?: string; // "cpu" or "cuda"
+}
+
+export interface CudaDownloadProgress {
+  model_name: string;
+  current: number;
+  total: number;
+  progress: number;
+  filename?: string;
+  status: 'downloading' | 'extracting' | 'complete' | 'error';
+  timestamp: string;
+  error?: string;
+}
+
+export interface CudaStatus {
+  available: boolean; // CUDA binary exists on disk
+  active: boolean; // Currently running the CUDA binary
+  binary_path?: string;
+  downloading: boolean; // Download in progress
+  download_progress?: CudaDownloadProgress;
+}
+
+export interface ModelProgress {
+  model_name: string;
+  current: number;
+  total: number;
+  progress: number;
+  filename?: string;
+  status: 'downloading' | 'extracting' | 'complete' | 'error';
+  timestamp: string;
+  error?: string;
+}
+
+export interface ModelStatus {
+  model_name: string;
+  display_name: string;
+  hf_repo_id?: string; // HuggingFace repository ID
+  downloaded: boolean;
+  downloading: boolean; // True if download is in progress
+  size_mb?: number;
+  loaded: boolean;
+}
+
+export interface HuggingFaceModelInfo {
+  id: string;
+  author: string;
+  lastModified: string;
+  pipeline_tag?: string;
+  library_name?: string;
+  downloads: number;
+  likes: number;
+  tags: string[];
+  cardData?: {
+    license?: string;
+    language?: string[];
+    pipeline_tag?: string;
+  };
+}
+
+export interface ModelStatusListResponse {
+  models: ModelStatus[];
+}
+
+export interface ModelDownloadRequest {
+  model_name: string;
+}
+
+export interface ActiveDownloadTask {
+  model_name: string;
+  status: string;
+  started_at: string;
+  error?: string;
+  progress?: number; // 0-100 percentage
+  current?: number; // bytes downloaded
+  total?: number; // total bytes
+  filename?: string; // current file being downloaded
+}
+
+export interface ActiveGenerationTask {
+  task_id: string;
+  profile_id: string;
+  text_preview: string;
+  started_at: string;
+}
+
+export interface ActiveTasksResponse {
+  downloads: ActiveDownloadTask[];
+  generations: ActiveGenerationTask[];
+}
+
+export interface StoryCreate {
+  name: string;
+  description?: string;
+}
+
+export interface StoryResponse {
+  id: string;
+  name: string;
+  description?: string;
+  created_at: string;
+  updated_at: string;
+  item_count: number;
+}
+
+export interface StoryItemDetail {
+  id: string;
+  story_id: string;
+  generation_id: string;
+  version_id?: string;
+  start_time_ms: number;
+  track: number;
+  trim_start_ms: number;
+  trim_end_ms: number;
+  created_at: string;
+  profile_id: string;
+  profile_name: string;
+  text: string;
+  language: string;
+  audio_path: string;
+  duration: number;
+  seed?: number;
+  instruct?: string;
+  generation_created_at: string;
+  versions?: GenerationVersionResponse[];
+  active_version_id?: string;
+}
+
+export interface StoryItemVersionUpdate {
+  version_id: string | null;
+}
+
+export interface StoryDetailResponse {
+  id: string;
+  name: string;
+  description?: string;
+  created_at: string;
+  updated_at: string;
+  items: StoryItemDetail[];
+}
+
+export interface StoryItemCreate {
+  generation_id: string;
+  start_time_ms?: number;
+  track?: number;
+}
+
+export interface StoryItemUpdateTime {
+  generation_id: string;
+  start_time_ms: number;
+}
+
+export interface StoryItemBatchUpdate {
+  updates: StoryItemUpdateTime[];
+}
+
+export interface StoryItemReorder {
+  generation_ids: string[];
+}
+
+export interface StoryItemMove {
+  start_time_ms: number;
+  track: number;
+}
+
+export interface StoryItemTrim {
+  trim_start_ms: number;
+  trim_end_ms: number;
+}
+
+export interface StoryItemSplit {
+  split_time_ms: number;
+}
+
+// Effects
+
+export interface EffectPresetResponse {
+  id: string;
+  name: string;
+  description?: string;
+  effects_chain: EffectConfig[];
+  is_builtin: boolean;
+  created_at: string;
+}
+
+export interface EffectPresetCreate {
+  name: string;
+  description?: string;
+  effects_chain: EffectConfig[];
+}
+
+export interface EffectPresetUpdate {
+  name?: string;
+  description?: string;
+  effects_chain?: EffectConfig[];
+}
+
+export interface AvailableEffectParam {
+  default: number;
+  min: number;
+  max: number;
+  step: number;
+  description: string;
+}
+
+export interface AvailableEffect {
+  type: string;
+  label: string;
+  description: string;
+  params: Record<string, AvailableEffectParam>;
+}
+
+export interface AvailableEffectsResponse {
+  effects: AvailableEffect[];
+}
+
+export interface ApplyEffectsRequest {
+  effects_chain: EffectConfig[];
+  source_version_id?: string;
+  label?: string;
+  set_as_default?: boolean;
+}

app/src/lib/constants/languages.ts

@@ -0,0 +1,90 @@
+/**
+ * Supported languages for voice generation, per engine.
+ *
+ * Qwen3-TTS supports 10 languages.
+ * LuxTTS is English-only.
+ * Chatterbox Multilingual supports 23 languages.
+ * Chatterbox Turbo is English-only.
+ * Kokoro supports 8 languages.
+ */
+
+/** All languages that any engine supports. */
+export const ALL_LANGUAGES = {
+  ar: 'Arabic',
+  da: 'Danish',
+  de: 'German',
+  el: 'Greek',
+  en: 'English',
+  es: 'Spanish',
+  fi: 'Finnish',
+  fr: 'French',
+  he: 'Hebrew',
+  hi: 'Hindi',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  ms: 'Malay',
+  nl: 'Dutch',
+  no: 'Norwegian',
+  pl: 'Polish',
+  pt: 'Portuguese',
+  ru: 'Russian',
+  sv: 'Swedish',
+  sw: 'Swahili',
+  tr: 'Turkish',
+  zh: 'Chinese',
+} as const;
+
+export type LanguageCode = keyof typeof ALL_LANGUAGES;
+
+/** Per-engine supported language codes. */
+export const ENGINE_LANGUAGES: Record<string, readonly LanguageCode[]> = {
+  qwen: ['zh', 'en', 'ja', 'ko', 'de', 'fr', 'ru', 'pt', 'es', 'it'],
+  luxtts: ['en'],
+  chatterbox: [
+    'ar',
+    'da',
+    'de',
+    'el',
+    'en',
+    'es',
+    'fi',
+    'fr',
+    'he',
+    'hi',
+    'it',
+    'ja',
+    'ko',
+    'ms',
+    'nl',
+    'no',
+    'pl',
+    'pt',
+    'ru',
+    'sv',
+    'sw',
+    'tr',
+    'zh',
+  ],
+  chatterbox_turbo: ['en'],
+  tada: ['en', 'ar', 'zh', 'de', 'es', 'fr', 'it', 'ja', 'pl', 'pt'],
+  kokoro: ['en', 'es', 'fr', 'hi', 'it', 'pt', 'ja', 'zh'],
+  qwen_custom_voice: ['zh', 'en', 'ja', 'ko', 'de', 'fr', 'ru', 'pt', 'es', 'it'],
+} as const;
+
+/** Helper: get language options for a given engine. */
+export function getLanguageOptionsForEngine(engine: string) {
+  const codes = ENGINE_LANGUAGES[engine] ?? ENGINE_LANGUAGES.qwen;
+  return codes.map((code) => ({
+    value: code,
+    label: ALL_LANGUAGES[code],
+  }));
+}
+
+// ── Backwards-compatible exports used elsewhere ──────────────────────
+export const SUPPORTED_LANGUAGES = ALL_LANGUAGES;
+export const LANGUAGE_CODES = Object.keys(ALL_LANGUAGES) as LanguageCode[];
+export const LANGUAGE_OPTIONS = LANGUAGE_CODES.map((code) => ({
+  value: code,
+  label: ALL_LANGUAGES[code],
+}));

app/src/lib/constants/ui.ts

@@ -0,0 +1,18 @@
+/**
+ * UI layout constants for safe area padding
+ */
+
+const isWindows = typeof navigator !== 'undefined' && navigator.userAgent.includes('Windows');
+
+/**
+ * Top safe area padding - height of the drag region bar
+ * On macOS this accounts for the overlay titlebar (48px).
+ * On Windows the native title bar is outside the webview, so no padding is needed.
+ */
+export const TOP_SAFE_AREA_PADDING = isWindows ? 'pt-8' : 'pt-12';
+
+/**
+ * Bottom safe area padding - height of the audio player
+ * Corresponds to Tailwind's pb-32 (8rem / 128px)
+ */
+export const BOTTOM_SAFE_AREA_PADDING = 'pb-32';

app/src/lib/hooks/useAudioPlayer.ts

@@ -0,0 +1,66 @@
+import { useRef, useState } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+
+export function useAudioPlayer() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const { toast } = useToast();
+
+  const playPause = (file: File | null | undefined) => {
+    if (!file) return;
+
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        audioRef.current.play();
+        setIsPlaying(true);
+      }
+    } else {
+      const audio = new Audio(URL.createObjectURL(file));
+      audioRef.current = audio;
+
+      audio.addEventListener('ended', () => {
+        setIsPlaying(false);
+        if (audioRef.current) {
+          URL.revokeObjectURL(audioRef.current.src);
+        }
+        audioRef.current = null;
+      });
+
+      audio.addEventListener('error', () => {
+        setIsPlaying(false);
+        toast({
+          title: 'Playback error',
+          description: 'Failed to play audio file',
+          variant: 'destructive',
+        });
+        if (audioRef.current) {
+          URL.revokeObjectURL(audioRef.current.src);
+        }
+        audioRef.current = null;
+      });
+
+      audio.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const cleanup = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      if (audioRef.current.src.startsWith('blob:')) {
+        URL.revokeObjectURL(audioRef.current.src);
+      }
+      audioRef.current = null;
+    }
+    setIsPlaying(false);
+  };
+
+  return {
+    isPlaying,
+    playPause,
+    cleanup,
+  };
+}

app/src/lib/hooks/useAudioRecording.ts

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePlatform } from '@/platform/PlatformContext';
+import { convertToWav } from '@/lib/utils/audio';
+
+interface UseAudioRecordingOptions {
+  maxDurationSeconds?: number;
+  onRecordingComplete?: (blob: Blob, duration?: number) => void;
+}
+
+export function useAudioRecording({
+  maxDurationSeconds = 29,
+  onRecordingComplete,
+}: UseAudioRecordingOptions = {}) {
+  const platform = usePlatform();
+  const [isRecording, setIsRecording] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const streamRef = useRef<MediaStream | null>(null);
+  const timerRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const cancelledRef = useRef<boolean>(false);
+
+  const startRecording = useCallback(async () => {
+    try {
+      setError(null);
+      chunksRef.current = [];
+      cancelledRef.current = false;
+      setDuration(0);
+
+      // Check if getUserMedia is available
+      // In Tauri, navigator.mediaDevices might not be available immediately
+      if (typeof navigator === 'undefined') {
+        const errorMsg =
+          'Navigator API is not available. This might be a Tauri configuration issue.';
+        setError(errorMsg);
+        throw new Error(errorMsg);
+      }
+
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        // Try waiting a bit for Tauri webview to initialize
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+          console.error('MediaDevices check:', {
+            hasNavigator: typeof navigator !== 'undefined',
+            hasMediaDevices: !!navigator?.mediaDevices,
+            hasGetUserMedia: !!navigator?.mediaDevices?.getUserMedia,
+            isTauri: platform.metadata.isTauri,
+          });
+
+          const errorMsg = platform.metadata.isTauri
+            ? 'Microphone access is not available. Please ensure:\n1. The app has microphone permissions in System Settings (macOS: System Settings > Privacy & Security > Microphone)\n2. You restart the app after granting permissions\n3. You are using Tauri v2 with a webview that supports getUserMedia'
+            : 'Microphone access is not available. Please ensure you are using a secure context (HTTPS or localhost) and that your browser has microphone permissions enabled.';
+          setError(errorMsg);
+          throw new Error(errorMsg);
+        }
+      }
+
+      // Request microphone access
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+        },
+      });
+
+      streamRef.current = stream;
+
+      // Create MediaRecorder with preferred MIME type
+      const options: MediaRecorderOptions = {
+        mimeType: 'audio/webm;codecs=opus',
+      };
+
+      // Fallback to default if webm not supported
+      if (!MediaRecorder.isTypeSupported(options.mimeType!)) {
+        delete options.mimeType;
+      }
+
+      const mediaRecorder = new MediaRecorder(stream, options);
+      mediaRecorderRef.current = mediaRecorder;
+
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunksRef.current.push(event.data);
+        }
+      };
+
+      mediaRecorder.onstop = async () => {
+        // Snapshot the cancellation flag and recorded duration immediately —
+        // cancelRecording() clears chunks and sets cancelledRef synchronously
+        // before this async handler runs, so we must check it first.
+        const wasCancelled = cancelledRef.current;
+        const recordedDuration = startTimeRef.current
+          ? (Date.now() - startTimeRef.current) / 1000
+          : undefined;
+
+        const webmBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
+
+        // Stop all tracks now that we have the data
+        streamRef.current?.getTracks().forEach((track) => {
+          track.stop();
+        });
+        streamRef.current = null;
+
+        // Don't fire completion callback if the recording was cancelled
+        if (wasCancelled) return;
+
+        // Convert to WAV format to avoid needing ffmpeg on backend
+        try {
+          const wavBlob = await convertToWav(webmBlob);
+          onRecordingComplete?.(wavBlob, recordedDuration);
+        } catch (err) {
+          console.error('Error converting audio to WAV:', err);
+          // Fallback to original blob if conversion fails
+          onRecordingComplete?.(webmBlob, recordedDuration);
+        }
+      };
+
+      mediaRecorder.onerror = (event) => {
+        setError('Recording error occurred');
+        console.error('MediaRecorder error:', event);
+      };
+
+      // Start recording
+      mediaRecorder.start(100); // Collect data every 100ms
+      setIsRecording(true);
+      startTimeRef.current = Date.now();
+
+      // Start timer
+      timerRef.current = window.setInterval(() => {
+        if (startTimeRef.current) {
+          const elapsed = (Date.now() - startTimeRef.current) / 1000;
+          setDuration(elapsed);
+
+          // Auto-stop at max duration
+          if (elapsed >= maxDurationSeconds) {
+            if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+              mediaRecorderRef.current.stop();
+              setIsRecording(false);
+              if (timerRef.current !== null) {
+                clearInterval(timerRef.current);
+                timerRef.current = null;
+              }
+            }
+          }
+        }
+      }, 100);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : 'Failed to access microphone. Please check permissions.';
+      setError(errorMessage);
+      setIsRecording(false);
+    }
+  }, [maxDurationSeconds, onRecordingComplete]);
+
+  const stopRecording = useCallback(() => {
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    }
+  }, [isRecording]);
+
+  const cancelRecording = useCallback(() => {
+    if (mediaRecorderRef.current) {
+      cancelledRef.current = true; // Must be set before stop() triggers onstop
+      chunksRef.current = [];
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+      setDuration(0);
+    }
+
+    // Stop all tracks
+    streamRef.current?.getTracks().forEach((track) => {
+      track.stop();
+    });
+    streamRef.current = null;
+
+    if (timerRef.current !== null) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+      }
+      streamRef.current?.getTracks().forEach((track) => {
+        track.stop();
+      });
+    };
+  }, []);
+
+  return {
+    isRecording,
+    duration,
+    error,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+  };
+}

app/src/lib/hooks/useGeneration.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import type { GenerationRequest } from '@/lib/api/types';
+
+export function useGeneration() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: GenerationRequest) => apiClient.generateSpeech(data),
+    onSuccess: () => {
+      // Invalidate history to show new generation
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    },
+  });
+}

app/src/lib/hooks/useGenerationForm.ts

@@ -0,0 +1,188 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import type { EffectConfig } from '@/lib/api/types';
+import { LANGUAGE_CODES, type LanguageCode } from '@/lib/constants/languages';
+import { useGeneration } from '@/lib/hooks/useGeneration';
+import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
+import { useGenerationStore } from '@/stores/generationStore';
+import { useServerStore } from '@/stores/serverStore';
+import { useUIStore } from '@/stores/uiStore';
+
+const generationSchema = z.object({
+  text: z.string().min(1, '').max(50000),
+  language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
+  seed: z.number().int().optional(),
+  modelSize: z.enum(['1.7B', '0.6B', '1B', '3B']).optional(),
+  instruct: z.string().max(500).optional(),
+  engine: z
+    .enum([
+      'qwen',
+      'qwen_custom_voice',
+      'luxtts',
+      'chatterbox',
+      'chatterbox_turbo',
+      'tada',
+      'kokoro',
+    ])
+    .optional(),
+});
+
+export type GenerationFormValues = z.infer<typeof generationSchema>;
+
+interface UseGenerationFormOptions {
+  onSuccess?: (generationId: string) => void;
+  defaultValues?: Partial<GenerationFormValues>;
+  getEffectsChain?: () => EffectConfig[] | undefined;
+}
+
+export function useGenerationForm(options: UseGenerationFormOptions = {}) {
+  const { toast } = useToast();
+  const generation = useGeneration();
+  const addPendingGeneration = useGenerationStore((state) => state.addPendingGeneration);
+  const maxChunkChars = useServerStore((state) => state.maxChunkChars);
+  const crossfadeMs = useServerStore((state) => state.crossfadeMs);
+  const normalizeAudio = useServerStore((state) => state.normalizeAudio);
+  const selectedEngine = useUIStore((state) => state.selectedEngine);
+  const [downloadingModelName, setDownloadingModelName] = useState<string | null>(null);
+  const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
+
+  useModelDownloadToast({
+    modelName: downloadingModelName || '',
+    displayName: downloadingDisplayName || '',
+    enabled: !!downloadingModelName,
+  });
+
+  const form = useForm<GenerationFormValues>({
+    resolver: zodResolver(generationSchema),
+    defaultValues: {
+      text: '',
+      language: 'en',
+      seed: undefined,
+      modelSize: '1.7B',
+      instruct: '',
+      engine: (selectedEngine as GenerationFormValues['engine']) || 'qwen',
+      ...options.defaultValues,
+    },
+  });
+
+  async function handleSubmit(
+    data: GenerationFormValues,
+    selectedProfileId: string | null,
+  ): Promise<void> {
+    if (!selectedProfileId) {
+      toast({
+        title: 'No profile selected',
+        description: 'Please select a voice profile from the cards above.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      const engine = data.engine || 'qwen';
+      const modelName =
+        engine === 'luxtts'
+          ? 'luxtts'
+          : engine === 'chatterbox'
+            ? 'chatterbox-tts'
+            : engine === 'chatterbox_turbo'
+              ? 'chatterbox-turbo'
+              : engine === 'tada'
+                ? data.modelSize === '3B'
+                  ? 'tada-3b-ml'
+                  : 'tada-1b'
+                : engine === 'kokoro'
+                  ? 'kokoro'
+                  : engine === 'qwen_custom_voice'
+                    ? `qwen-custom-voice-${data.modelSize}`
+                    : `qwen-tts-${data.modelSize}`;
+      const displayName =
+        engine === 'luxtts'
+          ? 'LuxTTS'
+          : engine === 'chatterbox'
+            ? 'Chatterbox TTS'
+            : engine === 'chatterbox_turbo'
+              ? 'Chatterbox Turbo'
+              : engine === 'tada'
+                ? data.modelSize === '3B'
+                  ? 'TADA 3B Multilingual'
+                  : 'TADA 1B'
+                : engine === 'kokoro'
+                  ? 'Kokoro 82M'
+                  : engine === 'qwen_custom_voice'
+                    ? data.modelSize === '1.7B'
+                      ? 'Qwen CustomVoice 1.7B'
+                      : 'Qwen CustomVoice 0.6B'
+                    : data.modelSize === '1.7B'
+                      ? 'Qwen TTS 1.7B'
+                      : 'Qwen TTS 0.6B';
+
+      // Check if model needs downloading
+      try {
+        const modelStatus = await apiClient.getModelStatus();
+        const model = modelStatus.models.find((m) => m.model_name === modelName);
+
+        if (model && !model.downloaded) {
+          setDownloadingModelName(modelName);
+          setDownloadingDisplayName(displayName);
+        }
+      } catch (error) {
+        console.error('Failed to check model status:', error);
+      }
+
+      const hasModelSizes =
+        engine === 'qwen' || engine === 'qwen_custom_voice' || engine === 'tada';
+      // Only Qwen CustomVoice actually honors the instruct kwarg at model level.
+      // Base Qwen3-TTS accepts the kwarg but ignores it.
+      const supportsInstruct = engine === 'qwen_custom_voice';
+      const effectsChain = options.getEffectsChain?.();
+      // This now returns immediately with status="generating"
+      const result = await generation.mutateAsync({
+        profile_id: selectedProfileId,
+        text: data.text,
+        language: data.language,
+        seed: data.seed,
+        model_size: hasModelSizes ? data.modelSize : undefined,
+        engine,
+        instruct: supportsInstruct ? data.instruct || undefined : undefined,
+        max_chunk_chars: maxChunkChars,
+        crossfade_ms: crossfadeMs,
+        normalize: normalizeAudio,
+        effects_chain: effectsChain?.length ? effectsChain : undefined,
+      });
+
+      // Track this generation for SSE status updates
+      addPendingGeneration(result.id);
+
+      // Reset form immediately — user can start typing again
+      form.reset({
+        text: '',
+        language: data.language,
+        seed: undefined,
+        modelSize: data.modelSize,
+        instruct: '',
+        engine: data.engine,
+      });
+      options.onSuccess?.(result.id);
+    } catch (error) {
+      toast({
+        title: 'Generation failed',
+        description: error instanceof Error ? error.message : 'Failed to generate audio',
+        variant: 'destructive',
+      });
+    } finally {
+      setDownloadingModelName(null);
+      setDownloadingDisplayName(null);
+    }
+  }
+
+  return {
+    form,
+    handleSubmit,
+    isPending: generation.isPending,
+  };
+}

app/src/lib/hooks/useGenerationProgress.ts

@@ -0,0 +1,155 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import { useGenerationStore } from '@/stores/generationStore';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useServerStore } from '@/stores/serverStore';
+
+interface GenerationStatusEvent {
+  id: string;
+  status: 'loading_model' | 'generating' | 'completed' | 'failed' | 'not_found';
+  duration?: number;
+  error?: string;
+}
+
+/**
+ * Subscribes to SSE for all pending generations. When a generation completes,
+ * invalidates the history query, removes it from pending, and auto-plays
+ * if the player is idle.
+ */
+export function useGenerationProgress() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const pendingIds = useGenerationStore((s) => s.pendingGenerationIds);
+  const removePendingGeneration = useGenerationStore((s) => s.removePendingGeneration);
+  const removePendingStoryAdd = useGenerationStore((s) => s.removePendingStoryAdd);
+  const isPlaying = usePlayerStore((s) => s.isPlaying);
+  const setAudioWithAutoPlay = usePlayerStore((s) => s.setAudioWithAutoPlay);
+  const autoplayOnGenerate = useServerStore((s) => s.autoplayOnGenerate);
+
+  // Keep refs to avoid stale closures in EventSource handlers
+  const isPlayingRef = useRef(isPlaying);
+  const autoplayRef = useRef(autoplayOnGenerate);
+  isPlayingRef.current = isPlaying;
+  autoplayRef.current = autoplayOnGenerate;
+
+  // Track active EventSource instances
+  const eventSourcesRef = useRef<Map<string, EventSource>>(new Map());
+
+  // Unmount-only cleanup — close all SSE connections when the hook is torn down
+  useEffect(() => {
+    const sources = eventSourcesRef.current;
+    return () => {
+      for (const source of sources.values()) {
+        source.close();
+      }
+      sources.clear();
+    };
+  }, []);
+
+  useEffect(() => {
+    const currentSources = eventSourcesRef.current;
+
+    // Close SSE connections for IDs no longer pending
+    for (const [id, source] of currentSources.entries()) {
+      if (!pendingIds.has(id)) {
+        source.close();
+        currentSources.delete(id);
+      }
+    }
+
+    // Open SSE connections for new pending IDs
+    for (const id of pendingIds) {
+      if (currentSources.has(id)) continue;
+
+      const url = apiClient.getGenerationStatusUrl(id);
+      const source = new EventSource(url);
+
+      source.onmessage = (event) => {
+        try {
+          const data: GenerationStatusEvent = JSON.parse(event.data);
+
+          if (data.status === 'completed') {
+            source.close();
+            currentSources.delete(id);
+            removePendingGeneration(id);
+
+            // Refetch history to pick up the completed generation
+            queryClient.refetchQueries({ queryKey: ['history'] });
+
+            // If this generation was queued for a story, add it now
+            const storyId = removePendingStoryAdd(id);
+            if (storyId) {
+              apiClient
+                .addStoryItem(storyId, { generation_id: id })
+                .then(() => {
+                  queryClient.invalidateQueries({ queryKey: ['stories'] });
+                  queryClient.invalidateQueries({ queryKey: ['stories', storyId] });
+                  toast({
+                    title: 'Added to story',
+                    description: data.duration
+                      ? `Audio generated (${data.duration.toFixed(2)}s) and added to story`
+                      : 'Audio generated and added to story',
+                  });
+                })
+                .catch(() => {
+                  toast({
+                    title: 'Generation complete',
+                    description: 'Audio generated but failed to add to story',
+                    variant: 'destructive',
+                  });
+                });
+            } else {
+              // toast({
+              //   title: 'Generation complete!',
+              //   description: data.duration
+              //     ? `Audio generated (${data.duration.toFixed(2)}s)`
+              //     : 'Audio generated',
+              // });
+            }
+
+            // Auto-play if enabled and nothing is currently playing
+            if (autoplayRef.current && !isPlayingRef.current) {
+              const genAudioUrl = apiClient.getAudioUrl(id);
+              setAudioWithAutoPlay(genAudioUrl, id, '', '');
+            }
+          } else if (data.status === 'failed' || data.status === 'not_found') {
+            source.close();
+            currentSources.delete(id);
+            removePendingGeneration(id);
+            removePendingStoryAdd(id);
+
+            queryClient.refetchQueries({ queryKey: ['history'] });
+
+            toast({
+              title: data.status === 'not_found' ? 'Generation not found' : 'Generation failed',
+              description: data.error || 'An error occurred during generation',
+              variant: 'destructive',
+            });
+          }
+        } catch {
+          // Ignore parse errors from heartbeats etc
+        }
+      };
+
+      source.onerror = () => {
+        // SSE connection dropped — clean up and refresh history so any
+        // completed/failed generation still appears in the list
+        source.close();
+        currentSources.delete(id);
+        removePendingGeneration(id);
+        queryClient.refetchQueries({ queryKey: ['history'] });
+      };
+
+      currentSources.set(id, source);
+    }
+  }, [
+    pendingIds,
+    removePendingGeneration,
+    removePendingStoryAdd,
+    queryClient,
+    toast,
+    setAudioWithAutoPlay,
+  ]);
+}

app/src/lib/hooks/useHistory.ts

@@ -0,0 +1,104 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import type { HistoryQuery } from '@/lib/api/types';
+import { usePlatform } from '@/platform/PlatformContext';
+
+export function useHistory(query?: HistoryQuery) {
+  return useQuery({
+    queryKey: ['history', query],
+    queryFn: () => apiClient.listHistory(query),
+  });
+}
+
+export function useGenerationDetail(generationId: string) {
+  return useQuery({
+    queryKey: ['history', generationId],
+    queryFn: () => apiClient.getGeneration(generationId),
+    enabled: !!generationId,
+  });
+}
+
+export function useDeleteGeneration() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (generationId: string) => apiClient.deleteGeneration(generationId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    },
+  });
+}
+
+export function useClearFailedGenerations() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => apiClient.clearFailedGenerations(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    },
+  });
+}
+
+export function useExportGeneration() {
+  const platform = usePlatform();
+
+  return useMutation({
+    mutationFn: async ({ generationId, text }: { generationId: string; text: string }) => {
+      const blob = await apiClient.exportGeneration(generationId);
+
+      // Create safe filename from text
+      const safeText = text
+        .substring(0, 30)
+        .replace(/[^a-z0-9]/gi, '-')
+        .toLowerCase();
+      const filename = `generation-${safeText}.voicebox.zip`;
+
+      await platform.filesystem.saveFile(filename, blob, [
+        {
+          name: 'Voicebox Generation',
+          extensions: ['zip'],
+        },
+      ]);
+
+      return blob;
+    },
+  });
+}
+
+export function useExportGenerationAudio() {
+  const platform = usePlatform();
+
+  return useMutation({
+    mutationFn: async ({ generationId, text }: { generationId: string; text: string }) => {
+      const blob = await apiClient.exportGenerationAudio(generationId);
+
+      // Create safe filename from text
+      const safeText = text
+        .substring(0, 30)
+        .replace(/[^a-z0-9]/gi, '-')
+        .toLowerCase();
+      const filename = `${safeText}.wav`;
+
+      await platform.filesystem.saveFile(filename, blob, [
+        {
+          name: 'Audio File',
+          extensions: ['wav'],
+        },
+      ]);
+
+      return blob;
+    },
+  });
+}
+
+export function useImportGeneration() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (file: File) => apiClient.importGeneration(file),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    },
+  });
+}

app/src/lib/hooks/useModelDownloadToast.tsx

@@ -0,0 +1,216 @@
+import { CheckCircle2, Loader2, XCircle } from 'lucide-react';
+import { useCallback, useEffect, useRef } from 'react';
+import { Progress } from '@/components/ui/progress';
+import { useToast } from '@/components/ui/use-toast';
+import type { ModelProgress } from '@/lib/api/types';
+import { useServerStore } from '@/stores/serverStore';
+
+interface UseModelDownloadToastOptions {
+  modelName: string;
+  displayName: string;
+  enabled?: boolean;
+  onComplete?: () => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * Hook to show and update a toast notification with model download progress.
+ * Subscribes to Server-Sent Events for real-time progress updates.
+ */
+export function useModelDownloadToast({
+  modelName,
+  displayName,
+  enabled = false,
+  onComplete,
+  onError,
+}: UseModelDownloadToastOptions) {
+  const { toast } = useToast();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const toastIdRef = useRef<string | null>(null);
+  // biome-ignore lint: Using any for toast update ref to handle complex toast types
+  const toastUpdateRef = useRef<any>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  const formatBytes = useCallback((bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
+  }, []);
+
+  useEffect(() => {
+    console.log('[useModelDownloadToast] useEffect triggered', {
+      enabled,
+      serverUrl,
+      modelName,
+      displayName,
+    });
+
+    if (!enabled || !serverUrl || !modelName) {
+      console.log('[useModelDownloadToast] Not enabled, skipping');
+      return;
+    }
+
+    console.log('[useModelDownloadToast] Creating toast and EventSource for:', modelName);
+
+    // Create initial toast
+    const toastResult = toast({
+      title: displayName,
+      description: (
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span>Connecting to download...</span>
+        </div>
+      ),
+      duration: Infinity, // Don't auto-dismiss, we'll handle it manually
+    });
+    toastIdRef.current = toastResult.id;
+    toastUpdateRef.current = toastResult.update;
+
+    // Subscribe to progress updates via Server-Sent Events
+    const eventSourceUrl = `${serverUrl}/models/progress/${modelName}`;
+    console.log('[useModelDownloadToast] Creating EventSource to:', eventSourceUrl);
+    const eventSource = new EventSource(eventSourceUrl);
+
+    eventSource.onopen = () => {
+      console.log('[useModelDownloadToast] EventSource connection opened for:', modelName);
+    };
+
+    eventSource.onmessage = (event) => {
+      console.log('[useModelDownloadToast] Received SSE message:', event.data);
+      try {
+        const progress = JSON.parse(event.data) as ModelProgress;
+
+        // Update toast with progress
+        if (toastIdRef.current && toastUpdateRef.current) {
+          const progressPercent = progress.total > 0 ? progress.progress : 0;
+          const progressText =
+            progress.total > 0
+              ? `${formatBytes(progress.current)} / ${formatBytes(progress.total)} (${progress.progress.toFixed(1)}%)`
+              : '';
+
+          // Determine status icon and text
+          let statusIcon: React.ReactNode = null;
+          let statusText = 'Processing...';
+
+          switch (progress.status) {
+            case 'complete':
+              statusIcon = <CheckCircle2 className="h-4 w-4 text-green-500" />;
+              statusText = 'Download complete';
+              break;
+            case 'error':
+              statusIcon = <XCircle className="h-4 w-4 text-destructive" />;
+              statusText = 'Download failed. See Problems panel for details.';
+              break;
+            case 'downloading':
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
+              statusText = progress.filename || 'Downloading...';
+              break;
+            case 'extracting':
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
+              statusText = 'Extracting...';
+              break;
+          }
+
+          toastUpdateRef.current({
+            title: (
+              <div className="flex items-center gap-2">
+                {statusIcon}
+                <span>{displayName}</span>
+              </div>
+            ),
+            description: (
+              <div className="space-y-2">
+                <div className="text-sm">{statusText}</div>
+                {progress.total > 0 && (
+                  <>
+                    <Progress value={progressPercent} className="h-2" />
+                    <div className="text-xs text-muted-foreground">{progressText}</div>
+                  </>
+                )}
+              </div>
+            ),
+            duration:
+              progress.status === 'complete' || progress.status === 'error' ? 5000 : Infinity,
+          });
+
+          // Close connection and dismiss toast on completion or error
+          // Also treat progress >= 100% as complete
+          const isComplete = progress.status === 'complete' || progress.progress >= 100;
+          const isError = progress.status === 'error';
+
+          if (isComplete || isError) {
+            console.log('[useModelDownloadToast] Download finished:', {
+              isComplete,
+              isError,
+              progress: progress.progress,
+            });
+            eventSource.close();
+            eventSourceRef.current = null;
+
+            // Update toast to show completion state before callbacks
+            if (isComplete && toastUpdateRef.current) {
+              toastUpdateRef.current({
+                title: (
+                  <div className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                    <span>{displayName}</span>
+                  </div>
+                ),
+                description: 'Download complete',
+                duration: 3000,
+              });
+            }
+
+            // Call callbacks
+            if (isComplete && onComplete) {
+              console.log('[useModelDownloadToast] Download complete, calling onComplete callback');
+              onComplete();
+            } else if (isError && onError) {
+              console.log('[useModelDownloadToast] Download error, calling onError callback');
+              onError(progress.error || 'Unknown error');
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Error parsing progress event:', error);
+      }
+    };
+
+    eventSource.onerror = (error) => {
+      console.error('[useModelDownloadToast] SSE error for:', modelName, error);
+      console.log('[useModelDownloadToast] EventSource readyState:', eventSource.readyState);
+      eventSource.close();
+      eventSourceRef.current = null;
+
+      // Show error toast
+      if (toastIdRef.current && toastUpdateRef.current) {
+        toastUpdateRef.current({
+          title: displayName,
+          description: 'Failed to track download progress',
+          variant: 'destructive',
+          duration: 5000,
+        });
+        toastIdRef.current = null;
+        toastUpdateRef.current = null;
+      }
+    };
+
+    eventSourceRef.current = eventSource;
+
+    // Cleanup on unmount or when disabled
+    return () => {
+      console.log('[useModelDownloadToast] Cleanup - closing EventSource for:', modelName);
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      // Note: We don't dismiss the toast here as it might still be showing completion state
+    };
+  }, [enabled, serverUrl, modelName, displayName, toast, formatBytes, onComplete, onError]);
+
+  return {
+    isTracking: enabled && eventSourceRef.current !== null,
+  };
+}

app/src/lib/hooks/useProfiles.ts

@@ -0,0 +1,181 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import type { VoiceProfileCreate } from '@/lib/api/types';
+import { usePlatform } from '@/platform/PlatformContext';
+
+export function useProfiles() {
+  return useQuery({
+    queryKey: ['profiles'],
+    queryFn: () => apiClient.listProfiles(),
+  });
+}
+
+export function useProfile(profileId: string) {
+  return useQuery({
+    queryKey: ['profiles', profileId],
+    queryFn: () => apiClient.getProfile(profileId),
+    enabled: !!profileId,
+  });
+}
+
+export function useCreateProfile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: VoiceProfileCreate) => apiClient.createProfile(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+    },
+  });
+}
+
+export function useUpdateProfile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ profileId, data }: { profileId: string; data: VoiceProfileCreate }) =>
+      apiClient.updateProfile(profileId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+      queryClient.invalidateQueries({
+        queryKey: ['profiles', variables.profileId],
+      });
+    },
+  });
+}
+
+export function useDeleteProfile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (profileId: string) => apiClient.deleteProfile(profileId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+    },
+  });
+}
+
+export function useProfileSamples(profileId: string) {
+  return useQuery({
+    queryKey: ['profiles', profileId, 'samples'],
+    queryFn: () => apiClient.listProfileSamples(profileId),
+    enabled: !!profileId,
+  });
+}
+
+export function useAddSample() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      profileId,
+      file,
+      referenceText,
+    }: {
+      profileId: string;
+      file: File;
+      referenceText: string;
+    }) => apiClient.addProfileSample(profileId, file, referenceText),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['profiles', variables.profileId, 'samples'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['profiles', variables.profileId],
+      });
+    },
+  });
+}
+
+export function useDeleteSample() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (sampleId: string) => apiClient.deleteProfileSample(sampleId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+    },
+  });
+}
+
+export function useUpdateSample() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ sampleId, referenceText }: { sampleId: string; referenceText: string }) =>
+      apiClient.updateProfileSample(sampleId, referenceText),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: ['profiles', data.profile_id, 'samples'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['profiles', data.profile_id],
+      });
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+    },
+  });
+}
+
+export function useExportProfile() {
+  const platform = usePlatform();
+
+  return useMutation({
+    mutationFn: async (profileId: string) => {
+      const blob = await apiClient.exportProfile(profileId);
+
+      // Get profile name for filename
+      const profile = await apiClient.getProfile(profileId);
+      const safeName = profile.name.replace(/[^a-z0-9]/gi, '-').toLowerCase();
+      const filename = `profile-${safeName}.voicebox.zip`;
+
+      await platform.filesystem.saveFile(filename, blob, [
+        {
+          name: 'Voicebox Profile',
+          extensions: ['zip'],
+        },
+      ]);
+
+      return blob;
+    },
+  });
+}
+
+export function useImportProfile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (file: File) => apiClient.importProfile(file),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+    },
+  });
+}
+
+export function useUploadAvatar() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ profileId, file }: { profileId: string; file: File }) =>
+      apiClient.uploadAvatar(profileId, file),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+      queryClient.invalidateQueries({
+        queryKey: ['profiles', variables.profileId],
+      });
+    },
+  });
+}
+
+export function useDeleteAvatar() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (profileId: string) => apiClient.deleteAvatar(profileId),
+    onSuccess: (_, profileId) => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+      queryClient.invalidateQueries({
+        queryKey: ['profiles', profileId],
+      });
+    },
+  });
+}

app/src/lib/hooks/useRestoreActiveTasks.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { apiClient } from '@/lib/api/client';
+import type { ActiveDownloadTask } from '@/lib/api/types';
+import { useGenerationStore } from '@/stores/generationStore';
+
+// Polling interval in milliseconds
+const POLL_INTERVAL = 30000;
+
+/**
+ * Hook to monitor active tasks (downloads and generations).
+ * Polls the server periodically to catch downloads triggered from anywhere
+ * (transcription, generation, explicit download, etc.).
+ *
+ * Returns the active downloads so components can render download toasts.
+ */
+export function useRestoreActiveTasks() {
+  const [activeDownloads, setActiveDownloads] = useState<ActiveDownloadTask[]>([]);
+  const setActiveGenerationId = useGenerationStore((state) => state.setActiveGenerationId);
+  const addPendingGeneration = useGenerationStore((state) => state.addPendingGeneration);
+
+  // Track which downloads we've seen to detect new ones
+  const seenDownloadsRef = useRef<Set<string>>(new Set());
+
+  const fetchActiveTasks = useCallback(async () => {
+    try {
+      const tasks = await apiClient.getActiveTasks();
+
+      // Restore pending generations (e.g., after page refresh)
+      if (tasks.generations.length > 0) {
+        setActiveGenerationId(tasks.generations[0].task_id);
+        for (const gen of tasks.generations) {
+          addPendingGeneration(gen.task_id);
+        }
+      } else {
+        const currentId = useGenerationStore.getState().activeGenerationId;
+        if (currentId) {
+          setActiveGenerationId(null);
+        }
+      }
+
+      // Update active downloads
+      // Keep track of all active downloads (including new ones)
+      const currentDownloadNames = new Set(tasks.downloads.map((d) => d.model_name));
+
+      // Remove completed downloads from our seen set
+      for (const name of seenDownloadsRef.current) {
+        if (!currentDownloadNames.has(name)) {
+          seenDownloadsRef.current.delete(name);
+        }
+      }
+
+      // Add new downloads to seen set
+      for (const download of tasks.downloads) {
+        seenDownloadsRef.current.add(download.model_name);
+      }
+
+      setActiveDownloads(tasks.downloads);
+    } catch (error) {
+      // Silently fail - server might be temporarily unavailable
+      console.debug('Failed to fetch active tasks:', error);
+    }
+  }, [setActiveGenerationId, addPendingGeneration]);
+
+  useEffect(() => {
+    // Fetch immediately on mount
+    fetchActiveTasks();
+
+    // Poll for active tasks
+    const interval = setInterval(fetchActiveTasks, POLL_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [fetchActiveTasks]);
+
+  return activeDownloads;
+}
+
+/**
+ * Map model names to display names for download toasts.
+ */
+export const MODEL_DISPLAY_NAMES: Record<string, string> = {
+  'qwen-tts-1.7B': 'Qwen TTS 1.7B',
+  'qwen-tts-0.6B': 'Qwen TTS 0.6B',
+  'whisper-base': 'Whisper Base',
+  'whisper-small': 'Whisper Small',
+  'whisper-medium': 'Whisper Medium',
+  'whisper-large': 'Whisper Large',
+};

app/src/lib/hooks/useServer.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import { useServerStore } from '@/stores/serverStore';
+
+export function useServerHealth() {
+  const serverUrl = useServerStore((state) => state.serverUrl);
+
+  return useQuery({
+    queryKey: ['server', 'health', serverUrl],
+    queryFn: () => apiClient.getHealth(),
+    refetchInterval: 30000, // Check every 30 seconds
+    retry: 1,
+  });
+}

app/src/lib/hooks/useStories.ts

@@ -0,0 +1,234 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import type {
+  StoryCreate,
+  StoryItemBatchUpdate,
+  StoryItemCreate,
+  StoryItemMove,
+  StoryItemReorder,
+  StoryItemSplit,
+  StoryItemTrim,
+  StoryItemVersionUpdate,
+} from '@/lib/api/types';
+import { usePlatform } from '@/platform/PlatformContext';
+
+export function useStories() {
+  return useQuery({
+    queryKey: ['stories'],
+    queryFn: () => apiClient.listStories(),
+  });
+}
+
+export function useStory(storyId: string | null) {
+  return useQuery({
+    queryKey: ['stories', storyId],
+    queryFn: () => apiClient.getStory(storyId!),
+    enabled: !!storyId,
+  });
+}
+
+export function useCreateStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: StoryCreate) => apiClient.createStory(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+    },
+  });
+}
+
+export function useUpdateStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryCreate }) =>
+      apiClient.updateStory(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useDeleteStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (storyId: string) => apiClient.deleteStory(storyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+    },
+  });
+}
+
+export function useAddStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemCreate }) =>
+      apiClient.addStoryItem(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useRemoveStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, itemId }: { storyId: string; itemId: string }) =>
+      apiClient.removeStoryItem(storyId, itemId),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useUpdateStoryItemTimes() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemBatchUpdate }) =>
+      apiClient.updateStoryItemTimes(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useReorderStoryItems() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemReorder }) =>
+      apiClient.reorderStoryItems(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useMoveStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemMove;
+    }) => apiClient.moveStoryItem(storyId, itemId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useTrimStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemTrim;
+    }) => apiClient.trimStoryItem(storyId, itemId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useSplitStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemSplit;
+    }) => apiClient.splitStoryItem(storyId, itemId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useDuplicateStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, itemId }: { storyId: string; itemId: string }) =>
+      apiClient.duplicateStoryItem(storyId, itemId),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useSetStoryItemVersion() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemVersionUpdate;
+    }) => apiClient.setStoryItemVersion(storyId, itemId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useExportStoryAudio() {
+  const platform = usePlatform();
+
+  return useMutation({
+    mutationFn: async ({ storyId, storyName }: { storyId: string; storyName: string }) => {
+      const blob = await apiClient.exportStoryAudio(storyId);
+
+      // Create safe filename
+      const safeName = storyName
+        .substring(0, 50)
+        .replace(/[^a-z0-9]/gi, '-')
+        .toLowerCase();
+      const filename = `${safeName || 'story'}.wav`;
+
+      await platform.filesystem.saveFile(filename, blob, [
+        {
+          name: 'Audio File',
+          extensions: ['wav'],
+        },
+      ]);
+
+      return blob;
+    },
+  });
+}

app/src/lib/hooks/useStoryPlayback.ts

@@ -0,0 +1,401 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { apiClient } from '@/lib/api/client';
+import type { StoryItemDetail } from '@/lib/api/types';
+import { useStoryStore } from '@/stores/storyStore';
+
+interface ActiveSource {
+  source: AudioBufferSourceNode;
+  itemId: string;
+  generationId: string;
+  startTimeMs: number;
+  endTimeMs: number;
+}
+
+/**
+ * Hook for managing timecode-based story playback using Web Audio API.
+ * Supports multiple simultaneous audio sources for overlapping clips on different tracks.
+ * Uses AudioContext for sample-accurate timing synchronization.
+ */
+export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
+  const isPlaying = useStoryStore((state) => state.isPlaying);
+  const playbackItems = useStoryStore((state) => state.playbackItems);
+  const playbackStartContextTime = useStoryStore((state) => state.playbackStartContextTime);
+  const playbackStartStoryTime = useStoryStore((state) => state.playbackStartStoryTime);
+  const setPlaybackTiming = useStoryStore((state) => state.setPlaybackTiming);
+
+  // AudioContext instance (created once)
+  const audioContextRef = useRef<AudioContext | null>(null);
+  // Master gain for volume control
+  const masterGainRef = useRef<GainNode | null>(null);
+  // Preloaded AudioBuffers by generation_id (audio file is shared between split clips)
+  const audioBuffersRef = useRef<Map<string, AudioBuffer>>(new Map());
+  // Currently playing AudioBufferSourceNodes by item.id (unique per clip)
+  const activeSourcesRef = useRef<Map<string, ActiveSource>>(new Map());
+  // Animation frame for syncing visual playhead
+  const animationFrameRef = useRef<number | null>(null);
+
+  // Get or create AudioContext and audio graph
+  const getAudioContext = useCallback(() => {
+    if (!audioContextRef.current) {
+      audioContextRef.current = new AudioContext();
+      console.log(
+        '[StoryPlayback] Created AudioContext, sample rate:',
+        audioContextRef.current.sampleRate,
+      );
+
+      // Create master gain node for volume control
+      masterGainRef.current = audioContextRef.current.createGain();
+      masterGainRef.current.gain.value = 1;
+      masterGainRef.current.connect(audioContextRef.current.destination);
+    }
+    // Resume context if suspended (browser autoplay policy)
+    if (audioContextRef.current.state === 'suspended') {
+      audioContextRef.current.resume().catch(() => {
+        // Ignore resume errors
+      });
+    }
+    return audioContextRef.current;
+  }, []);
+
+  // Stop a source by item id
+  const stopSource = useCallback((itemId: string) => {
+    const activeSource = activeSourcesRef.current.get(itemId);
+    if (activeSource) {
+      try {
+        activeSource.source.stop();
+      } catch {
+        // Source may have already stopped
+      }
+      activeSourcesRef.current.delete(itemId);
+    }
+  }, []);
+
+  // Resolve the audio buffer key and URL for an item.
+  // When a version_id is pinned, use that version's audio; otherwise use the generation default.
+  const getAudioKey = (item: StoryItemDetail) =>
+    item.version_id ? `v:${item.version_id}` : item.generation_id;
+
+  const getAudioUrlForItem = (item: StoryItemDetail) =>
+    item.version_id
+      ? apiClient.getVersionAudioUrl(item.version_id)
+      : apiClient.getAudioUrl(item.generation_id);
+
+  // Preload audio files as AudioBuffers
+  useEffect(() => {
+    if (!items || items.length === 0) {
+      // Clear preloaded buffers when no items
+      audioBuffersRef.current.clear();
+      return;
+    }
+
+    const currentKeys = new Set(items.map(getAudioKey));
+    const audioContext = getAudioContext();
+
+    // Remove buffers for items that no longer exist
+    for (const [id] of audioBuffersRef.current) {
+      if (!currentKeys.has(id)) {
+        audioBuffersRef.current.delete(id);
+      }
+    }
+
+    // Preload audio for new items
+    const preloadPromises: Promise<void>[] = [];
+    for (const item of items) {
+      const key = getAudioKey(item);
+      if (!audioBuffersRef.current.has(key)) {
+        const audioUrl = getAudioUrlForItem(item);
+        console.log('[StoryPlayback] Preloading audio buffer:', key);
+
+        const preloadPromise = fetch(audioUrl)
+          .then((response) => response.arrayBuffer())
+          .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
+          .then((audioBuffer) => {
+            audioBuffersRef.current.set(key, audioBuffer);
+            console.log(
+              '[StoryPlayback] Preloaded buffer:',
+              key,
+              'duration:',
+              audioBuffer.duration,
+            );
+          })
+          .catch((err) => {
+            console.error('[StoryPlayback] Failed to preload audio:', key, err);
+          });
+
+        preloadPromises.push(preloadPromise);
+      }
+    }
+
+    Promise.all(preloadPromises).then(() => {
+      console.log('[StoryPlayback] Preloaded', audioBuffersRef.current.size, 'audio buffers');
+    });
+  }, [items, getAudioContext]);
+
+  // Cleanup AudioContext on unmount
+  useEffect(() => {
+    return () => {
+      // Stop all sources
+      for (const [itemId] of activeSourcesRef.current) {
+        stopSource(itemId);
+      }
+      activeSourcesRef.current.clear();
+
+      // Clean up audio graph
+      if (masterGainRef.current) {
+        masterGainRef.current.disconnect();
+        masterGainRef.current = null;
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
+        audioContextRef.current.close().catch(() => {
+          // Ignore errors when closing
+        });
+        audioContextRef.current = null;
+      }
+
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [stopSource]);
+
+  // Find ALL items that should be playing at a given story time
+  const findActiveItems = useCallback(
+    (storyTimeMs: number, itemList: StoryItemDetail[]): StoryItemDetail[] => {
+      return itemList.filter((item) => {
+        const itemStart = item.start_time_ms;
+        // Use effective duration (accounting for trims)
+        const trimStartMs = item.trim_start_ms || 0;
+        const trimEndMs = item.trim_end_ms || 0;
+        const effectiveDurationMs = item.duration * 1000 - trimStartMs - trimEndMs;
+        const itemEnd = item.start_time_ms + effectiveDurationMs;
+        return storyTimeMs >= itemStart && storyTimeMs < itemEnd;
+      });
+    },
+    [],
+  );
+
+  // Convert AudioContext time to story time (ms)
+  const contextTimeToStoryTime = useCallback(
+    (contextTime: number): number => {
+      if (playbackStartContextTime === null || playbackStartStoryTime === null) {
+        return 0;
+      }
+      const elapsedContextTime = contextTime - playbackStartContextTime;
+      return playbackStartStoryTime + elapsedContextTime * 1000;
+    },
+    [playbackStartContextTime, playbackStartStoryTime],
+  );
+
+  // Convert story time (ms) to AudioContext time
+  const storyTimeToContextTime = useCallback(
+    (storyTimeMs: number): number => {
+      if (playbackStartContextTime === null || playbackStartStoryTime === null) {
+        return 0;
+      }
+      const elapsedStoryTime = (storyTimeMs - playbackStartStoryTime) / 1000;
+      return playbackStartContextTime + elapsedStoryTime;
+    },
+    [playbackStartContextTime, playbackStartStoryTime],
+  );
+
+  // Stop all sources
+  const stopAllSources = useCallback(() => {
+    console.log('[StoryPlayback] Stopping all sources');
+    for (const [itemId] of activeSourcesRef.current) {
+      stopSource(itemId);
+    }
+    activeSourcesRef.current.clear();
+  }, [stopSource]);
+
+  // Schedule playback for all items that should be playing
+  const schedulePlayback = useCallback(
+    (storyTimeMs: number, itemList: StoryItemDetail[]) => {
+      const audioContext = getAudioContext();
+      const currentContextTime = audioContext.currentTime;
+
+      // Find all items that should be playing
+      const shouldBePlaying = findActiveItems(storyTimeMs, itemList);
+      const shouldBePlayingIds = new Set(shouldBePlaying.map((item) => item.id));
+
+      // Stop sources that shouldn't be playing anymore
+      for (const [itemId] of activeSourcesRef.current) {
+        if (!shouldBePlayingIds.has(itemId)) {
+          stopSource(itemId);
+        }
+      }
+
+      // Schedule new sources for items that should be playing
+      for (const item of shouldBePlaying) {
+        if (!activeSourcesRef.current.has(item.id)) {
+          const bufferKey = getAudioKey(item);
+          const buffer = audioBuffersRef.current.get(bufferKey);
+          if (!buffer) {
+            console.warn('[StoryPlayback] Buffer not loaded for:', bufferKey);
+            continue;
+          }
+
+          // Calculate when this item should start in AudioContext time
+          const itemStartContextTime = storyTimeToContextTime(item.start_time_ms);
+
+          // Calculate effective duration and trim offsets
+          const trimStartSec = (item.trim_start_ms || 0) / 1000;
+          const trimEndSec = (item.trim_end_ms || 0) / 1000;
+          const effectiveDuration = item.duration - trimStartSec - trimEndSec;
+          const itemEndStoryTime = item.start_time_ms + effectiveDuration * 1000;
+
+          // Calculate offset into the buffer (if seeking mid-way)
+          // Offset is relative to the trimmed start of the clip
+          const offsetIntoEffectiveClip = Math.max(0, (storyTimeMs - item.start_time_ms) / 1000);
+          const offsetIntoBuffer = trimStartSec + offsetIntoEffectiveClip;
+          const duration = effectiveDuration - offsetIntoEffectiveClip;
+
+          // If the item should have already started, schedule it to start immediately
+          const startAtContextTime = Math.max(currentContextTime, itemStartContextTime);
+
+          console.log('[StoryPlayback] Scheduling source:', {
+            itemId: item.id,
+            generationId: item.generation_id,
+            storyTimeMs,
+            itemStart: item.start_time_ms,
+            offsetIntoBuffer,
+            startAtContextTime,
+            duration,
+          });
+
+          const source = audioContext.createBufferSource();
+          source.buffer = buffer;
+          source.connect(masterGainRef.current || audioContext.destination);
+
+          const activeSource: ActiveSource = {
+            source,
+            itemId: item.id,
+            generationId: item.generation_id,
+            startTimeMs: item.start_time_ms,
+            endTimeMs: itemEndStoryTime,
+          };
+
+          activeSourcesRef.current.set(item.id, activeSource);
+
+          // Schedule playback
+          source.start(startAtContextTime, offsetIntoBuffer, duration);
+
+          // Clean up when source ends
+          source.onended = () => {
+            console.log('[StoryPlayback] Source ended:', item.id);
+            activeSourcesRef.current.delete(item.id);
+          };
+        }
+      }
+    },
+    [getAudioContext, findActiveItems, storyTimeToContextTime, stopSource],
+  );
+
+  // Sync visual playhead from AudioContext time
+  useEffect(() => {
+    if (!isPlaying || playbackStartContextTime === null || playbackStartStoryTime === null) {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      return;
+    }
+
+    const audioContext = getAudioContext();
+    const itemList = playbackItems || [];
+
+    const syncPlayhead = () => {
+      if (!useStoryStore.getState().isPlaying) {
+        return;
+      }
+
+      const currentContextTime = audioContext.currentTime;
+      const currentStoryTime = contextTimeToStoryTime(currentContextTime);
+      const totalDuration = useStoryStore.getState().totalDurationMs;
+
+      // Update store with current story time
+      useStoryStore.setState({ currentTimeMs: Math.min(currentStoryTime, totalDuration) });
+
+      // Schedule any items that should be playing
+      schedulePlayback(currentStoryTime, itemList);
+
+      // Check if we've reached the end
+      if (currentStoryTime >= totalDuration) {
+        // Check if all sources have ended
+        if (activeSourcesRef.current.size === 0) {
+          console.log('[StoryPlayback] Reached end');
+          useStoryStore.getState().stop();
+          return;
+        }
+      }
+
+      // Continue sync loop
+      animationFrameRef.current = requestAnimationFrame(syncPlayhead);
+    };
+
+    // Initial sync
+    const currentContextTime = audioContext.currentTime;
+    const currentStoryTime = contextTimeToStoryTime(currentContextTime);
+    schedulePlayback(currentStoryTime, itemList);
+
+    // Start sync loop
+    animationFrameRef.current = requestAnimationFrame(syncPlayhead);
+
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [
+    isPlaying,
+    playbackItems,
+    playbackStartContextTime,
+    playbackStartStoryTime,
+    getAudioContext,
+    contextTimeToStoryTime,
+    schedulePlayback,
+  ]);
+
+  // Handle play/pause changes - stop sources when paused
+  useEffect(() => {
+    if (!isPlaying) {
+      console.log('[StoryPlayback] Stopping playback');
+      stopAllSources();
+    }
+  }, [isPlaying, stopAllSources]);
+
+  // Handle seek - reset timing anchors when they become null (triggered by seek)
+  useEffect(() => {
+    if (!isPlaying || !playbackItems || playbackItems.length === 0) {
+      return;
+    }
+
+    // Only run when timing anchors are null (after a seek)
+    if (playbackStartContextTime !== null && playbackStartStoryTime !== null) {
+      return;
+    }
+
+    const audioContext = getAudioContext();
+    const currentContextTime = audioContext.currentTime;
+    const currentStoryTime = useStoryStore.getState().currentTimeMs;
+
+    console.log('[StoryPlayback] Setting timing anchors after seek:', {
+      contextTime: currentContextTime,
+      storyTime: currentStoryTime,
+    });
+    setPlaybackTiming(currentContextTime, currentStoryTime);
+
+    // Stop all existing sources and reschedule from new position
+    stopAllSources();
+    schedulePlayback(currentStoryTime, playbackItems);
+  }, [
+    isPlaying,
+    playbackItems,
+    playbackStartContextTime,
+    playbackStartStoryTime,
+    getAudioContext,
+    stopAllSources,
+    schedulePlayback,
+    setPlaybackTiming,
+  ]);
+}

app/src/lib/hooks/useSystemAudioCapture.ts

@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePlatform } from '@/platform/PlatformContext';
+
+interface UseSystemAudioCaptureOptions {
+  maxDurationSeconds?: number;
+  onRecordingComplete?: (blob: Blob, duration?: number) => void;
+}
+
+/**
+ * Hook for native system audio capture using Tauri commands.
+ * Uses ScreenCaptureKit on macOS and WASAPI loopback on Windows.
+ */
+export function useSystemAudioCapture({
+  maxDurationSeconds = 29,
+  onRecordingComplete,
+}: UseSystemAudioCaptureOptions = {}) {
+  const platform = usePlatform();
+  const [isRecording, setIsRecording] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [isSupported, setIsSupported] = useState(false);
+  const timerRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const stopRecordingRef = useRef<(() => Promise<void>) | null>(null);
+  const isRecordingRef = useRef(false);
+
+  // Check if system audio capture is supported
+  useEffect(() => {
+    let isActive = true;
+
+    void platform.audio
+      .isSystemAudioSupported()
+      .then((supported) => {
+        if (isActive) {
+          setIsSupported(supported);
+        }
+      })
+      .catch(() => {
+        if (isActive) {
+          setIsSupported(false);
+        }
+      });
+
+    return () => {
+      isActive = false;
+    };
+  }, [platform]);
+
+  const startRecording = useCallback(async () => {
+    if (!platform.metadata.isTauri) {
+      const errorMsg = 'System audio capture is only available in the desktop app.';
+      setError(errorMsg);
+      return;
+    }
+
+    if (!isSupported) {
+      const errorMsg = 'System audio capture is not supported on this platform.';
+      setError(errorMsg);
+      return;
+    }
+
+    try {
+      setError(null);
+      setDuration(0);
+
+      // Start native capture
+      await platform.audio.startSystemAudioCapture(maxDurationSeconds);
+
+      setIsRecording(true);
+      isRecordingRef.current = true;
+      startTimeRef.current = Date.now();
+
+      // Start timer
+      timerRef.current = window.setInterval(() => {
+        if (startTimeRef.current) {
+          const elapsed = (Date.now() - startTimeRef.current) / 1000;
+          setDuration(elapsed);
+
+          // Auto-stop at max duration
+          if (elapsed >= maxDurationSeconds && stopRecordingRef.current) {
+            void stopRecordingRef.current();
+          }
+        }
+      }, 100);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : 'Failed to start system audio capture. Please check permissions.';
+      setError(errorMessage);
+      setIsRecording(false);
+    }
+  }, [maxDurationSeconds, isSupported, platform]);
+
+  const stopRecording = useCallback(async () => {
+    if (!isRecording || !platform.metadata.isTauri) {
+      return;
+    }
+
+    try {
+      setIsRecording(false);
+      isRecordingRef.current = false;
+
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+
+      // Stop capture and get Blob
+      const blob = await platform.audio.stopSystemAudioCapture();
+
+      // Pass the actual recorded duration
+      const recordedDuration = startTimeRef.current
+        ? (Date.now() - startTimeRef.current) / 1000
+        : undefined;
+      onRecordingComplete?.(blob, recordedDuration);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to stop system audio capture.';
+      setError(errorMessage);
+    }
+  }, [isRecording, onRecordingComplete, platform]);
+
+  // Store stopRecording in ref for use in timer
+  useEffect(() => {
+    stopRecordingRef.current = stopRecording;
+  }, [stopRecording]);
+
+  const cancelRecording = useCallback(async () => {
+    if (isRecordingRef.current) {
+      await stopRecording();
+    }
+
+    setIsRecording(false);
+    isRecordingRef.current = false;
+    setDuration(0);
+
+    if (timerRef.current !== null) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [stopRecording]);
+
+  // Cleanup on unmount only
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      // Cancel recording on unmount if still recording
+      if (isRecordingRef.current && platform.metadata.isTauri) {
+        // Call stop directly without the callback to avoid stale closure
+        platform.audio.stopSystemAudioCapture().catch((err) => {
+          console.error('Error stopping audio capture on unmount:', err);
+        });
+      }
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Only run on unmount
+  }, [platform]);
+
+  return {
+    isRecording,
+    duration,
+    error,
+    isSupported,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+  };
+}

app/src/lib/hooks/useTranscription.ts

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import type { WhisperModelSize } from '@/lib/api/types';
+import type { LanguageCode } from '@/lib/constants/languages';
+
+export function useTranscription() {
+  return useMutation({
+    mutationFn: ({
+      file,
+      language,
+      model,
+    }: {
+      file: File;
+      language?: LanguageCode;
+      model?: WhisperModelSize;
+    }) => apiClient.transcribeAudio(file, language, model),
+  });
+}

app/src/lib/queryClient.ts

@@ -0,0 +1,19 @@
+import { QueryClient } from '@tanstack/react-query';
+
+/**
+ * Shared QueryClient instance used across the app.
+ *
+ * Extracted into its own side-effect-free module so it can be imported from
+ * both the React bootstrap (main.tsx) and non-React code (stores, utilities)
+ * without pulling in ReactDOM or other bootstrap side effects.
+ */
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes (formerly cacheTime)
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

app/src/lib/utils/.gitkeep

@@ -0,0 +1 @@
+# Utility functions will be placed here

app/src/lib/utils/audio.ts

@@ -0,0 +1,172 @@
+export function createAudioUrl(audioId: string, serverUrl: string): string {
+  return `${serverUrl}/audio/${audioId}`;
+}
+
+export function downloadAudio(url: string, filename: string): void {
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+export function formatAudioDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Get audio duration from a File.
+ * If the file has a recordedDuration property (from recording hooks),
+ * use that instead of trying to read metadata. This fixes issues on Windows
+ * where WebM files from MediaRecorder don't have proper duration metadata.
+ *
+ * For uploaded files we use AudioContext.decodeAudioData which fully decodes
+ * the audio and returns the exact duration. This is more reliable than
+ * HTMLMediaElement.duration which can return incorrect large values for VBR
+ * MP3 files that lack a proper XING/VBRI header.
+ */
+export async function getAudioDuration(
+  file: File & { recordedDuration?: number },
+): Promise<number> {
+  if (file.recordedDuration !== undefined && Number.isFinite(file.recordedDuration)) {
+    return file.recordedDuration;
+  }
+
+  // Use Web Audio API for accurate duration — avoids VBR MP3 metadata issues.
+  try {
+    const audioContext = new AudioContext();
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      return audioBuffer.duration;
+    } finally {
+      await audioContext.close();
+    }
+  } catch {
+    // Fallback: read duration from the media element (less accurate but works for WAV).
+    return new Promise((resolve, reject) => {
+      const audio = new Audio();
+      const url = URL.createObjectURL(file);
+
+      audio.addEventListener('loadedmetadata', () => {
+        URL.revokeObjectURL(url);
+        if (Number.isFinite(audio.duration) && audio.duration > 0) {
+          resolve(audio.duration);
+        } else {
+          reject(new Error('Audio file has invalid duration metadata'));
+        }
+      });
+
+      audio.addEventListener('error', () => {
+        URL.revokeObjectURL(url);
+        reject(new Error('Failed to load audio file'));
+      });
+
+      audio.src = url;
+    });
+  }
+}
+
+/**
+ * Convert any audio blob to WAV format using Web Audio API.
+ * This ensures compatibility without requiring ffmpeg on the backend.
+ */
+export async function convertToWav(audioBlob: Blob): Promise<Blob> {
+  // Create audio context
+  const audioContext = new AudioContext();
+
+  // Read blob as array buffer
+  const arrayBuffer = await audioBlob.arrayBuffer();
+
+  // Decode audio data
+  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+  // Convert to WAV
+  const wavBlob = audioBufferToWav(audioBuffer);
+
+  // Close audio context to free resources
+  await audioContext.close();
+
+  return wavBlob;
+}
+
+/**
+ * Convert AudioBuffer to WAV blob.
+ */
+function audioBufferToWav(buffer: AudioBuffer): Blob {
+  const numberOfChannels = buffer.numberOfChannels;
+  const sampleRate = buffer.sampleRate;
+  const format = 1; // PCM
+  const bitDepth = 16;
+
+  const bytesPerSample = bitDepth / 8;
+  const blockAlign = numberOfChannels * bytesPerSample;
+
+  // Interleave channels
+  const interleaved = interleaveChannels(buffer);
+
+  // Create WAV file
+  const dataLength = interleaved.length * bytesPerSample;
+  const buffer2 = new ArrayBuffer(44 + dataLength);
+  const view = new DataView(buffer2);
+
+  // Write WAV header
+  writeString(view, 0, 'RIFF');
+  view.setUint32(4, 36 + dataLength, true);
+  writeString(view, 8, 'WAVE');
+  writeString(view, 12, 'fmt ');
+  view.setUint32(16, 16, true); // fmt chunk size
+  view.setUint16(20, format, true); // audio format (PCM)
+  view.setUint16(22, numberOfChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * blockAlign, true); // byte rate
+  view.setUint16(32, blockAlign, true);
+  view.setUint16(34, bitDepth, true);
+  writeString(view, 36, 'data');
+  view.setUint32(40, dataLength, true);
+
+  // Write audio data
+  floatTo16BitPCM(view, 44, interleaved);
+
+  return new Blob([buffer2], { type: 'audio/wav' });
+}
+
+/**
+ * Interleave multiple channels into a single array.
+ */
+function interleaveChannels(buffer: AudioBuffer): Float32Array {
+  const numberOfChannels = buffer.numberOfChannels;
+  const length = buffer.length;
+  const interleaved = new Float32Array(length * numberOfChannels);
+
+  for (let channel = 0; channel < numberOfChannels; channel++) {
+    const channelData = buffer.getChannelData(channel);
+    for (let i = 0; i < length; i++) {
+      interleaved[i * numberOfChannels + channel] = channelData[i];
+    }
+  }
+
+  return interleaved;
+}
+
+/**
+ * Write string to DataView.
+ */
+function writeString(view: DataView, offset: number, string: string): void {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+
+/**
+ * Convert float32 audio data to 16-bit PCM.
+ */
+function floatTo16BitPCM(view: DataView, offset: number, input: Float32Array): void {
+  for (let i = 0; i < input.length; i++, offset += 2) {
+    const s = Math.max(-1, Math.min(1, input[i]));
+    view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+  }
+}

app/src/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

app/src/lib/utils/debug.ts

@@ -0,0 +1,19 @@
+const DEBUG = import.meta.env.DEV;
+
+export const debug = {
+  log: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.log(...args);
+    }
+  },
+  error: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.error(...args);
+    }
+  },
+  warn: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.warn(...args);
+    }
+  },
+};

app/src/lib/utils/format.ts

@@ -0,0 +1,64 @@
+import { formatDistance } from 'date-fns';
+import { ja, zhCN, zhTW } from 'date-fns/locale';
+import i18n from '@/i18n';
+
+export function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+function getDateLocale() {
+  switch (i18n.language) {
+    case 'ja':
+      return ja;
+    case 'zh-CN':
+      return zhCN;
+    case 'zh-TW':
+      return zhTW;
+    default:
+      return undefined;
+  }
+}
+
+export function formatDate(date: string | Date): string {
+  let dateObj: Date;
+  if (typeof date === 'string') {
+    const dateStr = date.trim();
+    if (!dateStr.includes('Z') && !dateStr.match(/[+-]\d{2}:\d{2}$/)) {
+      dateObj = new Date(`${dateStr}Z`);
+    } else {
+      dateObj = new Date(dateStr);
+    }
+  } else {
+    dateObj = date;
+  }
+
+  return formatDistance(dateObj, new Date(), {
+    addSuffix: true,
+    locale: getDateLocale(),
+  }).replace(/^about /i, '');
+}
+
+const ENGINE_DISPLAY_NAMES: Record<string, string> = {
+  qwen: 'Qwen',
+  luxtts: 'LuxTTS',
+  chatterbox: 'Chatterbox',
+  chatterbox_turbo: 'Chatterbox Turbo',
+};
+
+export function formatEngineName(engine?: string, modelSize?: string): string {
+  const name = ENGINE_DISPLAY_NAMES[engine ?? 'qwen'] ?? engine ?? 'Qwen';
+  if (engine === 'qwen' && modelSize) {
+    return `${name} ${modelSize}`;
+  }
+  return name;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
+}

app/src/lib/utils/parseChangelog.ts

@@ -0,0 +1,37 @@
+export interface ChangelogEntry {
+  version: string;
+  date: string | null;
+  body: string;
+}
+
+/**
+ * Parses a Keep-a-Changelog style markdown string into structured entries.
+ *
+ * Splits on `## [version]` headings and extracts the version + date from each.
+ * The body is the raw markdown between headings (trimmed), with the leading
+ * `# Changelog` title and trailing link references stripped.
+ */
+export function parseChangelog(raw: string): ChangelogEntry[] {
+  const entries: ChangelogEntry[] = [];
+
+  // Strip trailing link reference definitions (e.g. [0.1.0]: https://...)
+  const cleaned = raw.replace(/^\[[\w.]+\]:.*$/gm, '').trimEnd();
+
+  // Match `## [version]` or `## [version] - date`
+  const headingRe = /^## \[(.+?)\](?:\s*-\s*(.+))?$/gm;
+  const matches = [...cleaned.matchAll(headingRe)];
+
+  for (let i = 0; i < matches.length; i++) {
+    const match = matches[i];
+    const version = match[1];
+    const date = match[2]?.trim() || null;
+
+    const start = match.index! + match[0].length;
+    const end = i + 1 < matches.length ? matches[i + 1].index! : cleaned.length;
+    const body = cleaned.slice(start, end).trim();
+
+    entries.push({ version, date, body });
+  }
+
+  return entries;
+}