fix: prevent infinite loops and dashboard freezes

- Add reentrancy guard to _notify() in data module (iframe + production)
- Simplify ProjectThumbnail to only use published HTML (no on-the-fly compile)
- Only sync changed fields in realtime updates to avoid false freeze detection
- Preserve kit context in header logo link

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: elemdos

src/lib/compiler/iframe.js

@@ -85,6 +85,7 @@ function create_collection(name) {
   let cache = null
   let last_params = null
   let mutation_cooldown = 0 // Timestamp until which we ignore external updates
+  let notifying = false // Reentrancy guard to prevent infinite loops
 
   // Compare two record arrays for equality (by JSON serialization)
   function records_equal(a, b) {
@@ -100,6 +101,10 @@ function create_collection(name) {
   const collection = {
     // Notify all subscribers with new data (skip if unchanged or in cooldown)
     _notify(records, force = false) {
+      // Prevent reentrant calls - if a subscriber triggers another mutation,
+      // don't recursively notify (the mutation will schedule its own notification)
+      if (notifying) return
+
       // During cooldown period, ignore external updates (SSE/realtime)
       // This prevents re-renders when our own mutations echo back
       if (!force && Date.now() < mutation_cooldown) {
@@ -109,8 +114,13 @@ function create_collection(name) {
         return // Skip notification if data hasn't changed
       }
       cache = records
-      for (const cb of subscribers) {
-        try { cb(records) } catch (e) { console.error('[db] subscriber error:', e) }
+      notifying = true
+      try {
+        for (const cb of subscribers) {
+          try { cb(records) } catch (e) { console.error('[db] subscriber error:', e) }
+        }
+      } finally {
+        notifying = false
       }
     },
 

src/routes/tinykit/dashboard/components/ProjectThumbnail.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
 	import { onMount } from "svelte"
 	import Icon from "@iconify/svelte"
-	import { processCode, dynamic_iframe_srcdoc } from "$lib/compiler/init"
 	import { pb } from "$lib/pocketbase.svelte"
-	import type { DesignField, ContentField } from "../../types"
 
 	let {
-		code = "",
-		design = [],
-		content = [],
-		data = {},
 		compiled_html = "",
 		project_id = "",
 		collection_id = "_tk_projects",
 		fallback_icon = ""
 	}: {
-		code: string
-		design: DesignField[]
-		content?: ContentField[]
+		code?: string
+		design?: any[]
+		content?: any[]
 		data?: Record<string, any>
 		compiled_html?: string
 		project_id?: string
@@ -27,36 +21,14 @@
 
 	let srcdoc = $state("")
 	let is_loading = $state(true)
-	let has_error = $state(false)
-	let iframe_el = $state<HTMLIFrameElement | null>(null)
-	let pending_code: string | null = null
-
-	function handle_message(e: MessageEvent) {
-		if (e.source !== iframe_el?.contentWindow) return
-		const { event: msg_event } = e.data || {}
-		if (msg_event === "INITIALIZED" && pending_code) {
-			// Clone data to avoid DataCloneError from Svelte 5 reactive proxies
-			const cloned_data = JSON.parse(JSON.stringify(data || {}))
-			// Send component code with data - iframe will populate collections before mounting
-			iframe_el?.contentWindow?.postMessage({
-				event: "SET_APP",
-				payload: { componentApp: pending_code, data: cloned_data }
-			}, "*")
-			pending_code = null
-		}
-	}
 
 	onMount(() => {
-		window.addEventListener("message", handle_message)
 		load_preview()
-
-		return () => {
-			window.removeEventListener("message", handle_message)
-		}
 	})
 
 	async function load_preview() {
 		// If we have a published_html file, fetch its contents
+		// This is the ONLY safe way to show thumbnails - published HTML is pre-compiled
 		if (compiled_html && project_id) {
 			try {
 				const file_url = pb.files.getURL(
@@ -74,44 +46,10 @@
 			}
 		}
 
-		// Otherwise compile on-the-fly with full data support
-		if (!code) {
-			is_loading = false
-			return
-		}
-
-		try {
-			const result = await processCode({
-				component: code,
-				buildStatic: false,
-				runtime: ["mount", "unmount"]
-			})
-
-			if (result.error || !result.js) {
-				has_error = true
-				is_loading = false
-				return
-			}
-
-			// Extract collection names from data object
-			const data_collections = Object.keys(data || {})
-
-			// Store compiled code to send when iframe is ready
-			pending_code = result.js
-
-			// Build srcdoc with full data module support
-			srcdoc = dynamic_iframe_srcdoc("", {
-				content: content || [],
-				design: design || [],
-				project_id: project_id || "",
-				data_collections
-			})
-		} catch (err) {
-			console.error("[ProjectThumbnail] Compile error:", err)
-			has_error = true
-		} finally {
-			is_loading = false
-		}
+		// Don't compile on-the-fly for thumbnails - it's too risky
+		// Complex apps can freeze the entire dashboard with infinite loops
+		// Just show a placeholder if no published HTML exists
+		is_loading = false
 	}
 </script>
 
@@ -120,7 +58,7 @@
 		<div class="placeholder loading">
 			<div class="spinner"></div>
 		</div>
-	{:else if has_error || !srcdoc}
+	{:else if !srcdoc}
 		<div class="placeholder ghost">
 			{#if fallback_icon}
 				<Icon icon={fallback_icon} class="fallback-icon" />
@@ -130,7 +68,6 @@
 		</div>
 	{:else}
 		<iframe
-			bind:this={iframe_el}
 			title="Project preview"
 			{srcdoc}
 			sandbox="allow-scripts allow-same-origin"

src/routes/tinykit/lib/api.svelte.ts

@@ -601,6 +601,7 @@ function create_collection(name) {
   let cache = null
   let last_params = null
   let mutation_cooldown = 0 // Timestamp until which we ignore external updates
+  let notifying = false // Reentrancy guard to prevent infinite loops
 
   // Compare two record arrays for equality (by JSON serialization)
   function records_equal(a, b) {
@@ -663,6 +664,10 @@ function create_collection(name) {
   const collection = {
     // Notify all subscribers with new data (skip if unchanged or in cooldown)
     _notify(records, force = false) {
+      // Prevent reentrant calls - if a subscriber triggers another mutation,
+      // don't recursively notify (the mutation will schedule its own notification)
+      if (notifying) return
+
       // During cooldown period, ignore external updates (SSE/realtime)
       // This prevents re-renders when our own mutations echo back
       if (!force && Date.now() < mutation_cooldown) {
@@ -672,8 +677,13 @@ function create_collection(name) {
         return // Skip notification if data hasn't changed
       }
       cache = records
-      for (const cb of subscribers) {
-        try { cb(records) } catch (e) { console.error('[db] subscriber error:', e) }
+      notifying = true
+      try {
+        for (const cb of subscribers) {
+          try { cb(records) } catch (e) { console.error('[db] subscriber error:', e) }
+        }
+      } finally {
+        notifying = false
       }
     },
 

src/routes/tinykit/studio/+page.svelte

@@ -1011,6 +1011,7 @@
         <Header
           project_title={project_title ?? ""}
           project_id={store?.project?.id ?? ""}
+          kit_id={store?.project?.kit}
           {vibe_zone_enabled}
           bind:preview_position
           {project_domain}

src/routes/tinykit/studio/components/Header.svelte

@@ -29,6 +29,7 @@
   type HeaderProps = {
     project_title: string;
     project_domain: string;
+    kit_id?: string;
     is_deploying: boolean;
     vibe_zone_enabled: boolean;
     preview_position: PreviewPosition;
@@ -53,6 +54,7 @@
   let {
     project_title = "",
     project_domain = "",
+    kit_id,
     is_deploying,
     vibe_zone_enabled,
     preview_position = $bindable(),
@@ -70,6 +72,8 @@
     is_mobile = false,
   }: HeaderProps = $props();
 
+  let dashboard_href = $derived(kit_id ? `/tinykit?kit=${kit_id}` : "/tinykit");
+
   const position_options: {
     id: PreviewPosition;
     label: string;
@@ -231,7 +235,7 @@
     class="h-14 border-t border-[var(--builder-border)] bg-[var(--builder-bg-primary)] flex items-center justify-between px-4 flex-shrink-0 relative z-30"
   >
     <!-- Left: Logo -->
-    <a href="/tinykit" class="logo">
+    <a href={dashboard_href} class="logo">
       <Logo />
     </a>
 
@@ -327,7 +331,7 @@
   >
     <!-- Left: Logo -->
     <div class="flex items-center space-x-3 flex-shrink-0">
-      <a href="/tinykit" class="logo">
+      <a href={dashboard_href} class="logo">
         <Logo />
       </a>
       <!-- Project name and save status -->

src/routes/tinykit/studio/project.svelte.ts

@@ -126,14 +126,23 @@ export class ProjectStore {
                             const last_msg = incoming_msgs[incoming_msgs.length - 1];
                             const agent_just_finished = last_msg?.role === 'assistant' && last_msg?.status === 'complete';
 
-                            // Only sync frontend_code when agent finishes to avoid lockups
-                            // During streaming, we skip code sync - CodeMirror can't handle rapid large updates
+                            // Only sync fields that actually changed to avoid triggering
+                            // unnecessary reactive updates (which can cause false freeze detection)
+                            const incoming_content = JSON.stringify(incoming.content || []);
+                            const current_content = JSON.stringify(this.project?.content || []);
+                            const content_changed = incoming_content !== current_content;
+
+                            const incoming_design = JSON.stringify(incoming.design || []);
+                            const current_design = JSON.stringify(this.project?.design || []);
+                            const design_changed = incoming_design !== current_design;
+
                             this.project = {
                                 ...this.project!,
                                 agent_chat: incoming.agent_chat,
-                                content: incoming.content,
-                                design: incoming.design,
-                                data: incoming.data,
+                                // Only sync fields that actually changed
+                                ...(content_changed ? { content: incoming.content } : {}),
+                                ...(design_changed ? { design: incoming.design } : {}),
+                                ...(data_changed ? { data: incoming.data } : {}),
                                 // Sync code only when agent finishes (prevents lockup during streaming)
                                 ...(agent_just_finished ? { frontend_code: incoming.frontend_code } : {})
                             };