From 05369f185602882275eca3d4a406750130ca8c75 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Fri, 10 Jul 2026 21:45:41 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20Alpine=20x-for=20errors=20=E2=80=94=20tr?=
 =?UTF-8?q?ee=20init=20+=20unique=20keys=20+=20=5Floaded=20guard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- tree starts as [] (not undefined) so x-for doesn't crash
- :key uses node.db_id || 'item-'+idx for uniqueness
- _loaded guard prevents rendering before async init completes
- Empty state shows while loading, tree only renders after load()
---
 app/templates/local_workspace.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html
index e51d435..a1ed355 100644
--- a/app/templates/local_workspace.html
+++ b/app/templates/local_workspace.html
@@ -71,8 +71,8 @@
   </div>
 
   <!-- Recursive tree -->
-  <ul class="ws-tree" x-show="tree.length">
-    <template x-for="node in tree" :key="node.id">
+  <ul class="ws-tree" x-show="tree.length && _loaded">
+    <template x-for="(node, idx) in tree" :key="node.db_id || 'item-'+idx">
       <li>
         <div class="ws-tree-item"
              :data-id="node.db_id"
@@ -162,6 +162,7 @@ function wsPage() {
     createType: 'file', newName: '', parentFolder: null,
     renameTarget: null, deleteTarget: null,
     expandedFolders: {},
+    _loaded: false,
 
     async init() { await this.load(); },
 
@@ -170,7 +171,8 @@ function wsPage() {
         const r = await fetch('/api/local-workspace/tree');
         const data = await r.json();
         this.tree = this.flattenTree(data.tree || [], 0);
-      } catch(e) { console.error(e); }
+        this._loaded = true;
+      } catch(e) { console.error(e); this._loaded = true; }
     },
 
     flattenTree(nodes, depth) {