fix with claude the auto fit view

src/lib/components/chat/User.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Send, X } from '@lucide/svelte';
+	import { Send, X, TriangleAlert } from '@lucide/svelte';
 	import {
 		Handle,
 		useEdges,
@@ -38,6 +38,7 @@
 	let isFirstNode = $derived((nodeData.current?.data.isFirstNode as boolean) ?? false);
 	let prompt = $state.raw<string>((nodeData.current?.data.prompt as string) ?? '');
 	let loading = $state.raw<boolean>(false);
+	let errorMessage = $state.raw<string>('');
 	let messages = $state.raw<ChatMessage[]>(
 		(nodeData.current?.data?.messages as ChatMessage[]) ?? []
 	);
@@ -77,6 +78,7 @@
 			signinModalState.open = true;
 			return;
 		}
+		errorMessage = '';
 		const newNodes: Node[] = [];
 		const newEdges: Edge[] = [];
 		messages = [...messages, { role: 'user', content: prompt }];
@@ -134,7 +136,10 @@
 						Authorization: `Bearer ${authState.token ?? ''}`
 					}
 				});
-				if (!response.ok) throw new Error(response.statusText);
+				if (!response.ok) {
+					const errorBody = await response.text().catch(() => response.statusText);
+					throw new Error(errorBody || response.statusText);
+				}
 				if (!response.body) throw new Error('No response body');
 
 				let content = '';
@@ -145,6 +150,10 @@
 				while (true) {
 					const { done, value } = await reader.read();
 					if (done) {
+						if (content.includes('__ERROR__')) {
+							const errorMessage = content.split('__ERROR__').pop() ?? 'Unknown error';
+							throw new Error(errorMessage);
+						}
 						const newNodeId = `user-${crypto.randomUUID()}`;
 						const newNode: Node = {
 							id: newNodeId,
@@ -179,7 +188,14 @@
 					updateNodeData(node.id, { ...node.data, content, loading: false }, { replace: true });
 				}
 			} catch (error) {
-				console.error(error);
+				const msg = error instanceof Error ? error.message : 'An unknown error occurred';
+				// Remove the failed assistant node and its edge
+				updateNodes((currentNodes) => currentNodes.filter((n) => n.id !== node.id));
+				updateEdges((currentEdges) => currentEdges.filter((e) => e.target !== node.id));
+				// Revert messages so the user can re-send
+				messages = messages.filter((m, i) => i < messages.length - 1 || m.role !== 'user');
+				updateNodeData(id, { ...nodeData.current?.data, messages }, { replace: true });
+				errorMessage = msg;
 			} finally {
 				loading = false;
 			}
@@ -246,6 +262,24 @@
 				{/if}
 			</div>
 		</header>
+		{#if errorMessage}
+			<div
+				class="mb-2.5 flex items-center justify-between gap-3 rounded-lg bg-rose-500/10 p-3 text-sm text-rose-600"
+			>
+				<div class="flex items-center gap-1">
+					<TriangleAlert class="size-4 shrink-0" />
+					<p class="flex-1 text-sm text-red-600">{errorMessage}</p>
+				</div>
+				<Button
+					variant="destructive"
+					size="icon-3xs"
+					class="!shadow-none! rounded-full!"
+					onclick={() => (errorMessage = '')}
+				>
+					<X class="size-3" />
+				</Button>
+			</div>
+		{/if}
 		{#if lastMessage}
 			<Message message={lastMessage} />
 		{:else}

src/lib/components/flow/FitViewOnResize.svelte

@@ -8,7 +8,6 @@
 
 	let { initialNodes }: { initialNodes: Node[] } = $props();
 
-	// Fallback dimensions (used before nodes are measured by xyflow)
 	const DEFAULT_WIDTH = breakpointsState.isMobile ? 300 : 600;
 	const DEFAULT_HEIGHT = 200;
 	const H_SPACING = 60;
@@ -20,17 +19,23 @@
 
 	let lastLayoutKey = $state<string | null>(null);
 
-	/** Get the actual measured height of a node, or fallback */
+	// ─── Helpers ────────────────────────────────────────────────────────
+
 	function getMeasuredHeight(node: Node): number {
 		return node.measured?.height ?? DEFAULT_HEIGHT;
 	}
 
-	/** Get the actual measured width of a node, or fallback */
 	function getMeasuredWidth(node: Node): number {
 		return node.measured?.width ?? DEFAULT_WIDTH;
 	}
 
-	// Layout key: changes when nodes/edges are added/removed, OR when measured dimensions change
+	/** Side children are placed to the RIGHT of their parent (same row). */
+	function isSideChild(nodeId: string, nodeMap: Map<string, Node>): boolean {
+		return nodeMap.get(nodeId)?.type === 'user-follow-up';
+	}
+
+	// ─── Layout key (triggers re-layout on structural / measurement changes) ───
+
 	const layoutKey = $derived(
 		(() => {
 			const nodes = nodesStore.current;
@@ -45,7 +50,6 @@
 				.map((e) => `${e.source}-${e.target}`)
 				.sort()
 				.join(',');
-			// Include measured dimensions so layout re-runs when nodes get measured
 			const dims = ns
 				.map((n) => `${n.id}:${n.measured?.width ?? 0}x${n.measured?.height ?? 0}`)
 				.sort()
@@ -67,8 +71,10 @@
 		runLayout(ns, es);
 	});
 
+	// ─── Window resize ─────────────────────────────────────────────────
+
 	function handleWindowResize() {
-		if (!viewState.draggable) return;
+		if (viewState.draggable) return;
 		fitView({
 			maxZoom: 1,
 			minZoom: breakpointsState.isMobile ? 1 : 0.8,
@@ -77,139 +83,180 @@
 		});
 	}
 
-	onMount(() => {
-		window.addEventListener('resize', handleWindowResize);
-	});
-
-	onDestroy(() => {
-		window.removeEventListener('resize', handleWindowResize);
-	});
-
-	/** Whether a child should be placed to the right of its parent (same row) */
-	function isSideChild(nodeId: string, nodeMap: Map<string, Node>): boolean {
-		const node = nodeMap.get(nodeId);
-		return node?.type === 'user-follow-up';
-	}
+	onMount(() => window.addEventListener('resize', handleWindowResize));
+	onDestroy(() => window.removeEventListener('resize', handleWindowResize));
+
+	// ─── Layout algorithm ──────────────────────────────────────────────
+	//
+	// Two-phase block-based tree layout that guarantees zero overlap.
+	//
+	// Each node's subtree is split into two non-overlapping horizontal zones:
+	//
+	//   Block A (left)  — the node itself, with its below-children stacked underneath.
+	//   Block B (right) — side-children (user-follow-up) and their full subtrees.
+	//
+	//   ┌──────────────Block A──────────────┐  ┌─────Block B─────┐
+	//   │         ┌────────────┐            │  │  ┌────────────┐ │
+	//   │         │   Parent   │            │  │  │  Side node │ │
+	//   │         └────────────┘            │  │  └────────────┘ │
+	//   │  ┌──────────┐  ┌──────────┐      │  │  ┌──────────┐   │
+	//   │  │ Child  A  │  │ Child  B │      │  │  │ Side sub │   │
+	//   │  └──────────┘  └──────────┘      │  │  └──────────┘   │
+	//   └───────────────────────────────────┘  └─────────────────┘
+	//
+	// Phase 1 (bottom-up): compute the bounding-box extent of every subtree.
+	// Phase 2 (top-down):  assign positions, centering parents above children.
+	//
+
+	type Extent = {
+		/** Total bounding-box width of the entire subtree. */
+		width: number;
+		/** Total bounding-box height of the entire subtree. */
+		height: number;
+		/** Width of Block A only (node + below-children column). */
+		blockAWidth: number;
+	};
 
-	/**
-	 * Custom tree layout:
-	 * - Root nodes (no incoming edge) on the same horizontal row
-	 * - Siblings (children sharing the same source) on the same horizontal row
-	 * - user-follow-up nodes placed to the RIGHT of their source (same row)
-	 * - Parent centered above its below-children
-	 * - Works recursively for any depth
-	 */
 	function computeLayout(nodes: Node[], edges: Edge[]): Node[] {
+		if (nodes.length === 0) return [];
+
 		const nodeMap = new Map(nodes.map((n) => [n.id, n]));
 
-		// Build parent->children mapping from edges
-		const childrenBySource = new Map<string, string[]>();
+		// Build parent → children adjacency from edges
+		const childrenOf = new Map<string, string[]>();
 		const hasParent = new Set<string>();
+
 		for (const e of edges) {
 			hasParent.add(e.target);
-			const list = childrenBySource.get(e.source) ?? [];
+			const list = childrenOf.get(e.source) ?? [];
 			list.push(e.target);
-			childrenBySource.set(e.source, list);
+			childrenOf.set(e.source, list);
 		}
 
-		// Root nodes: no incoming edge
-		const rootNodes = nodes.filter((n) => !hasParent.has(n.id));
+		const roots = nodes.filter((n) => !hasParent.has(n.id));
+
+		// ── Phase 1: compute extents bottom-up ──────────────────────────
+
+		const extents = new Map<string, Extent>();
 
-		// 1) Compute the horizontal space each subtree needs (ignoring side children)
-		const subtreeWidths = new Map<string, number>();
+		function computeExtent(nodeId: string): Extent {
+			if (extents.has(nodeId)) return extents.get(nodeId)!;
 
-		function computeSubtreeWidth(nodeId: string): number {
-			if (subtreeWidths.has(nodeId)) return subtreeWidths.get(nodeId)!;
 			const node = nodeMap.get(nodeId);
-			const nodeWidth = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
-			const children = childrenBySource.get(nodeId) ?? [];
+			const nodeW = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
+			const nodeH = node ? getMeasuredHeight(node) : DEFAULT_HEIGHT;
+
+			const children = childrenOf.get(nodeId) ?? [];
+			const sideIds = children.filter((id) => isSideChild(id, nodeMap));
+			const belowIds = children.filter((id) => !isSideChild(id, nodeMap));
+
+			// Block A — node width vs. combined below-children width
+			let belowTotalW = 0;
+			let belowMaxH = 0;
+
+			for (let i = 0; i < belowIds.length; i++) {
+				const ext = computeExtent(belowIds[i]);
+				if (i > 0) belowTotalW += H_SPACING;
+				belowTotalW += ext.width;
+				belowMaxH = Math.max(belowMaxH, ext.height);
+			}
+
+			const blockAW = Math.max(nodeW, belowTotalW);
+			const blockAH = belowIds.length > 0 ? nodeH + V_SPACING + belowMaxH : nodeH;
 
-			// Side children are independent — they don't affect the main tree width
-			const belowChildIds = children.filter((id) => !isSideChild(id, nodeMap));
+			// Block B — side-children and their subtrees
+			let blockBW = 0;
+			let blockBH = 0;
 
-			if (belowChildIds.length === 0) {
-				subtreeWidths.set(nodeId, nodeWidth);
-				return nodeWidth;
+			for (let i = 0; i < sideIds.length; i++) {
+				const ext = computeExtent(sideIds[i]);
+				if (i > 0) blockBW += H_SPACING;
+				blockBW += ext.width;
+				blockBH = Math.max(blockBH, ext.height);
 			}
 
-			const belowChildrenWidth =
-				belowChildIds.reduce((sum, cid) => sum + computeSubtreeWidth(cid), 0) +
-				(belowChildIds.length - 1) * H_SPACING;
+			const totalW = sideIds.length > 0 ? blockAW + H_SPACING + blockBW : blockAW;
+			const totalH = Math.max(blockAH, blockBH);
 
-			const width = Math.max(nodeWidth, belowChildrenWidth);
-			subtreeWidths.set(nodeId, width);
-			return width;
+			const extent: Extent = { width: totalW, height: totalH, blockAWidth: blockAW };
+			extents.set(nodeId, extent);
+			return extent;
 		}
 
-		for (const root of rootNodes) {
-			computeSubtreeWidth(root.id);
-		}
-		// Also compute widths for side-child subtrees (they need it for their own below-children)
-		for (const node of nodes) {
-			if (!subtreeWidths.has(node.id)) {
-				computeSubtreeWidth(node.id);
-			}
+		// Compute all extents (roots first, then any orphans)
+		for (const r of roots) computeExtent(r.id);
+		for (const n of nodes) {
+			if (!extents.has(n.id)) computeExtent(n.id);
 		}
 
-		// 2) Place nodes top-down
+		// ── Phase 2: assign positions top-down ──────────────────────────
+
 		const positions = new Map<string, { x: number; y: number }>();
 
-		function placeNode(nodeId: string, allocatedX: number, y: number) {
+		function placeSubtree(nodeId: string, allocX: number, y: number) {
 			const node = nodeMap.get(nodeId);
-			const nodeWidth = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
-			const nodeHeight = node ? getMeasuredHeight(node) : DEFAULT_HEIGHT;
-			const stWidth = subtreeWidths.get(nodeId) ?? nodeWidth;
-			const children = childrenBySource.get(nodeId) ?? [];
-
-			const sideChildIds = children.filter((id) => isSideChild(id, nodeMap));
-			const belowChildIds = children.filter((id) => !isSideChild(id, nodeMap));
-
-			// Center node within its allocated subtree space
-			const x = allocatedX + (stWidth - nodeWidth) / 2;
-			positions.set(nodeId, { x, y });
-
-			// Place below-children under this node
-			if (belowChildIds.length > 0) {
-				const childY = y + nodeHeight + V_SPACING;
-				let childX = allocatedX;
-				for (const childId of belowChildIds) {
-					const childStWidth = subtreeWidths.get(childId) ?? DEFAULT_WIDTH;
-					placeNode(childId, childX, childY);
-					childX += childStWidth + H_SPACING;
+			const nodeW = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
+			const nodeH = node ? getMeasuredHeight(node) : DEFAULT_HEIGHT;
+
+			const children = childrenOf.get(nodeId) ?? [];
+			const sideIds = children.filter((id) => isSideChild(id, nodeMap));
+			const belowIds = children.filter((id) => !isSideChild(id, nodeMap));
+
+			const { blockAWidth } = extents.get(nodeId)!;
+
+			// Center the node horizontally within Block A
+			positions.set(nodeId, {
+				x: allocX + (blockAWidth - nodeW) / 2,
+				y
+			});
+
+			// Place below-children, centered within Block A
+			if (belowIds.length > 0) {
+				let belowTotalW = 0;
+				for (let i = 0; i < belowIds.length; i++) {
+					if (i > 0) belowTotalW += H_SPACING;
+					belowTotalW += extents.get(belowIds[i])!.width;
+				}
+
+				const childY = y + nodeH + V_SPACING;
+				let childX = allocX + (blockAWidth - belowTotalW) / 2;
+
+				for (const cid of belowIds) {
+					placeSubtree(cid, childX, childY);
+					childX += extents.get(cid)!.width + H_SPACING;
 				}
 			}
 
-			// Place side-children to the right of this node, same Y (independent of main tree)
-			let sideX = x + nodeWidth + H_SPACING;
-			for (const sideId of sideChildIds) {
-				placeNode(sideId, sideX, y);
-				const sideNode = nodeMap.get(sideId);
-				const sideWidth = sideNode ? getMeasuredWidth(sideNode) : DEFAULT_WIDTH;
-				sideX += sideWidth + H_SPACING;
+			// Place side-children to the right of Block A (non-overlapping zone)
+			let sideX = allocX + blockAWidth + H_SPACING;
+			for (const sid of sideIds) {
+				placeSubtree(sid, sideX, y);
+				sideX += extents.get(sid)!.width + H_SPACING;
 			}
 		}
 
-		// Place root nodes side by side
+		// Lay out root nodes side by side
 		let rootX = 0;
-		for (const root of rootNodes) {
-			placeNode(root.id, rootX, 0);
-			rootX += (subtreeWidths.get(root.id) ?? DEFAULT_WIDTH) + H_SPACING;
+		for (const r of roots) {
+			placeSubtree(r.id, rootX, 0);
+			rootX += extents.get(r.id)!.width + H_SPACING;
 		}
 
-		// Orphan nodes (safety net)
+		// Safety net for any disconnected / orphan nodes
 		for (const node of nodes) {
 			if (positions.has(node.id)) continue;
-			const allY = Array.from(positions.values()).map((p) => p.y);
-			const maxY = allY.length > 0 ? Math.max(...allY) : 0;
+			const maxY = Math.max(0, ...Array.from(positions.values()).map((p) => p.y));
 			positions.set(node.id, { x: 0, y: maxY + DEFAULT_HEIGHT + V_SPACING });
 		}
 
-		return nodes.map((node) => ({
-			...node,
-			position: positions.get(node.id) ?? { x: 0, y: 0 }
+		return nodes.map((n) => ({
+			...n,
+			position: positions.get(n.id) ?? { x: 0, y: 0 }
 		}));
 	}
 
+	// ─── Apply layout to the store ─────────────────────────────────────
+
 	function runLayout(nodes: Node[], edges: Edge[]) {
 		const result = computeLayout(nodes, edges);
 
@@ -217,16 +264,16 @@
 		if (current.length === 0) {
 			nodesStore.set(result);
 		} else {
-			const positionMap = new Map(result.map((n) => [n.id, n.position]));
+			const posMap = new Map(result.map((n) => [n.id, n.position]));
 			nodesStore.update((prev) =>
 				prev.map((n) => {
-					const pos = positionMap.get(n.id);
+					const pos = posMap.get(n.id);
 					return pos ? { ...n, position: pos } : n;
 				})
 			);
 		}
 
-		if (!viewState.draggable) {
+		if (viewState.draggable) {
 			fitView({
 				maxZoom: 1,
 				minZoom: breakpointsState.isMobile ? 1 : 0.7,

src/routes/+page.svelte

@@ -58,7 +58,6 @@
 		// }
 	}}
 />
-<!-- todo: resolve collissions when new nodes are added, maybe do it in the fitviewonresize component -->
 <div class="h-screen w-screen overflow-hidden">
 	<SvelteFlow
 		bind:nodes

src/routes/api/+server.ts

@@ -33,14 +33,13 @@ export async function POST({ request }: RequestEvent) {
 			try {
 				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));
 					}
 				}
 			} catch (err) {
-				controller.error(err);
+				const message = err instanceof Error ? err.message : 'An unknown error occurred';
+				controller.enqueue(encoder.encode(`\n\n__ERROR__${message}`));
 			} finally {
 				controller.close();
 			}