fix: improve project handling and routing UX

- Guard against undefined project_id in data module generation
- Reset auth throttle on token expiry for immediate re-auth
- Add null-check in getProject
- Redirect first-time users to new-kit page
- Update routes to use /tinykit instead of /tinykit/dashboard
- Remove unnecessary auto-build on kit creation

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

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

Author: elemdos

src/lib/compiler/iframe.js

@@ -21,14 +21,22 @@ export const generate_design_css = (design) => {
  * @returns {string}
  */
 const generate_data_module = (project_id, collections) => {
+  // Guard against undefined/null project_id being stringified as 'undefined'/'null'
+  const safe_project_id = project_id || ''
+
   const collection_entries = collections
     .map(name => `  ${name}: create_collection('${name}')`)
     .join(',\n')
 
   return `
-const PROJECT_ID = '${project_id}'
+const PROJECT_ID = '${safe_project_id}'
 const API_BASE = '/_tk/data'
 
+// Validate PROJECT_ID is set
+if (!PROJECT_ID) {
+  console.warn('[db] No project ID configured - data operations will fail')
+}
+
 // Global registry for realtime updates
 const _collections = {}
 

src/lib/components/Preview.svelte

@@ -139,18 +139,20 @@
     },
   );
 
-  // Watch for content/design/data_files changes only (not agent_chat or record data)
+  // Watch for content/design/data_files changes AND project_id changes
   // Using JSON.stringify ensures we only react to actual value changes, not reference changes
+  // Including project_id ensures srcdoc is recreated when project changes
   watch(
     () => store?.project
       ? JSON.stringify({
+          project_id, // Include project_id to trigger recreation when it changes
           content: store.content,
           design: store.design,
           data_files: store.data_files
         })
       : null,
     () => {
-      if (store?.project) {
+      if (store?.project && project_id) {
         apply_config_update(
           store.content || [],
           store.design || [],

src/lib/server/pb.ts

@@ -88,6 +88,7 @@ export async function ensureAuth(): Promise<boolean> {
 	if (isAuthenticated && !pb.authStore.isValid) {
 		console.log('[PB] Auth token expired, re-authenticating...')
 		isAuthenticated = false
+		lastCredentialsCheck = 0 // Reset throttle so we can re-auth immediately
 	}
 
 	// Check for new config every 5 seconds if not authenticated
@@ -228,6 +229,8 @@ export async function listProjects(): Promise<Project[]> {
  * Get a project by ID
  */
 export async function getProject(id: string): Promise<Project | null> {
+	if (!id) return null
+
 	const authed = await ensureAuth()
 	if (!authed) {
 		console.error(`[PB] Cannot get project ${id}: Server auth not available`)

src/routes/setup/+page.svelte

@@ -143,7 +143,7 @@
 
 			// Setup complete, auto-login with the same credentials
 			await auth.login(email, password);
-			goto("/tinykit/dashboard");
+			goto("/tinykit");
 		} catch (err: any) {
 			error = err.message || "Setup failed. Please try again.";
 		} finally {

src/routes/tinykit/+page.svelte

@@ -86,6 +86,11 @@
 
     // Load data
     await Promise.all([load_projects(), load_kits()]);
+
+    // First-time user with no projects? Guide them to create one
+    if (projects.length === 0 && kits.length === 0) {
+      goto("/tinykit/new-kit");
+    }
   });
 
   async function load_projects() {

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

@@ -583,15 +583,23 @@ function generate_production_html({ body, head = '', hydration_js, config }: Pro
  * Includes realtime subscription support via PocketBase
  */
 function generate_data_module(project_id: string, collections: string[]): string {
+	// Guard against undefined/null project_id being stringified
+	const safe_project_id = project_id || ''
+
 	// Generate collection entries
 	const collection_entries = collections
 		.map(name => `  ${name}: create_collection('${name}')`)
 		.join(',\n')
 
 	return `
-const PROJECT_ID = '${project_id}'
+const PROJECT_ID = '${safe_project_id}'
 const API_BASE = '/_tk/data'
 
+// Validate PROJECT_ID is set
+if (!PROJECT_ID) {
+  console.warn('[db] No project ID configured - data operations will fail')
+}
+
 // Global registry for realtime updates
 const _collections = {}
 

src/routes/tinykit/new-kit/+page.svelte

@@ -9,7 +9,6 @@
   import { auth, pb } from "$lib/pocketbase.svelte";
   import { get_featured_kits_with_templates, type KitWithTemplates, type Template } from "$lib/templates";
   import { processCode, dynamic_iframe_srcdoc, generate_design_css } from "$lib/compiler/init";
-  import { build_app } from "../lib/api.svelte";
 
   const kits = get_featured_kits_with_templates();
   let is_creating = $state(false);
@@ -176,22 +175,8 @@
       // Batch create selected templates
       const created_projects = await project_service.batch_create_kit(kit.id, templates_to_create);
 
-      // Build all projects in parallel for preview thumbnails
-      console.log(`Building ${created_projects.length} projects...`);
-      const build_results = await Promise.all(
-        created_projects.map(p =>
-          build_app(p.id)
-            .then(res => {
-              console.log(`Built ${p.name}:`, res);
-              return { success: true, project: p.name };
-            })
-            .catch(err => {
-              console.error(`Failed to build ${p.name}:`, err);
-              return { success: false, project: p.name, error: err };
-            })
-        )
-      );
-      console.log('Build results:', build_results);
+      // Note: We don't auto-build here - thumbnails only show for deployed apps
+      // Users can deploy individual apps when ready
 
       // Redirect to dashboard with this kit selected
       goto(`/tinykit?kit=${kit.id}`);

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

@@ -250,7 +250,7 @@
 	<header class="border-b border-[var(--builder-border)] px-6 py-4">
 		<div class="max-w-2xl mx-auto flex items-center gap-4">
 			<a
-				href="/tinykit/dashboard"
+				href="/tinykit"
 				class="p-2 -ml-2 text-[var(--builder-text-secondary)] hover:text-[var(--builder-text-primary)] transition-colors"
 			>
 				<ArrowLeft class="w-5 h-5" />