add auth

src/lib/components/auth/SigninModal.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { signinModalState } from '$lib/state/signin-modal.svelte';
+</script>
+
+<Dialog.Root bind:open={signinModalState.open}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Sign in</Dialog.Title>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/chat/User.svelte

@@ -22,6 +22,8 @@
 	import { MAX_MODELS_PER_NODE, MAX_SUGGESTIONS } from '$lib';
 	import { SUGGESTIONS_PROMPT } from '$lib/consts';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import { authState } from '$lib/state/auth.svelte';
+	import { signinModalState } from '$lib/state/signin-modal.svelte';
 
 	let { id, selected }: NodeProps = $props();
 
@@ -72,6 +74,10 @@
 	}
 
 	function handleTriggerAction(models: ChatModel[] = selectedModels) {
+		if (!authState.user) {
+			signinModalState.open = true;
+			return;
+		}
 		const newNodes: Node[] = [];
 		const newEdges: Edge[] = [];
 		messages = [...messages, { role: 'user', content: prompt }];
@@ -123,7 +129,10 @@
 							max_tokens: model.max_tokens,
 							top_p: model.top_p
 						}
-					})
+					}),
+					headers: {
+						Authorization: `Bearer ${authState.token ?? ''}`
+					}
 				});
 				if (!response.ok) throw new Error(response.statusText);
 				if (!response.body) throw new Error('No response body');
@@ -249,7 +258,7 @@
 						}
 					}}
 				></textarea>
-				<div class="flex w-full items-center justify-between gap-1">
+				<div class="flex w-full items-end justify-between gap-1">
 					{#if isFirstNode && !loading && !lastMessage}
 						<div class="items flex w-full gap-1">
 							{#each randomSuggestions as suggestion}
@@ -271,7 +280,7 @@
 						<div></div>
 					{/if}
 					<Button
-						variant={mode.current === 'dark' ? 'default' : 'outline'}
+						variant={mode.current === 'dark' ? 'default' : 'default'}
 						size="icon-sm"
 						class=""
 						disabled={!selectedModels.length || !prompt || loading}

src/lib/components/flow/actions/PanelCanvasActions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Maximize, Lock, LockOpen, Minus, Plus } from '@lucide/svelte';
+	import { Maximize, Lock, LockOpen, Minus, Plus, Move, MousePointer } from '@lucide/svelte';
 	import { Panel } from '@xyflow/svelte';
 
 	import { Button } from '$lib/components/ui/button';
@@ -7,18 +7,17 @@
 	import { viewState } from '$lib/state/view.svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
 	import HFLogo from '$lib/assets/hf-logo.svg';
-	import { Separator } from '$lib/components/ui/separator';
 
-	const { fitView, zoomIn, zoomOut, getZoom, getViewport } = useSvelteFlow();
+	const { fitView, zoomIn, zoomOut, getZoom } = useSvelteFlow();
 </script>
 
-<Panel position="bottom-left" class="space-y-2 p-1 lg:p-2">
+<Panel position="bottom-left" class="flex items-center justify-start gap-2 p-1 lg:p-2">
 	<div
-		class="inline-flex w-fit flex-col gap-0.5 rounded-md border border-border bg-background p-0.5 dark:bg-gray-900"
+		class="inline-flex w-fit flex-row gap-0.5 rounded-lg border border-border bg-background p-1 dark:bg-gray-900"
 	>
 		<Button
 			variant="ghost"
-			size="icon-xs"
+			size="icon-sm"
 			onclick={() => zoomIn({ duration: 200 })}
 			disabled={getZoom() >= 1}
 		>
@@ -26,7 +25,7 @@
 		</Button>
 		<Button
 			variant="ghost"
-			size="icon-xs"
+			size="icon-sm"
 			onclick={() => zoomOut({ duration: 200 })}
 			disabled={getZoom() <= 0.7}
 		>
@@ -34,7 +33,7 @@
 		</Button>
 		<Button
 			variant="ghost"
-			size="icon-xs"
+			size="icon-sm"
 			onclick={() =>
 				fitView({
 					maxZoom: 1,
@@ -45,10 +44,9 @@
 		>
 			<Maximize />
 		</Button>
-		<Separator />
 		<Button
 			variant="ghost"
-			size="icon-xs"
+			size="icon-sm"
 			onclick={() => (viewState.freeView = !viewState.freeView)}
 		>
 			{#if viewState.freeView}
@@ -59,9 +57,27 @@
 		</Button>
 	</div>
 	<div
+		class="inline-flex w-fit flex-row gap-0.5 rounded-lg border border-border bg-background p-1 dark:bg-gray-900"
+	>
+		<Button
+			variant={!viewState.draggable ? 'default' : 'ghost'}
+			size="icon-sm"
+			onclick={() => (viewState.draggable = false)}
+		>
+			<MousePointer />
+		</Button>
+		<Button
+			variant={viewState.draggable ? 'default' : 'ghost'}
+			size="icon-sm"
+			onclick={() => (viewState.draggable = true)}
+		>
+			<Move />
+		</Button>
+	</div>
+	<!-- <div
 		class="flex items-center justify-center gap-1.5 rounded-lg border border-border bg-background py-1.5 pr-3.5 pl-2.5 shadow-xs dark:bg-gray-900"
 	>
 		<img src={HFLogo} alt="HF Logo" class="size-5 lg:size-7" />
 		<p class="text-xs text-accent-foreground">Hugging Face Playground</p>
-	</div>
+	</div> -->
 </Panel>

src/lib/components/flow/actions/PanelRightActions.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
-	import { Contrast, CreditCard, Monitor, Moon, RefreshCcw, Sun, User } from '@lucide/svelte';
+	import {
+		Contrast,
+		CreditCard,
+		LogOut,
+		Monitor,
+		Moon,
+		RefreshCcw,
+		Sun,
+		User
+	} from '@lucide/svelte';
 	import { Panel } from '@xyflow/svelte';
 	import { setMode } from 'mode-watcher';
 
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { tokenModalState } from '$lib/state/token-modal.svelte';
+	import { authState, login, logout } from '$lib/state/auth.svelte';
 	import defaultAvatar from '$lib/assets/default-avatar.svg';
 
 	let { canReset }: { canReset: boolean } = $props();
@@ -28,17 +38,41 @@
 		<DropdownMenu.Trigger>
 			{#snippet child({ props })}
 				<Button {...props} variant="outline">
-					<img src={defaultAvatar} alt="User Avatar" class="size-4" />
-					Account
+					{#if authState.user}
+						<img
+							src={authState.user.avatarUrl}
+							alt={authState.user.name}
+							class="size-4 rounded-full"
+						/>
+						{authState.user.name}
+					{:else}
+						<img src={defaultAvatar} alt="User Avatar" class="size-4" />
+						Account
+					{/if}
 				</Button>
 			{/snippet}
 		</DropdownMenu.Trigger>
-		<DropdownMenu.Content class="w-56" align="start">
+		<DropdownMenu.Content class="w-56" align="end">
+			{#if authState.user}
+				<DropdownMenu.Group>
+					<div class="flex items-center gap-2 px-2 py-1.5">
+						<img
+							src={authState.user.avatarUrl}
+							alt={authState.user.name}
+							class="size-8 rounded-full"
+						/>
+						<div class="flex flex-col">
+							<span class="text-sm font-medium">{authState.user.name}</span>
+							<span class="text-xs text-muted-foreground">@{authState.user.username}</span>
+						</div>
+					</div>
+				</DropdownMenu.Group>
+				<DropdownMenu.Separator />
+			{/if}
 			<DropdownMenu.Group>
 				<DropdownMenu.Item onclick={() => (tokenModalState.open = true)}>
 					<CreditCard />
 					Billings
-					<!-- <DropdownMenu.Shortcut>⇧⌘T</DropdownMenu.Shortcut> -->
 				</DropdownMenu.Item>
 				<DropdownMenu.Sub>
 					<DropdownMenu.SubTrigger>
@@ -56,10 +90,17 @@
 			</DropdownMenu.Group>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Group>
-				<DropdownMenu.Item>
-					<User />
-					Sign In
-				</DropdownMenu.Item>
+				{#if authState.user}
+					<DropdownMenu.Item onclick={logout}>
+						<LogOut />
+						Sign Out
+					</DropdownMenu.Item>
+				{:else}
+					<DropdownMenu.Item onclick={login}>
+						<User />
+						Sign In with Hugging Face
+					</DropdownMenu.Item>
+				{/if}
 			</DropdownMenu.Group>
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>

src/lib/components/ui/button/button.svelte

@@ -7,7 +7,10 @@
 		base: "focus-visible:border-ring cursor-pointer focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+				default:
+					'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs disabled:bg-primary/50!',
+				highlight:
+					'bg-linear-to-br from-blue-500 to-sky-400 text-white hover:brightness-110 shadow-xs',
 				destructive:
 					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs',
 				outline:

src/lib/helpers/types.ts

@@ -18,3 +18,11 @@ export interface ChatMessage {
 	timestamp?: number;
 	isHidden?: boolean;
 }
+
+export interface HFUser {
+	id: string;
+	name: string;
+	username: string;
+	avatarUrl: string;
+	email?: string;
+}

src/lib/state/auth.svelte.ts

@@ -0,0 +1,65 @@
+import { SvelteURL, SvelteURLSearchParams } from 'svelte/reactivity';
+import type { HFUser } from '$lib/helpers/types';
+
+const AUTH_STORAGE_KEY = 'hf_auth';
+
+interface AuthData {
+	token: string;
+	user: HFUser;
+}
+
+export const authState = $state<{ user: HFUser | null; token: string | null; loading: boolean }>({
+	user: null,
+	token: null,
+	loading: true
+});
+
+export async function initAuth() {
+	try {
+		authState.loading = true;
+		const stored = localStorage.getItem(AUTH_STORAGE_KEY);
+		if (stored) {
+			const data: AuthData = JSON.parse(stored);
+			authState.user = data.user;
+			authState.token = data.token;
+		}
+	} catch {
+		localStorage.removeItem(AUTH_STORAGE_KEY);
+	} finally {
+		authState.loading = false;
+	}
+}
+
+export function handleAuthCallback(): boolean {
+	const params = new SvelteURLSearchParams(window.location.search);
+	const authCallback = params.get('auth_callback');
+
+	if (!authCallback) return false;
+
+	try {
+		const data: AuthData = JSON.parse(decodeURIComponent(authCallback));
+		authState.user = data.user;
+		authState.token = data.token;
+		localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(data));
+
+		// Clean up the URL
+		const url = new SvelteURL(window.location.href);
+		url.searchParams.delete('auth_callback');
+		window.history.replaceState({}, '', url.pathname);
+
+		return true;
+	} catch (e) {
+		console.error('Failed to process auth callback:', e);
+		return false;
+	}
+}
+
+export function logout() {
+	authState.user = null;
+	authState.token = null;
+	localStorage.removeItem(AUTH_STORAGE_KEY);
+}
+
+export function login() {
+	window.location.href = '/api/auth/login';
+}

src/lib/state/signin-modal.svelte.ts

@@ -0,0 +1,3 @@
+export const signinModalState = $state({
+	open: false
+});

src/lib/state/view.svelte.ts

@@ -1,3 +1,4 @@
 export const viewState = $state({
-	freeView: false
+	freeView: false,
+	draggable: true
 });

src/routes/+layout.svelte

@@ -8,12 +8,16 @@
 	import MainLoading from '$lib/components/loading/MainLoading.svelte';
 	import TokenManagementModal from '$lib/components/token/TokenManagementModal.svelte';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import { initAuth, handleAuthCallback, authState } from '$lib/state/auth.svelte';
+	import SigninModal from '$lib/components/auth/SigninModal.svelte';
 
 	interface Props {
 		children?: import('svelte').Snippet;
 	}
 
 	onMount(() => {
+		handleAuthCallback();
+		initAuth();
 		fetchModels();
 		handleBreakoints();
 		window.addEventListener('resize', handleBreakoints);
@@ -41,10 +45,11 @@
 <TokenManagementModal />
 <svelte:boundary>
 	<div class="min-h-screen overflow-hidden bg-white">
-		{#if modelsState.loading}
+		{#if modelsState.loading || authState.loading}
 			<MainLoading />
 		{:else}
 			{@render children?.()}
 		{/if}
+		<SigninModal />
 	</div>
 </svelte:boundary>

src/routes/+page.svelte

@@ -22,6 +22,7 @@
 	import { MAX_DEFAULT_MODELS } from '$lib';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 	import PanelCanvasActions from '$lib/components/flow/actions/PanelCanvasActions.svelte';
+	import { viewState } from '$lib/state/view.svelte';
 
 	const nodeTypes = {
 		user: User,
@@ -66,6 +67,7 @@
 		fitView
 		zoomOnScroll={false}
 		panOnScroll={true}
+		panOnScrollSpeed={0.8}
 		panOnScrollMode={PanOnScrollMode.Free}
 		colorMode={mode.current}
 		proOptions={{ hideAttribution: true }}
@@ -75,6 +77,8 @@
 			interpolate: 'smooth',
 			duration: 500
 		}}
+		nodesDraggable={viewState.draggable}
+		panOnDrag={viewState.draggable}
 		onbeforedelete={() => Promise.resolve(false)}
 		defaultEdgeOptions={{ type: 'smoothstep' }}
 		class="bg-background!"

src/routes/api/+server.ts

@@ -37,6 +37,7 @@ export async function POST({ request }: RequestEvent) {
 				for await (const chunk of stream) {
 					const content = chunk.choices?.[0]?.delta?.content ?? '';
 					console.log(chunk);
+					// const usage = {};
 					if (content) {
 						controller.enqueue(encoder.encode(content));
 					}

src/routes/api/auth/callback/+server.ts

@@ -0,0 +1,72 @@
+import { redirect, type RequestEvent } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+
+export async function GET({ url }: RequestEvent) {
+	const code = url.searchParams.get('code');
+
+	if (!code) {
+		return new Response('Missing authorization code', { status: 400 });
+	}
+
+	const clientId = env.HF_CLIENT_ID;
+	const clientSecret = env.HF_CLIENT_SECRET;
+	const redirectUri = env.HF_REDIRECT_URI;
+
+	if (!clientId || !clientSecret || !redirectUri) {
+		return new Response('Missing OAuth configuration', { status: 500 });
+	}
+
+	// Exchange code for access token
+	const tokenResponse = await fetch('https://huggingface.co/oauth/token', {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/x-www-form-urlencoded'
+		},
+		body: new URLSearchParams({
+			client_id: clientId,
+			client_secret: clientSecret,
+			code,
+			grant_type: 'authorization_code',
+			redirect_uri: redirectUri
+		})
+	});
+
+	if (!tokenResponse.ok) {
+		const error = await tokenResponse.text();
+		console.error('Token exchange failed:', error);
+		return new Response('Authentication failed', { status: 401 });
+	}
+
+	const tokenData = await tokenResponse.json();
+	const accessToken = tokenData.access_token;
+
+	// Fetch user info from HF
+	const userResponse = await fetch('https://huggingface.co/oauth/userinfo', {
+		headers: {
+			Authorization: `Bearer ${accessToken}`
+		}
+	});
+
+	if (!userResponse.ok) {
+		console.error('Failed to fetch user info');
+		return new Response('Failed to fetch user info', { status: 500 });
+	}
+
+	const userInfo = await userResponse.json();
+
+	// Encode auth data to pass to the client via query params
+	const authData = encodeURIComponent(
+		JSON.stringify({
+			token: accessToken,
+			user: {
+				id: userInfo.sub,
+				name: userInfo.name || userInfo.preferred_username,
+				username: userInfo.preferred_username,
+				avatarUrl: userInfo.picture,
+				email: userInfo.email
+			}
+		})
+	);
+
+	throw redirect(302, `/?auth_callback=${authData}`);
+}

src/routes/api/auth/login/+server.ts

@@ -0,0 +1,23 @@
+import { redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+
+export async function GET() {
+	const clientId = env.HF_CLIENT_ID;
+	const redirectUri = env.HF_REDIRECT_URI;
+
+	if (!clientId || !redirectUri) {
+		return new Response('Missing OAuth configuration', { status: 500 });
+	}
+
+	const state = crypto.randomUUID();
+
+	const params = new URLSearchParams({
+		client_id: clientId,
+		redirect_uri: redirectUri,
+		response_type: 'code',
+		scope: 'openid profile read-billing inference-api',
+		state
+	});
+
+	throw redirect(302, `https://huggingface.co/oauth/authorize?${params.toString()}`);
+}