From 6f8976817aea55c268ac6091ce7c581bcd7e0d1c Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Mon, 13 Jul 2026 08:10:03 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20148=20erreurs=20Alpine.js=20=E2=80=94=20?=
 =?UTF-8?q?IIFE=20avant=20le=20DOM=20x-data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cause: l'IIFE window._wsInitData était située APRÈS le <div ws-split>.
Alpine évaluait x-data="window._wsInitData" AVANT que l'IIFE ne tourne
→ toutes les propriétés (flatTree, tree, online, ctxMenu, preview*, etc.)
   étaient undefined → 148 erreurs Alpine Expression Error.

Fix: déplacement de l'IIFE (lignes 871-2405) avant le ws-split (ligne 339).
Ordre corrigé: IIFE → _wsInitData prêt → ws-split x-data OK.

Vérification: le diagnostic log « ws-split about to render, _wsInitData exists: »
affichera maintenant true au lieu de false.
---
 app/templates/local_workspace.html | 1064 ++++++++++++++--------------
 1 file changed, 532 insertions(+), 532 deletions(-)

diff --git a/app/templates/local_workspace.html b/app/templates/local_workspace.html
index ec9e359..deee917 100644
--- a/app/templates/local_workspace.html
+++ b/app/templates/local_workspace.html
@@ -336,538 +336,6 @@
 .preview-leave-end{transform:translateX(100%);opacity:0;}
 </style>
 
-<script>console.log('FLOWDECK v2.4.6 — ws-split about to render, _wsInitData exists:', typeof window._wsInitData !== 'undefined');</script>
-
-<div class="ws-split" x-data="window._wsInitData"
-     @dragover.prevent="onDragOver($event)"
-     @dragleave="onDragLeave($event)"
-     @drop.prevent="onDrop($event)"
-     @keydown="onKeydown($event)"
-     @contextmenu.prevent="if(window._wsData) window._wsData.onContextMenu($event)"
-     @click.self="ctxMenu.visible = false"
-     tabindex="0"
-     x-ref="layout">
-  <div class="ws-main">
-
-  <!-- Drop overlay -->
-  <div class="drop-overlay" :class="{ active: isDragging }">
-    <div class="drop-hint">
-      <span class="icon">📥</span>
-      <div>Drop files here</div>
-      <div style="font-size:12px;color:var(--text-tertiary);margin-top:6px;" x-show="dropTarget">
-        Into: <strong x-text="dropTargetName"></strong>
-      </div>
-    </div>
-  </div>
-
-  <!-- Upload progress -->
-  <div class="upload-progress" x-show="uploading" x-transition>
-    <div style="display:flex;align-items:center;gap:8px;">
-      <span x-text="uploading ? '⏳' : ''"></span>
-      <span x-text="uploadStatus"></span>
-      <span style="font-size:11px;color:var(--text-tertiary);" x-show="uploadSpeed" x-text="uploadSpeed"></span>
-    </div>
-    <div class="up-bar">
-      <div class="up-bar-fill" :style="{ width: uploadProgress + '%' }"></div>
-    </div>
-  </div>
-
-  <!-- Undo toast -->
-  <div class="undo-toast" x-show="undoVisible" x-transition>
-    <span x-text="undoMessage"></span>
-    <button class="undo-btn" @click="undoDelete()">Undo</button>
-    <button class="undo-dismiss" @click="undoVisible=false">×</button>
-  </div>
-
-  <!-- Breadcrumb row -->
-  <div class="breadcrumb-row">
-    <button class="btn-icon nav-arrow" x-show="sidebarCollapsed" x-cloak @click="sidebarCollapsed = false" title="Show sidebar" style="margin-right:2px;">☰</button>
-    <a href="/workspaces" class="btn-icon nav-arrow" title="All workspaces">🏠</a>
-    <button class="btn-icon nav-arrow" @click="goBack()" title="Back" :disabled="!canGoBack">←</button>
-    <button class="btn-icon nav-arrow" @click="goForward()" title="Forward" :disabled="!canGoForward">→</button>
-    <div class="unified-breadcrumb">
-      <span class="bc-icon">📁</span>
-      <a href="/local-workspace" @click.prevent="navigateToRoot()" class="bc-root">{{ workspace_name }}</a>
-      <template x-for="(b, i) in folderStack" :key="'bc'+b.id">
-        <span style="display:contents;">
-          <span class="bc-sep">/</span>
-          <a href="#" @click.prevent="navigateToBreadcrumb(i)" x-text="b.name"
-             :class="{ 'bc-current': i === folderStack.length - 1 }"
-             @dblclick.prevent="startInlineRename(b, $event)"></a>
-        </span>
-      </template>
-      <div class="bc-edit-wrap" x-show="editingPath" @click.outside="editingPath=false" style="display:contents;">
-        <input class="bc-edit-input" x-ref="pathEdit" :value="pathValue"
-               @keydown.enter="navigateToPath(), editingPath=false"
-               @keydown.escape="editingPath=false"
-               placeholder="/workspace/...">
-        <button class="bc-edit-go" @click="navigateToPath(), editingPath=false">→</button>
-      </div>
-      <button class="bc-edit-trigger" x-show="!editingPath" @click="startPathEdit()" title="Edit path">✎</button>
-    </div>
-  </div>
-
-  <!-- Toolbar row -->
-  <div class="toolbar-row">
-    <div class="view-dropdown" @click.outside="viewMenuOpen=false" @keydown.escape="viewMenuOpen=false">
-      <button class="view-dropdown-btn" @click="viewMenuOpen=!viewMenuOpen" title="View">
-        <span x-text="viewIcons[viewMode] || '🌳'"></span>
-        <span x-text="viewLabels[viewMode] || 'Tree'"></span>
-        <span class="dropdown-arrow">▾</span>
-      </button>
-      <div class="view-dropdown-menu" x-show="viewMenuOpen" x-transition @click="viewMenuOpen=false">
-        <button class="view-menu-item" :class="{ active: viewMode==='tree' }" @click="viewMode='tree', previewItem=null">🌳 Tree</button>
-        <button class="view-menu-item" :class="{ active: viewMode==='list' }" @click="viewMode='list', previewItem=null">📋 List</button>
-        <button class="view-menu-item" :class="{ active: viewMode==='details' }" @click="viewMode='details', previewItem=null">📊 Details</button>
-        <button class="view-menu-item" :class="{ active: viewMode==='title' }" @click="viewMode='title', previewItem=null">🏷️ Cards</button>
-        <button class="view-menu-item" :class="{ active: viewMode==='content' }" @click="viewMode='content', previewItem=null">📝 Content</button>
-      </div>
-    </div>
-    <div class="search-bar-inline">
-      <span class="search-icon">🔍</span>
-      <input class="search-input" type="text" placeholder="Filter..."
-             x-model="searchQuery" @input="doFilter" autocomplete="off">
-      <button class="search-clear" x-show="searchQuery" @click="searchQuery='', doFilter()" title="Clear">×</button>
-    </div>
-    <select class="sort-select" x-model="sortBy" @change="doSort()">
-      <option value="">Sort</option>
-      <option value="name-asc">A→Z</option>
-      <option value="name-desc">Z→A</option>
-      <option value="type">Type</option>
-      <option value="date-asc">Oldest</option>
-      <option value="date-desc">Newest</option>
-    </select>
-    <button class="btn-icon" @click="expandAll()" title="Expand" x-show="viewMode==='tree'">⊞</button>
-    <button class="btn-icon" @click="collapseAll()" title="Collapse" x-show="viewMode==='tree'">⊟</button>
-    <button class="btn-icon btn-create" @click="openModal('file')" title="New file">📄</button>
-    <button class="btn-icon btn-create" @click="openModal('folder')" title="New folder">📁</button>
-  </div>
-
-  <!-- Bulk actions bar -->
-  <div class="bulk-bar" x-show="selectedIdsCount > 0" x-transition>
-    <span x-text="selectedIdsCount + ' selected'"></span>
-    <button class="btn btn-danger" @click="bulkDelete()">🗑 Delete</button>
-    <button class="btn btn-secondary" @click="clearSelection()">✕ Clear</button>
-  </div>
-
-  <!-- Tree -->
-  <div x-show="viewMode==='tree'" style="display:contents;">
-
-  <!-- Compact filter row -->
-  <div class="filter-row" x-show="tree.length>0 || searchQuery || filterType">
-    <button class="filter-chip" :class="{ active: filterType === 'folder' }" @click="filterByType('folder')" title="Folders">📁</button>
-    <button class="filter-chip" :class="{ active: filterType === 'page' }" @click="filterByType('page')" title="Pages">📝</button>
-    <button class="filter-chip" :class="{ active: filterType === 'pdf' }" @click="filterByType('pdf')" title="PDF">📕</button>
-    <button class="filter-chip" :class="{ active: filterType === 'image' }" @click="filterByType('image')" title="Images">🖼️</button>
-    <button class="filter-chip" :class="{ active: filterType === 'code' }" @click="filterByType('code')" title="Code">📜</button>
-    <button class="filter-chip" :class="{ active: filterType === 'text' }" @click="filterByType('text')" title="Text">📄</button>
-    <span x-show="filterType || searchQuery" class="filter-clear" @click="filterType='', searchQuery='', doFilter()">✕ clear</span>
-  </div>
-
-  <ul class="ws-tree" x-show="viewMode==='tree' && (displayTree.length>0 || (currentFolder > 0))" @click="handleTreeAction($event)">
-    <!-- Parent folder ".." -->
-    <li x-show="currentFolder > 0" style="list-style:none;">
-      <div class="ws-tree-item" @click="goToParent()" style="padding-left:4px;">
-        <span style="width:16px;flex-shrink:0;"></span>
-        <span class="icon">📂</span>
-        <span class="name folder" style="font-weight:600;">..</span>
-      </div>
-    </li>
-    <template x-for="node in displayTree" :key="node.id">
-      <li>
-        <div class="ws-tree-item" :style="{paddingLeft:(node.depth||0)*20+'px'}"
-             draggable="true"
-             :data-ws-id="node.id"
-             :data-folder-id="node.is_folder ? node.id : null"
-             @dragstart="onInternalDragStart($event, node.id)"
-             @dragend="draggedItemId = null, $el.style.opacity = ''"
-             :class="{ selected: !!selectedIds[node.id] }">
-          <input type="checkbox" class="item-checkbox"
-                 :checked="!!selectedIds[node.id]"
-                 @click.stop="toggleSelect(node, $event)"
-                 title="Select item">
-          <!-- chevron -->
-          <template x-if="node.is_folder && node.children && node.children.length > 0">
-            <button class="ws-chevron"
-                    :class="{ open: expanded[node.id] }"
-                    @click.stop="toggleExpand(node.id)">▶</button>
-          </template>
-          <template x-if="!(node.is_folder && node.children && node.children.length > 0)">
-            <span style="width:16px;flex-shrink:0;"></span>
-          </template>
-
-          <span class="icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
-
-          <template x-if="node.is_folder">
-            <span class="name folder" @click.stop="navigateToFolder(node.id)"
-                  @dblclick.prevent.stop="startInlineRename(node, $event)">
-              <span x-show="renamingId !== node.id" x-text="node.name"></span>
-              <span class="child-count" x-show="node.child_count > 0 && renamingId !== node.id"
-                    x-text="'(' + node.child_count + ')'"></span>
-              <input x-show="renamingId === node.id" class="inline-rename-input" x-model="renamingName"
-                     @keydown.enter="commitRename(node)" @keydown.escape="cancelRename()"
-                     @blur="commitRename(node)" @click.stop style="width:100%">
-            </span>
-          </template>
-          <template x-if="!node.is_folder">
-            <span class="name file" @click.stop="openPage(node.id)"
-                  @dblclick.stop="startInlineRename(node, $event)"
-                  @mouseenter="showPreview($event, node)"
-                  @mouseleave="hidePreview()">
-              <span x-show="renamingId !== node.id" x-text="node.name"></span>
-              <input x-show="renamingId === node.id" class="inline-rename-input" x-model="renamingName"
-                     @keydown.enter="commitRename(node)" @keydown.escape="cancelRename()"
-                     @blur="commitRename(node)" @click.stop style="width:100%">
-            </span>
-          </template>
-
-          <div class="actions">
-            <template x-if="node.is_folder">
-              <span style="display:flex;gap:2px">
-                <button class="ws-act" @click.stop="openModal('file',node)" title="New file">📄</button>
-                <button class="ws-act" @click.stop="openModal('folder',node)" title="New folder">📁</button>
-              </span>
-            </template>
-            <button class="ws-act" @click.stop="startRename(node)" title="Rename">✏️</button>
-            <button class="ws-act danger" @click.stop="deleteWithUndo(node)" title="Delete">🗑</button>
-          </div>
-        </div>
-        <!-- Children -->
-        <ul class="ws-tree" x-show="expanded[node.id]" x-transition
-            x-html="renderChildren(node.children, (node.depth||0)+1)">
-        </ul>
-      </li>
-    </template>
-  </ul>
-  </div>
-
-  <!-- Tag filter bar -->
-  <div class="tag-filter-bar" x-show="workspaceTags && workspaceTags.length > 0">
-    <span style="font-size:11px;color:var(--text-tertiary);margin-right:4px;">Tags:</span>
-    <template x-for="t in workspaceTags" :key="'tf'+t.id">
-      <button class="tag-chip" :class="{ active: tagFilter === t.name }"
-              @click="toggleTagFilter(t.name)">
-        <span class="tag-dot" :style="{background: t.color}"></span>
-        <span x-text="t.name"></span>
-        <span style="font-size:10px;opacity:.7" x-text="'('+t.count+')'"></span>
-      </button>
-    </template>
-    <button x-show="tagFilter" class="tag-chip rm-btn" @click="tagFilter='', doFilter()" style="margin-left:4px;">✕ clear</button>
-  </div>
-
-  <!-- Filter table (shown when search/filter/tag is active) -->
-  <table class="ws-table-enhanced" x-show="(searchQuery || filterType || tagFilter) && filteredTableItems.length > 0">
-    <thead><tr>
-      <th style="width:30px"><input type="checkbox" @click="selectAllFiltered($event)"></th>
-      <th>Name</th>
-      <th>Path</th>
-      <th>Size</th>
-      <th>Modified</th>
-      <th>Type</th>
-      <th>Author</th>
-      <th>Tags</th>
-      <th style="width:60px"></th>
-    </tr></thead>
-    <tbody>
-      <template x-for="node in filteredTableItems" :key="'ft'+node.id">
-        <tr :class="{ selected: !!selectedIds[node.id] }">
-          <td><input type="checkbox" :checked="!!selectedIds[node.id]" @click.stop="toggleSelect(node, $event)"></td>
-          <td>
-            <span class="table-icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
-            <span class="col-name" @click="node.is_folder ? navigateToFolder(node.id) : openPage(node.id)" x-text="node.name"></span>
-          </td>
-          <td class="col-path" x-text="node._path || '—'"></td>
-          <td class="col-size" x-text="node.size_display || '—'"></td>
-          <td class="col-date" x-text="_formatDate(node.updated_at)"></td>
-          <td class="col-type" x-text="node.is_folder ? '📁 Folder' : _fileTypeLabel(node.name, node.content_format)"></td>
-          <td class="col-author" x-text="node.author || '—'"></td>
-          <td class="col-tags">
-            <span style="display:flex;align-items:center;gap:2px;flex-wrap:wrap;">
-              <template x-for="t in (node.tags||[])" :key="'ftag'+t.id">
-                <span class="tag-chip">
-                  <span class="tag-dot" :style="{background: t.color}"></span>
-                  <span x-text="t.name"></span>
-                  <button class="tag-chip rm-btn" @click.stop="removeTag(node.id, t.id)" title="Remove tag">×</button>
-                </span>
-              </template>
-              <button class="tag-add-btn" @click.stop="startTagInput(node)" title="Add tag">+</button>
-              <span x-show="tagInputId === node.id" style="display:contents;">
-                <input class="tag-input" x-ref="tagInputEl"
-                       @keydown.enter="addTag(node.id, $event.target.value), $event.target.value=''"
-                       @keydown.escape="tagInputId=null"
-                       @blur="tagInputId=null"
-                       @click.stop
-                       placeholder="tag...">
-              </span>
-            </span>
-          </td>
-          <td>
-            <button class="ws-act" @click.stop="startRename(node)" title="Rename">✏️</button>
-            <button class="ws-act danger" @click.stop="deleteWithUndo(node)" title="Delete">🗑</button>
-          </td>
-        </tr>
-      </template>
-    </tbody>
-  </table>
-
-  <!-- List view — compact flat list -->
-  <table class="ws-table-compact" x-show="viewMode==='list' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
-    <thead><tr>
-      <th style="width:24px"></th>
-      <th>Name</th>
-      <th style="width:80px">Type</th>
-      <th style="width:80px">Size</th>
-      <th style="width:100px">Modified</th>
-    </tr></thead>
-    <tbody>
-      <template x-for="node in displayTree" :key="'l'+node.id">
-        <tr :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()" style="cursor:pointer">
-          <td><span x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span></td>
-          <td class="col-name" x-text="node.name"></td>
-          <td style="font-size:12px;color:var(--text-tertiary)" x-text="node.is_folder ? '📁 Folder' : _fileTypeLabel(node.name, node.content_format)"></td>
-          <td style="font-size:12px;color:var(--text-secondary)" x-text="node.is_folder ? (node.child_count||0)+' items' : (node.size_display||'—')"></td>
-          <td style="font-size:12px;color:var(--text-tertiary)" x-text="_formatDate(node.updated_at)"></td>
-        </tr>
-      </template>
-    </tbody>
-  </table>
-
-  <!-- Details view — full table with all columns -->
-  <table class="ws-table-enhanced" x-show="viewMode==='details' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
-    <thead><tr>
-      <th style="width:24px"></th>
-      <th>Name</th>
-      <th>Path</th>
-      <th>Size</th>
-      <th>Modified</th>
-      <th>Type</th>
-      <th>Author</th>
-      <th>Tags</th>
-    </tr></thead>
-    <tbody>
-      <template x-for="node in displayTree" :key="'d'+node.id">
-        <tr :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()" style="cursor:pointer"
-            :class="{ 'selected-row': previewItem && previewItem.id === node.id }">
-          <td><span class="table-icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span></td>
-          <td class="col-name" x-text="node.name"></td>
-          <td class="col-path" x-text="node._path || '—'"></td>
-          <td class="col-size" x-text="node.size_display || '—'"></td>
-          <td class="col-date" x-text="_formatDate(node.updated_at)"></td>
-          <td class="col-type" x-text="node.is_folder ? '📁 Folder' : _fileTypeLabel(node.name, node.content_format)"></td>
-          <td class="col-author" x-text="node.author || '—'"></td>
-          <td class="col-tags">
-            <span style="display:flex;align-items:center;gap:2px;flex-wrap:wrap;">
-              <template x-for="t in (node.tags||[])" :key="'dtag'+t.id">
-                <span class="tag-chip"><span class="tag-dot" :style="{background: t.color}"></span><span x-text="t.name"></span></span>
-              </template>
-            </span>
-          </td>
-        </tr>
-      </template>
-    </tbody>
-  </table>
-
-  <!-- Title view — card grid -->
-  <div class="title-grid" x-show="viewMode==='title' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
-    <template x-for="node in displayTree" :key="'g'+node.id">
-      <div class="title-card" :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()"
-           :class="{ 'selected-card': previewItem && previewItem.id === node.id }">
-        <div class="title-card-icon" x-text="node.is_folder ? '📁' : _fileIcon(node.name, node.is_folder, node.content_format)"></div>
-        <div class="title-card-name" x-text="node.name"></div>
-        <div class="title-card-meta">
-          <span x-text="_formatDate(node.updated_at)"></span>
-          <span x-text="node.size_display || '—'"></span>
-        </div>
-      </div>
-    </template>
-  </div>
-
-  <!-- Content view — list with inline preview -->
-  <div class="content-list" x-show="viewMode==='content' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
-    <template x-for="node in displayTree" :key="'c'+node.id">
-      <div class="content-item" :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()"
-           :class="{ 'selected-row': previewItem && previewItem.id === node.id }">
-        <div class="content-item-header">
-          <span x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
-          <span class="col-name" x-text="node.name"></span>
-          <span style="font-size:11px;color:var(--text-tertiary);margin-left:auto" x-text="_formatDate(node.updated_at)"></span>
-        </div>
-        <div class="content-item-preview" x-text="node.is_folder ? (node.child_count||0)+' items' : (node.size_display||'—')"></div>
-        <div class="content-item-tags" x-show="(node.tags||[]).length > 0">
-          <template x-for="t in (node.tags||[])" :key="'ctag'+t.id">
-            <span class="tag-chip"><span class="tag-dot" :style="{background: t.color}"></span><span x-text="t.name"></span></span>
-                      </template>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </div>
-  <!-- Old table view kept for backward compat, hidden -->
-  <table class="ws-table" x-show="false" style="display:none">
-    <thead><tr><th>Name</th><th>Type</th><th>Size</th></tr></thead>
-    <tbody><template x-for="node in flatTree" :key="'t'+node.id">
-      <tr><td x-text="node.name"></td></tr>
-    </template></tbody>
-  </table>
-
-  <!-- Empty -->
-  <div class="empty-state" x-show="tree.length===0&&loaded">
-    <div class="empty-icon">📁</div>
-    <h2 x-text="currentFolder > 0 ? 'Empty folder' : 'Welcome to your Workspace'"></h2>
-    <p x-text="currentFolder > 0 ? 'Create a new file or folder to get started' : 'Drag & drop files from your computer, or create new ones.'"></p>
-    <div class="empty-actions">
-      <button class="btn-icon" @click="openModal('file')" title="New file">📄</button>
-      <button class="btn-icon" @click="openModal('folder')" title="New folder">📁</button>
-    </div>
-  </div>
-
-  <!-- Offline banner -->
-  <div class="offline-banner" x-show="!online" x-transition>
-    <span>⚠️ You are offline. Changes will sync when connection is restored.</span>
-  </div>
-
-  <!-- Create Modal -->
-  <div class="modal-overlay" x-show="showCreate" @click.away="showCreate=false" @keydown.escape="showCreate=false">
-    <div class="modal-box">
-      <h3><span x-text="createType==='folder'?'📁':'📄'"></span> <span x-text="createType==='folder'?'New Folder':'New File'"></span></h3>
-      <p class="modal-sub">
-        In <strong>{{ workspace_name }}</strong> <span x-show="folderStack.length>1">/ <span x-text="(folderStack[folderStack.length-1]||{}).name||''"></span></span>
-        <span x-show="parentFolder"> / <span x-text="parentFolder?.name"></span></span>
-      </p>
-      <input class="modal-input" x-model="newName" :placeholder="createType==='folder'?'Folder name':'File name'" @keydown.enter="doCreate" x-ref="cinp">
-      <div class="modal-actions">
-        <button class="btn btn-secondary" @click="showCreate=false">Cancel</button>
-        <button class="btn btn-primary" @click="doCreate" :disabled="!newName.trim()">Create</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Rename Modal -->
-  <div class="modal-overlay" x-show="showRename" @click.away="showRename=false" @keydown.escape="showRename=false">
-    <div class="modal-box">
-      <h3>✏️ Rename</h3>
-      <p class="modal-sub">Rename <strong x-text="target?.name"></strong></p>
-      <input class="modal-input" x-model="newName" @keydown.enter="doRename" x-ref="rinp">
-      <div class="modal-actions">
-        <button class="btn btn-secondary" @click="showRename=false">Cancel</button>
-        <button class="btn btn-primary" @click="doRename">Rename</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Delete Modal -->
-  <div class="modal-overlay" x-show="showDelete" @click.away="showDelete=false" @keydown.escape="showDelete=false">
-    <div class="modal-box">
-      <h3>🗑 Delete</h3>
-      <p class="modal-sub">Delete <strong x-text="target?.name"></strong>?</p>
-      <div class="delete-confirm">This cannot be undone. Children will also be deleted.</div>
-      <div class="modal-actions">
-        <button class="btn btn-secondary" @click="showDelete=false">Cancel</button>
-        <button class="btn btn-danger" @click="doDelete">Delete</button>
-      </div>
-    </div>
-  </div>
-
-  </div><!-- /ws-main -->
-
-  <!-- Context menu -->
-  <div class="ctx-menu" x-show="ctxMenu.visible"
-       :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }"
-       @keydown.escape="ctxMenu.visible=false"
-       x-transition>
-    <div class="ctx-item" @click="ctxMenuOpenPage()">📄 Open</div>
-    <div class="ctx-item" x-show="ctxMenu.node && ctxMenu.node.is_folder" @click="ctxMenuOpenFolder()">📂 Open folder</div>
-    <div class="ctx-item" @click="ctxMenuRename()">✏️ Rename</div>
-    <div class="ctx-item" @click="ctxMenuDuplicate()">📋 Duplicate</div>
-    <div class="ctx-sep"></div>
-    <div class="ctx-section">🏷️ Tags</div>
-    <!-- Current tags with remove button -->
-    <template x-for="t in (ctxMenu.tags||[])" :key="'ctx-tag'+t.id">
-      <div class="ctx-item ctx-tag-item">
-        <span class="ctx-tag-color" :style="{background: t.color}"></span>
-        <span style="flex:1;font-size:13px;" x-text="t.name"></span>
-        <button class="tag-chip rm-btn" @click.stop="ctxRemoveTag(t.id)" title="Remove">×</button>
-      </div>
-    </template>
-    <div x-show="(ctxMenu.tags||[]).length === 0" style="padding:2px 14px;font-size:11px;color:var(--text-dim);">No tags</div>
-    <div class="ctx-sep"></div>
-    <!-- Add existing tag → sub-menu -->
-    <div class="ctx-item ctx-has-sub" @click.stop="ctxTagExistingOpen=!ctxTagExistingOpen" x-show="ctxAvailTags.length > 0">
-      <span style="flex:1;">📋 Add existing tag</span>
-      <span x-text="ctxTagExistingOpen ? '▾' : '▸'"></span>
-    </div>
-    <div x-show="ctxTagExistingOpen && ctxAvailTags.length > 0" style="padding:0 0 4px;background:var(--bg-tertiary);border-radius:6px;margin:2px 6px;">
-      <template x-for="t in ctxAvailTags" :key="'ctx-avail'+t.id">
-        <div class="ctx-item ctx-add-tag-item" @click.stop="ctxAddExistingTag(t), ctxTagExistingOpen=false">
-          <span class="ctx-tag-color" :style="{background: t.color}"></span>
-          <span style="flex:1;font-size:13px;" x-text="t.name"></span>
-          <span style="font-size:10px;color:var(--text-dim);" x-text="t.count||''"></span>
-        </div>
-      </template>
-    </div>
-    <!-- Create new tag -->
-    <div class="ctx-item ctx-has-sub" @click.stop="ctxTagAdding=!ctxTagAdding">
-      <span style="flex:1;">➕ New tag</span>
-      <span x-text="ctxTagAdding ? '▾' : '▸'"></span>
-    </div>
-    <div x-show="ctxTagAdding" style="padding:6px 10px;background:var(--bg-tertiary);border-radius:6px;margin:2px 6px;">
-      <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;">
-        <template x-for="c in ctxTagColors" :key="c">
-          <div class="color-swatch-ctx" :class="{ selected: ctxNewTagColor === c }"
-               :style="{background: c}" @click.stop="ctxNewTagColor=c"></div>
-        </template>
-      </div>
-      <div style="display:flex;gap:4px;">
-        <input class="tag-input" x-ref="ctxTagInput"
-               @keydown.enter="ctxAddNewTag($event.target.value), $event.target.value=''"
-               @keydown.escape="ctxTagAdding=false"
-               @click.stop
-               placeholder="Tag name..."
-               style="flex:1;">
-        <button class="btn btn-primary" @click.stop="ctxAddNewTag($refs.ctxTagInput.value), $refs.ctxTagInput.value=''" style="padding:2px 10px;font-size:12px;">Add</button>
-      </div>
-    </div>
-    <div class="ctx-sep"></div>
-    <div class="ctx-item ctx-danger" @click="ctxMenuDelete()">🗑 Delete</div>
-  </div>
-
-  <!-- Preview tooltip -->
-  <div class="file-preview" x-show="previewVisible"
-       :style="{ left: previewX + 'px', top: previewY + 'px' }"
-       @mouseenter="previewVisible = true" @mouseleave="previewVisible = false">
-    <div class="file-preview-header" x-text="previewName"></div>
-    <div class="file-preview-body" x-html="previewContent"></div>
-  </div>
-
-  <!-- Preview Panel — right side panel for file preview -->
-  <template x-if="previewItem">
-  <div class="preview-panel" x-show="previewItem" x-transition:enter="preview-enter" x-transition:leave="preview-leave">
-    <div class="preview-panel-header">
-      <span x-text="_fileIcon(previewItem.name, previewItem.is_folder, previewItem.content_format)"></span>
-      <span class="preview-panel-title" x-text="previewItem.name"></span>
-      <button class="preview-close" @click="previewItem=null" title="Close preview">×</button>
-    </div>
-    <div class="preview-panel-meta">
-      <span x-text="previewItem.is_folder ? '📁 Folder' : _fileTypeLabel(previewItem.name, previewItem.content_format)"></span>
-      <span x-text="previewItem.size_display || '—'"></span>
-      <span x-text="_formatDate(previewItem.updated_at)"></span>
-    </div>
-    <div class="preview-panel-tags" x-show="(previewItem.tags||[]).length > 0">
-      <template x-for="t in (previewItem.tags||[])" :key="'ptag'+t.id">
-        <span class="tag-chip"><span class="tag-dot" :style="{background: t.color}"></span><span x-text="t.name"></span></span>
-      </template>
-    </div>
-    <div class="preview-panel-body" x-html="previewPanelContent || '<div style=text-align:center;padding:40px;color:var(--text-tertiary)>Loading preview...</div>'"></div>
-    <div class="preview-panel-actions">
-      <button class="btn btn-secondary" @click="openPage(previewItem.id)">📄 Open</button>
-      <button class="btn btn-secondary" @click="startRename(previewItem)">✏️ Rename</button>
-      <button class="btn btn-danger" @click="deleteWithUndo(previewItem)">🗑 Delete</button>
-    </div>
-  </div>
-  </template>
-
-</div><!-- /ws-split -->
-
 <script>
 console.log('FLOWDECK v2.4.6 — IIFE running, about to set _wsInitData');
 window._wsInitData = (function() {
@@ -2403,4 +1871,536 @@ window._wsInitData = (function() {
 })();
 console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(window._wsInitData).length);
 </script>
+<script>console.log('FLOWDECK v2.4.6 — ws-split about to render, _wsInitData exists:', typeof window._wsInitData !== 'undefined');</script>
+
+<div class="ws-split" x-data="window._wsInitData"
+     @dragover.prevent="onDragOver($event)"
+     @dragleave="onDragLeave($event)"
+     @drop.prevent="onDrop($event)"
+     @keydown="onKeydown($event)"
+     @contextmenu.prevent="if(window._wsData) window._wsData.onContextMenu($event)"
+     @click.self="ctxMenu.visible = false"
+     tabindex="0"
+     x-ref="layout">
+  <div class="ws-main">
+
+  <!-- Drop overlay -->
+  <div class="drop-overlay" :class="{ active: isDragging }">
+    <div class="drop-hint">
+      <span class="icon">📥</span>
+      <div>Drop files here</div>
+      <div style="font-size:12px;color:var(--text-tertiary);margin-top:6px;" x-show="dropTarget">
+        Into: <strong x-text="dropTargetName"></strong>
+      </div>
+    </div>
+  </div>
+
+  <!-- Upload progress -->
+  <div class="upload-progress" x-show="uploading" x-transition>
+    <div style="display:flex;align-items:center;gap:8px;">
+      <span x-text="uploading ? '⏳' : ''"></span>
+      <span x-text="uploadStatus"></span>
+      <span style="font-size:11px;color:var(--text-tertiary);" x-show="uploadSpeed" x-text="uploadSpeed"></span>
+    </div>
+    <div class="up-bar">
+      <div class="up-bar-fill" :style="{ width: uploadProgress + '%' }"></div>
+    </div>
+  </div>
+
+  <!-- Undo toast -->
+  <div class="undo-toast" x-show="undoVisible" x-transition>
+    <span x-text="undoMessage"></span>
+    <button class="undo-btn" @click="undoDelete()">Undo</button>
+    <button class="undo-dismiss" @click="undoVisible=false">×</button>
+  </div>
+
+  <!-- Breadcrumb row -->
+  <div class="breadcrumb-row">
+    <button class="btn-icon nav-arrow" x-show="sidebarCollapsed" x-cloak @click="sidebarCollapsed = false" title="Show sidebar" style="margin-right:2px;">☰</button>
+    <a href="/workspaces" class="btn-icon nav-arrow" title="All workspaces">🏠</a>
+    <button class="btn-icon nav-arrow" @click="goBack()" title="Back" :disabled="!canGoBack">←</button>
+    <button class="btn-icon nav-arrow" @click="goForward()" title="Forward" :disabled="!canGoForward">→</button>
+    <div class="unified-breadcrumb">
+      <span class="bc-icon">📁</span>
+      <a href="/local-workspace" @click.prevent="navigateToRoot()" class="bc-root">{{ workspace_name }}</a>
+      <template x-for="(b, i) in folderStack" :key="'bc'+b.id">
+        <span style="display:contents;">
+          <span class="bc-sep">/</span>
+          <a href="#" @click.prevent="navigateToBreadcrumb(i)" x-text="b.name"
+             :class="{ 'bc-current': i === folderStack.length - 1 }"
+             @dblclick.prevent="startInlineRename(b, $event)"></a>
+        </span>
+      </template>
+      <div class="bc-edit-wrap" x-show="editingPath" @click.outside="editingPath=false" style="display:contents;">
+        <input class="bc-edit-input" x-ref="pathEdit" :value="pathValue"
+               @keydown.enter="navigateToPath(), editingPath=false"
+               @keydown.escape="editingPath=false"
+               placeholder="/workspace/...">
+        <button class="bc-edit-go" @click="navigateToPath(), editingPath=false">→</button>
+      </div>
+      <button class="bc-edit-trigger" x-show="!editingPath" @click="startPathEdit()" title="Edit path">✎</button>
+    </div>
+  </div>
+
+  <!-- Toolbar row -->
+  <div class="toolbar-row">
+    <div class="view-dropdown" @click.outside="viewMenuOpen=false" @keydown.escape="viewMenuOpen=false">
+      <button class="view-dropdown-btn" @click="viewMenuOpen=!viewMenuOpen" title="View">
+        <span x-text="viewIcons[viewMode] || '🌳'"></span>
+        <span x-text="viewLabels[viewMode] || 'Tree'"></span>
+        <span class="dropdown-arrow">▾</span>
+      </button>
+      <div class="view-dropdown-menu" x-show="viewMenuOpen" x-transition @click="viewMenuOpen=false">
+        <button class="view-menu-item" :class="{ active: viewMode==='tree' }" @click="viewMode='tree', previewItem=null">🌳 Tree</button>
+        <button class="view-menu-item" :class="{ active: viewMode==='list' }" @click="viewMode='list', previewItem=null">📋 List</button>
+        <button class="view-menu-item" :class="{ active: viewMode==='details' }" @click="viewMode='details', previewItem=null">📊 Details</button>
+        <button class="view-menu-item" :class="{ active: viewMode==='title' }" @click="viewMode='title', previewItem=null">🏷️ Cards</button>
+        <button class="view-menu-item" :class="{ active: viewMode==='content' }" @click="viewMode='content', previewItem=null">📝 Content</button>
+      </div>
+    </div>
+    <div class="search-bar-inline">
+      <span class="search-icon">🔍</span>
+      <input class="search-input" type="text" placeholder="Filter..."
+             x-model="searchQuery" @input="doFilter" autocomplete="off">
+      <button class="search-clear" x-show="searchQuery" @click="searchQuery='', doFilter()" title="Clear">×</button>
+    </div>
+    <select class="sort-select" x-model="sortBy" @change="doSort()">
+      <option value="">Sort</option>
+      <option value="name-asc">A→Z</option>
+      <option value="name-desc">Z→A</option>
+      <option value="type">Type</option>
+      <option value="date-asc">Oldest</option>
+      <option value="date-desc">Newest</option>
+    </select>
+    <button class="btn-icon" @click="expandAll()" title="Expand" x-show="viewMode==='tree'">⊞</button>
+    <button class="btn-icon" @click="collapseAll()" title="Collapse" x-show="viewMode==='tree'">⊟</button>
+    <button class="btn-icon btn-create" @click="openModal('file')" title="New file">📄</button>
+    <button class="btn-icon btn-create" @click="openModal('folder')" title="New folder">📁</button>
+  </div>
+
+  <!-- Bulk actions bar -->
+  <div class="bulk-bar" x-show="selectedIdsCount > 0" x-transition>
+    <span x-text="selectedIdsCount + ' selected'"></span>
+    <button class="btn btn-danger" @click="bulkDelete()">🗑 Delete</button>
+    <button class="btn btn-secondary" @click="clearSelection()">✕ Clear</button>
+  </div>
+
+  <!-- Tree -->
+  <div x-show="viewMode==='tree'" style="display:contents;">
+
+  <!-- Compact filter row -->
+  <div class="filter-row" x-show="tree.length>0 || searchQuery || filterType">
+    <button class="filter-chip" :class="{ active: filterType === 'folder' }" @click="filterByType('folder')" title="Folders">📁</button>
+    <button class="filter-chip" :class="{ active: filterType === 'page' }" @click="filterByType('page')" title="Pages">📝</button>
+    <button class="filter-chip" :class="{ active: filterType === 'pdf' }" @click="filterByType('pdf')" title="PDF">📕</button>
+    <button class="filter-chip" :class="{ active: filterType === 'image' }" @click="filterByType('image')" title="Images">🖼️</button>
+    <button class="filter-chip" :class="{ active: filterType === 'code' }" @click="filterByType('code')" title="Code">📜</button>
+    <button class="filter-chip" :class="{ active: filterType === 'text' }" @click="filterByType('text')" title="Text">📄</button>
+    <span x-show="filterType || searchQuery" class="filter-clear" @click="filterType='', searchQuery='', doFilter()">✕ clear</span>
+  </div>
+
+  <ul class="ws-tree" x-show="viewMode==='tree' && (displayTree.length>0 || (currentFolder > 0))" @click="handleTreeAction($event)">
+    <!-- Parent folder ".." -->
+    <li x-show="currentFolder > 0" style="list-style:none;">
+      <div class="ws-tree-item" @click="goToParent()" style="padding-left:4px;">
+        <span style="width:16px;flex-shrink:0;"></span>
+        <span class="icon">📂</span>
+        <span class="name folder" style="font-weight:600;">..</span>
+      </div>
+    </li>
+    <template x-for="node in displayTree" :key="node.id">
+      <li>
+        <div class="ws-tree-item" :style="{paddingLeft:(node.depth||0)*20+'px'}"
+             draggable="true"
+             :data-ws-id="node.id"
+             :data-folder-id="node.is_folder ? node.id : null"
+             @dragstart="onInternalDragStart($event, node.id)"
+             @dragend="draggedItemId = null, $el.style.opacity = ''"
+             :class="{ selected: !!selectedIds[node.id] }">
+          <input type="checkbox" class="item-checkbox"
+                 :checked="!!selectedIds[node.id]"
+                 @click.stop="toggleSelect(node, $event)"
+                 title="Select item">
+          <!-- chevron -->
+          <template x-if="node.is_folder && node.children && node.children.length > 0">
+            <button class="ws-chevron"
+                    :class="{ open: expanded[node.id] }"
+                    @click.stop="toggleExpand(node.id)">▶</button>
+          </template>
+          <template x-if="!(node.is_folder && node.children && node.children.length > 0)">
+            <span style="width:16px;flex-shrink:0;"></span>
+          </template>
+
+          <span class="icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
+
+          <template x-if="node.is_folder">
+            <span class="name folder" @click.stop="navigateToFolder(node.id)"
+                  @dblclick.prevent.stop="startInlineRename(node, $event)">
+              <span x-show="renamingId !== node.id" x-text="node.name"></span>
+              <span class="child-count" x-show="node.child_count > 0 && renamingId !== node.id"
+                    x-text="'(' + node.child_count + ')'"></span>
+              <input x-show="renamingId === node.id" class="inline-rename-input" x-model="renamingName"
+                     @keydown.enter="commitRename(node)" @keydown.escape="cancelRename()"
+                     @blur="commitRename(node)" @click.stop style="width:100%">
+            </span>
+          </template>
+          <template x-if="!node.is_folder">
+            <span class="name file" @click.stop="openPage(node.id)"
+                  @dblclick.stop="startInlineRename(node, $event)"
+                  @mouseenter="showPreview($event, node)"
+                  @mouseleave="hidePreview()">
+              <span x-show="renamingId !== node.id" x-text="node.name"></span>
+              <input x-show="renamingId === node.id" class="inline-rename-input" x-model="renamingName"
+                     @keydown.enter="commitRename(node)" @keydown.escape="cancelRename()"
+                     @blur="commitRename(node)" @click.stop style="width:100%">
+            </span>
+          </template>
+
+          <div class="actions">
+            <template x-if="node.is_folder">
+              <span style="display:flex;gap:2px">
+                <button class="ws-act" @click.stop="openModal('file',node)" title="New file">📄</button>
+                <button class="ws-act" @click.stop="openModal('folder',node)" title="New folder">📁</button>
+              </span>
+            </template>
+            <button class="ws-act" @click.stop="startRename(node)" title="Rename">✏️</button>
+            <button class="ws-act danger" @click.stop="deleteWithUndo(node)" title="Delete">🗑</button>
+          </div>
+        </div>
+        <!-- Children -->
+        <ul class="ws-tree" x-show="expanded[node.id]" x-transition
+            x-html="renderChildren(node.children, (node.depth||0)+1)">
+        </ul>
+      </li>
+    </template>
+  </ul>
+  </div>
+
+  <!-- Tag filter bar -->
+  <div class="tag-filter-bar" x-show="workspaceTags && workspaceTags.length > 0">
+    <span style="font-size:11px;color:var(--text-tertiary);margin-right:4px;">Tags:</span>
+    <template x-for="t in workspaceTags" :key="'tf'+t.id">
+      <button class="tag-chip" :class="{ active: tagFilter === t.name }"
+              @click="toggleTagFilter(t.name)">
+        <span class="tag-dot" :style="{background: t.color}"></span>
+        <span x-text="t.name"></span>
+        <span style="font-size:10px;opacity:.7" x-text="'('+t.count+')'"></span>
+      </button>
+    </template>
+    <button x-show="tagFilter" class="tag-chip rm-btn" @click="tagFilter='', doFilter()" style="margin-left:4px;">✕ clear</button>
+  </div>
+
+  <!-- Filter table (shown when search/filter/tag is active) -->
+  <table class="ws-table-enhanced" x-show="(searchQuery || filterType || tagFilter) && filteredTableItems.length > 0">
+    <thead><tr>
+      <th style="width:30px"><input type="checkbox" @click="selectAllFiltered($event)"></th>
+      <th>Name</th>
+      <th>Path</th>
+      <th>Size</th>
+      <th>Modified</th>
+      <th>Type</th>
+      <th>Author</th>
+      <th>Tags</th>
+      <th style="width:60px"></th>
+    </tr></thead>
+    <tbody>
+      <template x-for="node in filteredTableItems" :key="'ft'+node.id">
+        <tr :class="{ selected: !!selectedIds[node.id] }">
+          <td><input type="checkbox" :checked="!!selectedIds[node.id]" @click.stop="toggleSelect(node, $event)"></td>
+          <td>
+            <span class="table-icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
+            <span class="col-name" @click="node.is_folder ? navigateToFolder(node.id) : openPage(node.id)" x-text="node.name"></span>
+          </td>
+          <td class="col-path" x-text="node._path || '—'"></td>
+          <td class="col-size" x-text="node.size_display || '—'"></td>
+          <td class="col-date" x-text="_formatDate(node.updated_at)"></td>
+          <td class="col-type" x-text="node.is_folder ? '📁 Folder' : _fileTypeLabel(node.name, node.content_format)"></td>
+          <td class="col-author" x-text="node.author || '—'"></td>
+          <td class="col-tags">
+            <span style="display:flex;align-items:center;gap:2px;flex-wrap:wrap;">
+              <template x-for="t in (node.tags||[])" :key="'ftag'+t.id">
+                <span class="tag-chip">
+                  <span class="tag-dot" :style="{background: t.color}"></span>
+                  <span x-text="t.name"></span>
+                  <button class="tag-chip rm-btn" @click.stop="removeTag(node.id, t.id)" title="Remove tag">×</button>
+                </span>
+              </template>
+              <button class="tag-add-btn" @click.stop="startTagInput(node)" title="Add tag">+</button>
+              <span x-show="tagInputId === node.id" style="display:contents;">
+                <input class="tag-input" x-ref="tagInputEl"
+                       @keydown.enter="addTag(node.id, $event.target.value), $event.target.value=''"
+                       @keydown.escape="tagInputId=null"
+                       @blur="tagInputId=null"
+                       @click.stop
+                       placeholder="tag...">
+              </span>
+            </span>
+          </td>
+          <td>
+            <button class="ws-act" @click.stop="startRename(node)" title="Rename">✏️</button>
+            <button class="ws-act danger" @click.stop="deleteWithUndo(node)" title="Delete">🗑</button>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+
+  <!-- List view — compact flat list -->
+  <table class="ws-table-compact" x-show="viewMode==='list' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
+    <thead><tr>
+      <th style="width:24px"></th>
+      <th>Name</th>
+      <th style="width:80px">Type</th>
+      <th style="width:80px">Size</th>
+      <th style="width:100px">Modified</th>
+    </tr></thead>
+    <tbody>
+      <template x-for="node in displayTree" :key="'l'+node.id">
+        <tr :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()" style="cursor:pointer">
+          <td><span x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span></td>
+          <td class="col-name" x-text="node.name"></td>
+          <td style="font-size:12px;color:var(--text-tertiary)" x-text="node.is_folder ? '📁 Folder' : _fileTypeLabel(node.name, node.content_format)"></td>
+          <td style="font-size:12px;color:var(--text-secondary)" x-text="node.is_folder ? (node.child_count||0)+' items' : (node.size_display||'—')"></td>
+          <td style="font-size:12px;color:var(--text-tertiary)" x-text="_formatDate(node.updated_at)"></td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+
+  <!-- Details view — full table with all columns -->
+  <table class="ws-table-enhanced" x-show="viewMode==='details' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
+    <thead><tr>
+      <th style="width:24px"></th>
+      <th>Name</th>
+      <th>Path</th>
+      <th>Size</th>
+      <th>Modified</th>
+      <th>Type</th>
+      <th>Author</th>
+      <th>Tags</th>
+    </tr></thead>
+    <tbody>
+      <template x-for="node in displayTree" :key="'d'+node.id">
+        <tr :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()" style="cursor:pointer"
+            :class="{ 'selected-row': previewItem && previewItem.id === node.id }">
+          <td><span class="table-icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span></td>
+          <td class="col-name" x-text="node.name"></td>
+          <td class="col-path" x-text="node._path || '—'"></td>
+          <td class="col-size" x-text="node.size_display || '—'"></td>
+          <td class="col-date" x-text="_formatDate(node.updated_at)"></td>
+          <td class="col-type" x-text="node.is_folder ? '📁 Folder' : _fileTypeLabel(node.name, node.content_format)"></td>
+          <td class="col-author" x-text="node.author || '—'"></td>
+          <td class="col-tags">
+            <span style="display:flex;align-items:center;gap:2px;flex-wrap:wrap;">
+              <template x-for="t in (node.tags||[])" :key="'dtag'+t.id">
+                <span class="tag-chip"><span class="tag-dot" :style="{background: t.color}"></span><span x-text="t.name"></span></span>
+              </template>
+            </span>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+
+  <!-- Title view — card grid -->
+  <div class="title-grid" x-show="viewMode==='title' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
+    <template x-for="node in displayTree" :key="'g'+node.id">
+      <div class="title-card" :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()"
+           :class="{ 'selected-card': previewItem && previewItem.id === node.id }">
+        <div class="title-card-icon" x-text="node.is_folder ? '📁' : _fileIcon(node.name, node.is_folder, node.content_format)"></div>
+        <div class="title-card-name" x-text="node.name"></div>
+        <div class="title-card-meta">
+          <span x-text="_formatDate(node.updated_at)"></span>
+          <span x-text="node.size_display || '—'"></span>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <!-- Content view — list with inline preview -->
+  <div class="content-list" x-show="viewMode==='content' && !searchQuery && !filterType && !tagFilter && displayTree.length>0">
+    <template x-for="node in displayTree" :key="'c'+node.id">
+      <div class="content-item" :data-ws-id="node.id" @click="node.is_folder ? navigateToFolder(node.id) : selectForPreview(node)" @mouseenter="showPreview($event, node)" @mouseleave="hidePreview()"
+           :class="{ 'selected-row': previewItem && previewItem.id === node.id }">
+        <div class="content-item-header">
+          <span x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
+          <span class="col-name" x-text="node.name"></span>
+          <span style="font-size:11px;color:var(--text-tertiary);margin-left:auto" x-text="_formatDate(node.updated_at)"></span>
+        </div>
+        <div class="content-item-preview" x-text="node.is_folder ? (node.child_count||0)+' items' : (node.size_display||'—')"></div>
+        <div class="content-item-tags" x-show="(node.tags||[]).length > 0">
+          <template x-for="t in (node.tags||[])" :key="'ctag'+t.id">
+            <span class="tag-chip"><span class="tag-dot" :style="{background: t.color}"></span><span x-text="t.name"></span></span>
+                      </template>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+  <!-- Old table view kept for backward compat, hidden -->
+  <table class="ws-table" x-show="false" style="display:none">
+    <thead><tr><th>Name</th><th>Type</th><th>Size</th></tr></thead>
+    <tbody><template x-for="node in flatTree" :key="'t'+node.id">
+      <tr><td x-text="node.name"></td></tr>
+    </template></tbody>
+  </table>
+
+  <!-- Empty -->
+  <div class="empty-state" x-show="tree.length===0&&loaded">
+    <div class="empty-icon">📁</div>
+    <h2 x-text="currentFolder > 0 ? 'Empty folder' : 'Welcome to your Workspace'"></h2>
+    <p x-text="currentFolder > 0 ? 'Create a new file or folder to get started' : 'Drag & drop files from your computer, or create new ones.'"></p>
+    <div class="empty-actions">
+      <button class="btn-icon" @click="openModal('file')" title="New file">📄</button>
+      <button class="btn-icon" @click="openModal('folder')" title="New folder">📁</button>
+    </div>
+  </div>
+
+  <!-- Offline banner -->
+  <div class="offline-banner" x-show="!online" x-transition>
+    <span>⚠️ You are offline. Changes will sync when connection is restored.</span>
+  </div>
+
+  <!-- Create Modal -->
+  <div class="modal-overlay" x-show="showCreate" @click.away="showCreate=false" @keydown.escape="showCreate=false">
+    <div class="modal-box">
+      <h3><span x-text="createType==='folder'?'📁':'📄'"></span> <span x-text="createType==='folder'?'New Folder':'New File'"></span></h3>
+      <p class="modal-sub">
+        In <strong>{{ workspace_name }}</strong> <span x-show="folderStack.length>1">/ <span x-text="(folderStack[folderStack.length-1]||{}).name||''"></span></span>
+        <span x-show="parentFolder"> / <span x-text="parentFolder?.name"></span></span>
+      </p>
+      <input class="modal-input" x-model="newName" :placeholder="createType==='folder'?'Folder name':'File name'" @keydown.enter="doCreate" x-ref="cinp">
+      <div class="modal-actions">
+        <button class="btn btn-secondary" @click="showCreate=false">Cancel</button>
+        <button class="btn btn-primary" @click="doCreate" :disabled="!newName.trim()">Create</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Rename Modal -->
+  <div class="modal-overlay" x-show="showRename" @click.away="showRename=false" @keydown.escape="showRename=false">
+    <div class="modal-box">
+      <h3>✏️ Rename</h3>
+      <p class="modal-sub">Rename <strong x-text="target?.name"></strong></p>
+      <input class="modal-input" x-model="newName" @keydown.enter="doRename" x-ref="rinp">
+      <div class="modal-actions">
+        <button class="btn btn-secondary" @click="showRename=false">Cancel</button>
+        <button class="btn btn-primary" @click="doRename">Rename</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Modal -->
+  <div class="modal-overlay" x-show="showDelete" @click.away="showDelete=false" @keydown.escape="showDelete=false">
+    <div class="modal-box">
+      <h3>🗑 Delete</h3>
+      <p class="modal-sub">Delete <strong x-text="target?.name"></strong>?</p>
+      <div class="delete-confirm">This cannot be undone. Children will also be deleted.</div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" @click="showDelete=false">Cancel</button>
+        <button class="btn btn-danger" @click="doDelete">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  </div><!-- /ws-main -->
+
+  <!-- Context menu -->
+  <div class="ctx-menu" x-show="ctxMenu.visible"
+       :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }"
+       @keydown.escape="ctxMenu.visible=false"
+       x-transition>
+    <div class="ctx-item" @click="ctxMenuOpenPage()">📄 Open</div>
+    <div class="ctx-item" x-show="ctxMenu.node && ctxMenu.node.is_folder" @click="ctxMenuOpenFolder()">📂 Open folder</div>
+    <div class="ctx-item" @click="ctxMenuRename()">✏️ Rename</div>
+    <div class="ctx-item" @click="ctxMenuDuplicate()">📋 Duplicate</div>
+    <div class="ctx-sep"></div>
+    <div class="ctx-section">🏷️ Tags</div>
+    <!-- Current tags with remove button -->
+    <template x-for="t in (ctxMenu.tags||[])" :key="'ctx-tag'+t.id">
+      <div class="ctx-item ctx-tag-item">
+        <span class="ctx-tag-color" :style="{background: t.color}"></span>
+        <span style="flex:1;font-size:13px;" x-text="t.name"></span>
+        <button class="tag-chip rm-btn" @click.stop="ctxRemoveTag(t.id)" title="Remove">×</button>
+      </div>
+    </template>
+    <div x-show="(ctxMenu.tags||[]).length === 0" style="padding:2px 14px;font-size:11px;color:var(--text-dim);">No tags</div>
+    <div class="ctx-sep"></div>
+    <!-- Add existing tag → sub-menu -->
+    <div class="ctx-item ctx-has-sub" @click.stop="ctxTagExistingOpen=!ctxTagExistingOpen" x-show="ctxAvailTags.length > 0">
+      <span style="flex:1;">📋 Add existing tag</span>
+      <span x-text="ctxTagExistingOpen ? '▾' : '▸'"></span>
+    </div>
+    <div x-show="ctxTagExistingOpen && ctxAvailTags.length > 0" style="padding:0 0 4px;background:var(--bg-tertiary);border-radius:6px;margin:2px 6px;">
+      <template x-for="t in ctxAvailTags" :key="'ctx-avail'+t.id">
+        <div class="ctx-item ctx-add-tag-item" @click.stop="ctxAddExistingTag(t), ctxTagExistingOpen=false">
+          <span class="ctx-tag-color" :style="{background: t.color}"></span>
+          <span style="flex:1;font-size:13px;" x-text="t.name"></span>
+          <span style="font-size:10px;color:var(--text-dim);" x-text="t.count||''"></span>
+        </div>
+      </template>
+    </div>
+    <!-- Create new tag -->
+    <div class="ctx-item ctx-has-sub" @click.stop="ctxTagAdding=!ctxTagAdding">
+      <span style="flex:1;">➕ New tag</span>
+      <span x-text="ctxTagAdding ? '▾' : '▸'"></span>
+    </div>
+    <div x-show="ctxTagAdding" style="padding:6px 10px;background:var(--bg-tertiary);border-radius:6px;margin:2px 6px;">
+      <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;">
+        <template x-for="c in ctxTagColors" :key="c">
+          <div class="color-swatch-ctx" :class="{ selected: ctxNewTagColor === c }"
+               :style="{background: c}" @click.stop="ctxNewTagColor=c"></div>
+        </template>
+      </div>
+      <div style="display:flex;gap:4px;">
+        <input class="tag-input" x-ref="ctxTagInput"
+               @keydown.enter="ctxAddNewTag($event.target.value), $event.target.value=''"
+               @keydown.escape="ctxTagAdding=false"
+               @click.stop
+               placeholder="Tag name..."
+               style="flex:1;">
+        <button class="btn btn-primary" @click.stop="ctxAddNewTag($refs.ctxTagInput.value), $refs.ctxTagInput.value=''" style="padding:2px 10px;font-size:12px;">Add</button>
+      </div>
+    </div>
+    <div class="ctx-sep"></div>
+    <div class="ctx-item ctx-danger" @click="ctxMenuDelete()">🗑 Delete</div>
+  </div>
+
+  <!-- Preview tooltip -->
+  <div class="file-preview" x-show="previewVisible"
+       :style="{ left: previewX + 'px', top: previewY + 'px' }"
+       @mouseenter="previewVisible = true" @mouseleave="previewVisible = false">
+    <div class="file-preview-header" x-text="previewName"></div>
+    <div class="file-preview-body" x-html="previewContent"></div>
+  </div>
+
+  <!-- Preview Panel — right side panel for file preview -->
+  <template x-if="previewItem">
+  <div class="preview-panel" x-show="previewItem" x-transition:enter="preview-enter" x-transition:leave="preview-leave">
+    <div class="preview-panel-header">
+      <span x-text="_fileIcon(previewItem.name, previewItem.is_folder, previewItem.content_format)"></span>
+      <span class="preview-panel-title" x-text="previewItem.name"></span>
+      <button class="preview-close" @click="previewItem=null" title="Close preview">×</button>
+    </div>
+    <div class="preview-panel-meta">
+      <span x-text="previewItem.is_folder ? '📁 Folder' : _fileTypeLabel(previewItem.name, previewItem.content_format)"></span>
+      <span x-text="previewItem.size_display || '—'"></span>
+      <span x-text="_formatDate(previewItem.updated_at)"></span>
+    </div>
+    <div class="preview-panel-tags" x-show="(previewItem.tags||[]).length > 0">
+      <template x-for="t in (previewItem.tags||[])" :key="'ptag'+t.id">
+        <span class="tag-chip"><span class="tag-dot" :style="{background: t.color}"></span><span x-text="t.name"></span></span>
+      </template>
+    </div>
+    <div class="preview-panel-body" x-html="previewPanelContent || '<div style=text-align:center;padding:40px;color:var(--text-tertiary)>Loading preview...</div>'"></div>
+    <div class="preview-panel-actions">
+      <button class="btn btn-secondary" @click="openPage(previewItem.id)">📄 Open</button>
+      <button class="btn btn-secondary" @click="startRename(previewItem)">✏️ Rename</button>
+      <button class="btn btn-danger" @click="deleteWithUndo(previewItem)">🗑 Delete</button>
+    </div>
+  </div>
+  </template>
+
+</div><!-- /ws-split -->
+
 {% endblock %}