better styling

package.json

@@ -77,6 +77,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@dagrejs/dagre": "^1.1.5",
 		"@modelcontextprotocol/sdk": "^1.13.3",
 		"@tailwindcss/typography": "^0.5.16",
 		"@xyflow/svelte": "^1.2.4",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@dagrejs/dagre':
+        specifier: ^1.1.5
+        version: 1.1.5
       '@modelcontextprotocol/sdk':
         specifier: ^1.13.3
         version: 1.17.5
@@ -263,6 +266,13 @@ packages:
     resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
     engines: {node: '>=18'}
 
+  '@dagrejs/[email protected]':
+    resolution: {integrity: sha512-Ghgrh08s12DCL5SeiR6AoyE80mQELTWhJBRmXfFoqDiFkR458vPEdgTbbjA0T+9ETNxUblnD0QW55tfdvi5pjQ==}
+
+  '@dagrejs/[email protected]':
+    resolution: {integrity: sha512-mepCf/e9+SKYy1d02/UkvSy6+6MoyXhVxP8lLDfA7BPE1X1d4dR0sZznmbM8/XVJ1GPM+Svnx7Xj6ZweByWUkw==}
+    engines: {node: '>17.0.0'}
+
   '@emnapi/[email protected]':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
@@ -3518,6 +3528,12 @@ snapshots:
 
   '@csstools/[email protected]': {}
 
+  '@dagrejs/[email protected]':
+    dependencies:
+      '@dagrejs/graphlib': 2.2.4
+
+  '@dagrejs/[email protected]': {}
+
   '@emnapi/[email protected]':
     dependencies:
       tslib: 2.8.1

src/routes/canvas/chat-node.svelte

@@ -12,13 +12,18 @@
 	import IconX from "~icons/lucide/x";
 	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 	import ModelPicker from "./model-picker.svelte";
+	import ProviderPicker from "./provider-picker.svelte";
+	import { ElementSize } from "runed";
 
-	type Props = Omit<NodeProps, "data"> & { data: { query: string; response: string; modelId?: Model["id"] } };
+	type Props = Omit<NodeProps, "data"> & {
+		data: { query: string; response: string; modelId?: Model["id"]; provider?: string };
+	};
 	let { id, data }: Props = $props();
 
 	let { updateNodeData, updateNode, getNode } = useSvelteFlow();
 	onMount(() => {
 		if (!data.modelId) data.modelId = models.trending[0]?.id;
+		if (!data.provider) data.provider = "auto";
 		updateNode(id, { height: undefined });
 	});
 
@@ -80,7 +85,8 @@
 			});
 
 			const stream = client.chatCompletionStream({
-				provider: "auto",
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				provider: (data.provider || "auto") as any,
 				model: data.modelId,
 				messages,
 				temperature: 0.5,
@@ -97,15 +103,24 @@
 			isLoading = false;
 		}
 	}
+
+	let node = $state<HTMLElement>();
+	const size = new ElementSize(() => node);
 </script>
 
 <div
-	class="chat-node relative flex h-full min-h-[200px] w-full max-w-[500px] min-w-[300px]
-	flex-col items-stretch rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"
+	class="chat-node group relative flex h-full min-h-[200px] w-full max-w-[800px]
+	min-w-[500px] flex-col items-stretch rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"
+	bind:this={node}
 >
-	<!-- Model selector -->
-	<div class="mb-4">
+	<!-- Model and Provider selectors -->
+	<div class="mb-4 space-y-3">
 		<ModelPicker modelId={data.modelId} onModelSelect={modelId => updateNodeData(id, { modelId })} />
+		<ProviderPicker
+			provider={data.provider}
+			modelId={data.modelId}
+			onProviderSelect={provider => updateNodeData(id, { provider })}
+		/>
 	</div>
 
 	<form class="flex flex-col gap-4" onsubmit={handleSubmit}>
@@ -159,16 +174,16 @@
 
 	<!-- Add node button -->
 	<button
-		class="abs-x-center absolute -bottom-4 z-10 flex items-center gap-1.5
-		rounded-full bg-black px-4 py-2 text-xs font-medium
-		text-white shadow-sm transition-all hover:scale-[1.02]
+		class="abs-x-center absolute -bottom-4 z-10 flex items-center gap-1.5 rounded-full bg-black
+		px-4 py-2 text-xs font-medium text-white opacity-0
+		shadow-sm transition-all group-hover:opacity-100 hover:scale-[1.02]
 		hover:bg-gray-900 focus:ring-2 focus:ring-gray-900/20 focus:outline-none active:scale-[0.98]"
 		onclick={() => {
 			const curr = getNode(id);
 			const newNode: Node = {
 				id: crypto.randomUUID(),
-				position: { x: curr?.position.x ?? 100, y: (curr?.position.y ?? 0) + 400 },
-				data: { query: "", response: "", modelId: data.modelId },
+				position: { x: curr?.position.x ?? 100, y: (curr?.position.y ?? 0) + size.height + 40 },
+				data: { query: "", response: "", modelId: data.modelId, provider: data.provider },
 				type: "chat",
 				width: undefined,
 				height: undefined,
@@ -200,7 +215,11 @@
 </div>
 
 <Handle type="target" position={Position.Top} class="h-3 w-3 border-2 border-white bg-gray-500 shadow-sm" />
-<Handle type="source" position={Position.Bottom} class="h-3 w-3 border-2 border-white bg-gray-500 shadow-sm" />
+<Handle
+	type="source"
+	position={Position.Bottom}
+	class="h-3 w-3 border-2 border-white bg-gray-500 opacity-0 shadow-sm"
+/>
 
 <!-- <NodeResizeControl minWidth={200} minHeight={150}> -->
 <!-- 	<IconResize class="absolute right-2 bottom-2" /> -->

src/routes/canvas/provider-picker.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { models } from "$lib/state/models.svelte.js";
+	import { pricing } from "$lib/state/pricing.svelte.js";
+	import { isHFModel } from "$lib/types.js";
+	import { Select } from "melt/builders";
+	import IconCaret from "~icons/carbon/chevron-down";
+	import IconProvider from "../../lib/components/icon-provider.svelte";
+
+	interface Props {
+		provider?: string;
+		modelId?: string;
+		onProviderSelect?: (provider: string) => void;
+	}
+
+	let { provider = "auto", modelId, onProviderSelect }: Props = $props();
+
+	const selectedModel = $derived.by(() => {
+		if (!modelId) return undefined;
+		return models.all.find(m => m.id === modelId);
+	});
+
+	const availableProviders = $derived.by(() => {
+		if (!selectedModel || !isHFModel(selectedModel)) return [{ provider: "auto", providerId: "auto" }];
+		if (!selectedModel.inferenceProviderMapping) return [{ provider: "auto", providerId: "auto" }];
+		return [...selectedModel.inferenceProviderMapping, { provider: "auto", providerId: "auto" }];
+	});
+
+	const select = new Select<string, false>({
+		value: () => provider,
+		onValueChange(newProvider) {
+			if (!newProvider) return;
+			onProviderSelect?.(newProvider);
+		},
+	});
+
+	const nameMap: Record<string, string> = {
+		"sambanova": "SambaNova",
+		"fal": "fal",
+		"cerebras": "Cerebras",
+		"replicate": "Replicate",
+		"black-forest-labs": "Black Forest Labs",
+		"fireworks-ai": "Fireworks",
+		"together": "Together AI",
+		"nebius": "Nebius AI Studio",
+		"hyperbolic": "Hyperbolic",
+		"novita": "Novita",
+		"cohere": "Cohere",
+		"hf-inference": "HF Inference API",
+	};
+
+	const UPPERCASE_WORDS = ["hf", "ai"];
+
+	function formatName(provider: string) {
+		if (provider in nameMap) return nameMap[provider];
+
+		const words = provider
+			.toLowerCase()
+			.split("-")
+			.map(word => {
+				if (UPPERCASE_WORDS.includes(word)) {
+					return word.toUpperCase();
+				} else {
+					return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+				}
+			});
+
+		return words.join(" ");
+	}
+
+	function getProviderName(provider: string) {
+		if (provider in nameMap) return formatName(provider);
+		return provider === "auto" ? "Auto" : provider;
+	}
+
+	function getProviderPricing(provider: string) {
+		if (provider === "auto" || !selectedModel) return null;
+		const pd = pricing.getPricing(selectedModel.id, provider);
+		return pricing.formatPricing(pd);
+	}
+</script>
+
+{#snippet providerDisplay(providerValue: string)}
+	{@const providerPricing = getProviderPricing(providerValue)}
+	<div class="flex flex-col items-start gap-0.5">
+		<div class="flex items-center gap-2 text-sm text-gray-900">
+			<IconProvider provider={providerValue} />
+			<span>{getProviderName(providerValue)}</span>
+		</div>
+		{#if providerPricing}
+			<span class="text-xs text-gray-500">
+				In: {providerPricing.input} • Out: {providerPricing.output}
+			</span>
+		{/if}
+	</div>
+{/snippet}
+
+<div class="relative w-full">
+	<label class="block space-y-1.5 text-xs font-medium text-gray-600">
+		<p>Provider</p>
+
+		<button
+			{...select.trigger}
+			class="relative flex w-full items-center justify-between gap-6 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm leading-tight whitespace-nowrap shadow-sm transition-colors hover:bg-gray-100 focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10 focus:outline-none"
+		>
+			{@render providerDisplay(provider)}
+			<div class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs">
+				<IconCaret />
+			</div>
+		</button>
+	</label>
+
+	<div
+		{...select.content}
+		class="absolute z-50 mt-1 hidden w-full !min-w-[300px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg data-[open]:block"
+	>
+		{#snippet option(providerValue: string)}
+			<div {...select.getOption(providerValue)} class="group block w-full p-1 text-sm">
+				<div class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-100">
+					{@render providerDisplay(providerValue)}
+				</div>
+			</div>
+		{/snippet}
+
+		{#each availableProviders as { provider: providerValue } (providerValue)}
+			{@render option(providerValue)}
+		{/each}
+	</div>
+</div>

src/routes/canvas/state.ts

@@ -1,11 +1,11 @@
-import type { Edge, Node } from "@xyflow/svelte";
+import { type Edge, type Node } from "@xyflow/svelte";
 import { PersistedState } from "runed";
 
 export const nodes = new PersistedState<Node[]>("inf-pg-nodes", [
 	{
 		id: "1",
 		position: { x: 100, y: 100 },
-		data: { query: "", response: "", modelId: undefined },
+		data: { query: "", response: "", modelId: undefined, provider: "auto" },
 		type: "chat",
 		width: undefined,
 		height: undefined,