feat(auth): add session expired banner when token refresh fails

Users now see an amber banner with a re-login button instead of a
broken empty page when their session expires. Uses pub/sub events
from tokenManager, integrated in todo, calendar, zitare, contacts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/calendar/apps/web/src/routes/(app)/+layout.svelte

@@ -41,6 +41,12 @@
 	import { searchStore } from '$lib/stores/search.svelte';
 	import { format } from 'date-fns';
 	import { de } from 'date-fns/locale';
+	import type { CreatePreview } from '@manacore/shared-ui';
+	import {
+		parseEventInput,
+		resolveEventIds,
+		formatParsedEventPreview,
+	} from '$lib/utils/event-parser';
 	import UnifiedBar from '$lib/components/calendar/UnifiedBar.svelte';
 	import SettingsModal from '$lib/components/settings/SettingsModal.svelte';
 	import VoiceRecordButton from '$lib/components/voice/VoiceRecordButton.svelte';
@@ -48,6 +54,7 @@
 	import { voiceRecordingStore } from '$lib/stores/voice-recording.svelte';
 	import { calendarOnboarding } from '$lib/stores/app-onboarding.svelte';
 	import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
+	import { SessionExpiredBanner } from '@manacore/shared-auth-ui';
 
 	// App switcher items
 	const appItems = getPillAppItems('calendar');
@@ -93,6 +100,58 @@
 		}
 	}
 
+	// Quick-Create: parse input for preview
+	function handleParseCreate(query: string): CreatePreview | null {
+		if (!query.trim()) return null;
+
+		const parsed = parseEventInput(query);
+		if (!parsed.title && !parsed.startDate) return null;
+
+		const preview = formatParsedEventPreview(parsed);
+		return {
+			title: `"${parsed.title || query.trim()}" erstellen`,
+			subtitle: preview || 'Neuer Termin',
+		};
+	}
+
+	// Quick-Create: create event from parsed input
+	async function handleCreate(query: string): Promise<void> {
+		if (!query.trim()) return;
+
+		const parsed = parseEventInput(query);
+		if (!parsed.title) return;
+
+		const defaultCalendarId =
+			calendarsStore.calendars.find((c) => c.isDefault)?.id || calendarsStore.calendars[0]?.id;
+
+		const resolved = resolveEventIds(
+			parsed,
+			calendarsStore.calendars.map((c) => ({ id: c.id, name: c.name })),
+			eventTagsStore.tags.map((t) => ({ id: t.id, name: t.name })),
+			defaultCalendarId
+		);
+
+		if (!resolved.startTime) {
+			// No date/time parsed - default to now + 1h
+			const now = new Date();
+			now.setMinutes(0, 0, 0);
+			now.setHours(now.getHours() + 1);
+			resolved.startTime = now.toISOString();
+			const end = new Date(now.getTime() + 60 * 60_000);
+			resolved.endTime = end.toISOString();
+		}
+
+		await eventsStore.createEvent({
+			title: resolved.title,
+			startTime: resolved.startTime,
+			endTime: resolved.endTime!,
+			isAllDay: resolved.isAllDay,
+			calendarId: resolved.calendarId,
+			location: resolved.location,
+			tagIds: resolved.tagIds,
+		});
+	}
+
 	// Mobile detection for responsive layout
 	let isMobile = $state(false);
 
@@ -467,6 +526,8 @@
 			<UnifiedBar
 				onSearch={handleSearch}
 				onSelect={handleSelect}
+				onParseCreate={handleParseCreate}
+				onCreate={handleCreate}
 				onSearchChange={handleSearchChange}
 				placeholder="Neuer Termin oder suchen..."
 				emptyText="Keine Termine gefunden"
@@ -529,6 +590,7 @@
 	{#if calendarOnboarding.shouldShow}
 		<MiniOnboardingModal store={calendarOnboarding} appName="Kalender" appEmoji="📅" />
 	{/if}
+	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 {/if}
 
 <style>

apps/contacts/apps/web/src/routes/(app)/+layout.svelte

@@ -46,6 +46,7 @@
 	import { tagsStore } from '$lib/stores/tags.svelte';
 	import { contactsOnboarding } from '$lib/stores/app-onboarding.svelte';
 	import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
+	import { SessionExpiredBanner } from '@manacore/shared-auth-ui';
 
 	// Tags state for Quick-Create
 	let availableTags = $state<{ id: string; name: string }[]>([]);
@@ -408,6 +409,7 @@
 			{/if}
 		</div>
 	</SplitPaneContainer>
+	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 {/if}
 
 <style>

apps/todo/apps/web/src/routes/(app)/+layout.svelte

@@ -40,6 +40,7 @@
 	import { parseTaskInput, resolveTaskIds, formatParsedTaskPreview } from '$lib/utils/task-parser';
 	import { todoOnboarding } from '$lib/stores/app-onboarding.svelte';
 	import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
+	import { SessionExpiredBanner } from '@manacore/shared-auth-ui';
 	import { TodoEvents } from '@manacore/shared-utils/analytics';
 
 	// App switcher items
@@ -472,6 +473,7 @@
 			{/if}
 		</div>
 	</SplitPaneContainer>
+	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 {/if}
 
 <style>

apps/zitare/apps/web/src/routes/(app)/+layout.svelte

@@ -26,6 +26,7 @@
 	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
 	import { getPillAppItems } from '@manacore/shared-branding';
 	import { setLocale, supportedLocales } from '$lib/i18n';
+	import { SessionExpiredBanner } from '@manacore/shared-auth-ui';
 	import { QUOTES, type Quote } from '@zitare/content';
 
 	// App switcher items
@@ -335,6 +336,7 @@
 			</div>
 		</main>
 	</div>
+	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 {/if}
 
 <style>

packages/shared-auth-ui/src/components/SessionExpiredBanner.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { onSessionExpired, isSessionExpired, resetSessionExpired } from '@manacore/shared-auth';
+	import { Warning, X, SignOut } from '@manacore/shared-icons';
+
+	interface Props {
+		/** Login page URL. Defaults to '/login'. */
+		loginHref?: string;
+		/** Locale for text. Supports 'de' and 'en'. Defaults to 'de'. */
+		locale?: string;
+	}
+
+	let { loginHref = '/login', locale = 'de' }: Props = $props();
+
+	let visible = $state(false);
+	let dismissed = $state(false);
+
+	const texts = $derived(
+		locale === 'en'
+			? {
+					message: 'Your session has expired. Please sign in again.',
+					button: 'Sign in',
+					dismiss: 'Close',
+				}
+			: {
+					message: 'Deine Sitzung ist abgelaufen. Bitte melde dich erneut an.',
+					button: 'Neu anmelden',
+					dismiss: 'Schließen',
+				}
+	);
+
+	function handleDismiss() {
+		dismissed = true;
+		visible = false;
+	}
+
+	function handleLogin() {
+		resetSessionExpired();
+		window.location.href = loginHref;
+	}
+
+	onMount(() => {
+		// Check if already expired on mount
+		if (isSessionExpired()) {
+			visible = true;
+		}
+
+		// Subscribe to future expiry events
+		const unsubscribe = onSessionExpired(() => {
+			if (!dismissed) {
+				visible = true;
+			}
+		});
+
+		return unsubscribe;
+	});
+</script>
+
+{#if visible && !dismissed}
+	<div class="session-expired-banner" role="alert" aria-live="assertive">
+		<div class="session-expired-content">
+			<div class="session-expired-icon">
+				<Warning size={20} weight="fill" />
+			</div>
+			<p class="session-expired-message">{texts.message}</p>
+			<div class="session-expired-actions">
+				<button class="session-expired-login" onclick={handleLogin}>
+					<SignOut size={16} weight="bold" />
+					{texts.button}
+				</button>
+				<button class="session-expired-dismiss" onclick={handleDismiss} aria-label={texts.dismiss}>
+					<X size={18} weight="bold" />
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.session-expired-banner {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 9999;
+		display: flex;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+		animation: slideDown 300ms ease-out;
+	}
+
+	@keyframes slideDown {
+		from {
+			transform: translateY(-100%);
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	.session-expired-content {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		max-width: 600px;
+		width: 100%;
+		padding: 0.75rem 1rem;
+		border-radius: 0.75rem;
+		background: #fef3c7;
+		border: 1px solid #f59e0b;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	}
+
+	:global(.dark) .session-expired-content {
+		background: #78350f;
+		border-color: #b45309;
+		color: #fef3c7;
+	}
+
+	.session-expired-icon {
+		flex-shrink: 0;
+		color: #d97706;
+	}
+
+	:global(.dark) .session-expired-icon {
+		color: #fbbf24;
+	}
+
+	.session-expired-message {
+		flex: 1;
+		margin: 0;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		color: #92400e;
+	}
+
+	:global(.dark) .session-expired-message {
+		color: #fef3c7;
+	}
+
+	.session-expired-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	.session-expired-login {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: white;
+		background: #d97706;
+		border: none;
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition: background 150ms ease;
+		white-space: nowrap;
+	}
+
+	.session-expired-login:hover {
+		background: #b45309;
+	}
+
+	:global(.dark) .session-expired-login {
+		background: #f59e0b;
+		color: #78350f;
+	}
+
+	:global(.dark) .session-expired-login:hover {
+		background: #fbbf24;
+	}
+
+	.session-expired-dismiss {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		padding: 0;
+		color: #92400e;
+		background: transparent;
+		border: none;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: background 150ms ease;
+	}
+
+	.session-expired-dismiss:hover {
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.dark) .session-expired-dismiss {
+		color: #fef3c7;
+	}
+
+	:global(.dark) .session-expired-dismiss:hover {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	/* Mobile: stack vertically */
+	@media (max-width: 480px) {
+		.session-expired-content {
+			flex-wrap: wrap;
+		}
+
+		.session-expired-message {
+			flex-basis: calc(100% - 3rem);
+		}
+
+		.session-expired-actions {
+			margin-left: auto;
+		}
+	}
+</style>

packages/shared-auth-ui/src/index.ts

@@ -8,6 +8,7 @@ export { default as GoogleSignInButton } from './components/GoogleSignInButton.s
 export { default as AppleSignInButton } from './components/AppleSignInButton.svelte';
 export { default as GuestWelcomeModal } from './components/GuestWelcomeModal.svelte';
 export { default as AuthGateModal } from './components/AuthGateModal.svelte';
+export { default as SessionExpiredBanner } from './components/SessionExpiredBanner.svelte';
 
 // Utilities
 export {

packages/shared-auth/src/core/tokenManager.ts

@@ -7,6 +7,7 @@ import type {
 import { TokenState as TokenStateEnum } from '../types';
 import { isDeviceConnected, hasStableConnection } from '../adapters/network';
 import type { AuthService } from './authService';
+import { emitSessionExpired } from '../events/sessionExpired';
 
 /**
  * Configuration for the token manager
@@ -110,6 +111,7 @@ export function createTokenManager(authService: AuthService, config?: TokenManag
 		try {
 			await authService.clearAuthStorage();
 			setState(TokenStateEnum.EXPIRED);
+			emitSessionExpired();
 		} catch (error) {
 			console.debug('Error in handleRefreshFailure:', error);
 		}

packages/shared-auth/src/events/sessionExpired.ts

@@ -0,0 +1,68 @@
+/**
+ * Session expired event system
+ *
+ * Provides a simple pub/sub mechanism for notifying UI layers
+ * when a user's session has permanently expired (token refresh failed).
+ *
+ * This is intentionally kept framework-agnostic so it can be consumed
+ * by Svelte, React, or plain JS consumers.
+ */
+
+type SessionExpiredListener = () => void;
+
+const listeners = new Set<SessionExpiredListener>();
+
+let _sessionExpired = false;
+
+/**
+ * Subscribe to session expired events.
+ * Returns an unsubscribe function.
+ */
+export function onSessionExpired(listener: SessionExpiredListener): () => void {
+	listeners.add(listener);
+
+	// If session is already expired, notify immediately
+	if (_sessionExpired) {
+		try {
+			listener();
+		} catch {
+			// Ignore listener errors
+		}
+	}
+
+	return () => {
+		listeners.delete(listener);
+	};
+}
+
+/**
+ * Emit a session expired event.
+ * Called internally by the token manager when refresh fails permanently.
+ */
+export function emitSessionExpired(): void {
+	if (_sessionExpired) return; // Only emit once
+	_sessionExpired = true;
+
+	listeners.forEach((listener) => {
+		try {
+			listener();
+		} catch {
+			// Ignore listener errors
+		}
+	});
+}
+
+/**
+ * Reset the session expired state.
+ * Should be called when the user logs in again.
+ */
+export function resetSessionExpired(): void {
+	_sessionExpired = false;
+}
+
+/**
+ * Check if the session is currently marked as expired.
+ */
+export function isSessionExpired(): boolean {
+	return _sessionExpired;
+}

packages/shared-auth/src/index.ts

@@ -74,6 +74,16 @@ export type { FetchInterceptorConfig } from './interceptors/fetchInterceptor';
 export { ContactsClient, createContactsClient } from './clients/contactsClient';
 export type { ContactsClientConfig, ContactSearchOptions } from './clients/contactsClient';
 
+// Session expired events
+import { resetSessionExpired as _resetSessionExpired } from './events/sessionExpired';
+import { TokenState as _TokenStateEnum } from './types';
+export {
+	onSessionExpired,
+	emitSessionExpired,
+	resetSessionExpired,
+	isSessionExpired,
+} from './events/sessionExpired';
+
 /**
  * Initialize auth service with all adapters for web
  *
@@ -112,5 +122,12 @@ export function initializeWebAuth(config: {
 	if (config.backendUrl) urls.push(config.backendUrl);
 	_setupFetchInterceptor(authService, tokenManager, { urls });
 
+	// Reset session expired state when token becomes valid again (e.g., after re-login)
+	tokenManager.subscribe((state) => {
+		if (state === _TokenStateEnum.VALID) {
+			_resetSessionExpired();
+		}
+	});
+
 	return { authService, tokenManager };
 }