@vibesdotdev/auth 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/components/AuthConnectedAccountsPanel.svelte

@@ -0,0 +1,326 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { ConfirmDialog } from '@vibesdotdev/kit/components';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import type {
+		AuthApiClient,
+		AuthConnectedAccount,
+		AuthProviderConfig
+	} from '@vibesdotdev/auth/api';
+	import { navigateAuth, type AuthNavigate } from '../navigation-effect.js';
+	import { browserWindow } from '../browser-window.js';
+	import { failureMessage } from '@vibesdotdev/auth/api';
+	import { attempt } from '../outcome.js';
+	import type { CaughtFailure } from '@vibesdotdev/kernel';
+
+	const defaultProviders: AuthProviderConfig[] = [
+		{ id: 'github', label: 'GitHub', icon: 'lucide:github' },
+		{ id: 'google', label: 'Google', icon: 'flat-color-icons:google' },
+		{ id: 'microsoft', label: 'Microsoft', icon: 'lucide:building-2' },
+		{ id: 'discord', label: 'Discord', icon: 'lucide:message-circle' },
+		{ id: 'twitter', label: 'X' }
+	];
+
+	type Props = {
+		providers?: AuthProviderConfig[];
+		/** Optional test/embedded override. Production resolves runtime/client#auth. */
+		client?: AuthApiClient;
+		/** Host-owned full-page navigation effect. */
+		navigate?: AuthNavigate;
+		disabled?: boolean;
+		onchanged?: (accounts: AuthConnectedAccount[]) => Promise<void> | void;
+		/** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+		onerror?: (failure: CaughtFailure) => void;
+		class?: string;
+	};
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let {
+		providers = defaultProviders,
+		client: suppliedClient,
+		navigate,
+		disabled = false,
+		onchanged,
+		onerror,
+		class: className = ''
+	}: Props = $props();
+
+	let accounts = $state<AuthConnectedAccount[]>([]);
+	let enabledProviderIds = $state<string[]>([]);
+	let loading = $state(true);
+	let connectingProviderId = $state<string | null>(null);
+	let disconnectingAccountId = $state<string | null>(null);
+	let disconnectDialogOpen = $state(false);
+	let accountToDisconnect = $state<AuthConnectedAccount | null>(null);
+	let errorMessage = $state<string | null>(null);
+
+	const accountsByProvider = $derived(
+		new Map(accounts.map((account) => [account.providerId.toLowerCase(), account]))
+	);
+	const visibleProviders = $derived(
+		providers.filter(
+			(provider) =>
+				enabledProviderIds.includes(provider.id) ||
+				accountsByProvider.has(provider.id.toLowerCase())
+		)
+	);
+	const hasCredentialAccount = $derived(
+		accounts.some((account) => account.providerId.toLowerCase() === 'credential')
+	);
+	const connectedProviderCount = $derived(
+		accounts.filter((account) => account.providerId.toLowerCase() !== 'credential').length
+	);
+
+	function formatLinkedDate(value: string): string {
+		const date = new Date(value);
+		if (Number.isNaN(date.getTime())) return 'Unknown';
+		return new Intl.DateTimeFormat(undefined, {
+			dateStyle: 'medium'
+		}).format(date);
+	}
+
+	function providerLabel(providerId: string): string {
+		return (
+			providers.find((provider) => provider.id.toLowerCase() === providerId.toLowerCase())?.label ??
+			providerId
+		);
+	}
+
+	async function resolveClient(): Promise<AuthApiClient> {
+		const client = suppliedClient ?? (await getVibesClient<AuthApiClient>('auth', await runtimeStore.load()));
+		await client.ensureLoaded();
+		return client;
+	}
+
+	function surfaceError(failure: CaughtFailure, fallback: string): void {
+		errorMessage = failureMessage(failure, fallback);
+		onerror?.(failure);
+	}
+
+	async function refresh(): Promise<void> {
+		loading = true;
+		errorMessage = null;
+		enabledProviderIds = [];
+		const loaded = await attempt(async () => {
+			const client = await resolveClient();
+			const [accountResult, providerResult] = await Promise.allSettled([
+				client.listAccounts(),
+				client.listEnabledSocialProviders()
+			]);
+			if (accountResult.status === 'rejected') throw accountResult.reason;
+			accounts = accountResult.value;
+			await onchanged?.(accounts);
+			// Availability must fail closed without hiding existing links or their removal.
+			if (providerResult.status === 'rejected') throw providerResult.reason;
+			enabledProviderIds = providerResult.value;
+		});
+		if (!loaded.ok) surfaceError(loaded.failure, 'Failed to load connected accounts');
+		loading = false;
+	}
+
+	async function connect(provider: AuthProviderConfig): Promise<void> {
+		if (disabled || connectingProviderId || !enabledProviderIds.includes(provider.id)) return;
+		connectingProviderId = provider.id;
+		errorMessage = null;
+		const linked = await attempt(async () => {
+			const callbackURL = browserWindow()?.location.href;
+			const result = await (
+				await resolveClient()
+			).linkSocial(
+				callbackURL
+					? { provider: provider.id, callbackURL, errorCallbackURL: callbackURL }
+					: { provider: provider.id }
+			);
+			if (!navigateAuth(navigate, result.url)) {
+				throw new Error('Account linking requires a browser navigation owner.');
+			}
+		});
+		if (!linked.ok) {
+			surfaceError(linked.failure, `Failed to connect ${provider.label}`);
+			connectingProviderId = null;
+		}
+	}
+
+	function requestDisconnect(account: AuthConnectedAccount): void {
+		accountToDisconnect = account;
+		disconnectDialogOpen = true;
+	}
+
+	async function disconnect(): Promise<void> {
+		const account = accountToDisconnect;
+		if (!account) return;
+		if (disabled || disconnectingAccountId || accounts.length <= 1) return;
+		disconnectingAccountId = account.id;
+		errorMessage = null;
+		const unlinked = await attempt(async () => {
+			await (await resolveClient()).unlinkAccount(account.id);
+			accounts = accounts.filter((candidate) => candidate.id !== account.id);
+			disconnectDialogOpen = false;
+			accountToDisconnect = null;
+			await onchanged?.(accounts);
+		});
+		if (!unlinked.ok) surfaceError(unlinked.failure, `Failed to disconnect ${account.providerId}`);
+		disconnectingAccountId = null;
+	}
+
+	onMount(() => {
+		void refresh();
+	});
+</script>
+
+<div class={`auth-connected-accounts-panel space-y-4 ${className}`}>
+	<Card>
+		<CardHeader>
+			<div class="flex flex-wrap items-start justify-between gap-3">
+				<div class="space-y-1">
+					<CardTitle>Sign-in methods</CardTitle>
+					<CardDescription>
+						{connectedProviderCount > 0
+							? `${connectedProviderCount} external provider${connectedProviderCount === 1 ? '' : 's'} connected`
+							: hasCredentialAccount
+								? 'Password sign-in is available'
+								: 'No sign-in methods are connected'}
+					</CardDescription>
+				</div>
+				<div class="flex items-center gap-2">
+					{#if hasCredentialAccount}
+						<Badge variant="secondary">Password enabled</Badge>
+					{/if}
+					<Badge variant={connectedProviderCount > 0 ? 'secondary' : 'outline'}>
+						{connectedProviderCount}/{visibleProviders.length} linked
+					</Badge>
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						onclick={refresh}
+						disabled={disabled || loading}
+						aria-label="Refresh connected accounts"
+					>
+						<Icon icon="lucide:refresh-cw" class={loading ? 'h-4 w-4 animate-spin' : 'h-4 w-4'} />
+					</Button>
+				</div>
+			</div>
+		</CardHeader>
+
+		{#if errorMessage}
+			<CardContent>
+				<div
+					role="alert"
+					class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm"
+				>
+					{errorMessage}
+				</div>
+			</CardContent>
+		{:else if loading}
+			<CardContent>
+				<div class="flex items-center gap-2 text-sm text-muted-foreground">
+					<Icon icon="lucide:loader-circle" class="h-4 w-4 animate-spin" />
+					Loading sign-in methods
+				</div>
+			</CardContent>
+		{/if}
+	</Card>
+
+	{#if !loading}
+		<div class="grid gap-4 md:grid-cols-2">
+			{#each visibleProviders as provider (provider.id)}
+				{@const account = accountsByProvider.get(provider.id.toLowerCase())}
+				{@const available = enabledProviderIds.includes(provider.id)}
+				<Card class={account ? 'border-primary/30' : ''}>
+					<CardHeader>
+						<div class="flex items-start justify-between gap-3">
+							<div class="flex items-center gap-3">
+								{#if provider.icon}
+									<Icon icon={provider.icon} class="h-5 w-5" />
+								{:else if provider.id === 'twitter'}
+									<span class="h-5 w-5 text-xl leading-none" aria-hidden="true">𝕏</span>
+								{/if}
+								<div>
+									<CardTitle class="text-base">{provider.label}</CardTitle>
+									<CardDescription>
+										{account
+											? available
+												? 'Available for sign in'
+												: 'Linked; sign-in currently unavailable'
+											: 'Add another sign-in option'}
+									</CardDescription>
+								</div>
+							</div>
+							<Badge variant={account ? 'secondary' : 'outline'}>
+								{account ? 'Connected' : 'Available'}
+							</Badge>
+						</div>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						{#if account}
+							<div class="space-y-2 rounded-md border bg-muted/20 p-3 text-sm">
+								<div class="flex items-center justify-between gap-3">
+									<span class="text-muted-foreground">Access</span>
+									<span class="font-medium">Sign in only</span>
+								</div>
+								<div class="flex items-center justify-between gap-3">
+									<span class="text-muted-foreground">Account</span>
+									<span class="truncate font-medium">{account.accountId}</span>
+								</div>
+								<div class="flex items-center justify-between gap-3">
+									<span class="text-muted-foreground">Linked</span>
+									<span class="font-medium">{formatLinkedDate(account.createdAt)}</span>
+								</div>
+							</div>
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								onclick={() => requestDisconnect(account)}
+								disabled={disabled || disconnectingAccountId !== null || accounts.length <= 1}
+								title={accounts.length <= 1
+									? 'Add another sign-in method before disconnecting this one.'
+									: undefined}
+							>
+								{#if disconnectingAccountId === account.id}
+									<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+								{/if}
+								Disconnect {provider.label}
+							</Button>
+						{:else}
+							<Button
+								type="button"
+								size="sm"
+								onclick={() => connect(provider)}
+								disabled={disabled || connectingProviderId !== null}
+							>
+								{#if connectingProviderId === provider.id}
+									<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+								{/if}
+								Connect {provider.label}
+							</Button>
+						{/if}
+					</CardContent>
+				</Card>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<ConfirmDialog
+	bind:open={disconnectDialogOpen}
+	title={`Disconnect ${accountToDisconnect ? providerLabel(accountToDisconnect.providerId) : 'provider'}?`}
+	description="You will no longer be able to sign in with this provider."
+	confirmLabel="Disconnect"
+	variant="destructive"
+	onconfirm={disconnect}
+/>

package/dist/svelte/components/AuthConnectedAccountsPanel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { AuthApiClient, AuthConnectedAccount, AuthProviderConfig } from '@vibesdotdev/auth/api';
+import { type AuthNavigate } from '../navigation-effect.ts';
+import type { CaughtFailure } from '@vibesdotdev/kernel';
+type Props = {
+    providers?: AuthProviderConfig[];
+    /** Optional test/embedded override. Production resolves runtime/client#auth. */
+    client?: AuthApiClient;
+    /** Host-owned full-page navigation effect. */
+    navigate?: AuthNavigate;
+    disabled?: boolean;
+    onchanged?: (accounts: AuthConnectedAccount[]) => Promise<void> | void;
+    /** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+    onerror?: (failure: CaughtFailure) => void;
+    class?: string;
+};
+declare const AuthConnectedAccountsPanel: import("svelte").Component<Props, {}, "">;
+type AuthConnectedAccountsPanel = ReturnType<typeof AuthConnectedAccountsPanel>;
+export default AuthConnectedAccountsPanel;
+//# sourceMappingURL=AuthConnectedAccountsPanel.svelte.d.ts.map

package/dist/svelte/components/AuthConnectedAccountsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthConnectedAccountsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AuthConnectedAccountsPanel.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,MAAM,uBAAuB,CAAC;AAChC,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGxD,KAAK,KAAK,GAAG;IACZ,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,gFAAgF;IAChF,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvE,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAuRH,QAAA,MAAM,0BAA0B,2CAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/dist/svelte/components/AuthSessionsPanel.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+	import {
+		Badge,
+		Button,
+		Card,
+		CardContent,
+		ConfirmDialog,
+		Icon
+	} from '@vibesdotdev/kit/components';
+	import * as Alert from '@vibesdotdev/kit/components/ui/alert';
+	import type { AuthApiClient } from '@vibesdotdev/auth/api';
+	import type { CaughtFailure } from '@vibesdotdev/kernel';
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import {
+		findSessionToken,
+		formatAuthSessionLastActive,
+		getAuthSessionBrowserName,
+		getAuthSessionDeviceIcon,
+		splitAuthSessions,
+		type AuthSessionView
+	} from '../sessions.js';
+	import { failureMessage } from '@vibesdotdev/auth/api';
+	import { attempt } from '../outcome.js';
+
+	type Props = {
+		sessions: AuthSessionView[];
+		currentSessionId?: string | null;
+		disabled?: boolean;
+		warnSessionCount?: number;
+		onsignoutcurrent?: () => Promise<void> | void;
+		/**
+		 * Revoke a single other session by its session id. When provided, the host
+		 * owns revocation (e.g. account-web forwards the id server-side, resolves
+		 * the token there, and keeps the session cookie across the cross-subdomain
+		 * hop — so tokens never reach the browser). Falls back to the in-panel auth
+		 * client (which needs a token from the session list) when omitted.
+		 */
+		onrevoke?: (sessionId: string) => Promise<void> | void;
+		/**
+		 * Sign out of every session. When provided, the host owns the flow
+		 * (account-web revokes all sessions including the current device and
+		 * redirects to sign-in). Falls back to "revoke other sessions" when omitted.
+		 */
+		onrevokeall?: () => Promise<void> | void;
+		onchanged?: () => Promise<void> | void;
+		/** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+		onerror?: (failure: CaughtFailure) => void;
+		class?: string;
+	};
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let {
+		sessions,
+		currentSessionId = null,
+		disabled = false,
+		warnSessionCount = 4,
+		onsignoutcurrent,
+		onrevoke,
+		onrevokeall,
+		onchanged,
+		onerror,
+		class: className = ''
+	}: Props = $props();
+
+	let revokingSession: string | null = $state(null);
+	let signingOutCurrent = $state(false);
+	let confirmSignOutAllOpen = $state(false);
+	let errorMessage = $state<string | null>(null);
+
+	const grouped = $derived(splitAuthSessions(sessions, currentSessionId));
+
+	const signOutAllDescription = $derived(
+		onrevokeall
+			? 'This signs you out on every device, including this one, and returns you to sign in.'
+			: `This will sign you out of ${grouped.otherSessions.length} other device${
+					grouped.otherSessions.length === 1 ? '' : 's'
+				}. You will remain signed in on this device.`
+	);
+
+	async function getAuthClient(): Promise<AuthApiClient> {
+		const client = await getVibesClient<AuthApiClient>('auth', await runtimeStore.load());
+		await client.ensureLoaded();
+		return client;
+	}
+
+	function surfaceError(failure: CaughtFailure, fallback: string): void {
+		errorMessage = failureMessage(failure, fallback);
+		onerror?.(failure);
+	}
+
+	async function signOutCurrentSession(): Promise<void> {
+		if (disabled || signingOutCurrent) return;
+		signingOutCurrent = true;
+		errorMessage = null;
+		const signedOut = await attempt(async () => {
+			if (onsignoutcurrent) {
+				await onsignoutcurrent();
+			} else {
+				const auth = await getAuthClient();
+				await auth.signOut();
+			}
+			await onchanged?.();
+		});
+		if (!signedOut.ok) surfaceError(signedOut.failure, 'Failed to sign out');
+		signingOutCurrent = false;
+	}
+
+	async function revokeSession(sessionId: string): Promise<void> {
+		if (disabled || revokingSession) return;
+
+		revokingSession = sessionId;
+		errorMessage = null;
+		const revoked = await attempt(async () => {
+			if (onrevoke) {
+				// Host-owned: forward the id; the server resolves the token so it
+				// never has to be shipped to the browser.
+				await onrevoke(sessionId);
+			} else {
+				// In-panel fallback needs the raw token from the session list.
+				const token = findSessionToken(sessions, sessionId);
+				if (!token) {
+					throw new Error('Session token is unavailable.');
+				}
+				const auth = await getAuthClient();
+				await auth.revokeSession(token);
+			}
+			await onchanged?.();
+		});
+		if (!revoked.ok) surfaceError(revoked.failure, 'Failed to revoke session');
+		revokingSession = null;
+	}
+
+	async function revokeOtherSessions(): Promise<void> {
+		if (disabled || revokingSession) return;
+		revokingSession = '__all__';
+		errorMessage = null;
+		const revokedOthers = await attempt(async () => {
+			if (onrevokeall) {
+				// Host owns "sign out everywhere + redirect to sign-in"; it navigates
+				// away, so there's nothing left to refresh here.
+				await onrevokeall();
+			} else {
+				const auth = await getAuthClient();
+				await auth.revokeOtherSessions();
+				await onchanged?.();
+			}
+			confirmSignOutAllOpen = false;
+		});
+		if (!revokedOthers.ok) surfaceError(revokedOthers.failure, 'Failed to revoke sessions');
+		revokingSession = null;
+	}
+</script>
+
+<div class={`auth-sessions-panel space-y-6 ${className}`}>
+	{#if sessions.length >= warnSessionCount}
+		<Alert.Root variant="default">
+			<Icon icon="lucide:alert-triangle" class="h-4 w-4" />
+			<Alert.Title>Multiple active sessions detected</Alert.Title>
+			<Alert.Description>
+				You're signed in on {sessions.length} devices. Review them to make sure each session is yours.
+			</Alert.Description>
+		</Alert.Root>
+	{/if}
+
+	{#if errorMessage}
+		<div role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm">
+			{errorMessage}
+		</div>
+	{/if}
+
+	<section class="rounded-lg border p-5">
+		<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+			<div class="space-y-1">
+				<h2 class="text-base font-semibold">Current Session</h2>
+				<p class="text-sm text-muted-foreground">The device you're using right now.</p>
+			</div>
+			<div class="flex items-center gap-2">
+				<Badge variant="default" class="gap-1">
+					<Icon icon="lucide:shield" class="h-3 w-3" />
+					This Device
+				</Badge>
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					onclick={signOutCurrentSession}
+					disabled={disabled || signingOutCurrent}
+				>
+					{#if signingOutCurrent}
+						<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+					{:else}
+						<Icon icon="lucide:log-out" class="mr-1.5 h-4 w-4" />
+					{/if}
+					Sign Out
+				</Button>
+			</div>
+		</div>
+
+		{#if grouped.currentSession}
+			{@const DeviceIcon = getAuthSessionDeviceIcon(grouped.currentSession.userAgent)}
+			<div class="flex items-start gap-4">
+				<Icon icon={DeviceIcon} class="mt-0.5 h-5 w-5 text-muted-foreground" />
+				<div class="flex-1 space-y-1">
+					<p class="font-medium">
+						{getAuthSessionBrowserName(grouped.currentSession.userAgent)}
+					</p>
+					<div class="flex flex-wrap gap-4 text-sm text-muted-foreground">
+						<span class="flex items-center gap-1">
+							<Icon icon="lucide:globe" class="h-3 w-3" />
+							{grouped.currentSession.ipAddress || 'Unknown IP'}
+						</span>
+						<span class="flex items-center gap-1">
+							<Icon icon="lucide:calendar" class="h-3 w-3" />
+							Active now
+						</span>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<p class="text-sm text-muted-foreground">Current session details are unavailable.</p>
+		{/if}
+	</section>
+
+	{#if grouped.otherSessions.length > 0}
+		<section class="rounded-lg border p-5">
+			<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+				<div class="space-y-1">
+					<h2 class="text-base font-semibold">Other Sessions</h2>
+					<p class="text-sm text-muted-foreground">Your active sessions on other devices.</p>
+				</div>
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					onclick={() => (confirmSignOutAllOpen = true)}
+					disabled={disabled || revokingSession !== null}
+				>
+					<Icon icon="lucide:log-out" class="mr-1.5 h-4 w-4" />
+					Sign Out All
+				</Button>
+			</div>
+
+			<div class="divide-y">
+				{#each grouped.otherSessions as session}
+					{@const DeviceIcon = getAuthSessionDeviceIcon(session.userAgent)}
+					<div class="flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between">
+						<div class="flex min-w-0 items-start gap-4">
+							<Icon icon={DeviceIcon} class="mt-0.5 h-5 w-5 text-muted-foreground" />
+							<div class="min-w-0 flex-1 space-y-1">
+								<p class="font-medium">{getAuthSessionBrowserName(session.userAgent)}</p>
+								<div class="flex flex-wrap gap-4 text-sm text-muted-foreground">
+									<span class="flex items-center gap-1">
+										<Icon icon="lucide:globe" class="h-3 w-3" />
+										{session.ipAddress || 'Unknown IP'}
+									</span>
+									<span class="flex items-center gap-1">
+										<Icon icon="lucide:calendar" class="h-3 w-3" />
+										{formatAuthSessionLastActive(session.updatedAt)}
+									</span>
+								</div>
+							</div>
+						</div>
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							onclick={() => revokeSession(session.id)}
+							disabled={disabled || revokingSession !== null}
+						>
+							{#if revokingSession === session.id}
+								<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+							{:else}
+								<Icon icon="lucide:log-out" class="mr-1.5 h-4 w-4" />
+							{/if}
+							Sign Out
+						</Button>
+					</div>
+				{/each}
+			</div>
+		</section>
+	{:else}
+		<Card>
+			<CardContent class="flex flex-col items-center justify-center py-12">
+				<Icon icon="lucide:shield" class="mb-4 h-12 w-12 text-muted-foreground" />
+				<h3 class="text-lg font-medium">No other active sessions</h3>
+				<p class="mt-2 text-center text-muted-foreground">You're only signed in on this device.</p>
+			</CardContent>
+		</Card>
+	{/if}
+</div>
+
+<ConfirmDialog
+	bind:open={confirmSignOutAllOpen}
+	title="Sign out all sessions?"
+	description={signOutAllDescription}
+	confirmLabel="Sign Out All"
+	variant="destructive"
+	onconfirm={revokeOtherSessions}
+/>

package/dist/svelte/components/AuthSessionsPanel.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { CaughtFailure } from '@vibesdotdev/kernel';
+import { type AuthSessionView } from '../sessions.ts';
+type Props = {
+    sessions: AuthSessionView[];
+    currentSessionId?: string | null;
+    disabled?: boolean;
+    warnSessionCount?: number;
+    onsignoutcurrent?: () => Promise<void> | void;
+    /**
+     * Revoke a single other session by its session id. When provided, the host
+     * owns revocation (e.g. account-web forwards the id server-side, resolves
+     * the token there, and keeps the session cookie across the cross-subdomain
+     * hop — so tokens never reach the browser). Falls back to the in-panel auth
+     * client (which needs a token from the session list) when omitted.
+     */
+    onrevoke?: (sessionId: string) => Promise<void> | void;
+    /**
+     * Sign out of every session. When provided, the host owns the flow
+     * (account-web revokes all sessions including the current device and
+     * redirects to sign-in). Falls back to "revoke other sessions" when omitted.
+     */
+    onrevokeall?: () => Promise<void> | void;
+    onchanged?: () => Promise<void> | void;
+    /** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+    onerror?: (failure: CaughtFailure) => void;
+    class?: string;
+};
+declare const AuthSessionsPanel: import("svelte").Component<Props, {}, "">;
+type AuthSessionsPanel = ReturnType<typeof AuthSessionsPanel>;
+export default AuthSessionsPanel;
+//# sourceMappingURL=AuthSessionsPanel.svelte.d.ts.map

package/dist/svelte/components/AuthSessionsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthSessionsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AuthSessionsPanel.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,EAML,KAAK,eAAe,EACpB,MAAM,gBAAgB,CAAC;AAKxB,KAAK,KAAK,GAAG;IACZ,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvC,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAkPH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}