From 27ac5fc23eb891564fee5b140e5287fb0839eaba Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 16 Apr 2026 12:26:27 +0200
Subject: [PATCH] feat(credits): merge Credits + Mana subscription into one
 workbench app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The former /credits (balance, transactions, Stripe checkout, cost
breakdown) and /mana (subscription plans placeholder) were separate
pages covering the same billing domain. Merge into a single workbench
app "Credits & Abo" with 5 tabs:

1. Übersicht — balance cards + recent transactions + quick-buy
2. Abonnements — SubscriptionPage from @mana/subscriptions
3. Transaktionen — full transaction history table
4. Kaufen — Stripe-integrated package cards
5. Kosten — per-operation cost breakdown with category filter

Stripe redirect handling: Stripe returns to /?app=credits&success=true.
The deep-link handler opens the app and strips ?app; the ListView reads
?success / ?canceled from window.location.search on mount, shows the
appropriate toast, and cleans the URL via history.replaceState.

- Delete /credits/+page.svelte and lib/modules/mana/ (placeholder)
- Register workbench app id='credits' (Crown icon, amber)
- Replace mana app registration (no longer needed)
- Update all links: command menu, PillNavigation (manaHref + creditsHref
  both → /?app=credits), CreditsSection, CreditsWidget,
  TransactionsWidget, CompleteStep, sync-status, sync billing page,
  gift redeem page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/app-registry/apps.ts     |    6 +-
 .../dashboard/widgets/CreditsWidget.svelte    |    2 +-
 .../widgets/TransactionsWidget.svelte         |    2 +-
 .../layout/use-sync-status-items.svelte.ts    |    2 +-
 .../onboarding/steps/CompleteStep.svelte      |    2 +-
 .../settings/sections/CreditsSection.svelte   |    6 +-
 .../src/lib/modules/credits/ListView.svelte   | 1007 +++++++++++++++++
 .../web/src/lib/modules/mana/ListView.svelte  |   50 -
 .../apps/web/src/routes/(app)/+layout.svelte  |   16 +-
 .../web/src/routes/(app)/credits/+page.svelte |  582 ----------
 .../(app)/gifts/redeem/[code]/+page.svelte    |    2 +-
 .../routes/(app)/settings/sync/+page.svelte   |    4 +-
 12 files changed, 1033 insertions(+), 648 deletions(-)
 create mode 100644 apps/mana/apps/web/src/lib/modules/credits/ListView.svelte
 delete mode 100644 apps/mana/apps/web/src/lib/modules/mana/ListView.svelte
 delete mode 100644 apps/mana/apps/web/src/routes/(app)/credits/+page.svelte

diff --git a/apps/mana/apps/web/src/lib/app-registry/apps.ts b/apps/mana/apps/web/src/lib/app-registry/apps.ts
index c310d934d..abb981a5b 100644
--- a/apps/mana/apps/web/src/lib/app-registry/apps.ts
+++ b/apps/mana/apps/web/src/lib/app-registry/apps.ts
@@ -1089,12 +1089,12 @@ registerApp({
 });
 
 registerApp({
-	id: 'mana',
-	name: 'Mana',
+	id: 'credits',
+	name: 'Credits & Abo',
 	color: '#F59E0B',
 	icon: Crown,
 	views: {
-		list: { load: () => import('$lib/modules/mana/ListView.svelte') },
+		list: { load: () => import('$lib/modules/credits/ListView.svelte') },
 	},
 });
 
diff --git a/apps/mana/apps/web/src/lib/components/dashboard/widgets/CreditsWidget.svelte b/apps/mana/apps/web/src/lib/components/dashboard/widgets/CreditsWidget.svelte
index c26558c04..e7ede9ceb 100644
--- a/apps/mana/apps/web/src/lib/components/dashboard/widgets/CreditsWidget.svelte
+++ b/apps/mana/apps/web/src/lib/components/dashboard/widgets/CreditsWidget.svelte
@@ -56,7 +56,7 @@
 				<span class="text-2xl font-bold">{formatCredits(data.balance)}</span>
 			</div>
 			<a
-				href="/credits"
+				href="/?app=credits"
 				class="mt-4 block w-full rounded-lg bg-primary/10 py-2 text-center text-sm font-medium text-primary hover:bg-primary/20"
 			>
 				{$_('dashboard.widgets.credits.manage')}
diff --git a/apps/mana/apps/web/src/lib/components/dashboard/widgets/TransactionsWidget.svelte b/apps/mana/apps/web/src/lib/components/dashboard/widgets/TransactionsWidget.svelte
index 29e3a4f6e..8f6b9418f 100644
--- a/apps/mana/apps/web/src/lib/components/dashboard/widgets/TransactionsWidget.svelte
+++ b/apps/mana/apps/web/src/lib/components/dashboard/widgets/TransactionsWidget.svelte
@@ -58,7 +58,7 @@
 			<span>📊</span>
 			{$_('dashboard.widgets.transactions.title')}
 		</h3>
-		<a href="/credits?tab=transactions" class="text-sm text-primary hover:underline">
+		<a href="/?app=credits&tab=transactions" class="text-sm text-primary hover:underline">
 			{$_('common.view_all')} →
 		</a>
 	</div>
diff --git a/apps/mana/apps/web/src/lib/components/layout/use-sync-status-items.svelte.ts b/apps/mana/apps/web/src/lib/components/layout/use-sync-status-items.svelte.ts
index bb51fb176..9726b4281 100644
--- a/apps/mana/apps/web/src/lib/components/layout/use-sync-status-items.svelte.ts
+++ b/apps/mana/apps/web/src/lib/components/layout/use-sync-status-items.svelte.ts
@@ -39,7 +39,7 @@ export function useSyncStatusItems() {
 				id: 'sync-paused',
 				label: 'Sync pausiert — Credits aufladen',
 				icon: 'bell',
-				onClick: () => goto('/credits?tab=packages'),
+				onClick: () => goto('/?app=credits&tab=packages'),
 			});
 		} else {
 			result.push({
diff --git a/apps/mana/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte b/apps/mana/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte
index 6cb38a10b..a9e2b2870 100644
--- a/apps/mana/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte
+++ b/apps/mana/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte
@@ -67,7 +67,7 @@
 		</a>
 
 		<a
-			href="/credits"
+			href="/?app=credits"
 			class="p-4 rounded-xl bg-card border hover:border-primary/50 hover:shadow-md transition-all group"
 		>
 			<div class="flex items-center gap-3">
diff --git a/apps/mana/apps/web/src/lib/components/settings/sections/CreditsSection.svelte b/apps/mana/apps/web/src/lib/components/settings/sections/CreditsSection.svelte
index 2ae591b5b..8b8eec397 100644
--- a/apps/mana/apps/web/src/lib/components/settings/sections/CreditsSection.svelte
+++ b/apps/mana/apps/web/src/lib/components/settings/sections/CreditsSection.svelte
@@ -31,7 +31,7 @@
 		tone="yellow"
 	>
 		{#snippet action()}
-			<a href="/credits" class="text-sm text-primary hover:underline">Alle Details</a>
+			<a href="/?app=credits" class="text-sm text-primary hover:underline">Alle Details</a>
 		{/snippet}
 	</SettingsSectionHeader>
 
@@ -60,13 +60,13 @@
 
 	<div class="mt-4 flex gap-2">
 		<a
-			href="/credits?tab=packages"
+			href="/?app=credits&tab=packages"
 			class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
 		>
 			Credits kaufen
 		</a>
 		<a
-			href="/credits?tab=transactions"
+			href="/?app=credits&tab=transactions"
 			class="inline-flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium transition-colors hover:bg-surface-hover"
 		>
 			Transaktionen
diff --git a/apps/mana/apps/web/src/lib/modules/credits/ListView.svelte b/apps/mana/apps/web/src/lib/modules/credits/ListView.svelte
new file mode 100644
index 000000000..fc075be83
--- /dev/null
+++ b/apps/mana/apps/web/src/lib/modules/credits/ListView.svelte
@@ -0,0 +1,1007 @@
+<!--
+  Credits & Abo — Workbench-embedded billing hub. Merges the former
+  /credits (balance, transactions, packages, cost breakdown) with
+  /mana (subscription plans) into a single tabbed view.
+
+  Stripe redirect handling: after checkout Stripe sends the user back
+  to /?app=credits&success=true (or &canceled=true). The workbench
+  deep-link handler opens this app and strips ?app, leaving ?success=
+  in the URL for us to read here.
+-->
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { onMount } from 'svelte';
+	import { Card } from '@mana/shared-ui';
+	import { SubscriptionPage } from '@mana/subscriptions';
+	import {
+		creditsService,
+		type CreditBalance,
+		type CreditTransaction,
+		type CreditPackage,
+	} from '$lib/api/credits';
+	import {
+		OPERATION_METADATA,
+		CREDIT_COSTS,
+		CreditCategory,
+		formatCreditCost,
+		type CreditOperationType,
+	} from '@mana/credits';
+	import { ManaEvents } from '@mana/shared-utils/analytics';
+
+	let balance = $state<CreditBalance | null>(null);
+	let transactions = $state<CreditTransaction[]>([]);
+	let packages = $state<CreditPackage[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let activeTab = $state<'overview' | 'subscriptions' | 'transactions' | 'packages' | 'costs'>(
+		'overview'
+	);
+	let costFilter = $state<'all' | 'ai' | 'premium'>('all');
+	let processingPackageId = $state<string | null>(null);
+	let toastMessage = $state<string | null>(null);
+	let toastType = $state<'success' | 'error'>('success');
+
+	// ── Derived pricing data ───────────────────────────────
+	const allOperations = $derived(
+		Object.entries(OPERATION_METADATA).map(([op, meta]) => ({
+			operation: op as CreditOperationType,
+			name: meta.name,
+			description: meta.description,
+			category: meta.category,
+			app: meta.app,
+			cost: CREDIT_COSTS[op as CreditOperationType],
+			formattedCost: formatCreditCost(CREDIT_COSTS[op as CreditOperationType]),
+		}))
+	);
+
+	const filteredOperations = $derived(
+		costFilter === 'all'
+			? allOperations
+			: allOperations.filter((op) => {
+					if (costFilter === 'ai') return op.category === CreditCategory.AI;
+					if (costFilter === 'premium') return op.category === CreditCategory.PREMIUM;
+					return true;
+				})
+	);
+
+	const operationsByApp = $derived(() => {
+		const groups: Record<string, typeof filteredOperations> = {};
+		for (const op of filteredOperations) {
+			if (!groups[op.app]) groups[op.app] = [];
+			groups[op.app].push(op);
+		}
+		return Object.fromEntries(Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)));
+	});
+
+	const APP_LABELS: Record<string, string> = {
+		calendar: 'Kalender',
+		chat: 'Chat',
+		contacts: 'Kontakte',
+		context: 'Context',
+		general: 'Allgemein',
+		cards: 'Cards',
+		food: 'Food',
+		picture: 'Picture',
+		plants: 'Plants',
+		presi: 'Presi',
+		questions: 'Questions',
+		skilltree: 'SkillTree',
+		todo: 'Todo',
+		traces: 'Traces',
+		quotes: 'Quotes',
+	};
+
+	function getAppLabel(app: string): string {
+		return APP_LABELS[app] ?? app.charAt(0).toUpperCase() + app.slice(1);
+	}
+
+	function getCategoryLabel(category: CreditCategory): string {
+		switch (category) {
+			case CreditCategory.AI:
+				return 'KI-Features';
+			case CreditCategory.PREMIUM:
+				return 'Premium';
+			default:
+				return category;
+		}
+	}
+
+	// ── Lifecycle ──────────────────────────────────────────
+	onMount(async () => {
+		// Read URL params for tab selection + Stripe redirect
+		const params = new URLSearchParams(window.location.search);
+		const tab = params.get('tab');
+		if (tab === 'packages') activeTab = 'packages';
+		else if (tab === 'transactions') activeTab = 'transactions';
+		else if (tab === 'costs') activeTab = 'costs';
+		else if (tab === 'subscriptions') activeTab = 'subscriptions';
+
+		const success = params.get('success');
+		const canceled = params.get('canceled');
+
+		if (success === 'true') {
+			showToast('Credits wurden erfolgreich gekauft!', 'success');
+			// Clean Stripe params from URL
+			history.replaceState({}, '', '/');
+		} else if (canceled === 'true') {
+			showToast('Kauf wurde abgebrochen', 'error');
+			history.replaceState({}, '', '/');
+		}
+
+		if (activeTab !== 'overview') ManaEvents.creditsTabViewed(activeTab);
+		await loadData();
+	});
+
+	async function loadData() {
+		loading = true;
+		error = null;
+		try {
+			const [balanceData, transactionsData, packagesData] = await Promise.all([
+				creditsService.getBalance(),
+				creditsService.getTransactions(20),
+				creditsService.getPackages(),
+			]);
+			balance = balanceData;
+			transactions = transactionsData;
+			packages = packagesData.filter((p) => p.active).sort((a, b) => a.sortOrder - b.sortOrder);
+		} catch (e) {
+			error = e instanceof Error ? e.message : $_('common.error_loading');
+			console.error('Failed to load credits data:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	// ── Helpers ────────────────────────────────────────────
+	function formatCredits(amount: number): string {
+		return amount.toLocaleString('de-DE');
+	}
+
+	function formatPrice(cents: number): string {
+		return (cents / 100).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
+	}
+
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString('de-DE', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit',
+		});
+	}
+
+	function getTransactionIcon(type: string): string {
+		switch (type) {
+			case 'purchase':
+				return '💳';
+			case 'usage':
+				return '⚡';
+			case 'refund':
+				return '↩️';
+			case 'gift':
+				return '🎁';
+			default:
+				return '📝';
+		}
+	}
+
+	function getTransactionColor(type: string): string {
+		switch (type) {
+			case 'purchase':
+			case 'gift':
+			case 'refund':
+				return 'text-green-600 dark:text-green-400';
+			case 'usage':
+				return 'text-red-600 dark:text-red-400';
+			default:
+				return 'text-muted-foreground';
+		}
+	}
+
+	async function handleBuyPackage(pkg: CreditPackage) {
+		processingPackageId = pkg.id;
+		try {
+			const result = await creditsService.initiatePurchase(pkg.id);
+			window.location.href = result.checkoutUrl;
+		} catch (e) {
+			showToast(
+				e instanceof Error ? e.message : 'Fehler beim Erstellen der Checkout-Session',
+				'error'
+			);
+		} finally {
+			processingPackageId = null;
+		}
+	}
+
+	function handleSubscribe(planId: string) {
+		showToast(`Abo "${planId}" ausgewählt. Bezahlsystem wird in Kürze integriert.`, 'success');
+	}
+
+	function handleBuySubscriptionPackage(packageId: string) {
+		showToast(`Paket "${packageId}" ausgewählt. Bezahlsystem wird in Kürze integriert.`, 'success');
+	}
+
+	function showToast(message: string, type: 'success' | 'error') {
+		toastMessage = message;
+		toastType = type;
+		setTimeout(() => (toastMessage = null), 4000);
+	}
+</script>
+
+<div class="credits-page">
+	{#if loading}
+		<div class="loading">
+			<div class="spinner"></div>
+		</div>
+	{:else if error}
+		<Card>
+			<div class="text-center py-8">
+				<p class="text-error mb-4">{error}</p>
+				<button onclick={loadData} class="btn btn-primary">Erneut versuchen</button>
+			</div>
+		</Card>
+	{:else}
+		<!-- Balance Overview -->
+		<div class="balance-grid">
+			<div class="balance-card">
+				<p class="balance-label">Verfügbar</p>
+				<p class="balance-value primary">{formatCredits(balance?.balance ?? 0)}</p>
+			</div>
+			<div class="balance-card">
+				<p class="balance-label">Erhalten</p>
+				<p class="balance-value">{formatCredits(balance?.totalEarned ?? 0)}</p>
+			</div>
+			<div class="balance-card">
+				<p class="balance-label">Verbraucht</p>
+				<p class="balance-value">{formatCredits(balance?.totalSpent ?? 0)}</p>
+			</div>
+		</div>
+
+		<!-- Tabs -->
+		<div class="tab-bar">
+			{#each [{ key: 'overview', label: 'Übersicht' }, { key: 'subscriptions', label: 'Abonnements' }, { key: 'transactions', label: 'Transaktionen' }, { key: 'packages', label: 'Kaufen' }, { key: 'costs', label: 'Kosten' }] as tab}
+				<button
+					onclick={() => (activeTab = tab.key as typeof activeTab)}
+					class="tab-btn"
+					class:active={activeTab === tab.key}
+				>
+					{tab.label}
+				</button>
+			{/each}
+		</div>
+
+		<!-- ── Tab: Übersicht ──────────────────────────────── -->
+		{#if activeTab === 'overview'}
+			<div class="overview-grid">
+				<Card>
+					<h3 class="card-title">Letzte Transaktionen</h3>
+					{#if transactions.length === 0}
+						<p class="empty-hint">Noch keine Transaktionen</p>
+					{:else}
+						<div class="tx-list">
+							{#each transactions.slice(0, 5) as tx}
+								<div class="tx-row">
+									<div class="tx-left">
+										<span class="tx-icon">{getTransactionIcon(tx.type)}</span>
+										<div>
+											<p class="tx-desc">{tx.description || tx.type}</p>
+											<p class="tx-date">{formatDate(tx.createdAt)}</p>
+										</div>
+									</div>
+									<span class="tx-amount {getTransactionColor(tx.type)}">
+										{tx.amount > 0 ? '+' : ''}{formatCredits(tx.amount)}
+									</span>
+								</div>
+							{/each}
+						</div>
+						<button onclick={() => (activeTab = 'transactions')} class="link-btn">
+							Alle anzeigen →
+						</button>
+					{/if}
+				</Card>
+
+				<Card>
+					<h3 class="card-title">Credits kaufen</h3>
+					{#if packages.length === 0}
+						<p class="empty-hint">Keine Pakete verfügbar</p>
+					{:else}
+						<div class="quick-buy">
+							{#each packages.slice(0, 3) as pkg}
+								<button
+									onclick={() => handleBuyPackage(pkg)}
+									disabled={processingPackageId === pkg.id}
+									class="quick-buy-btn"
+								>
+									<div>
+										<p class="pkg-name">{pkg.name}</p>
+										<p class="pkg-credits">{formatCredits(pkg.credits)} Credits</p>
+									</div>
+									<span class="pkg-price">{formatPrice(pkg.priceEuroCents)}</span>
+								</button>
+							{/each}
+						</div>
+						<button onclick={() => (activeTab = 'packages')} class="link-btn">
+							Alle Pakete →
+						</button>
+					{/if}
+				</Card>
+			</div>
+
+			<!-- ── Tab: Abonnements ─────────────────────────── -->
+		{:else if activeTab === 'subscriptions'}
+			<SubscriptionPage
+				appName="Mana"
+				onSubscribe={handleSubscribe}
+				onBuyPackage={handleBuySubscriptionPackage}
+				currentPlanId="free"
+				pageTitle="Wähle dein Abo"
+				subscriptionsTitle="Abonnements"
+				packagesTitle="Einmal-Pakete"
+				yearlyDiscount="20% Rabatt"
+			/>
+
+			<!-- ── Tab: Transaktionen ───────────────────────── -->
+		{:else if activeTab === 'transactions'}
+			<Card>
+				<h3 class="card-title">Transaktionsverlauf</h3>
+				{#if transactions.length === 0}
+					<p class="empty-hint">Noch keine Transaktionen vorhanden.</p>
+				{:else}
+					<div class="table-wrap">
+						<table class="tx-table">
+							<thead>
+								<tr>
+									<th>Typ</th>
+									<th>Beschreibung</th>
+									<th>App</th>
+									<th class="text-right">Betrag</th>
+									<th class="text-right">Kontostand</th>
+									<th>Datum</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each transactions as tx}
+									<tr>
+										<td><span class="tx-icon-sm">{getTransactionIcon(tx.type)}</span></td>
+										<td>{tx.description || '-'}</td>
+										<td class="muted">{tx.appId || '-'}</td>
+										<td class="text-right font-medium {getTransactionColor(tx.type)}">
+											{tx.amount > 0 ? '+' : ''}{formatCredits(tx.amount)}
+										</td>
+										<td class="text-right muted">{formatCredits(tx.balanceAfter)}</td>
+										<td class="muted">{formatDate(tx.createdAt)}</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				{/if}
+			</Card>
+
+			<!-- ── Tab: Credits kaufen ──────────────────────── -->
+		{:else if activeTab === 'packages'}
+			<div class="packages-grid">
+				{#each packages as pkg}
+					<Card>
+						<div class="pkg-card">
+							<h3 class="pkg-card-name">{pkg.name}</h3>
+							{#if pkg.description}
+								<p class="pkg-card-desc">{pkg.description}</p>
+							{/if}
+							<p class="pkg-card-credits">{formatCredits(pkg.credits)}</p>
+							<p class="pkg-card-unit">Credits</p>
+							<p class="pkg-card-price">{formatPrice(pkg.priceEuroCents)}</p>
+							<button
+								onclick={() => handleBuyPackage(pkg)}
+								disabled={processingPackageId === pkg.id}
+								class="btn btn-primary pkg-buy-btn"
+							>
+								{processingPackageId === pkg.id ? 'Wird geladen...' : 'Kaufen'}
+							</button>
+						</div>
+					</Card>
+				{/each}
+			</div>
+			{#if packages.length === 0}
+				<Card>
+					<p class="empty-hint">Aktuell sind keine Credit-Pakete verfügbar.</p>
+				</Card>
+			{/if}
+
+			<!-- ── Tab: Kosten ──────────────────────────────── -->
+		{:else if activeTab === 'costs'}
+			<div class="cost-filters">
+				{#each [{ key: 'all', label: 'Alle' }, { key: 'ai', label: 'KI-Features' }, { key: 'premium', label: 'Premium' }] as filter}
+					<button
+						onclick={() => (costFilter = filter.key as typeof costFilter)}
+						class="filter-chip"
+						class:active={costFilter === filter.key}
+					>
+						{filter.label}
+					</button>
+				{/each}
+			</div>
+
+			<div class="info-banner">
+				<p>
+					Lesen, Bearbeiten, Löschen und Organisieren von Einträgen ist immer <strong
+						>kostenlos</strong
+					>. Credits werden nur für die unten aufgeführten Aktionen verbraucht.
+				</p>
+			</div>
+
+			{@const groups = operationsByApp()}
+			<div class="cost-groups">
+				{#each Object.entries(groups) as [app, operations]}
+					<Card>
+						<h3 class="card-title">{getAppLabel(app)}</h3>
+						<div class="cost-list">
+							{#each operations as op}
+								<div class="cost-row">
+									<div class="cost-info">
+										<p class="cost-name">{op.name}</p>
+										<p class="cost-desc">{op.description}</p>
+									</div>
+									<div class="cost-right">
+										<span class="cost-category">{getCategoryLabel(op.category)}</span>
+										<span
+											class="cost-badge"
+											class:free={op.cost === 0}
+											class:low={op.cost > 0 && op.cost < 1}
+										>
+											{op.cost === 0 ? 'Kostenlos' : op.formattedCost}
+										</span>
+									</div>
+								</div>
+							{/each}
+						</div>
+					</Card>
+				{/each}
+
+				{#if Object.keys(groups).length === 0}
+					<Card>
+						<p class="empty-hint">Keine Operationen in dieser Kategorie.</p>
+					</Card>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+</div>
+
+{#if toastMessage}
+	<div class="toast" class:toast-error={toastType === 'error'}>
+		{toastMessage}
+	</div>
+{/if}
+
+<style>
+	.credits-page {
+		padding: 0.75rem;
+		height: 100%;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 3rem 0;
+	}
+
+	.spinner {
+		width: 2rem;
+		height: 2rem;
+		border: 3px solid hsl(var(--color-border));
+		border-top-color: hsl(var(--color-primary));
+		border-radius: 50%;
+		animation: spin 0.6s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* ── Balance grid ────────────────────────────────────── */
+	.balance-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 0.75rem;
+	}
+
+	.balance-card {
+		text-align: center;
+		padding: 1rem;
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.75rem;
+	}
+
+	.balance-label {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		margin: 0;
+	}
+
+	.balance-value {
+		font-size: 1.5rem;
+		font-weight: 700;
+		margin: 0.25rem 0 0;
+		color: hsl(var(--color-foreground));
+	}
+
+	.balance-value.primary {
+		color: hsl(var(--color-primary));
+	}
+
+	/* ── Tabs ────────────────────────────────────────────── */
+	.tab-bar {
+		display: flex;
+		gap: 0.25rem;
+		border-bottom: 1px solid hsl(var(--color-border));
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	.tab-bar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.tab-btn {
+		flex-shrink: 0;
+		padding: 0.5rem 1rem;
+		margin-bottom: -1px;
+		border: none;
+		background: none;
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+		cursor: pointer;
+		transition: color 0.15s;
+		white-space: nowrap;
+	}
+
+	.tab-btn:hover {
+		color: hsl(var(--color-foreground));
+	}
+
+	.tab-btn.active {
+		color: hsl(var(--color-primary));
+		font-weight: 500;
+		border-bottom: 2px solid hsl(var(--color-primary));
+	}
+
+	/* ── Overview ────────────────────────────────────────── */
+	.overview-grid {
+		display: grid;
+		gap: 1.5rem;
+	}
+
+	@media (min-width: 1024px) {
+		.overview-grid {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+
+	.card-title {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0 0 1rem;
+		color: hsl(var(--color-foreground));
+	}
+
+	.empty-hint {
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.875rem;
+		text-align: center;
+		padding: 1rem;
+		margin: 0;
+	}
+
+	.tx-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.tx-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 0;
+		border-bottom: 1px solid hsl(var(--color-border));
+	}
+
+	.tx-row:last-child {
+		border-bottom: none;
+	}
+
+	.tx-left {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.tx-icon {
+		font-size: 1.25rem;
+	}
+
+	.tx-desc {
+		font-size: 0.875rem;
+		font-weight: 500;
+		margin: 0;
+		color: hsl(var(--color-foreground));
+	}
+
+	.tx-date {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		margin: 0;
+	}
+
+	.tx-amount {
+		font-weight: 600;
+		font-size: 0.875rem;
+	}
+
+	.link-btn {
+		display: block;
+		margin-top: 1rem;
+		background: none;
+		border: none;
+		font-size: 0.875rem;
+		color: hsl(var(--color-primary));
+		cursor: pointer;
+		padding: 0;
+	}
+
+	.link-btn:hover {
+		text-decoration: underline;
+	}
+
+	/* ── Quick buy ───────────────────────────────────────── */
+	.quick-buy {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.quick-buy-btn {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: 0.75rem;
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition: background 0.15s;
+		text-align: left;
+		color: hsl(var(--color-foreground));
+	}
+
+	.quick-buy-btn:hover:not(:disabled) {
+		background: hsl(var(--color-surface-hover));
+	}
+
+	.quick-buy-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.pkg-name {
+		font-weight: 500;
+		margin: 0;
+	}
+
+	.pkg-credits {
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+		margin: 0;
+	}
+
+	.pkg-price {
+		font-weight: 600;
+		color: hsl(var(--color-primary));
+	}
+
+	/* ── Transactions table ──────────────────────────────── */
+	.table-wrap {
+		overflow-x: auto;
+	}
+
+	.tx-table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	.tx-table th {
+		padding: 0 0 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: hsl(var(--color-muted-foreground));
+		text-align: left;
+	}
+
+	.tx-table td {
+		padding: 0.75rem 0.5rem 0.75rem 0;
+		font-size: 0.875rem;
+		border-bottom: 1px solid hsl(var(--color-border));
+		color: hsl(var(--color-foreground));
+	}
+
+	.tx-table tr:last-child td {
+		border-bottom: none;
+	}
+
+	.tx-icon-sm {
+		font-size: 1rem;
+	}
+
+	.muted {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.font-medium {
+		font-weight: 500;
+	}
+
+	.text-right {
+		text-align: right;
+	}
+
+	.text-error {
+		color: hsl(var(--color-error));
+	}
+
+	/* ── Packages grid ───────────────────────────────────── */
+	.packages-grid {
+		display: grid;
+		gap: 1rem;
+	}
+
+	@media (min-width: 640px) {
+		.packages-grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.packages-grid {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+
+	.pkg-card {
+		text-align: center;
+	}
+
+	.pkg-card-name {
+		font-size: 1.125rem;
+		font-weight: 700;
+		margin: 0;
+		color: hsl(var(--color-foreground));
+	}
+
+	.pkg-card-desc {
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+		margin: 0.25rem 0 0;
+	}
+
+	.pkg-card-credits {
+		font-size: 2rem;
+		font-weight: 700;
+		color: hsl(var(--color-primary));
+		margin: 1rem 0 0;
+	}
+
+	.pkg-card-unit {
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+		margin: 0;
+	}
+
+	.pkg-card-price {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: 1rem 0 0;
+		color: hsl(var(--color-foreground));
+	}
+
+	.pkg-buy-btn {
+		margin-top: 1rem;
+		width: 100%;
+	}
+
+	/* ── Cost tab ────────────────────────────────────────── */
+	.cost-filters {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+
+	.filter-chip {
+		padding: 0.375rem 0.75rem;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		border: none;
+		cursor: pointer;
+		transition: all 0.15s;
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.filter-chip:hover {
+		color: hsl(var(--color-foreground));
+	}
+
+	.filter-chip.active {
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
+	}
+
+	.info-banner {
+		padding: 1rem;
+		border-radius: 0.5rem;
+		background: hsl(210 100% 95%);
+		border: 1px solid hsl(210 100% 85%);
+		font-size: 0.875rem;
+		color: hsl(210 50% 30%);
+	}
+
+	:global(.dark) .info-banner {
+		background: hsl(210 50% 15%);
+		border-color: hsl(210 50% 25%);
+		color: hsl(210 50% 80%);
+	}
+
+	.cost-groups {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.cost-list {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.cost-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 0;
+		border-bottom: 1px solid hsl(var(--color-border));
+		gap: 1rem;
+	}
+
+	.cost-row:last-child {
+		border-bottom: none;
+	}
+
+	.cost-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.cost-name {
+		font-size: 0.875rem;
+		font-weight: 500;
+		margin: 0;
+		color: hsl(var(--color-foreground));
+	}
+
+	.cost-desc {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		margin: 0.125rem 0 0;
+	}
+
+	.cost-right {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		flex-shrink: 0;
+	}
+
+	.cost-category {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.cost-badge {
+		display: inline-flex;
+		padding: 0.125rem 0.625rem;
+		border-radius: 9999px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		background: hsl(210 100% 95%);
+		color: hsl(210 50% 40%);
+	}
+
+	:global(.dark) .cost-badge {
+		background: hsl(210 50% 20%);
+		color: hsl(210 50% 80%);
+	}
+
+	.cost-badge.free {
+		background: hsl(140 60% 92%);
+		color: hsl(140 60% 30%);
+	}
+
+	:global(.dark) .cost-badge.free {
+		background: hsl(140 40% 18%);
+		color: hsl(140 50% 70%);
+	}
+
+	.cost-badge.low {
+		background: hsl(45 100% 92%);
+		color: hsl(45 80% 30%);
+	}
+
+	:global(.dark) .cost-badge.low {
+		background: hsl(45 50% 18%);
+		color: hsl(45 60% 70%);
+	}
+
+	/* ── Shared ──────────────────────────────────────────── */
+	.btn {
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		border: none;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.btn-primary {
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
+	}
+
+	.btn-primary:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.btn-primary:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.toast {
+		position: fixed;
+		bottom: 1rem;
+		right: 1rem;
+		z-index: 50;
+		padding: 0.75rem 1rem;
+		background: hsl(142 71% 45%);
+		color: white;
+		border-radius: 0.5rem;
+		box-shadow: 0 4px 12px hsl(0 0% 0% / 0.15);
+		font-size: 0.875rem;
+		animation: fadeIn 0.2s ease-out;
+	}
+
+	.toast-error {
+		background: hsl(var(--color-error));
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>
diff --git a/apps/mana/apps/web/src/lib/modules/mana/ListView.svelte b/apps/mana/apps/web/src/lib/modules/mana/ListView.svelte
deleted file mode 100644
index 8f640a06f..000000000
--- a/apps/mana/apps/web/src/lib/modules/mana/ListView.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-  Mana — Workbench-embedded subscription / pricing page.
-  Shows available plans and one-time credit packages.
--->
-<script lang="ts">
-	import { SubscriptionPage } from '@mana/subscriptions';
-
-	let toastMessage = $state<string | null>(null);
-
-	function handleSubscribe(planId: string) {
-		toastMessage = `Abo "${planId}" ausgewahlt. Bezahlsystem wird in Kurze integriert.`;
-		setTimeout(() => (toastMessage = null), 4000);
-	}
-
-	function handleBuyPackage(packageId: string) {
-		toastMessage = `Paket "${packageId}" ausgewahlt. Bezahlsystem wird in Kurze integriert.`;
-		setTimeout(() => (toastMessage = null), 4000);
-	}
-</script>
-
-{#if toastMessage}
-	<div
-		class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-amber-600 px-5 py-3 text-sm font-medium text-white shadow-lg"
-	>
-		{toastMessage}
-	</div>
-{/if}
-
-<div class="mana-page">
-	<SubscriptionPage
-		appName="Mana"
-		onSubscribe={handleSubscribe}
-		onBuyPackage={handleBuyPackage}
-		currentPlanId="free"
-		pageTitle="Wähle dein Abo"
-		subscriptionsTitle="Abonnements"
-		packagesTitle="Einmal-Pakete"
-		yearlyDiscount="20% Rabatt"
-	/>
-</div>
-
-<style>
-	.mana-page {
-		height: 100%;
-		width: 100%;
-		overflow-y: auto;
-		overflow-x: hidden;
-		padding: 0.75rem;
-	}
-</style>
diff --git a/apps/mana/apps/web/src/routes/(app)/+layout.svelte b/apps/mana/apps/web/src/routes/(app)/+layout.svelte
index 2a7be9da2..7960b03ee 100644
--- a/apps/mana/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/+layout.svelte
@@ -740,7 +740,12 @@
 			category: 'Navigation',
 			onExecute: () => goto('/?app=spiral'),
 		},
-		{ id: 'credits', label: 'Credits', category: 'Navigation', onExecute: () => goto('/credits') },
+		{
+			id: 'credits',
+			label: 'Credits',
+			category: 'Navigation',
+			onExecute: () => goto('/?app=credits'),
+		},
 		{ id: 'apps', label: 'Alle Apps', category: 'Navigation', onExecute: () => goto('/apps') },
 		{
 			id: 'settings',
@@ -805,7 +810,10 @@
 						>
 							<span>Cloud Sync pausiert — Credits reichen nicht aus.</span>
 							<div class="flex gap-2">
-								<a href="/credits?tab=packages" class="font-medium underline hover:no-underline">
+								<a
+									href="/?app=credits&tab=packages"
+									class="font-medium underline hover:no-underline"
+								>
 									Credits aufladen
 								</a>
 								<a href="/settings/sync" class="font-medium underline hover:no-underline">
@@ -974,10 +982,10 @@
 					currentSyncLabel={syncStatus.label}
 					{appItems}
 					{userEmail}
-					manaHref="/?app=mana"
+					manaHref="/?app=credits"
 					profileHref="/?app=profile"
 					spiralHref="/?app=spiral"
-					creditsHref="/credits"
+					creditsHref="/?app=credits"
 					themesHref="/?app=themes"
 					helpHref="/?app=help"
 					allAppsHref="/apps"
diff --git a/apps/mana/apps/web/src/routes/(app)/credits/+page.svelte b/apps/mana/apps/web/src/routes/(app)/credits/+page.svelte
deleted file mode 100644
index 7e03f5d54..000000000
--- a/apps/mana/apps/web/src/routes/(app)/credits/+page.svelte
+++ /dev/null
@@ -1,582 +0,0 @@
-<script lang="ts">
-	import { _ } from 'svelte-i18n';
-	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
-	import { Card, PageHeader } from '@mana/shared-ui';
-	import {
-		creditsService,
-		type CreditBalance,
-		type CreditTransaction,
-		type CreditPackage,
-	} from '$lib/api/credits';
-	import {
-		OPERATION_METADATA,
-		CREDIT_COSTS,
-		CreditCategory,
-		formatCreditCost,
-		type CreditOperationType,
-	} from '@mana/credits';
-	import { ManaEvents } from '@mana/shared-utils/analytics';
-
-	let balance = $state<CreditBalance | null>(null);
-	let transactions = $state<CreditTransaction[]>([]);
-	let packages = $state<CreditPackage[]>([]);
-	let loading = $state(true);
-	let error = $state<string | null>(null);
-	let activeTab = $state<'overview' | 'transactions' | 'packages' | 'costs'>('overview');
-	let costFilter = $state<'all' | 'ai' | 'premium'>('all');
-
-	// Build pricing data grouped by app
-	const allOperations = $derived(
-		Object.entries(OPERATION_METADATA).map(([op, meta]) => ({
-			operation: op as CreditOperationType,
-			name: meta.name,
-			description: meta.description,
-			category: meta.category,
-			app: meta.app,
-			cost: CREDIT_COSTS[op as CreditOperationType],
-			formattedCost: formatCreditCost(CREDIT_COSTS[op as CreditOperationType]),
-		}))
-	);
-
-	const filteredOperations = $derived(
-		costFilter === 'all'
-			? allOperations
-			: allOperations.filter((op) => {
-					if (costFilter === 'ai') return op.category === CreditCategory.AI;
-					if (costFilter === 'premium') return op.category === CreditCategory.PREMIUM;
-					return true;
-				})
-	);
-
-	const operationsByApp = $derived(() => {
-		const groups: Record<string, typeof filteredOperations> = {};
-		for (const op of filteredOperations) {
-			if (!groups[op.app]) groups[op.app] = [];
-			groups[op.app].push(op);
-		}
-		// Sort apps alphabetically
-		return Object.fromEntries(Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)));
-	});
-
-	const APP_LABELS: Record<string, string> = {
-		calendar: 'Kalender',
-		chat: 'Chat',
-		contacts: 'Kontakte',
-		context: 'Context',
-		general: 'Allgemein',
-		cards: 'Cards',
-		food: 'Food',
-		picture: 'Picture',
-		plants: 'Plants',
-		presi: 'Presi',
-		questions: 'Questions',
-		skilltree: 'SkillTree',
-		todo: 'Todo',
-		traces: 'Traces',
-		quotes: 'Quotes',
-	};
-
-	function getAppLabel(app: string): string {
-		return APP_LABELS[app] ?? app.charAt(0).toUpperCase() + app.slice(1);
-	}
-
-	function getCategoryLabel(category: CreditCategory): string {
-		switch (category) {
-			case CreditCategory.AI:
-				return 'KI-Features';
-			case CreditCategory.PREMIUM:
-				return 'Premium';
-			default:
-				return category;
-		}
-	}
-	let processingPackageId = $state<string | null>(null);
-
-	// Toast notification
-	let toastMessage = $state<string | null>(null);
-	let toastType = $state<'success' | 'error'>('success');
-
-	// Handle tab from URL params
-	$effect(() => {
-		const tab = $page.url.searchParams.get('tab');
-		if (tab === 'packages') activeTab = 'packages';
-		else if (tab === 'transactions') activeTab = 'transactions';
-		else if (tab === 'costs') activeTab = 'costs';
-		if (activeTab !== 'overview') ManaEvents.creditsTabViewed(activeTab);
-
-		// Handle success/canceled from Stripe redirect
-		const success = $page.url.searchParams.get('success');
-		const canceled = $page.url.searchParams.get('canceled');
-
-		if (success === 'true') {
-			showToast('Credits wurden erfolgreich gekauft!', 'success');
-			loadData();
-			window.history.replaceState({}, '', '/credits');
-		} else if (canceled === 'true') {
-			showToast('Kauf wurde abgebrochen', 'error');
-			window.history.replaceState({}, '', '/credits');
-		}
-	});
-
-	onMount(async () => {
-		await loadData();
-	});
-
-	async function loadData() {
-		loading = true;
-		error = null;
-		try {
-			const [balanceData, transactionsData, packagesData] = await Promise.all([
-				creditsService.getBalance(),
-				creditsService.getTransactions(20),
-				creditsService.getPackages(),
-			]);
-			balance = balanceData;
-			transactions = transactionsData;
-			packages = packagesData.filter((p) => p.active).sort((a, b) => a.sortOrder - b.sortOrder);
-		} catch (e) {
-			error = e instanceof Error ? e.message : $_('common.error_loading');
-			console.error('Failed to load credits data:', e);
-		} finally {
-			loading = false;
-		}
-	}
-
-	function formatCredits(amount: number): string {
-		return amount.toLocaleString('de-DE');
-	}
-
-	function formatPrice(cents: number): string {
-		return (cents / 100).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
-	}
-
-	function formatDate(dateStr: string): string {
-		return new Date(dateStr).toLocaleDateString('de-DE', {
-			day: '2-digit',
-			month: '2-digit',
-			year: 'numeric',
-			hour: '2-digit',
-			minute: '2-digit',
-		});
-	}
-
-	function getTransactionIcon(type: string): string {
-		switch (type) {
-			case 'purchase':
-				return '💳';
-			case 'usage':
-				return '⚡';
-			case 'refund':
-				return '↩️';
-			case 'gift':
-				return '🎁';
-			default:
-				return '📝';
-		}
-	}
-
-	function getTransactionColor(type: string): string {
-		switch (type) {
-			case 'purchase':
-			case 'gift':
-			case 'refund':
-				return 'text-green-600 dark:text-green-400';
-			case 'usage':
-				return 'text-red-600 dark:text-red-400';
-			default:
-				return 'text-gray-600 dark:text-gray-400';
-		}
-	}
-
-	async function handleBuyPackage(pkg: CreditPackage) {
-		processingPackageId = pkg.id;
-		try {
-			const result = await creditsService.initiatePurchase(pkg.id);
-			// Redirect to Stripe Checkout
-			window.location.href = result.checkoutUrl;
-		} catch (e) {
-			showToast(
-				e instanceof Error ? e.message : 'Fehler beim Erstellen der Checkout-Session',
-				'error'
-			);
-		} finally {
-			processingPackageId = null;
-		}
-	}
-
-	function showToast(message: string, type: 'success' | 'error') {
-		toastMessage = message;
-		toastType = type;
-		setTimeout(() => {
-			toastMessage = null;
-		}, 4000);
-	}
-</script>
-
-<div>
-	<PageHeader title="Credits" backHref="/" sticky size="lg" />
-
-	{#if loading}
-		<div class="flex items-center justify-center py-12">
-			<div
-				class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
-			></div>
-		</div>
-	{:else if error}
-		<Card>
-			<div class="text-center py-8">
-				<p class="text-red-500 mb-4">{error}</p>
-				<button
-					onclick={loadData}
-					class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
-				>
-					Erneut versuchen
-				</button>
-			</div>
-		</Card>
-	{:else}
-		<!-- Balance Overview Cards -->
-		<div class="grid gap-4 sm:grid-cols-3 mb-8">
-			<Card>
-				<div class="text-center">
-					<p class="text-sm text-muted-foreground">Verfügbare Credits</p>
-					<p class="text-3xl font-bold text-primary mt-1">
-						{formatCredits(balance?.balance ?? 0)}
-					</p>
-				</div>
-			</Card>
-			<Card>
-				<div class="text-center">
-					<p class="text-sm text-muted-foreground">Gesamt erhalten</p>
-					<p class="text-3xl font-bold mt-1">
-						{formatCredits(balance?.totalEarned ?? 0)}
-					</p>
-				</div>
-			</Card>
-			<Card>
-				<div class="text-center">
-					<p class="text-sm text-muted-foreground">Gesamt verbraucht</p>
-					<p class="text-3xl font-bold mt-1">
-						{formatCredits(balance?.totalSpent ?? 0)}
-					</p>
-				</div>
-			</Card>
-		</div>
-
-		<!-- Tabs -->
-		<div class="flex gap-2 mb-6 border-b border-border">
-			<button
-				onclick={() => (activeTab = 'overview')}
-				class="px-4 py-2 -mb-px transition-colors {activeTab === 'overview'
-					? 'border-b-2 border-primary text-primary font-medium'
-					: 'text-muted-foreground hover:text-foreground'}"
-			>
-				Übersicht
-			</button>
-			<button
-				onclick={() => (activeTab = 'transactions')}
-				class="px-4 py-2 -mb-px transition-colors {activeTab === 'transactions'
-					? 'border-b-2 border-primary text-primary font-medium'
-					: 'text-muted-foreground hover:text-foreground'}"
-			>
-				Transaktionen
-			</button>
-			<button
-				onclick={() => (activeTab = 'packages')}
-				class="px-4 py-2 -mb-px transition-colors {activeTab === 'packages'
-					? 'border-b-2 border-primary text-primary font-medium'
-					: 'text-muted-foreground hover:text-foreground'}"
-			>
-				Credits kaufen
-			</button>
-			<button
-				onclick={() => (activeTab = 'costs')}
-				class="px-4 py-2 -mb-px transition-colors {activeTab === 'costs'
-					? 'border-b-2 border-primary text-primary font-medium'
-					: 'text-muted-foreground hover:text-foreground'}"
-			>
-				Kosten
-			</button>
-		</div>
-
-		<!-- Tab Content -->
-		{#if activeTab === 'overview'}
-			<div class="grid gap-6 lg:grid-cols-2">
-				<!-- Recent Transactions -->
-				<Card>
-					<h3 class="text-lg font-semibold mb-4">Letzte Transaktionen</h3>
-					{#if transactions.length === 0}
-						<p class="text-muted-foreground text-sm">Noch keine Transaktionen</p>
-					{:else}
-						<div class="space-y-3">
-							{#each transactions.slice(0, 5) as tx}
-								<div
-									class="flex items-center justify-between py-2 border-b border-border last:border-0"
-								>
-									<div class="flex items-center gap-3">
-										<span class="text-xl">{getTransactionIcon(tx.type)}</span>
-										<div>
-											<p class="font-medium text-sm">{tx.description || tx.type}</p>
-											<p class="text-xs text-muted-foreground">{formatDate(tx.createdAt)}</p>
-										</div>
-									</div>
-									<span class="font-semibold {getTransactionColor(tx.type)}">
-										{tx.amount > 0 ? '+' : ''}{formatCredits(tx.amount)}
-									</span>
-								</div>
-							{/each}
-						</div>
-						<button
-							onclick={() => (activeTab = 'transactions')}
-							class="mt-4 text-sm text-primary hover:underline"
-						>
-							Alle anzeigen →
-						</button>
-					{/if}
-				</Card>
-
-				<!-- Quick Buy -->
-				<Card>
-					<h3 class="text-lg font-semibold mb-4">Credits kaufen</h3>
-					{#if packages.length === 0}
-						<p class="text-muted-foreground text-sm">Keine Pakete verfügbar</p>
-					{:else}
-						<div class="space-y-3">
-							{#each packages.slice(0, 3) as pkg}
-								<button
-									onclick={() => handleBuyPackage(pkg)}
-									disabled={processingPackageId === pkg.id}
-									class="w-full flex items-center justify-between p-3 rounded-lg border border-border hover:bg-surface-hover transition-colors disabled:opacity-50"
-								>
-									<div class="text-left">
-										<p class="font-medium">{pkg.name}</p>
-										<p class="text-sm text-muted-foreground">
-											{formatCredits(pkg.credits)} Credits
-										</p>
-									</div>
-									{#if processingPackageId === pkg.id}
-										<svg class="animate-spin h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24">
-											<circle
-												class="opacity-25"
-												cx="12"
-												cy="12"
-												r="10"
-												stroke="currentColor"
-												stroke-width="4"
-											></circle>
-											<path
-												class="opacity-75"
-												fill="currentColor"
-												d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-											></path>
-										</svg>
-									{:else}
-										<span class="font-semibold text-primary">{formatPrice(pkg.priceEuroCents)}</span
-										>
-									{/if}
-								</button>
-							{/each}
-						</div>
-						<button
-							onclick={() => (activeTab = 'packages')}
-							class="mt-4 text-sm text-primary hover:underline"
-						>
-							Alle Pakete →
-						</button>
-					{/if}
-				</Card>
-			</div>
-		{:else if activeTab === 'transactions'}
-			<Card>
-				<h3 class="text-lg font-semibold mb-4">Transaktionsverlauf</h3>
-				{#if transactions.length === 0}
-					<p class="text-muted-foreground">Noch keine Transaktionen vorhanden.</p>
-				{:else}
-					<div class="overflow-x-auto">
-						<table class="w-full">
-							<thead>
-								<tr class="border-b border-border text-left text-sm text-muted-foreground">
-									<th class="pb-3 pr-4">Typ</th>
-									<th class="pb-3 pr-4">Beschreibung</th>
-									<th class="pb-3 pr-4">App</th>
-									<th class="pb-3 pr-4 text-right">Betrag</th>
-									<th class="pb-3 pr-4 text-right">Kontostand</th>
-									<th class="pb-3">Datum</th>
-								</tr>
-							</thead>
-							<tbody>
-								{#each transactions as tx}
-									<tr class="border-b border-border last:border-0">
-										<td class="py-3 pr-4">
-											<span class="text-lg">{getTransactionIcon(tx.type)}</span>
-										</td>
-										<td class="py-3 pr-4 text-sm">{tx.description || '-'}</td>
-										<td class="py-3 pr-4 text-sm text-muted-foreground">{tx.appId || '-'}</td>
-										<td class="py-3 pr-4 text-right font-medium {getTransactionColor(tx.type)}">
-											{tx.amount > 0 ? '+' : ''}{formatCredits(tx.amount)}
-										</td>
-										<td class="py-3 pr-4 text-right text-sm text-muted-foreground">
-											{formatCredits(tx.balanceAfter)}
-										</td>
-										<td class="py-3 text-sm text-muted-foreground">{formatDate(tx.createdAt)}</td>
-									</tr>
-								{/each}
-							</tbody>
-						</table>
-					</div>
-				{/if}
-			</Card>
-		{:else if activeTab === 'packages'}
-			<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-				{#each packages as pkg}
-					<Card>
-						<div class="text-center">
-							<h3 class="text-xl font-bold">{pkg.name}</h3>
-							{#if pkg.description}
-								<p class="text-sm text-muted-foreground mt-1">{pkg.description}</p>
-							{/if}
-							<p class="text-4xl font-bold text-primary mt-4">
-								{formatCredits(pkg.credits)}
-							</p>
-							<p class="text-sm text-muted-foreground">Credits</p>
-							<p class="text-2xl font-semibold mt-4">
-								{formatPrice(pkg.priceEuroCents)}
-							</p>
-							<button
-								onclick={() => handleBuyPackage(pkg)}
-								disabled={processingPackageId === pkg.id}
-								class="mt-4 w-full py-2 px-4 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2"
-							>
-								{#if processingPackageId === pkg.id}
-									<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-										<circle
-											class="opacity-25"
-											cx="12"
-											cy="12"
-											r="10"
-											stroke="currentColor"
-											stroke-width="4"
-										></circle>
-										<path
-											class="opacity-75"
-											fill="currentColor"
-											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-										></path>
-									</svg>
-									Wird geladen...
-								{:else}
-									Kaufen
-								{/if}
-							</button>
-						</div>
-					</Card>
-				{/each}
-			</div>
-			{#if packages.length === 0}
-				<Card>
-					<p class="text-center text-muted-foreground py-8">
-						Aktuell sind keine Credit-Pakete verfügbar.
-					</p>
-				</Card>
-			{/if}
-		{:else if activeTab === 'costs'}
-			<!-- Category Filter -->
-			<div class="flex flex-wrap gap-2 mb-6">
-				{#each [{ key: 'all', label: 'Alle' }, { key: 'ai', label: 'KI-Features' }, { key: 'premium', label: 'Premium' }] as filter}
-					<button
-						onclick={() => (costFilter = filter.key as typeof costFilter)}
-						class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors {costFilter ===
-						filter.key
-							? 'bg-primary text-primary-foreground'
-							: 'bg-surface-hover text-muted-foreground hover:text-foreground'}"
-					>
-						{filter.label}
-					</button>
-				{/each}
-			</div>
-
-			<!-- Info -->
-			<div
-				class="mb-6 p-4 rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800"
-			>
-				<p class="text-sm text-blue-800 dark:text-blue-200">
-					Lesen, Bearbeiten, Löschen und Organisieren von Einträgen ist immer <strong
-						>kostenlos</strong
-					>. Credits werden nur für die unten aufgeführten Aktionen verbraucht.
-				</p>
-			</div>
-
-			<!-- Operations grouped by app -->
-			{@const groups = operationsByApp()}
-			<div class="space-y-4">
-				{#each Object.entries(groups) as [app, operations]}
-					<Card>
-						<h3 class="text-lg font-semibold mb-4">{getAppLabel(app)}</h3>
-						<div class="divide-y divide-border">
-							{#each operations as op}
-								<div class="flex items-center justify-between py-3">
-									<div class="flex-1 min-w-0 pr-4">
-										<p class="font-medium text-sm">{op.name}</p>
-										<p class="text-xs text-muted-foreground mt-0.5">{op.description}</p>
-									</div>
-									<div class="flex items-center gap-3 flex-shrink-0">
-										<span class="text-xs text-muted-foreground"
-											>{getCategoryLabel(op.category)}</span
-										>
-										<span
-											class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold tabular-nums {op.cost ===
-											0
-												? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-												: op.cost < 1
-													? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
-													: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'}"
-										>
-											{op.cost === 0 ? 'Kostenlos' : op.formattedCost}
-										</span>
-									</div>
-								</div>
-							{/each}
-						</div>
-					</Card>
-				{/each}
-
-				{#if Object.keys(groups).length === 0}
-					<Card>
-						<p class="text-center text-muted-foreground py-8">
-							Keine Operationen in dieser Kategorie.
-						</p>
-					</Card>
-				{/if}
-			</div>
-		{/if}
-	{/if}
-</div>
-
-<!-- Toast Notification -->
-{#if toastMessage}
-	<div
-		class="fixed bottom-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg animate-fade-in {toastType ===
-		'success'
-			? 'bg-green-600 text-white'
-			: 'bg-red-600 text-white'}"
-	>
-		{toastMessage}
-	</div>
-{/if}
-
-<style>
-	@keyframes fade-in {
-		from {
-			opacity: 0;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-	.animate-fade-in {
-		animation: fade-in 0.2s ease-out;
-	}
-</style>
diff --git a/apps/mana/apps/web/src/routes/(app)/gifts/redeem/[code]/+page.svelte b/apps/mana/apps/web/src/routes/(app)/gifts/redeem/[code]/+page.svelte
index ef40d3441..8b96da549 100644
--- a/apps/mana/apps/web/src/routes/(app)/gifts/redeem/[code]/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/gifts/redeem/[code]/+page.svelte
@@ -134,7 +134,7 @@
 				</p>
 				<div class="mt-8 flex justify-center gap-4">
 					<a
-						href="/credits"
+						href="/?app=credits"
 						class="rounded-lg bg-primary px-6 py-2 font-medium text-primary-foreground hover:bg-primary/90"
 					>
 						Zu meinen Credits
diff --git a/apps/mana/apps/web/src/routes/(app)/settings/sync/+page.svelte b/apps/mana/apps/web/src/routes/(app)/settings/sync/+page.svelte
index d5fd7299e..f2f5f4d46 100644
--- a/apps/mana/apps/web/src/routes/(app)/settings/sync/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/settings/sync/+page.svelte
@@ -198,7 +198,9 @@
 						{#if balance !== null && balance.balance < SYNC_PRICES[selectedInterval]}
 							<p class="mt-2 text-center text-sm text-amber-600 dark:text-amber-400">
 								Nicht genügend Credits.
-								<a href="/credits?tab=packages" class="underline hover:no-underline">Aufladen</a>
+								<a href="/?app=credits&tab=packages" class="underline hover:no-underline"
+									>Aufladen</a
+								>
 							</p>
 						{/if}
 					{/if}