diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 5934ef0..1115143 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -18,6 +18,7 @@
   import { t } from './lib/i18n'
   import NoteEditorPanel from './lib/components/notes/NoteEditorPanel.svelte'
   import InternalLinkPicker from './lib/components/notes/InternalLinkPicker.svelte'
+  import FilesTab from './lib/components/files/FilesTab.svelte'
 
   // ===== Wails v2 API call helper =====
   function wailsCall(method, ...args) {
@@ -79,6 +80,7 @@
   let notes = []
   let noteEditor = null
   let noteEditorPanel = undefined; // bind:this ref for NoteEditorPanel
+  let filesTabRef = undefined; // bind:this ref for FilesTab
   let noteViewMode = 'edit'
   let showLinkModal = false
   let linkModalLabel = ''
@@ -158,26 +160,14 @@
     { id: 'launch_app', label: t('action.launchApp') },
   ]
   let loading = true
-  let importing = false
-  let importSummary = null
-  let showImportDialog = false
-  let pendingImportPath = ''
-  let pendingImportParent = ''
-  let pendingImportMode = 'copy'
   let treeItems = []
   let expanded = {}
   let childrenMap = {}
-  let loadingFiles = false
-  let currentFolderId = null
-  let folderStack = []
-  let fileItems = []
-  let previewItem = null
-  let previewContent = ''
-  let previewLoading = false
-  let previewError = ''
-  let clipboard = { items: [], mode: 'copy' }
-  let selectedIds = []
-  let dragIds = []
+
+  let trashPreviewItem = null
+  let trashPreviewContent = ''
+  let trashPreviewLoading = false
+  let trashPreviewError = ''
   let dropRootValid = false
   let inboxDropValid = false
   let captureDropActive = false
@@ -302,12 +292,11 @@
   function closeTopModalForBack() {
     if (showConfirm) { closeConfirm(); return true }
     if (showSettings) { closeSettings(); return true }
-    if (previewItem) { closePreview(); return true }
+    if (trashPreviewItem) { closeTrashPreview(); return true }
     if (assignInboxItem) { closeAssignInbox(); return true }
     if (editingLink) { closeEditLink(); return true }
     if (showRename) { showRename = false; return true }
     if (showWorklogModal) { closeWorklogModal(); return true }
-    if (showImportDialog) { cancelImport(); return true }
     if (showCreateAction) { cancelCreateAction(); return true }
     if (showCreateNote) { cancelCreateNote(); return true }
     if (showCreateNode) { cancelCreateNode(); return true }
@@ -326,8 +315,8 @@
         }
         await selectNode(node)
         activeTab = snapshot.tab || 'overview'
-        if (activeTab === 'files' && fileItems.length === 0) {
-          await loadFolder(node.id)
+        if (activeTab === 'files') {
+          filesTabRef?.resetToNode?.(node.id)
         }
         return true
       } else if (snapshot.section) {
@@ -373,7 +362,7 @@
     if (activeTab === tabId) return
     rememberNavigation()
     activeTab = tabId
-    if (tabId === 'files' && selectedNode && fileItems.length === 0 && !currentFolderId) loadFolder(selectedNode.id)
+    if (tabId === 'files' && selectedNode) filesTabRef?.resetToNode?.(selectedNode.id)
   }
 
   // ===== Lifecycle =====
@@ -521,13 +510,6 @@
     actions = []
     worklog = []
     suggestions = []
-    fileItems = []
-    folderStack = []
-    currentFolderId = null
-    previewItem = null
-    previewContent = ''
-    selectedIds = []
-    dragIds = []
     resetTrashBrowser()
     noteEditor = null
     showCreateNode = false
@@ -552,292 +534,63 @@
   }
 
   async function loadTree(nodeID) {
-    loadingFiles = true
     try {
       treeItems = await wailsCall('ListItems', nodeID) || []
     } catch (e) {
       treeItems = []
     }
-    loadingFiles = false
   }
 
-  // ===== Folder navigation =====
+  // ===== Node rename (for tree context menu) =====
+  function openNodeRename(id, currentName) {
+    renameId = id
+    renameValue = currentName
+    renameError = ''
+    showRename = true
+  }
 
-  async function loadFolder(folderId) {
-    loadingFiles = true
+  async function submitNodeRename() {
+    const name = renameValue.trim()
+    if (!name) { renameError = t('rename.emptyError'); return }
     try {
-      let items = await wailsCall('ListItems', folderId) || []
-      items.sort((a, b) => {
-        if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
-        return (a.name || '').localeCompare(b.name || '')
-      })
-      fileItems = items
+      await wailsCall('ValidateName', name)
     } catch (e) {
-      fileItems = []
+      renameError = t('rename.invalidError')
+      return
     }
-    loadingFiles = false
-  }
-
-  async function navigateToFolder(folderId) {
-    if (!selectedNode) return
-    rememberNavigation()
+    showRename = false
+    const id = renameId
+    renameId = ''
     try {
-      const node = await wailsCall('GetNodeDetail', folderId)
-      if (node) {
-        folderStack = [...folderStack, { id: folderId, name: node.title }]
+      await wailsCall('RenameNode', id, name)
+      if (selectedNode && selectedNode.id === id) {
+        selectedNode = { ...selectedNode, title: name }
       }
-    } catch (e) {
-      folderStack = [...folderStack, { id: folderId, name: '...' }]
-    }
-    currentFolderId = folderId
-    expanded = { ...expanded, [folderId]: true }
-    const children = await wailsCall('ListWorkspaceChildren', folderId) || []
-    setNodeChildren(workspaceTree, folderId, children)
-    workspaceTree = [...workspaceTree]
-    await loadFolder(folderId)
-  }
-
-  function navigateBack() {
-    rememberNavigation()
-    if (folderStack.length < 2) {
-      // Go back to root
-      folderStack = []
-      currentFolderId = null
-      loadFolder(selectedNode.id)
-    } else {
-      const target = folderStack[folderStack.length - 2]
-      folderStack = folderStack.slice(0, -1)
-      currentFolderId = target.id
-      loadFolder(target.id)
-    }
-  }
-
-  function navigateToBreadcrumb(index) {
-    const target = folderStack[index]
-    folderStack = folderStack.slice(0, index + 1)
-    currentFolderId = target.id
-    loadFolder(target.id)
-  }
-
-  // ===== File preview =====
-
-  async function openPreview(item) {
-    // For .md files: check if linked to a note, open note editor instead of preview modal
-    if (item && item.fileId && isMarkdownFile(item)) {
-      try {
-        const action = await wailsCall('CheckFileAction', item.fileId)
-        if (action.action === 'note') {
-          await openNote({ id: action.noteId, title: action.noteTitle })
-          return
-        }
-        if (action.action === 'external') {
-          await wailsCall('OpenFile', item.fileId)
-          return
-        }
-        // 'preview' → fall through to normal preview
-      } catch (e) {
-        console.warn('CheckFileAction failed, falling back to preview:', e)
-      }
-    }
-
-    previewItem = item
-    previewContent = ''
-    previewError = ''
-    previewLoading = true
-
-    try {
-      if (needsBase64Preview(item)) {
-        previewContent = await wailsCall('GetFileBase64', item.fileId) || ''
-      } else if (needsTextPreview(item)) {
-        previewContent = await wailsCall('ReadFileText', item.fileId) || ''
-      }
-    } catch (e) {
-      previewError = String(e)
-    }
-    previewLoading = false
-  }
-
-  function closePreview() {
-    previewItem = null
-    previewContent = ''
-    previewError = ''
-  }
-
-  // ===== File operations =====
-
-  async function createFile() {
-    const name = prompt(t('file.namePrompt'))
-    if (!name || !name.trim()) return
-    try {
-      const parentId = currentFolderId || selectedNode.id
-      await wailsCall('CreateEmptyFile', parentId, name.trim())
-      await loadFolder(parentId)
-      await refreshParentNode(parentId)
+      await reloadTreePreservingExpanded()
     } catch (e) {
       error = String(e)
     }
   }
 
-  async function duplicateItem(id) {
-    try {
-      await wailsCall('DuplicateNode', id)
-      const parentId = currentFolderId || selectedNode.id
-      await loadFolder(parentId)
-      await refreshParentNode(parentId)
-    } catch (e) {
-      error = String(e)
-    }
+  function cancelNodeRename() {
+    showRename = false
+    renameId = ''
+    renameValue = ''
+    renameError = ''
   }
 
-  function renameItem(id) {
-    const item = fileItems.find(x => x.id === id)
-    if (item) openRename(item.id, item.name)
+  function onNodeRenameKeydown(e) {
+    if (e.key === 'Enter') submitNodeRename()
+    else renameError = ''
   }
 
-  function cutItem(id) {
-    clipboard = { items: [id], mode: 'cut' }
+  // ===== Trash preview =====
+  function closeTrashPreview() {
+    trashPreviewItem = null
+    trashPreviewContent = ''
+    trashPreviewError = ''
   }
 
-  function copyItem(id) {
-    clipboard = { items: [id], mode: 'copy' }
-  }
-
-  async function pasteItem() {
-    if (clipboard.items.length === 0) return
-    const targetId = currentFolderId || selectedNode.id
-    try {
-      if (clipboard.mode === 'copy') {
-        for (const id of clipboard.items) {
-          await wailsCall('DuplicateNode', id)
-        }
-      } else {
-        for (const id of clipboard.items) {
-          await wailsCall('MoveNode', id, targetId)
-        }
-      }
-      clipboard = { items: [], mode: 'copy' }
-      await loadFolder(targetId)
-    } catch (e) {
-      error = String(e)
-    }
-  }
-
-  // ===== Selection =====
-
-  function toggleSelection(id) {
-    if (selectedIds.includes(id)) {
-      selectedIds = selectedIds.filter(x => x !== id)
-    } else {
-      selectedIds = [...selectedIds, id]
-    }
-  }
-
-  function selectOne(id) {
-    selectedIds = [id]
-  }
-
-  function selectAll() {
-    selectedIds = fileItems.map(x => x.id)
-  }
-
-  function rangeSelect(id) {
-    if (fileItems.length === 0) return
-    const lastId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : fileItems[0].id
-    const lastIdx = fileItems.findIndex(x => x.id === lastId)
-    const curIdx = fileItems.findIndex(x => x.id === id)
-    if (lastIdx === -1 || curIdx === -1) return
-    const start = Math.min(lastIdx, curIdx)
-    const end = Math.max(lastIdx, curIdx)
-    const range = fileItems.slice(start, end + 1).map(x => x.id)
-    const set = new Set(selectedIds)
-    range.forEach(x => set.add(x))
-    selectedIds = [...set]
-  }
-
-  function clearSelection() {
-    selectedIds = []
-  }
-
-  function getTargetIds(ids) {
-    return ids.length > 0 ? ids : fileItems.map(x => x.id)
-  }
-
-  async function deleteSelected() {
-    const ids = getTargetIds(selectedIds)
-    const item = fileItems.find(x => x.id === ids[0])
-    let label
-    if (ids.length === 1 && item?.type === 'folder') {
-      label = t('delete.folder')
-    } else if (ids.length === 1) {
-      label = t('delete.file')
-    } else {
-      label = t('delete.files', { count: ids.length })
-    }
-    openConfirm({
-      title: t('delete.confirmTitle'),
-      message: t('delete.confirmMessage') + ' ' + label + '?',
-      confirmText: t('common.delete'),
-      danger: true,
-      onConfirm: async () => {
-        for (const id of ids) {
-          try {
-            await wailsCall('DeleteFileOrFolder', id)
-          } catch (e) { error = String(e) }
-        }
-        selectedIds = []
-        const reloadId = currentFolderId || selectedNode.id
-        await loadFolder(reloadId)
-      }
-    })
-  }
-
-  function cutSelected() {
-    const ids = getTargetIds(selectedIds)
-    clipboard = { items: ids, mode: 'cut' }
-    selectedIds = []
-  }
-
-  function copySelected() {
-    const ids = getTargetIds(selectedIds)
-    clipboard = { items: ids, mode: 'copy' }
-    selectedIds = []
-  }
-
-  // ===== Drag-and-drop =====
-
-  function onDragStart(e, id) {
-    e.stopPropagation()
-    const ids = selectedIds.includes(id) ? selectedIds : [id]
-    dragIds = ids
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', ids.join(','))
-  }
-
-  function onDragOver(e, folderId) {
-    const item = fileItems.find(x => x.id === folderId)
-    if (item && item.type === 'folder') {
-      e.preventDefault()
-      e.stopPropagation()
-      e.dataTransfer.dropEffect = 'move'
-    }
-  }
-
-  async function onDrop(e, folderId) {
-    e.preventDefault()
-    e.stopPropagation()
-    if (dragIds.length === 0) return
-    for (const id of dragIds) {
-      try {
-        await wailsCall('MoveNode', id, folderId)
-      } catch (e) { error = String(e) }
-    }
-    dragIds = []
-    selectedIds = []
-    await loadFolder(currentFolderId || selectedNode.id)
-  }
-
-  // ===== Keyboard =====
-
   function isEditableTarget(target) {
     if (!target || !(target instanceof Element)) return false
     return !!target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]')
@@ -857,109 +610,14 @@
       return
     }
 
-    if (activeTab !== 'files') return
-
-    if (e.ctrlKey || e.metaKey) {
-      if (e.key === 'c' || e.key === 'C') { e.preventDefault(); copySelected() }
-      else if (e.key === 'x' || e.key === 'X') { e.preventDefault(); cutSelected() }
-      else if (e.key === 'v' || e.key === 'V') { e.preventDefault(); pasteItem() }
-      else if (e.key === 'a' || e.key === 'A') { e.preventDefault(); selectAll() }
-      else if (e.key === 'o' || e.key === 'O') { e.preventDefault(); openSelectedExternal() }
-      else if (e.key === 'Enter') { e.preventDefault(); openSelected() }
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      openSelected()
-    } else if (e.key === 'Delete') {
-      if (previewItem) { e.preventDefault(); closePreview(); return }
-      if (selectedIds.length > 0) { e.preventDefault(); deleteSelected(); return }
-    } else if (e.key === 'Escape') {
-      if (previewItem) { closePreview(); return }
-      if (selectedIds.length > 0) { clearSelection(); return }
-    } else if (e.key === 'F2') {
-      e.preventDefault()
-      openRenameForSelection()
+    if (activeTab === 'files' && filesTabRef) {
+      return filesTabRef.handleFilesKeydown(e)
     }
   }
 
-  function openSelected() {
-    if (selectedIds.length === 1) {
-      const item = fileItems.find(x => x.id === selectedIds[0])
-      if (item) {
-        if (item.type === 'folder') {
-          navigateToFolder(item.id)
-        } else {
-          openPreview(item)
-        }
-      }
-    }
-  }
+      // ===== Rename modal =====
 
-  function openSelectedExternal() {
-    if (selectedIds.length === 1) {
-      const item = fileItems.find(x => x.id === selectedIds[0])
-      if (item && item.fileId) {
-        wailsCall('OpenFile', item.fileId)
-      }
-    }
-  }
-
-  // ===== Rename modal =====
-
-  function openRename(id, currentName) {
-    renameId = id
-    renameValue = currentName
-    renameError = ''
-    showRename = true
-  }
-
-  function openRenameForSelection() {
-    if (selectedIds.length === 1) {
-      const item = fileItems.find(x => x.id === selectedIds[0])
-      if (item) {
-        openRename(item.id, item.name)
-      }
-    }
-  }
-
-  async function submitRename() {
-    const name = renameValue.trim()
-    if (!name) { renameError = t('rename.emptyError'); return }
-    try {
-      await wailsCall('ValidateName', name)
-    } catch (e) {
-      renameError = t('rename.invalidError')
-      return
-    }
-    showRename = false
-    const id = renameId
-    renameId = ''
-    try {
-      await wailsCall('RenameNode', id, name)
-      if (selectedNode && selectedNode.id === id) {
-        selectedNode = { ...selectedNode, title: name }
-      }
-      await reloadTreePreservingExpanded()
-      if (currentFolderId) {
-        await loadFolder(currentFolderId)
-      }
-    } catch (e) {
-      error = String(e)
-    }
-  }
-
-  function cancelRename() {
-    showRename = false
-    renameId = ''
-    renameValue = ''
-    renameError = ''
-  }
-
-  function onRenameKeydown(e) {
-    if (e.key === 'Enter') submitRename()
-    else renameError = ''
-  }
-
-  // ===== Confirm modal =====
+            // ===== Confirm modal =====
 
   function openConfirm(opts) {
     confirmTitle = opts.title || t('common.confirm')
@@ -1111,7 +769,7 @@
 
   // ===== Node operations from context menu =====
   function openRenameForNode(node) {
-    openRename(node.id, node.title)
+    openNodeRename(node.id, node.title)
     closeContextMenu()
   }
 
@@ -1184,12 +842,8 @@
         selectedSection = ''
         selectedNode = item
         activeTab = 'files'
-        folderStack = []
-        currentFolderId = null
-        selectedIds = []
-        previewItem = null
         await loadTabData(item.id)
-        await loadFolder(item.id)
+        filesTabRef?.resetToNode?.(item.id)
         return
       }
 
@@ -1199,7 +853,8 @@
         if (!record) throw new Error('file record not found')
         const preview = fileRecordToPreviewItem(item, record)
         if (canPreviewFile(preview)) {
-          await openPreview(preview)
+          activeTab = 'files'
+          filesTabRef?.openFileById?.(item.id)
         } else {
           await wailsCall('OpenFile', preview.fileId)
         }
@@ -1508,14 +1163,8 @@
           await selectNode(parent)
         }
         setActiveTab('files')
-        await loadFolder(parentId)
-        // Find the file in the loaded fileItems and open preview
-        const fileItem = fileItems.find(f => f.id === id)
-        if (fileItem) {
-          await openPreview(fileItem)
-        } else {
-          showVerstakToastMessage(t('note.internal.fileFound', { title: node.title }))
-        }
+        filesTabRef?.resetToNode?.(parentId)
+        filesTabRef?.openFileById?.(id)
       } else {
         showVerstakToastMessage(t('note.internal.fileFound', { title: node.title }))
       }
@@ -1685,22 +1334,22 @@
   }
 
   async function openTrashFilePreview(node) {
-    previewItem = { name: node.title, type: 'file', mime: 'text/plain', size: 0, fileId: node.id }
-    previewContent = ''
-    previewError = ''
-    previewLoading = true
+    trashPreviewItem = { name: node.title, type: 'file', mime: 'text/plain', size: 0, fileId: node.id }
+    trashPreviewContent = ''
+    trashPreviewError = ''
+    trashPreviewLoading = true
     try {
       if (node.trashFsPath) {
-        previewContent = await wailsCall('ReadTrashFile', node.trashFsPath) || ''
+        trashPreviewContent = await wailsCall('ReadTrashFile', node.trashFsPath) || ''
       } else {
-        previewContent = await wailsCall('ReadTrashFileContent', node.id) || ''
+        trashPreviewContent = await wailsCall('ReadTrashFileContent', node.id) || ''
       }
       const ext = (node.title || '').split('.').pop().toLowerCase()
       if (['png','jpg','jpeg','gif','webp','bmp','svg'].includes(ext)) {
-        previewContent = 'data:image/' + (ext === 'svg' ? 'svg+xml' : ext) + ';base64,' + btoa(previewContent)
+        trashPreviewContent = 'data:image/' + (ext === 'svg' ? 'svg+xml' : ext) + ';base64,' + btoa(previewContent)
       }
-    } catch (e) { previewError = String(e) }
-    previewLoading = false
+    } catch (e) { trashPreviewError = String(e) }
+    trashPreviewLoading = false
   }
 
   function toggleTrashSelection(id) {
@@ -1980,88 +1629,7 @@
   }
 
   // ===== Files =====
-  async function addFile() {
-    const path = await wailsCall('PickFile')
-    if (!path) return
-    const parentId = currentFolderId || selectedNode.id
-    await startImport(parentId, path)
-  }
-
-  async function addFolder() {
-    const path = await wailsCall('PickDirectory')
-    if (!path) return
-    const parentId = currentFolderId || selectedNode.id
-    await startImport(parentId, path)
-  }
-
-  async function startImport(parentID, sourcePath) {
-    importing = true
-    try {
-      const summary = await wailsCall('PreviewImport', sourcePath)
-      importSummary = summary
-      pendingImportPath = sourcePath
-      pendingImportParent = parentID
-      showImportDialog = true
-    } catch (e) {
-      error = String(e)
-    }
-    importing = false
-  }
-
-  async function confirmImport(mode) {
-    try {
-      const parentId = pendingImportParent || selectedNode.id
-      const result = mode === 'copy'
-        ? await wailsCall('AddPathCopy', parentId, pendingImportPath)
-        : await wailsCall('AddPathLink', parentId, pendingImportPath)
-      showImportDialog = false
-      importSummary = null
-      folderStack = []
-      currentFolderId = null
-      await Promise.all([
-        loadTabData(parentId),
-        loadFolder(parentId),
-        refreshParentNode(parentId),
-      ])
-    } catch (e) {
-      error = String(e)
-    }
-  }
-
-  function cancelImport() {
-    showImportDialog = false
-    importSummary = null
-  }
-
-  async function deleteFile({ id, type }) {
-    const label = type === 'folder' ? t('delete.folder') : t('delete.file')
-    openConfirm({
-      title: t('delete.confirmTitle'),
-      message: t('delete.confirmMessage') + ' ' + label + '?',
-      confirmText: t('common.delete'),
-      danger: true,
-      onConfirm: async () => {
-        try {
-          await wailsCall('DeleteFileOrFolder', id)
-          files = files.filter(f => f.nodeId !== id)
-          const reloadId = currentFolderId || selectedNode.id
-          await loadFolder(reloadId)
-        } catch (e) {
-          error = String(e)
-        }
-      }
-    })
-  }
-
-  async function openSelectedFile(fileID) {
-    try {
-      await wailsCall('OpenFile', fileID)
-    } catch (e) {
-      error = String(e)
-    }
-  }
-
-  // ===== Drag-and-drop =====
+                // ===== Drag-and-drop =====
   async function onFilesDropped(paths) {
     try {
       if (!paths || paths.length === 0) return
@@ -2342,7 +1910,6 @@
     }
   }
   function hasExternalCaptureData(dataTransfer) {
-    if (dragIds.length > 0) return false
     const types = Array.from(dataTransfer?.types || [])
     return types.includes('Files') ||
       types.includes('text/uri-list') ||
@@ -2669,20 +2236,17 @@
           try {
             const detail = await wailsCall('GetNodeDetail', target.targetId)
             if (detail && detail.parent_id) {
-              await loadFolder(detail.parent_id)
-              const fileItem = fileItems.find(f => f.id === target.targetId)
-              if (fileItem && fileItem.type === 'file' && canPreviewFile(fileItem)) {
-                setTimeout(() => openPreview(fileItem), 150)
-              }
+              filesTabRef?.resetToNode?.(detail.parent_id)
+              filesTabRef?.openFileById?.(target.targetId)
             } else {
               // No parent — item sits at the root level
-              await loadFolder(targetNode)
+              filesTabRef?.resetToNode?.(targetNode)
             }
           } catch(e) {
-            await loadFolder(targetNode)
+            filesTabRef?.resetToNode?.(targetNode)
           }
         } else {
-          await loadFolder(targetNode)
+          filesTabRef?.resetToNode?.(targetNode)
         }
       }
     } catch (e) {
@@ -2733,18 +2297,15 @@
         if (parent) {
           await selectNode(parent)
           setActiveTab('files')
-          await loadFolder(parent.id)
-          const fileItem = fileItems.find(item => item.id === detail.id)
-          if (fileItem && canPreviewFile(fileItem)) {
-            await openPreview(fileItem)
-          }
+          filesTabRef?.resetToNode?.(parent.id)
+          filesTabRef?.openFileById?.(detail.id)
         }
         return
       }
       if (result.type === 'folder') {
         await selectNode(detail)
         setActiveTab('files')
-        await loadFolder(detail.id)
+        filesTabRef?.resetToNode?.(detail.id)
         return
       }
       await selectNode(detail)
@@ -2839,6 +2400,8 @@
   }
 </script>
 
+
+
 {#if showFirstRun}
   <FirstRun onComplete={onFirstRunComplete} />
 {:else if showRecovery}
@@ -3016,7 +2579,7 @@
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                 {t('overview.newNote')}
               </button>
-              <button class="qa-btn" on:click={() => { setActiveTab('files'); addFile() }}>
+              <button class="qa-btn" on:click={() => { setActiveTab('files'); if (filesTabRef) filesTabRef.addFile(); }}>
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                 {t('overview.addFile')}
               </button>
@@ -3089,87 +2652,14 @@
           </div>
 
         {:else if activeTab === 'files'}
-          <!-- External file drops are handled by the unified capture flow and land in the selected case inbox. -->
-          <div class="files-tab">
-            <div class="tab-toolbar">
-              <button class="btn btn-primary" on:click={addFile} disabled={importing}>{t('file.addFile')}</button>
-              <button class="btn" on:click={addFolder} disabled={importing}>{t('file.addFolder')}</button>
-              <button class="btn" on:click={createFile}>{t('file.newFile')}</button>
-              {#if clipboard.items.length > 0}
-                <button class="btn" on:click={pasteItem}>{t('common.paste')} {clipboard.items.length}</button>
-              {/if}
-            </div>
-
-            {#if loadingFiles}
-              <div class="empty-state">
-                <p>{t('common.loading')}</p>
-              </div>
-            {:else}
-              {#if folderStack.length > 0}
-                <FileBreadcrumbs crumbs={[{ name: t('file.root') }, ...folderStack]} on:navigate={(e) => {
-                  const i = e.detail
-                  if (i === 0) {
-                    folderStack = []
-                    currentFolderId = null
-                    loadFolder(selectedNode.id)
-                  } else {
-                    navigateToBreadcrumb(i - 1)
-                  }
-                }}/>
-                <button class="btn btn-sm back-btn" on:click={navigateBack}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
-                  {t('common.backLabel')}
-                </button>
-              {:else}
-                <FileBreadcrumbs crumbs={[{ name: t('file.root') }]}/>
-              {/if}
-
-              {#if fileItems.length === 0}
-                <div class="empty-state">
-                  <div class="empty-icon">
-                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
-                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                      <polyline points="14 2 14 8 20 8"/>
-                    </svg>
-                  </div>
-                  <p>{folderStack.length > 0 ? t('file.noFiles') : t('file.noFilesCase')}</p>
-                  <p class="hint">{t('file.hint')}</p>
-                  <div class="empty-actions">
-                    <button class="btn btn-primary" on:click={addFile}>{t('file.addFileSimple')}</button>
-                    <button class="btn" on:click={addFolder}>{t('file.addFolderSimple')}</button>
-                  </div>
-                </div>
-              {:else}
-                <div class="file-list">
-                  {#each fileItems as item (item.id)}
-                    <FileTreeRow
-                      {item}
-                      selected={selectedIds.includes(item.id)}
-                      {onDragStart}
-                      {onDragOver}
-                      {onDrop}
-                      on:navigate={(e) => navigateToFolder(e.detail)}
-                      on:preview={(e) => openPreview(e.detail)}
-                      on:openExternal={(e) => wailsCall('OpenFile', e.detail)}
-                      on:showInFolder={(e) => wailsCall('OpenFolder', e.detail)}
-                      on:delete={(e) => deleteFile(e.detail)}
-                      on:rename={(e) => renameItem(e.detail.id)}
-                      on:duplicate={(e) => duplicateItem(e.detail)}
-                      on:cut={(e) => cutItem(e.detail)}
-                      on:copy={(e) => copyItem(e.detail)}
-                      on:selectOne={(e) => selectOne(e.detail)}
-                      on:toggleSelect={(e) => toggleSelection(e.detail)}
-                      on:rangeSelect={(e) => rangeSelect(e.detail)}
-                    />
-                  {/each}
-                </div>
-              {/if}
-            {/if}
-
-            {#if importing && !showImportDialog}
-              <div class="empty-state"><p>{t('file.scanning')}</p></div>
-            {/if}
-          </div>
+          <FilesTab
+            bind:this={filesTabRef}
+            {selectedNode}
+            {wailsCall}
+            on:openNote={(e) => openNote(e.detail)}
+            on:refreshParent={(e) => refreshParentNode(e.detail.nodeId)}
+            on:error={(e) => error = e.detail.message}
+          />
 
         {:else if activeTab === 'inbox'}
           <div class="inbox-tab">
@@ -4035,46 +3525,22 @@
       </div>
     {/if}
 
-    {#if showImportDialog && importSummary}
-      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelImport} on:keydown={onKeyActivate(cancelImport)}>
-        <div class="modal">
-          <h3>{t('file.importTitle')} «{selectedNode ? selectedNode.title : ''}»</h3>
-          <div class="import-summary">
-            <div class="summary-row"><span>{t('file.importFiles')}</span><span>{importSummary.files}</span></div>
-            <div class="summary-row"><span>{t('file.importFolders')}</span><span>{importSummary.folders}</span></div>
-            <div class="summary-row"><span>{t('file.importSize')}</span><span>{(importSummary.totalBytes / 1024).toFixed(1)} KB</span></div>
-            {#if importSummary.isDangerous}
-              <div class="summary-warn">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-                {importSummary.dangerReason}
-              </div>
-            {/if}
-          </div>
-          <div class="modal-actions">
-            <button class="btn btn-primary" on:click={() => confirmImport('copy')}>{t('file.importCopy')}</button>
-            <button class="btn" on:click={() => confirmImport('link')}>{t('file.importLink')}</button>
-            <button class="btn" on:click={cancelImport}>{t('common.cancel')}</button>
-          </div>
-        </div>
-      </div>
-    {/if}
-
     {#if showRename}
-      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelRename} on:keydown={onKeyActivate(cancelRename)}>
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelNodeRename} on:keydown={onKeyActivate(cancelNodeRename)}>
         <div class="modal">
           <h3>{t('rename.title')}</h3>
           <div class="form-group">
             <label><span class="label-text">{t('common.newName')}</span>
             <input type="text" bind:value={renameValue}
-                   on:keydown={onRenameKeydown} />
+                   on:keydown={onNodeRenameKeydown} />
             </label>
           </div>
           {#if renameError}
             <div class="rename-error">{renameError}</div>
           {/if}
           <div class="modal-actions">
-            <button class="btn btn-primary" on:click={submitRename}>{t('common.rename')}</button>
-            <button class="btn" on:click={cancelRename}>{t('common.cancel')}</button>
+            <button class="btn btn-primary" on:click={submitNodeRename}>{t('common.rename')}</button>
+            <button class="btn" on:click={cancelNodeRename}>{t('common.cancel')}</button>
           </div>
         </div>
       </div>
@@ -4155,13 +3621,13 @@
       />
     {/if}
 
-    {#if previewItem}
+    {#if trashPreviewItem}
       <FilePreviewModal
-        item={previewItem}
-        content={previewContent}
-        loading={previewLoading}
-        error={previewError}
-        on:close={closePreview}
+        item={trashPreviewItem}
+        content={trashPreviewContent}
+        loading={trashPreviewLoading}
+        error={trashPreviewError}
+        on:close={closeTrashPreview}
         on:openExternal={(e) => wailsCall('OpenFile', e.detail)}
       />
     {/if}
@@ -4173,6 +3639,7 @@
 </div>
 {/if}
 
+
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 .app { display: flex; width: 100vw; height: 100vh; overflow: hidden; background: #13131f; color: #e4e4ef; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; }
@@ -4558,17 +4025,9 @@
 }
 
 /* Files tab */
-.files-tab { padding: 20px; }
-.files-tab .tab-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
-.file-list { display: flex; flex-direction: column; }
-.back-btn { margin-bottom: 4px; display: inline-flex; align-items: center; gap: 4px; }
 
 /* Import summary */
-.import-summary { margin-bottom: 16px; }
-.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px solid #2a2a3c; }
-.summary-warn { margin-top: 8px; padding: 8px 12px; background: #3a2a22; border-radius: 6px; color: #ffaa66; font-size: 13px; }
 
-.rename-error { color: #ff6b6b; font-size: 12px; margin-top: 4px; }
 
 /* Template cards */
 .template-cards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
diff --git a/frontend/src/App.svelte.bak b/frontend/src/App.svelte.bak
new file mode 100644
index 0000000..5934ef0
--- /dev/null
+++ b/frontend/src/App.svelte.bak
@@ -0,0 +1,4794 @@
+<script>
+  import FileTreeRow from './FileTreeRow.svelte'
+  import FileBreadcrumbs from './lib/FileBreadcrumbs.svelte'
+  import FilePreviewModal from './lib/FilePreviewModal.svelte'
+  import ConfirmModal from './lib/ConfirmModal.svelte'
+  import TreeNode from './TreeNode.svelte'
+  import TemplateIcon from './lib/TemplateIcon.svelte'
+  import FirstRun from './lib/FirstRun.svelte'
+  import VaultRecovery from './lib/VaultRecovery.svelte'
+  import SettingsWindow from './lib/SettingsWindow.svelte'
+  import SyncStatus from './lib/SyncStatus.svelte'
+  import TodayScreen from './lib/TodayScreen.svelte'
+  import CalendarPluginPage from './lib/CalendarPluginPage.svelte'
+  import AppHeader from './lib/AppHeader.svelte'
+  import { onMount, onDestroy } from 'svelte'
+  import { actionIcon } from './lib/actionIcons.js'
+  import { canPreviewFile, needsBase64Preview, needsTextPreview, isMarkdownFile } from './lib/fileUtils.js'
+  import { t } from './lib/i18n'
+  import NoteEditorPanel from './lib/components/notes/NoteEditorPanel.svelte'
+  import InternalLinkPicker from './lib/components/notes/InternalLinkPicker.svelte'
+
+  // ===== Wails v2 API call helper =====
+  function wailsCall(method, ...args) {
+    try {
+      if (window['go'] && window['go']['main'] && window['go']['main']['App']) {
+        const fn = window['go']['main']['App'][method]
+        if (typeof fn === 'function') {
+          return fn(...args)
+        }
+      }
+    } catch (e) {
+      console.error('Wails call error:', method, e)
+    }
+    return Promise.reject(new Error('Wails not connected: ' + method))
+  }
+
+  // ===== Startup state =====
+  let startupStatus = null
+  let startupChecked = false
+  let showFirstRun = false
+  let showRecovery = false
+  let showSettings = false
+
+  // ===== State =====
+  let systemViews = []
+  let workspaceTree = []
+  let enabledTemplates = []
+  let todayDashboard = null
+  let activityFeed = []
+  let activityOffset = 0
+  let activityHasMore = true
+  let journalRows = []
+  let journalSummary = null
+  let journalDateFrom = ''
+  let journalDateTo = ''
+  let journalIncludeChildren = false
+  let journalNodeID = ''
+  let journalBillableFilter = 'all'
+  let journalApproxFilter = 'all'
+  let journalFilteredNodeTitle = ''
+  let journalStatusMsg = ''
+  let journalActiveTab = 'suggestions'
+  let journalSearchQuery = ''
+  let journalSearchResults = []
+  let journalShowResults = false
+  let activityLoading = false
+  let caseActivity = []
+  let version = ''
+  let error = ''
+  function translateError(msg) {
+    const map = {
+      'vault not open': t('error.vaultNotOpen'),
+    }
+    return map[msg] || msg
+  }
+  let selectedSection = ''
+  let selectedNode = null
+  let activeTab = 'overview'
+  let notes = []
+  let noteEditor = null
+  let noteEditorPanel = undefined; // bind:this ref for NoteEditorPanel
+  let noteViewMode = 'edit'
+  let showLinkModal = false
+  let linkModalLabel = ''
+  let linkModalUrl = ''
+  let showInternalLinkPicker = false
+  let showVerstakToast = false
+  let verstakToastMessage = ''
+  // Note rename state
+  let renamingNoteId = null
+  let renamingNoteTitle = ''
+  let renamingNoteOriginalTitle = ''
+  let files = []
+  let actions = []
+  let worklog = []
+  let worklogMinutes = ''
+  let worklogSummary = ''
+  let worklogDate = ''
+  let worklogDetails = ''
+  let worklogBillable = false
+  let worklogApprox = false
+  let showWorklogModal = false
+  let wlModalSummary = ''
+  let wlModalMinutes = ''
+  let wlModalDate = ''
+  let wlModalDetails = ''
+  let wlModalBillable = false
+  let wlModalApprox = false
+  let editingWorklogEntry = null
+  let acceptingSuggestion = null
+  let suggestions = []
+  let suggestionCount = 0
+  let inProgressItems = []
+  let todayCaptures = []
+  let browserEvents = []
+  let browserLoading = false
+  let inboxNodes = []
+  let localInboxNodes = []
+  let inboxCaptureBusy = false
+  let inboxCaptureStatus = ''
+  let inboxSortBy = 'date'
+  let inboxSortDir = 'desc'
+  let inboxGroupByContext = false
+  let links = []
+  let editingLink = null
+  let linkTitle = ''
+  let linkURL = ''
+  let linkNote = ''
+  let linkStatus = ''
+  let trashInfo = null
+  let trashCount = 0
+  let trashSelectedIds = []
+  let trashFolderId = ''
+  let trashFolderStack = []
+  let visibleTrashNodes = []
+  let currentTrashPath = ''
+  let currentTrashTitle = ''
+  let navHistory = []
+  let restoringHistory = false
+  let showCreateNode = false
+  let newNodeTitle = ''
+  let createInNode = null
+  let createWithTemplate = null
+  let contextMenu = { visible: false, x: 0, y: 0, node: null }
+  let showCreateNote = false
+  let newNoteTitle = ''
+  let showCreateAction = false
+  let newActionTitle = ''
+  let newActionKind = 'open_url'
+  let newActionData = ''
+  let actionKinds = [
+    { id: 'open_url', label: t('action.openUrl') },
+    { id: 'open_file', label: t('action.openFile') },
+    { id: 'open_folder', label: t('action.openFolder') },
+    { id: 'run_command', label: t('action.runCommand') },
+    { id: 'run_script', label: t('action.runScript') },
+    { id: 'open_terminal', label: t('action.openTerminal') },
+    { id: 'launch_app', label: t('action.launchApp') },
+  ]
+  let loading = true
+  let importing = false
+  let importSummary = null
+  let showImportDialog = false
+  let pendingImportPath = ''
+  let pendingImportParent = ''
+  let pendingImportMode = 'copy'
+  let treeItems = []
+  let expanded = {}
+  let childrenMap = {}
+  let loadingFiles = false
+  let currentFolderId = null
+  let folderStack = []
+  let fileItems = []
+  let previewItem = null
+  let previewContent = ''
+  let previewLoading = false
+  let previewError = ''
+  let clipboard = { items: [], mode: 'copy' }
+  let selectedIds = []
+  let dragIds = []
+  let dropRootValid = false
+  let inboxDropValid = false
+  let captureDropActive = false
+  let captureDropLabel = ''
+  let captureDragDepth = 0
+  let lastCaptureDragOverAt = 0
+  let captureDragResetTimer = null
+
+  let showConfirm = false
+  let confirmTitle = ''
+  let confirmMessage = ''
+  let confirmDanger = false
+  let confirmText = t('common.delete')
+  let confirmAction = null
+  let cancelAction = null
+
+  let showRename = false
+  let renameId = ''
+  let renameValue = ''
+  let renameError = ''
+  let assignInboxItem = null
+  let inboxAssignQuery = ''
+  let inboxAssignResults = []
+  let inboxAssignTarget = null
+  let inboxAssignSearching = false
+  let inboxAssignTimer
+
+  // ===== Sync state =====
+  let syncStatus = null
+  let syncLoading = false
+  let syncMessage = ''
+  let syncMessageKind = ''
+
+  const tabs = [
+    { id: 'overview', label: t('tab.overview') },
+    { id: 'notes', label: t('tab.notes') },
+    { id: 'files', label: t('tab.files') },
+    { id: 'links', label: t('tab.links') },
+    { id: 'actions', label: t('tab.actions') },
+    { id: 'activity', label: t('tab.activity'), group: 'service' },
+    { id: 'worklog', label: t('tab.worklog'), group: 'service' },
+    { id: 'inbox', label: t('tab.inbox'), group: 'service' },
+  ]
+
+  let unlistenDrop = null
+
+  $: visibleTrashNodes = computeVisibleTrashNodes(trashInfo?.nodes || [], trashFolderId)
+  $: currentViewTitle = selectedNode
+    ? selectedNode.title
+    : selectedSection
+      ? (systemViews.find(view => view.id === selectedSection)?.label || '')
+      : t('nav.selectPrompt')
+  $: currentViewSubtitle = selectedNode ? nodeKindLabel(selectedNode.type) : ''
+
+  $: sortedInboxNodes = sortInboxNodes(inboxNodes, inboxSortBy, inboxSortDir)
+  $: groupedInboxNodes = inboxGroupByContext ? groupInboxByContext(sortedInboxNodes) : null
+
+  function sortInboxNodes(nodes, sortBy, sortDir) {
+    const sorted = [...nodes]
+    sorted.sort((a, b) => {
+      let cmp = 0
+      if (sortBy === 'name') {
+        cmp = (a.title || '').localeCompare(b.title || '')
+      } else if (sortBy === 'type') {
+        const aKind = a.captureKind || a.sourceKind || a.type || ''
+        const bKind = b.captureKind || b.sourceKind || b.type || ''
+        cmp = aKind.localeCompare(bKind)
+      } else {
+        cmp = (a.capturedAt || a.createdAt || '').localeCompare(b.capturedAt || b.createdAt || '')
+      }
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+    return sorted
+  }
+
+  function groupInboxByContext(nodes) {
+    const groups = {}
+    for (const item of nodes) {
+      const key = item.captureContextLabel || t('inbox.noContext')
+      if (!groups[key]) groups[key] = []
+      groups[key].push(item)
+    }
+    const result = []
+    for (const [label, items] of Object.entries(groups)) {
+      result.push({ label, items })
+    }
+    result.sort((a, b) => a.label.localeCompare(b.label))
+    return result
+  }
+  $: currentTrashPath = trashFolderStack.length === 0 ? t('nav.trash') : [t('nav.trash'), ...trashFolderStack.map(node => node.title)].join(' / ')
+  $: currentTrashTitle = currentTrashFolder()?.title || t('trash.deletedNodes')
+
+  function currentNavigationSnapshot() {
+    return {
+      section: selectedSection || '',
+      nodeId: selectedNode?.id || '',
+      tab: selectedNode ? activeTab : '',
+      trashFolderId: selectedSection === 'trash' ? trashFolderId : '',
+      trashFolderStack: selectedSection === 'trash' ? trashFolderStack.map(item => ({ id: item.id, title: item.title })) : [],
+    }
+  }
+
+  function sameNavigation(a, b) {
+    return a.section === b.section && a.nodeId === b.nodeId && a.tab === b.tab && a.trashFolderId === b.trashFolderId
+  }
+
+  function rememberNavigation() {
+    if (restoringHistory) return
+    const snapshot = currentNavigationSnapshot()
+    const last = navHistory[navHistory.length - 1]
+    if (!last || !sameNavigation(last, snapshot)) {
+      navHistory = [...navHistory, snapshot].slice(-80)
+    }
+  }
+
+  function resetTrashBrowser() {
+    trashFolderId = ''
+    trashFolderStack = []
+    trashSelectedIds = []
+  }
+
+  function closeTopModalForBack() {
+    if (showConfirm) { closeConfirm(); return true }
+    if (showSettings) { closeSettings(); return true }
+    if (previewItem) { closePreview(); return true }
+    if (assignInboxItem) { closeAssignInbox(); return true }
+    if (editingLink) { closeEditLink(); return true }
+    if (showRename) { showRename = false; return true }
+    if (showWorklogModal) { closeWorklogModal(); return true }
+    if (showImportDialog) { cancelImport(); return true }
+    if (showCreateAction) { cancelCreateAction(); return true }
+    if (showCreateNote) { cancelCreateNote(); return true }
+    if (showCreateNode) { cancelCreateNode(); return true }
+    if (contextMenu.visible) { closeContextMenu(); return true }
+    if (noteEditor) { closeNoteEditor(); return true }
+    return false
+  }
+
+  async function restoreNavigation(snapshot) {
+    restoringHistory = true
+    try {
+      if (snapshot.nodeId) {
+        const node = await wailsCall('GetNodeDetail', snapshot.nodeId)
+        if (!node) {
+          return false
+        }
+        await selectNode(node)
+        activeTab = snapshot.tab || 'overview'
+        if (activeTab === 'files' && fileItems.length === 0) {
+          await loadFolder(node.id)
+        }
+        return true
+      } else if (snapshot.section) {
+        if (!systemViews.some(view => view.id === snapshot.section)) {
+          return false
+        }
+        await selectSystemView(snapshot.section)
+        if (snapshot.section === 'trash') {
+          trashFolderId = snapshot.trashFolderId || ''
+          trashFolderStack = snapshot.trashFolderStack || []
+          trashSelectedIds = []
+          await refreshTrash()
+        }
+        return true
+      }
+      return false
+    } catch (e) {
+      return false
+    } finally {
+      restoringHistory = false
+    }
+  }
+
+  async function goBack() {
+    if (closeTopModalForBack()) return
+    while (navHistory.length > 0) {
+      const snapshot = navHistory[navHistory.length - 1]
+      navHistory = navHistory.slice(0, -1)
+      if (await restoreNavigation(snapshot)) return
+    }
+  }
+
+  function handleMouseNav(e) {
+    if (e.button !== 3 && e.button !== 4) return
+    if (isEditableTarget(e.target)) return
+    if (closeTopModalForBack() && e.button === 3) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.button === 3) goBack()
+  }
+
+  function setActiveTab(tabId) {
+    if (activeTab === tabId) return
+    rememberNavigation()
+    activeTab = tabId
+    if (tabId === 'files' && selectedNode && fileItems.length === 0 && !currentFolderId) loadFolder(selectedNode.id)
+  }
+
+  // ===== Lifecycle =====
+  onMount(async () => {
+    // Check startup status
+    try {
+      startupStatus = await wailsCall('GetStartupStatus')
+      startupChecked = true
+      if (startupStatus.status === 'first_run') {
+        showFirstRun = true
+        loading = false
+        return
+      }
+      if (startupStatus.status === 'recovery') {
+        showRecovery = true
+        loading = false
+        return
+      }
+    } catch (e) {
+      error = String(e)
+    }
+
+    // Vault is ready — load main UI
+    try {
+      version = await wailsCall('VerstakVersion') || 'verstak-gui/v2'
+      systemViews = await wailsCall('ListSystemViewsWithPlugins') || []
+      workspaceTree = await wailsCall('ListWorkspaceTree') || []
+      enabledTemplates = await wailsCall('ListEnabledTemplates') || []
+    } catch (e) {
+      error = String(e)
+      systemViews = [
+        { id: 'today', label: t('nav.today') },
+        { id: 'inbox', label: t('nav.inbox') },
+        { id: 'activity', label: t('nav.activity') },
+      ]
+      workspaceTree = []
+      enabledTemplates = []
+    }
+
+    // Listen for file drops from OS file manager.
+    if (window.runtime && window.runtime.EventsOn) {
+      window.runtime.EventsOn('files-dropped', onFilesDropped)
+      unlistenDrop = () => window.runtime.EventsOff('files-dropped')
+    }
+
+    window.addEventListener('keydown', handleKeydown)
+    window.addEventListener('paste', handleGlobalPaste)
+    window.addEventListener('dragenter', handleGlobalDragEnter)
+    window.addEventListener('dragover', handleGlobalDragOver)
+    window.addEventListener('dragleave', handleGlobalDragLeave)
+    window.addEventListener('dragend', resetCaptureDragState)
+    window.addEventListener('dragcancel', resetCaptureDragState)
+    window.addEventListener('drop', handleGlobalDrop)
+    window.addEventListener('mouseup', resetCaptureDragState)
+    window.addEventListener('mouseleave', resetCaptureDragState)
+    window.addEventListener('blur', resetCaptureDragState)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    window.addEventListener('auxclick', handleMouseNav)
+    window.addEventListener('mouseup', handleMouseNav)
+
+    loading = false
+    loadSyncStatus()
+    refreshTrashCount()
+  })
+
+  onDestroy(() => {
+    if (unlistenDrop) unlistenDrop()
+    window.removeEventListener('keydown', handleKeydown)
+    window.removeEventListener('paste', handleGlobalPaste)
+    window.removeEventListener('dragenter', handleGlobalDragEnter)
+    window.removeEventListener('dragover', handleGlobalDragOver)
+    window.removeEventListener('dragleave', handleGlobalDragLeave)
+    window.removeEventListener('dragend', resetCaptureDragState)
+    window.removeEventListener('dragcancel', resetCaptureDragState)
+    window.removeEventListener('drop', handleGlobalDrop)
+    window.removeEventListener('mouseup', resetCaptureDragState)
+    window.removeEventListener('mouseleave', resetCaptureDragState)
+    window.removeEventListener('blur', resetCaptureDragState)
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    window.removeEventListener('auxclick', handleMouseNav)
+    window.removeEventListener('mouseup', handleMouseNav)
+    clearCaptureDragTimer()
+  })
+
+  // ===== System view / Node selection =====
+  async function selectSystemView(id) {
+    rememberNavigation()
+    selectedSection = id
+    selectedNode = null
+    activeTab = 'overview'
+    notes = []
+    files = []
+    actions = []
+    worklog = []
+    localInboxNodes = []
+    links = []
+    suggestions = []
+    inboxNodes = []
+    trashInfo = null
+    resetTrashBrowser()
+    showCreateNode = false
+    error = ''
+    todayDashboard = null
+    inProgressItems = []
+    todayCaptures = []
+    activityFeed = []
+    activityOffset = 0
+    activityHasMore = true
+    journalRows = []
+    journalSummary = null
+    try {
+      if (id === 'today') {
+        todayDashboard = await wailsCall('ListTodayView') || { cases: [] }
+        suggestions = await wailsCall('GetSuggestions') || []
+        suggestionCount = suggestions.length
+        inProgressItems = await wailsCall('ListTodayInProgress') || []
+        todayCaptures = await wailsCall('ListTodayCaptures') || []
+      } else if (id === 'inbox') {
+        inboxNodes = await wailsCall('ListInboxNodes') || []
+      } else if (id === 'trash') {
+        await refreshTrash()
+      } else if (id === 'journal') {
+        await loadJournal()
+      } else if (id === 'activity') {
+        activityFeed = await wailsCall('ListActivityFeed', 50, 0) || []
+        activityOffset = activityFeed.length
+        activityHasMore = activityFeed.length === 50
+      }
+    } catch (e) {
+      error = String(e)
+      todayDashboard = { cases: [] }
+      inboxNodes = []
+      trashInfo = null
+      activityFeed = []
+    }
+  }
+
+  async function selectNode(node) {
+    rememberNavigation()
+    selectedNode = node
+    selectedSection = ''
+    activeTab = 'overview'
+    notes = []
+    files = []
+    actions = []
+    worklog = []
+    suggestions = []
+    fileItems = []
+    folderStack = []
+    currentFolderId = null
+    previewItem = null
+    previewContent = ''
+    selectedIds = []
+    dragIds = []
+    resetTrashBrowser()
+    noteEditor = null
+    showCreateNode = false
+    showCreateNote = false
+    error = ''
+    caseActivity = []
+    await loadTabData(node.id)
+  }
+
+  async function loadTabData(nodeID) {
+    try { notes = await wailsCall('ListNotes', nodeID) || [] } catch(e) {}
+    try { files = await wailsCall('ListFiles', nodeID) || [] } catch(e) {}
+    try { actions = await wailsCall('ListActions', nodeID) || [] } catch(e) {}
+    try { worklog = initWorklogEntries(await wailsCall('ListWorklog', nodeID)) } catch(e) {}
+    try { localInboxNodes = await wailsCall('ListInboxNodesForTarget', nodeID) || [] } catch(e) { localInboxNodes = [] }
+    try { links = await wailsCall('ListLinks', nodeID) || [] } catch(e) { links = [] }
+    try {
+      suggestions = await wailsCall('GetSuggestions') || []
+      suggestionCount = suggestions.length
+    } catch(e) { suggestions = []; suggestionCount = 0 }
+    try { caseActivity = await wailsCall('ListActivityByNode', nodeID, 50, 0) || [] } catch(e) {}
+  }
+
+  async function loadTree(nodeID) {
+    loadingFiles = true
+    try {
+      treeItems = await wailsCall('ListItems', nodeID) || []
+    } catch (e) {
+      treeItems = []
+    }
+    loadingFiles = false
+  }
+
+  // ===== Folder navigation =====
+
+  async function loadFolder(folderId) {
+    loadingFiles = true
+    try {
+      let items = await wailsCall('ListItems', folderId) || []
+      items.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
+        return (a.name || '').localeCompare(b.name || '')
+      })
+      fileItems = items
+    } catch (e) {
+      fileItems = []
+    }
+    loadingFiles = false
+  }
+
+  async function navigateToFolder(folderId) {
+    if (!selectedNode) return
+    rememberNavigation()
+    try {
+      const node = await wailsCall('GetNodeDetail', folderId)
+      if (node) {
+        folderStack = [...folderStack, { id: folderId, name: node.title }]
+      }
+    } catch (e) {
+      folderStack = [...folderStack, { id: folderId, name: '...' }]
+    }
+    currentFolderId = folderId
+    expanded = { ...expanded, [folderId]: true }
+    const children = await wailsCall('ListWorkspaceChildren', folderId) || []
+    setNodeChildren(workspaceTree, folderId, children)
+    workspaceTree = [...workspaceTree]
+    await loadFolder(folderId)
+  }
+
+  function navigateBack() {
+    rememberNavigation()
+    if (folderStack.length < 2) {
+      // Go back to root
+      folderStack = []
+      currentFolderId = null
+      loadFolder(selectedNode.id)
+    } else {
+      const target = folderStack[folderStack.length - 2]
+      folderStack = folderStack.slice(0, -1)
+      currentFolderId = target.id
+      loadFolder(target.id)
+    }
+  }
+
+  function navigateToBreadcrumb(index) {
+    const target = folderStack[index]
+    folderStack = folderStack.slice(0, index + 1)
+    currentFolderId = target.id
+    loadFolder(target.id)
+  }
+
+  // ===== File preview =====
+
+  async function openPreview(item) {
+    // For .md files: check if linked to a note, open note editor instead of preview modal
+    if (item && item.fileId && isMarkdownFile(item)) {
+      try {
+        const action = await wailsCall('CheckFileAction', item.fileId)
+        if (action.action === 'note') {
+          await openNote({ id: action.noteId, title: action.noteTitle })
+          return
+        }
+        if (action.action === 'external') {
+          await wailsCall('OpenFile', item.fileId)
+          return
+        }
+        // 'preview' → fall through to normal preview
+      } catch (e) {
+        console.warn('CheckFileAction failed, falling back to preview:', e)
+      }
+    }
+
+    previewItem = item
+    previewContent = ''
+    previewError = ''
+    previewLoading = true
+
+    try {
+      if (needsBase64Preview(item)) {
+        previewContent = await wailsCall('GetFileBase64', item.fileId) || ''
+      } else if (needsTextPreview(item)) {
+        previewContent = await wailsCall('ReadFileText', item.fileId) || ''
+      }
+    } catch (e) {
+      previewError = String(e)
+    }
+    previewLoading = false
+  }
+
+  function closePreview() {
+    previewItem = null
+    previewContent = ''
+    previewError = ''
+  }
+
+  // ===== File operations =====
+
+  async function createFile() {
+    const name = prompt(t('file.namePrompt'))
+    if (!name || !name.trim()) return
+    try {
+      const parentId = currentFolderId || selectedNode.id
+      await wailsCall('CreateEmptyFile', parentId, name.trim())
+      await loadFolder(parentId)
+      await refreshParentNode(parentId)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  async function duplicateItem(id) {
+    try {
+      await wailsCall('DuplicateNode', id)
+      const parentId = currentFolderId || selectedNode.id
+      await loadFolder(parentId)
+      await refreshParentNode(parentId)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  function renameItem(id) {
+    const item = fileItems.find(x => x.id === id)
+    if (item) openRename(item.id, item.name)
+  }
+
+  function cutItem(id) {
+    clipboard = { items: [id], mode: 'cut' }
+  }
+
+  function copyItem(id) {
+    clipboard = { items: [id], mode: 'copy' }
+  }
+
+  async function pasteItem() {
+    if (clipboard.items.length === 0) return
+    const targetId = currentFolderId || selectedNode.id
+    try {
+      if (clipboard.mode === 'copy') {
+        for (const id of clipboard.items) {
+          await wailsCall('DuplicateNode', id)
+        }
+      } else {
+        for (const id of clipboard.items) {
+          await wailsCall('MoveNode', id, targetId)
+        }
+      }
+      clipboard = { items: [], mode: 'copy' }
+      await loadFolder(targetId)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  // ===== Selection =====
+
+  function toggleSelection(id) {
+    if (selectedIds.includes(id)) {
+      selectedIds = selectedIds.filter(x => x !== id)
+    } else {
+      selectedIds = [...selectedIds, id]
+    }
+  }
+
+  function selectOne(id) {
+    selectedIds = [id]
+  }
+
+  function selectAll() {
+    selectedIds = fileItems.map(x => x.id)
+  }
+
+  function rangeSelect(id) {
+    if (fileItems.length === 0) return
+    const lastId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : fileItems[0].id
+    const lastIdx = fileItems.findIndex(x => x.id === lastId)
+    const curIdx = fileItems.findIndex(x => x.id === id)
+    if (lastIdx === -1 || curIdx === -1) return
+    const start = Math.min(lastIdx, curIdx)
+    const end = Math.max(lastIdx, curIdx)
+    const range = fileItems.slice(start, end + 1).map(x => x.id)
+    const set = new Set(selectedIds)
+    range.forEach(x => set.add(x))
+    selectedIds = [...set]
+  }
+
+  function clearSelection() {
+    selectedIds = []
+  }
+
+  function getTargetIds(ids) {
+    return ids.length > 0 ? ids : fileItems.map(x => x.id)
+  }
+
+  async function deleteSelected() {
+    const ids = getTargetIds(selectedIds)
+    const item = fileItems.find(x => x.id === ids[0])
+    let label
+    if (ids.length === 1 && item?.type === 'folder') {
+      label = t('delete.folder')
+    } else if (ids.length === 1) {
+      label = t('delete.file')
+    } else {
+      label = t('delete.files', { count: ids.length })
+    }
+    openConfirm({
+      title: t('delete.confirmTitle'),
+      message: t('delete.confirmMessage') + ' ' + label + '?',
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        for (const id of ids) {
+          try {
+            await wailsCall('DeleteFileOrFolder', id)
+          } catch (e) { error = String(e) }
+        }
+        selectedIds = []
+        const reloadId = currentFolderId || selectedNode.id
+        await loadFolder(reloadId)
+      }
+    })
+  }
+
+  function cutSelected() {
+    const ids = getTargetIds(selectedIds)
+    clipboard = { items: ids, mode: 'cut' }
+    selectedIds = []
+  }
+
+  function copySelected() {
+    const ids = getTargetIds(selectedIds)
+    clipboard = { items: ids, mode: 'copy' }
+    selectedIds = []
+  }
+
+  // ===== Drag-and-drop =====
+
+  function onDragStart(e, id) {
+    e.stopPropagation()
+    const ids = selectedIds.includes(id) ? selectedIds : [id]
+    dragIds = ids
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', ids.join(','))
+  }
+
+  function onDragOver(e, folderId) {
+    const item = fileItems.find(x => x.id === folderId)
+    if (item && item.type === 'folder') {
+      e.preventDefault()
+      e.stopPropagation()
+      e.dataTransfer.dropEffect = 'move'
+    }
+  }
+
+  async function onDrop(e, folderId) {
+    e.preventDefault()
+    e.stopPropagation()
+    if (dragIds.length === 0) return
+    for (const id of dragIds) {
+      try {
+        await wailsCall('MoveNode', id, folderId)
+      } catch (e) { error = String(e) }
+    }
+    dragIds = []
+    selectedIds = []
+    await loadFolder(currentFolderId || selectedNode.id)
+  }
+
+  // ===== Keyboard =====
+
+  function isEditableTarget(target) {
+    if (!target || !(target instanceof Element)) return false
+    return !!target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]')
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Escape' && captureDropActive) {
+      e.preventDefault()
+      resetCaptureDragState()
+      return
+    }
+    if (isEditableTarget(e.target)) return
+
+    if (e.key === 'Backspace' || (e.altKey && e.key === 'ArrowLeft')) {
+      e.preventDefault()
+      goBack()
+      return
+    }
+
+    if (activeTab !== 'files') return
+
+    if (e.ctrlKey || e.metaKey) {
+      if (e.key === 'c' || e.key === 'C') { e.preventDefault(); copySelected() }
+      else if (e.key === 'x' || e.key === 'X') { e.preventDefault(); cutSelected() }
+      else if (e.key === 'v' || e.key === 'V') { e.preventDefault(); pasteItem() }
+      else if (e.key === 'a' || e.key === 'A') { e.preventDefault(); selectAll() }
+      else if (e.key === 'o' || e.key === 'O') { e.preventDefault(); openSelectedExternal() }
+      else if (e.key === 'Enter') { e.preventDefault(); openSelected() }
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      openSelected()
+    } else if (e.key === 'Delete') {
+      if (previewItem) { e.preventDefault(); closePreview(); return }
+      if (selectedIds.length > 0) { e.preventDefault(); deleteSelected(); return }
+    } else if (e.key === 'Escape') {
+      if (previewItem) { closePreview(); return }
+      if (selectedIds.length > 0) { clearSelection(); return }
+    } else if (e.key === 'F2') {
+      e.preventDefault()
+      openRenameForSelection()
+    }
+  }
+
+  function openSelected() {
+    if (selectedIds.length === 1) {
+      const item = fileItems.find(x => x.id === selectedIds[0])
+      if (item) {
+        if (item.type === 'folder') {
+          navigateToFolder(item.id)
+        } else {
+          openPreview(item)
+        }
+      }
+    }
+  }
+
+  function openSelectedExternal() {
+    if (selectedIds.length === 1) {
+      const item = fileItems.find(x => x.id === selectedIds[0])
+      if (item && item.fileId) {
+        wailsCall('OpenFile', item.fileId)
+      }
+    }
+  }
+
+  // ===== Rename modal =====
+
+  function openRename(id, currentName) {
+    renameId = id
+    renameValue = currentName
+    renameError = ''
+    showRename = true
+  }
+
+  function openRenameForSelection() {
+    if (selectedIds.length === 1) {
+      const item = fileItems.find(x => x.id === selectedIds[0])
+      if (item) {
+        openRename(item.id, item.name)
+      }
+    }
+  }
+
+  async function submitRename() {
+    const name = renameValue.trim()
+    if (!name) { renameError = t('rename.emptyError'); return }
+    try {
+      await wailsCall('ValidateName', name)
+    } catch (e) {
+      renameError = t('rename.invalidError')
+      return
+    }
+    showRename = false
+    const id = renameId
+    renameId = ''
+    try {
+      await wailsCall('RenameNode', id, name)
+      if (selectedNode && selectedNode.id === id) {
+        selectedNode = { ...selectedNode, title: name }
+      }
+      await reloadTreePreservingExpanded()
+      if (currentFolderId) {
+        await loadFolder(currentFolderId)
+      }
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  function cancelRename() {
+    showRename = false
+    renameId = ''
+    renameValue = ''
+    renameError = ''
+  }
+
+  function onRenameKeydown(e) {
+    if (e.key === 'Enter') submitRename()
+    else renameError = ''
+  }
+
+  // ===== Confirm modal =====
+
+  function openConfirm(opts) {
+    confirmTitle = opts.title || t('common.confirm')
+    confirmMessage = opts.message || ''
+    confirmDanger = opts.danger !== undefined ? opts.danger : true
+    confirmText = opts.confirmText || t('common.delete')
+    confirmAction = opts.onConfirm || null
+    cancelAction = opts.onCancel || null
+    showConfirm = true
+  }
+
+  function closeConfirm() {
+    showConfirm = false
+    confirmAction = null
+    cancelAction = null
+  }
+
+  function handleConfirm() {
+    if (confirmAction) confirmAction()
+    closeConfirm()
+  }
+
+  function handleCancel() {
+    if (cancelAction) cancelAction()
+    closeConfirm()
+  }
+
+  // ===== Template-based node creation =====
+  function openCreateInNode(tpl) {
+    createInNode = contextMenu.node
+    createWithTemplate = tpl
+    newNodeTitle = ''
+    showCreateNode = true
+    closeContextMenu()
+  }
+
+  function openCreateRoot() {
+    createInNode = null
+    createWithTemplate = undefined
+    newNodeTitle = ''
+    showCreateNode = true
+  }
+
+  function cancelCreateNode() { showCreateNode = false; newNodeTitle = ''; createInNode = null; createWithTemplate = undefined }
+
+  async function submitCreateNode() {
+    if (!newNodeTitle.trim() || createWithTemplate === undefined) return
+    try {
+      const parentID = createInNode ? createInNode.id : ''
+      const templateID = createWithTemplate ? createWithTemplate.id : ''
+      const created = await wailsCall('CreateNodeFromTemplate', parentID, newNodeTitle.trim(), templateID)
+      showCreateNode = false
+      newNodeTitle = ''
+      const createdId = created ? created.id : null
+      createInNode = null
+      createWithTemplate = undefined
+      if (parentID) {
+        expanded = { ...expanded, [parentID]: true }
+        const children = await wailsCall('ListWorkspaceChildren', parentID) || []
+        setNodeChildren(workspaceTree, parentID, children)
+        workspaceTree = [...workspaceTree]
+      } else {
+        workspaceTree = await wailsCall('ListWorkspaceTree') || workspaceTree
+      }
+      if (createdId) {
+        const node = await wailsCall('GetNodeDetail', createdId)
+        if (node) {
+          selectedSection = ''
+          selectNode(node)
+        }
+      }
+    } catch (e) { error = String(e) }
+  }
+
+  // ===== Context menu =====
+  function handleContextMenu(e, node) {
+    contextMenu = { visible: true, x: e.clientX, y: e.clientY, node }
+  }
+
+  function closeContextMenu() {
+    contextMenu = { visible: false, x: 0, y: 0, node: null }
+  }
+
+  // ===== Tree expand/collapse =====
+  async function toggleExpand(nodeId) {
+    const willExpand = !expanded[nodeId]
+    expanded = { ...expanded, [nodeId]: willExpand }
+    if (!willExpand) return
+    const children = await wailsCall('ListWorkspaceChildren', nodeId) || []
+    setNodeChildren(workspaceTree, nodeId, children)
+    workspaceTree = [...workspaceTree]
+  }
+
+  function setNodeChildren(tree, nodeId, children) {
+    for (const node of tree) {
+      if (node.id === nodeId) {
+        node.children = children
+        node.has_children = children.length > 0
+        return true
+      }
+      if (node.children && setNodeChildren(node.children, nodeId, children)) {
+        return true
+      }
+    }
+    return false
+  }
+
+  // ===== Drag-and-drop =====
+  async function handleNodeDrop(draggedId, targetId) {
+    if (!draggedId || !targetId || draggedId === targetId) return
+    try {
+      const moved = await wailsCall('MoveNode', draggedId, targetId)
+      await reloadTreePreservingExpanded()
+      const refreshed = await wailsCall('GetNodeDetail', draggedId)
+      if (refreshed) {
+        selectedSection = ''
+        selectNode(refreshed)
+      }
+    } catch (e) { error = String(e) }
+  }
+
+  async function handleDropRoot(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      const draggedId = e.dataTransfer.getData('text/plain')
+      if (!draggedId) return
+      const detail = await wailsCall('GetNodeDetail', draggedId)
+      if (!detail || !detail.parent_id) return
+      await wailsCall('MoveNode', draggedId, '')
+      await reloadTreePreservingExpanded()
+      const refreshed = await wailsCall('GetNodeDetail', draggedId)
+      if (refreshed) {
+        selectedSection = ''
+        selectNode(refreshed)
+      }
+    } catch (e) { error = String(e) }
+  }
+
+  function handleDragOverRoot(e) {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    dropRootValid = true
+  }
+
+  function handleDragLeaveRoot(e) {
+    dropRootValid = false
+  }
+
+  // ===== Node operations from context menu =====
+  function openRenameForNode(node) {
+    openRename(node.id, node.title)
+    closeContextMenu()
+  }
+
+  function deleteWorkspaceNode(node) {
+    closeContextMenu()
+    openConfirm({
+      title: t('delete.confirmTitle'),
+      message: t('delete.confirmMessage') + ' ' + node.title + '?',
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('DeleteNode', node.id)
+          await reloadTreePreservingExpanded()
+          await refreshTrashCount()
+          if (selectedNode && selectedNode.id === node.id) {
+            selectedNode = null
+          }
+        } catch (e) { error = String(e) }
+      }
+    })
+  }
+
+  async function openNodeFolder(nodeOrId) {
+    closeContextMenu()
+    const id = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
+    try {
+      await wailsCall('OpenFolder', id)
+    } catch (e) { error = String(e) }
+  }
+
+  function inboxArtifactKind(item) {
+    return item?.sourceKind || item?.captureKind || item?.type || ''
+  }
+
+  function canShowInboxArtifactInFolder(item) {
+    const kind = inboxArtifactKind(item)
+    return kind !== 'url' && item?.type !== 'link'
+  }
+
+  function fileRecordToPreviewItem(item, record) {
+    return {
+      id: item.id,
+      nodeId: item.id,
+      fileId: record.id || record.fileId,
+      name: record.name || item.title,
+      type: 'file',
+      size: record.size || 0,
+      mime: record.mime || ''
+    }
+  }
+
+  async function openInboxArtifact(item) {
+    const kind = inboxArtifactKind(item)
+    try {
+      if (kind === 'url' || item.type === 'link') {
+        if (!item.url) throw new Error('url required')
+        await wailsCall('OpenURL', item.url)
+        return
+      }
+
+      if (kind === 'text' || item.type === 'note') {
+        const content = await wailsCall('ReadNote', item.id)
+        noteEditor = { id: item.id, title: item.title, content: content || '', dirty: false }
+        return
+      }
+
+      if (kind === 'folder' || item.type === 'folder') {
+        rememberNavigation()
+        selectedSection = ''
+        selectedNode = item
+        activeTab = 'files'
+        folderStack = []
+        currentFolderId = null
+        selectedIds = []
+        previewItem = null
+        await loadTabData(item.id)
+        await loadFolder(item.id)
+        return
+      }
+
+      if (kind === 'file' || kind === 'image' || item.type === 'file') {
+        const records = await wailsCall('ListFiles', item.id) || []
+        const record = records[0]
+        if (!record) throw new Error('file record not found')
+        const preview = fileRecordToPreviewItem(item, record)
+        if (canPreviewFile(preview)) {
+          await openPreview(preview)
+        } else {
+          await wailsCall('OpenFile', preview.fileId)
+        }
+        return
+      }
+
+      await openNodeById(item.id)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  async function moveNodeToRoot(node) {
+    closeContextMenu()
+    try {
+      await wailsCall('MoveNode', node.id, '')
+      await reloadTreePreservingExpanded()
+      const refreshed = await wailsCall('GetNodeDetail', node.id)
+      if (refreshed) {
+        selectedSection = ''
+        selectNode(refreshed)
+      }
+    } catch (e) { error = String(e) }
+  }
+
+  async function reloadTreePreservingExpanded() {
+    const expandedIds = Object.keys(expanded).filter(id => expanded[id])
+
+    // Build new tree from scratch: fresh roots + fresh children for each expanded node
+    const newTree = await wailsCall('ListWorkspaceTree') || []
+    for (const nodeId of expandedIds) {
+      const children = await wailsCall('ListWorkspaceChildren', nodeId) || []
+      const newChildren = children.map(c => ({ ...c })) // plain copies
+      addChildrenToTree(newTree, nodeId, newChildren)
+    }
+    workspaceTree = newTree
+  }
+
+  function addChildrenToTree(tree, nodeId, children) {
+    for (const node of tree) {
+      if (node.id === nodeId) {
+        node.children = children
+        node.has_children = children.length > 0
+        return true
+      }
+      if (node.children) {
+        const found = addChildrenToTree(node.children, nodeId, children)
+        if (found) return true
+      }
+    }
+    return false
+  }
+
+  async function refreshParentNode(nodeId) {
+    const children = await wailsCall('ListWorkspaceChildren', nodeId) || []
+    setNodeChildren(workspaceTree, nodeId, children)
+    workspaceTree = [...workspaceTree]
+  }
+
+  // ===== Notes =====
+  function openCreateNote() { showCreateNote = true; newNoteTitle = '' }
+  function cancelCreateNote() { showCreateNote = false; newNoteTitle = '' }
+  async function submitCreateNote() {
+    if (!newNoteTitle.trim() || !selectedNode) return
+    try {
+      const note = await wailsCall('CreateNote', selectedNode.id, newNoteTitle.trim())
+      notes = [...notes, (note && note.id) ? note : { id: Date.now().toString(), title: newNoteTitle.trim(), createdAt: new Date().toISOString() }]
+      showCreateNote = false
+      newNoteTitle = ''
+    } catch (e) {
+      // Fallback: create note locally
+      const newNote = { id: Date.now().toString(), title: newNoteTitle.trim(), createdAt: new Date().toISOString() }
+      notes = [...notes, newNote]
+      showCreateNote = false
+      newNoteTitle = ''
+    }
+  }
+
+  async function openNote(note) {
+    if (noteEditor && noteEditor.dirty) {
+      openConfirm({
+        title: t('note.unsavedTitle'),
+        message: t('note.unsavedMessage'),
+        confirmText: t('note.unsavedClose'),
+        danger: false,
+        onConfirm: async () => {
+          await doOpenNote(note)
+        }
+      })
+      return
+    }
+    await doOpenNote(note)
+  }
+
+  async function doOpenNote(note) {
+    try {
+      const content = await wailsCall('ReadNote', note.id)
+      noteEditor = { id: note.id, title: note.title, content: content || '', dirty: false }
+    } catch (e) {
+      noteEditor = { id: note.id, title: note.title, content: '# ' + note.title + '\n\n', dirty: false }
+    }
+  }
+
+  function deleteNote(note) {
+    openConfirm({
+      title: t('common.delete'),
+      message: t('note.deleteConfirm', { title: note.title }) || `Удалить заметку «${note.title}»?`,
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('DeleteNote', note.id)
+          notes = notes.filter(n => n.id !== note.id)
+          if (noteEditor && noteEditor.id === note.id) {
+            noteEditor = null
+          }
+          // Refresh trash count
+          try { await refreshTrashCount() } catch {}
+        } catch (e) {
+          error = String(e)
+        }
+      }
+    })
+  }
+
+  function closeNoteEditor() {
+    if (noteEditor && noteEditor.dirty) {
+      openConfirm({
+        title: t('note.unsavedTitle'),
+        message: t('note.unsavedMessage'),
+        confirmText: t('note.unsavedClose'),
+        danger: false,
+        onConfirm: () => { noteEditor = null; noteViewMode = 'edit' }
+      })
+      return
+    }
+    noteEditor = null
+    noteViewMode = 'edit'
+  }
+
+  function updateNoteContent(e) {
+    if (noteEditor) { noteEditor.content = e.target.value; noteEditor.dirty = true }
+  }
+
+  async function saveCurrentNote() {
+    if (!noteEditor) return
+    try {
+      await wailsCall('SaveNote', noteEditor.id, noteEditor.content)
+      noteEditor.dirty = false
+    } catch (e) {
+      // Saved locally only
+      noteEditor.dirty = false
+    }
+  }
+
+  // ===== Link modal =====
+  function openLinkModal() {
+    linkModalLabel = ''
+    linkModalUrl = ''
+    showLinkModal = true
+  }
+
+  function submitLinkModal() {
+    if (!noteEditor) { showLinkModal = false; return }
+    const label = linkModalLabel.trim() || linkModalUrl.trim() || 'link'
+    const url = linkModalUrl.trim() || '#'
+    const md = `[${label}](${url})`
+    noteEditor.content = noteEditor.content + (noteEditor.content.endsWith('\n') ? '' : '\n') + md + '\n'
+    noteEditor.dirty = true
+    showLinkModal = false
+  }
+
+  // ===== Internal link picker =====
+  function openInternalLinkPicker() {
+    showInternalLinkPicker = true;
+  }
+
+  function handleInternalLinkPickerInsert(e) {
+    const md = e.detail.markdown;
+    if (noteEditorPanel && typeof noteEditorPanel.insertText === 'function') {
+      noteEditorPanel.insertText(md);
+    }
+    showInternalLinkPicker = false;
+  }
+
+  function handleInternalLinkPickerClose() {
+    showInternalLinkPicker = false;
+  }
+
+  // ===== Note rename =====
+  function startRenameNote(noteId, currentTitle) {
+    renamingNoteId = noteId
+    renamingNoteTitle = currentTitle
+    renamingNoteOriginalTitle = currentTitle
+  }
+
+  function cancelRenameNote() {
+    renamingNoteId = null
+    renamingNoteTitle = ''
+    renamingNoteOriginalTitle = ''
+  }
+
+  async function submitRenameNote() {
+    if (!renamingNoteId || !renamingNoteTitle.trim()) {
+      cancelRenameNote()
+      return
+    }
+    if (renamingNoteTitle.trim() === renamingNoteOriginalTitle) {
+      cancelRenameNote()
+      return
+    }
+    try {
+      await wailsCall('RenameNote', renamingNoteId, renamingNoteTitle.trim())
+      // Update note list
+      notes = notes.map(n => n.id === renamingNoteId ? { ...n, title: renamingNoteTitle.trim() } : n)
+      // Update editor header if this note is open
+      if (noteEditor && noteEditor.id === renamingNoteId) {
+        noteEditor.title = renamingNoteTitle.trim()
+      }
+      cancelRenameNote()
+    } catch (e) {
+      // Show error
+      error = String(e)
+      cancelRenameNote()
+    }
+  }
+
+  // ===== Internal link modal (ObjectPicker) — legacy, kept for compat =====
+  // Replaced by simple openInternalLinkModal above.
+
+  // ===== Verstak link handler =====
+  async function handleVerstakLink(e) {
+    const { type, id } = e.detail
+    if (!id) return
+
+    switch (type) {
+      case 'case':
+        await navigateToCase(id)
+        break
+      case 'note':
+        await navigateToNote(id)
+        break
+      case 'file':
+        await navigateToFile(id)
+        break
+      case 'secret':
+        showVerstakToastMessage(t('note.internal.secretNotImplemented'))
+        break
+      default:
+        showVerstakToastMessage(`verstak://${type}/${id}`)
+    }
+  }
+
+  async function navigateToCase(id) {
+    try {
+      const node = await wailsCall('GetNodeDetail', id)
+      if (!node) {
+        showVerstakToastMessage(t('note.internal.caseNotFound'))
+        return
+      }
+      await selectNode(node)
+    } catch (e) {
+      showVerstakToastMessage(t('note.internal.caseNotFound'))
+    }
+  }
+
+  async function navigateToNote(id) {
+    try {
+      const node = await wailsCall('GetNodeDetail', id)
+      if (!node) {
+        showVerstakToastMessage(t('note.internal.noteNotFound'))
+        return
+      }
+      const parentId = node.parent_id || node.parentId || ''
+      if (parentId) {
+        const parent = await wailsCall('GetNodeDetail', parentId)
+        if (parent) {
+          await selectNode(parent)
+        }
+      }
+      setActiveTab('notes')
+      // Find the note in the loaded notes list and open it
+      const note = notes.find(n => n.id === id)
+      if (note) {
+        await openNote(note)
+      } else {
+        // Note might not be loaded yet, try to open by id directly
+        await openNote({ id: node.id, title: node.title })
+      }
+    } catch (e) {
+      showVerstakToastMessage(t('note.internal.noteNotFound'))
+    }
+  }
+
+  async function navigateToFile(id) {
+    try {
+      const node = await wailsCall('GetNodeDetail', id)
+      if (!node) {
+        showVerstakToastMessage(t('note.internal.fileNotFound'))
+        return
+      }
+      const parentId = node.parent_id || node.parentId || ''
+      if (parentId) {
+        const parent = await wailsCall('GetNodeDetail', parentId)
+        if (parent) {
+          await selectNode(parent)
+        }
+        setActiveTab('files')
+        await loadFolder(parentId)
+        // Find the file in the loaded fileItems and open preview
+        const fileItem = fileItems.find(f => f.id === id)
+        if (fileItem) {
+          await openPreview(fileItem)
+        } else {
+          showVerstakToastMessage(t('note.internal.fileFound', { title: node.title }))
+        }
+      } else {
+        showVerstakToastMessage(t('note.internal.fileFound', { title: node.title }))
+      }
+    } catch (e) {
+      showVerstakToastMessage(t('note.internal.fileNotFound'))
+    }
+  }
+
+  function showVerstakToastMessage(msg) {
+    verstakToastMessage = msg
+    showVerstakToast = true
+    setTimeout(() => { showVerstakToast = false }, 3000)
+  }
+
+  // ===== Note editor panel events =====
+  function handleNoteContentChange(e) {
+    if (noteEditor) {
+      noteEditor.content = e.detail.content
+      noteEditor.dirty = true
+    }
+  }
+
+  function handleNoteModeChange(e) {
+    noteViewMode = e.detail.mode
+  }
+
+  function handleNoteInsertLink() {
+    openLinkModal()
+  }
+
+  function handleNoteInsertInternalLink() {
+    openInternalLinkPicker()
+  }
+
+  // ===== Verstak link handler =====
+  function openWorklogModal(entry = null) {
+    editingWorklogEntry = entry
+    acceptingSuggestion = null
+    wlModalSummary = entry ? entry.summary : ''
+    wlModalMinutes = entry ? String(entry.minutes || '') : ''
+    wlModalDate = entry ? (entry.date || '') : ''
+    wlModalDetails = entry ? (entry.details || '') : ''
+    wlModalBillable = entry ? !!entry.billable : false
+    wlModalApprox = entry ? !!entry.approximate : false
+    showWorklogModal = true
+  }
+
+  function closeWorklogModal() {
+    showWorklogModal = false
+    editingWorklogEntry = null
+    acceptingSuggestion = null
+  }
+
+  async function refreshWorklogViews(nodeID = '') {
+    const targetNodeID = nodeID || (selectedNode ? selectedNode.id : '')
+    if (selectedNode && selectedNode.id === targetNodeID) {
+      worklog = initWorklogEntries(await wailsCall('ListWorklog', selectedNode.id)) || worklog
+    }
+    if (selectedSection === 'journal') {
+      await loadJournal()
+    }
+  }
+
+  async function submitWorklogModal() {
+    const mins = parseInt(wlModalMinutes, 10)
+    if (!wlModalSummary.trim() || isNaN(mins) || mins <= 0) return
+    if (!acceptingSuggestion && !editingWorklogEntry && !selectedNode) return
+    try {
+      if (acceptingSuggestion) {
+        const eventIdsJSON = JSON.stringify(extractEventIds(acceptingSuggestion))
+        await wailsCall('AcceptSuggestionFull', acceptingSuggestion.nodeId, wlModalSummary.trim(), wlModalDetails, wlModalDate, mins, wlModalApprox, wlModalBillable, eventIdsJSON)
+        await refreshAfterSuggestion()
+      } else if (editingWorklogEntry) {
+        await wailsCall('UpdateWorklogEntry', editingWorklogEntry.id, wlModalSummary.trim(), wlModalDetails, wlModalDate, mins, wlModalApprox, wlModalBillable)
+        await refreshWorklogViews(editingWorklogEntry.nodeId)
+      } else {
+        await wailsCall('CreateWorklogFull', selectedNode.id, wlModalSummary.trim(), wlModalDetails, wlModalDate, mins, wlModalApprox, wlModalBillable)
+        await refreshWorklogViews(selectedNode.id)
+      }
+    } catch (e) {
+      error = String(e)
+      return
+    }
+    showWorklogModal = false
+    editingWorklogEntry = null
+    acceptingSuggestion = null
+  }
+
+  function deleteWorklogEntry(entry) {
+    openConfirm({
+      title: t('worklog.deleteEntry'),
+      message: t('worklog.deleteConfirm'),
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('DeleteWorklogEntry', entry.id)
+          await refreshWorklogViews(entry.nodeId)
+        } catch (e) {
+          error = String(e)
+        }
+      }
+    })
+  }
+
+  async function refreshAfterSuggestion() {
+    suggestions = await wailsCall('GetSuggestions') || []
+    suggestionCount = suggestions.length
+    if (selectedNode) {
+      worklog = initWorklogEntries(await wailsCall('ListWorklog', selectedNode.id))
+    }
+    if (selectedSection === 'journal') {
+      await loadJournal()
+    }
+  }
+
+  async function refreshTrash() {
+    trashInfo = await wailsCall('ListTrash') || { nodes: [], entries: [], trashPath: '', count: 0 }
+    trashCount = trashInfo.count || 0
+    const nodes = trashInfo.nodes || []
+    trashSelectedIds = trashSelectedIds.filter(id => nodes.some(node => node.id === id))
+    if (trashFolderId && !nodes.some(node => node.id === trashFolderId)) {
+      resetTrashBrowser()
+    } else if (trashFolderStack.length > 0) {
+      trashFolderStack = trashFolderStack.filter(item => nodes.some(node => node.id === item.id))
+      trashFolderId = trashFolderStack.length > 0 ? trashFolderStack[trashFolderStack.length - 1].id : ''
+    }
+  }
+
+  async function refreshTrashCount() {
+    try { trashCount = await wailsCall('TrashCount') || 0 } catch (e) { trashCount = 0 }
+  }
+
+  function computeVisibleTrashNodes(nodes, folderId) {
+    if (!folderId) return nodes.filter(node => !trashParentId(node) || !nodes.some(other => other.id === trashParentId(node)))
+    return nodes.filter(node => trashParentId(node) === folderId)
+  }
+
+  function trashParentId(node) {
+    return node?.parentId || node?.parentID || node?.parent_id || ''
+  }
+
+  function currentTrashFolder() {
+    if (!trashFolderId) return null
+    return (trashInfo?.nodes || []).find(node => node.id === trashFolderId) || trashFolderStack[trashFolderStack.length - 1] || null
+  }
+
+  function openTrashFolderNode(node) {
+    rememberNavigation()
+    trashFolderId = node.id
+    const existingIndex = trashFolderStack.findIndex(item => item.id === node.id)
+    if (existingIndex >= 0) {
+      trashFolderStack = trashFolderStack.slice(0, existingIndex + 1)
+    } else {
+      trashFolderStack = [...trashFolderStack, { id: node.id, title: node.title }]
+    }
+    trashSelectedIds = []
+  }
+
+  function trashBack() {
+    if (trashFolderStack.length === 0) return
+    rememberNavigation()
+    const nextStack = trashFolderStack.slice(0, -1)
+    trashFolderStack = nextStack
+    trashFolderId = nextStack.length > 0 ? nextStack[nextStack.length - 1].id : ''
+    trashSelectedIds = []
+  }
+
+  async function openTrashFilePreview(node) {
+    previewItem = { name: node.title, type: 'file', mime: 'text/plain', size: 0, fileId: node.id }
+    previewContent = ''
+    previewError = ''
+    previewLoading = true
+    try {
+      if (node.trashFsPath) {
+        previewContent = await wailsCall('ReadTrashFile', node.trashFsPath) || ''
+      } else {
+        previewContent = await wailsCall('ReadTrashFileContent', node.id) || ''
+      }
+      const ext = (node.title || '').split('.').pop().toLowerCase()
+      if (['png','jpg','jpeg','gif','webp','bmp','svg'].includes(ext)) {
+        previewContent = 'data:image/' + (ext === 'svg' ? 'svg+xml' : ext) + ';base64,' + btoa(previewContent)
+      }
+    } catch (e) { previewError = String(e) }
+    previewLoading = false
+  }
+
+  function toggleTrashSelection(id) {
+    trashSelectedIds = trashSelectedIds.includes(id)
+      ? trashSelectedIds.filter(existing => existing !== id)
+      : [...trashSelectedIds, id]
+  }
+
+  function trashSelectionOr(id) {
+    return trashSelectedIds.length > 0 ? trashSelectedIds : [id]
+  }
+
+  async function restoreTrash(ids) {
+    try {
+      await wailsCall('RestoreTrashNodesJSON', JSON.stringify(ids))
+      await reloadTreePreservingExpanded()
+      await refreshTrash()
+    } catch (e) { error = String(e) }
+  }
+
+  async function purgeTrash(ids) {
+    openConfirm({
+      title: t('delete.confirmTitle'),
+      message: t('delete.confirmMessage') + ' ' + ids.length + '?',
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('PurgeTrashNodesJSON', JSON.stringify(ids))
+          await refreshTrash()
+        } catch (e) { error = String(e) }
+      }
+    })
+  }
+
+  async function emptyTrash() {
+    openConfirm({
+      title: t('delete.confirmTitle'),
+      message: t('trash.empty') + '?',
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('EmptyTrash')
+          await refreshTrash()
+        } catch (e) { error = String(e) }
+      }
+    })
+  }
+
+  function openSuggestionWorklogModal(s) {
+    acceptingSuggestion = s
+    editingWorklogEntry = null
+    wlModalSummary = s.summary || ''
+    wlModalMinutes = String(s.suggestedMin || '')
+    wlModalDate = ''
+    wlModalDetails = ''
+    wlModalBillable = false
+    wlModalApprox = true
+    showWorklogModal = true
+  }
+
+  function extractEventIds(s) {
+    if (s.eventIds && s.eventIds.length) return s.eventIds
+    if (s.events && s.events.length) return s.events.map(ev => ev.id).filter(Boolean)
+    return []
+  }
+
+  async function deleteSuggestion(s) {
+    try {
+      await wailsCall('DismissSuggestion', s.nodeId, JSON.stringify(extractEventIds(s)))
+      await refreshAfterSuggestion()
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  // Browser event handlers
+  async function loadBrowserEvents() {
+    browserLoading = true
+    try {
+      const events = await wailsCall('ListBrowserEvents', 'pending', 50, 0)
+      browserEvents = events || []
+    } catch (e) {
+      console.warn('[browser] load error:', e)
+    } finally {
+      browserLoading = false
+    }
+  }
+
+  async function acceptBrowserEvent(ev) {
+    // Accept: mark as accepted (worklog linking comes later via suggestions)
+    await wailsCall('AcceptBrowserEvent', ev.id, '')
+    browserEvents = browserEvents.filter(e => e.id !== ev.id)
+  }
+
+  async function dismissBrowserEvent(ev) {
+    await wailsCall('DismissBrowserEvent', ev.id)
+    browserEvents = browserEvents.filter(e => e.id !== ev.id)
+  }
+
+  async function attachBrowserEvent(ev) {
+    // Attach to currently selected node, if any
+    if (selectedNode && selectedNode.id) {
+      await wailsCall('AttachBrowserEventToNode', ev.id, selectedNode.id)
+      browserEvents = browserEvents.filter(e => e.id !== ev.id)
+    } else {
+      // No node selected — just dismiss for now
+      await wailsCall('DismissBrowserEvent', ev.id)
+      browserEvents = browserEvents.filter(e => e.id !== ev.id)
+    }
+  }
+
+  function writeDebugLog(msg) {
+    try { wailsCall('WriteDebugLog', msg) } catch(e) {}
+  }
+
+  async function acceptTodaySuggestion(s) {
+    try {
+      const eventIds = extractEventIds(s)
+      const eventIdsJSON = JSON.stringify(eventIds)
+      writeDebugLog('acceptTodaySuggestion: nodeId=' + s.nodeId + ' eventIds=' + eventIdsJSON + ' events=' + JSON.stringify((s.events || []).map(ev => ({ id: ev.id, type: ev.eventType, title: ev.title }))))
+      await wailsCall('AcceptSuggestionWith', s.nodeId, s.summary, s.suggestedMin, '', eventIdsJSON)
+      await refreshAfterSuggestion()
+    } catch (e) { writeDebugLog('acceptTodaySuggestion error: ' + e) }
+  }
+
+  async function acceptJournalSuggestion(s) {
+    try {
+      const eventIds = extractEventIds(s)
+      const eventIdsJSON = JSON.stringify(eventIds)
+      writeDebugLog('acceptJournalSuggestion: nodeId=' + s.nodeId + ' eventIds=' + eventIdsJSON + ' events=' + JSON.stringify((s.events || []).map(ev => ({ id: ev.id, type: ev.eventType, title: ev.title }))))
+      await wailsCall('AcceptSuggestionWith', s.nodeId, s.summary, s.suggestedMin, '', eventIdsJSON)
+      await refreshAfterSuggestion()
+    } catch (e) { writeDebugLog('acceptJournalSuggestion error: ' + e) }
+  }
+
+  // ===== Journal =====
+  async function loadJournal() {
+    try {
+      const [rows, summary, sugs] = await Promise.all([
+        wailsCall('ListWorklogReport', journalDateFrom, journalDateTo, journalNodeID, journalIncludeChildren, journalBillableFilter, journalApproxFilter),
+        wailsCall('WorklogReportSummary', journalDateFrom, journalDateTo, journalNodeID, journalIncludeChildren, journalBillableFilter, journalApproxFilter),
+        wailsCall('GetSuggestions'),
+      ])
+      journalRows = (rows || []).map(r => { if (r._expanded === undefined) r._expanded = false; return r })
+      journalSummary = summary || null
+      suggestions = sugs || []
+      suggestionCount = suggestions.length
+      // Resolve node title/path if filtered by node.
+      if (journalNodeID && !journalFilteredNodeTitle) {
+        if (rows && rows.length > 0 && rows[0].nodePath) {
+          journalFilteredNodeTitle = rows[0].nodePath
+        } else {
+          try { journalFilteredNodeTitle = await wailsCall('GetNodeTitle', journalNodeID) } catch(e) { journalFilteredNodeTitle = '' }
+        }
+      }
+    } catch (e) {
+      journalRows = []
+      journalSummary = null
+      suggestions = []
+      suggestionCount = 0
+    }
+  }
+
+  async function saveJournalReport(format) {
+    try {
+      const msg = await wailsCall('SaveWorklogReport', format,
+        journalDateFrom, journalDateTo, journalNodeID,
+        journalIncludeChildren, journalBillableFilter, journalApproxFilter)
+      journalStatusMsg = msg
+      setTimeout(() => journalStatusMsg = '', 4000)
+    } catch (e) {
+      if (String(e).includes('отменено')) return
+      journalStatusMsg = 'Ошибка: ' + String(e)
+      setTimeout(() => journalStatusMsg = '', 6000)
+    }
+  }
+
+  let journalSearchTimer
+
+  async function toggleJournalRow(r) {
+    r._expanded = !r._expanded
+    journalRows = journalRows
+    if (r._expanded && !r._events && r._hasEvents === undefined) {
+      try {
+        r._events = await wailsCall('GetWorklogEntryEvents', r.id) || []
+        r._hasEvents = r._events.length > 0
+        journalRows = journalRows
+      } catch(e) { r._events = []; r._hasEvents = false; journalRows = journalRows }
+    }
+  }
+
+  async function toggleWorklogEntry(e) {
+    e._expanded = !e._expanded
+    if (e._expanded && e.source === 'suggestion' && !e._events && e._hasEvents === undefined) {
+      try {
+        e._events = await wailsCall('GetWorklogEntryEvents', e.id) || []
+        e._hasEvents = e._events.length > 0
+      } catch(e) { e._events = []; e._hasEvents = false }
+    }
+    worklog = worklog
+  }
+
+  function initWorklogEntries(entries) {
+    if (!entries) return []
+    return entries.map(e => { if (e._expanded === undefined) e._expanded = false; return e })
+  }
+
+  function formatTime(iso) {
+    if (!iso) return ''
+    const d = new Date(iso)
+    return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+  }
+
+  async function searchJournalNodes() {
+    const q = journalSearchQuery.trim()
+    if (!q || q.length < 2) {
+      journalSearchResults = []
+      journalShowResults = false
+      return
+    }
+    try {
+      journalSearchResults = await wailsCall('SearchNodes', q) || []
+      journalShowResults = journalSearchResults.length > 0
+    } catch (e) { journalSearchResults = []; journalShowResults = false }
+  }
+
+  function onJournalSearchInput() {
+    clearTimeout(journalSearchTimer)
+    journalSearchTimer = setTimeout(searchJournalNodes, 200)
+  }
+
+  function selectJournalNode(result) {
+    journalNodeID = result.id
+    journalFilteredNodeTitle = result.path || result.title
+    journalIncludeChildren = true
+    journalSearchQuery = ''
+    journalSearchResults = []
+    journalShowResults = false
+    loadJournal()
+  }
+
+  function clearJournalNode() {
+    journalNodeID = ''
+    journalIncludeChildren = false
+    journalFilteredNodeTitle = ''
+    journalSearchQuery = ''
+    journalSearchResults = []
+    journalShowResults = false
+    loadJournal()
+  }
+
+  function resetJournalFilters() {
+    journalDateFrom = ''
+    journalDateTo = ''
+    journalNodeID = ''
+    journalIncludeChildren = false
+    journalBillableFilter = 'all'
+    journalApproxFilter = 'all'
+    journalFilteredNodeTitle = ''
+    journalSearchQuery = ''
+    journalSearchResults = []
+    journalShowResults = false
+    loadJournal()
+  }
+
+  function downloadFile(name, content, mime) {
+    const blob = new Blob([content], { type: mime })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url; a.download = name
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  // ===== Files =====
+  async function addFile() {
+    const path = await wailsCall('PickFile')
+    if (!path) return
+    const parentId = currentFolderId || selectedNode.id
+    await startImport(parentId, path)
+  }
+
+  async function addFolder() {
+    const path = await wailsCall('PickDirectory')
+    if (!path) return
+    const parentId = currentFolderId || selectedNode.id
+    await startImport(parentId, path)
+  }
+
+  async function startImport(parentID, sourcePath) {
+    importing = true
+    try {
+      const summary = await wailsCall('PreviewImport', sourcePath)
+      importSummary = summary
+      pendingImportPath = sourcePath
+      pendingImportParent = parentID
+      showImportDialog = true
+    } catch (e) {
+      error = String(e)
+    }
+    importing = false
+  }
+
+  async function confirmImport(mode) {
+    try {
+      const parentId = pendingImportParent || selectedNode.id
+      const result = mode === 'copy'
+        ? await wailsCall('AddPathCopy', parentId, pendingImportPath)
+        : await wailsCall('AddPathLink', parentId, pendingImportPath)
+      showImportDialog = false
+      importSummary = null
+      folderStack = []
+      currentFolderId = null
+      await Promise.all([
+        loadTabData(parentId),
+        loadFolder(parentId),
+        refreshParentNode(parentId),
+      ])
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  function cancelImport() {
+    showImportDialog = false
+    importSummary = null
+  }
+
+  async function deleteFile({ id, type }) {
+    const label = type === 'folder' ? t('delete.folder') : t('delete.file')
+    openConfirm({
+      title: t('delete.confirmTitle'),
+      message: t('delete.confirmMessage') + ' ' + label + '?',
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('DeleteFileOrFolder', id)
+          files = files.filter(f => f.nodeId !== id)
+          const reloadId = currentFolderId || selectedNode.id
+          await loadFolder(reloadId)
+        } catch (e) {
+          error = String(e)
+        }
+      }
+    })
+  }
+
+  async function openSelectedFile(fileID) {
+    try {
+      await wailsCall('OpenFile', fileID)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  // ===== Drag-and-drop =====
+  async function onFilesDropped(paths) {
+    try {
+      if (!paths || paths.length === 0) return
+      await captureDroppedPaths(paths, 'drop')
+    } finally {
+      resetCaptureDragState()
+    }
+  }
+
+  // ===== Helpers =====
+  function eventLabel(type) {
+    const labels = {
+      'note_created': t('event.noteCreated'),
+      'note_updated': t('event.noteUpdated'),
+      'note_deleted': t('event.noteDeleted'),
+      'file_added': t('event.fileAdded'),
+      'file_deleted': t('event.fileDeleted'),
+      'file_renamed': t('event.fileRenamed'),
+      'file_copied': t('event.fileCopied'),
+      'file_moved': t('event.fileMoved'),
+      'folder_added': t('event.folderAdded'),
+      'folder_deleted': t('event.folderDeleted'),
+      'folder_renamed': t('event.folderRenamed'),
+      'folder_moved': t('event.folderMoved'),
+      'node_created': t('event.caseCreated'),
+      'node_updated': t('event.caseUpdated'),
+      'node_deleted': t('event.nodeDeleted'),
+      'action_created': t('event.actionCreated'),
+      'action_done': t('event.actionDone'),
+      'worklog_added': t('event.worklogAdded'),
+    }
+    return labels[type] || type
+  }
+  function eventIcon(type) {
+    if (type === 'note_created' || type === 'file_added' || type === 'folder_added' || type === 'node_created') return '+'
+    if (type === 'file_deleted' || type === 'folder_deleted') return '×'
+    if (type === 'file_renamed' || type === 'folder_renamed' || type === 'note_updated' || type === 'node_updated') return '~'
+    if (type === 'file_copied') return '⧉'
+    if (type === 'file_moved') return '→'
+    return '•'
+  }
+  function formatDate(str) {
+    if (!str) return ''
+    try { return new Date(str).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' }) } catch (e) { return str }
+  }
+  function nodeKindLabel(kind) {
+    const labels = { 'project': t('kind.project'), 'client': t('kind.client'), 'document': t('kind.document'), 'recipe': t('kind.recipe'), 'folder': t('kind.folder'), 'note': t('kind.note'), 'file': t('kind.file'), 'archive': t('kind.archive'), 'case': t('kind.case'), 'link': t('kind.link') }
+    return labels[kind] || kind || t('kind.case')
+  }
+  function searchResultTypeLabel(kind) {
+    if (kind === 'action') return t('kind.action')
+    return nodeKindLabel(kind)
+  }
+  function captureKindLabel(kind) {
+    if (!kind) return ''
+    return t('capture.kind.' + kind)
+  }
+  function captureSourceLabel(source) {
+    if (!source) return ''
+    return t('capture.source.' + source)
+  }
+  function inboxMetaText(item) {
+    const parts = []
+    if (item.captureKind) parts.push(captureKindLabel(item.captureKind))
+    if (item.captureSource) parts.push(captureSourceLabel(item.captureSource))
+    if (item.captureContextLabel) parts.push(`${t('inbox.capturedIn')}: ${item.captureContextLabel}`)
+    if (item.suggestedTargetLabel) parts.push(`${t('inbox.suggestedTarget')}: ${item.suggestedTargetLabel}`)
+    parts.push(formatDate(item.capturedAt || item.createdAt))
+    return parts.filter(Boolean).join(' · ')
+  }
+  function addInboxCapture(item) {
+    if (!item || !item.id) return
+    inboxNodes = [item, ...inboxNodes.filter(existing => existing.id !== item.id)]
+    if (selectedNode && (item.captureContextNodeId === selectedNode.id || item.suggestedTargetNodeId === selectedNode.id)) {
+      localInboxNodes = [item, ...localInboxNodes.filter(existing => existing.id !== item.id)]
+    }
+  }
+  function normalizeURL(value) {
+    const raw = String(value || '').trim()
+    if (!raw || /[\s]/.test(raw) || raw.includes('@')) return ''
+    try {
+      const parsed = new URL(raw)
+      return (parsed.protocol === 'http:' || parsed.protocol === 'https:') && parsed.hostname ? raw : ''
+    } catch (e) {
+      try {
+        const withScheme = `https://${raw}`
+        const parsed = new URL(withScheme)
+        return parsed.hostname && parsed.hostname.includes('.') ? withScheme : ''
+      } catch (err) {
+        return ''
+      }
+    }
+  }
+  function looksLikeURL(value) {
+    return normalizeURL(value) !== ''
+  }
+  function extensionForMime(type) {
+    const map = {
+      'image/png': 'png',
+      'image/jpeg': 'jpg',
+      'image/gif': 'gif',
+      'image/webp': 'webp',
+    }
+    return map[type] || 'bin'
+  }
+  function blobToBase64(blob) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        const value = String(reader.result || '')
+        const comma = value.indexOf(',')
+        resolve(comma >= 0 ? value.slice(comma + 1) : value)
+      }
+      reader.onerror = () => reject(reader.error)
+      reader.readAsDataURL(blob)
+    })
+  }
+
+  function resolveCaptureContext() {
+    if (selectedNode && selectedNode.id) {
+      return {
+        contextType: 'node',
+        nodeId: selectedNode.id,
+        suggestedTargetNodeId: selectedNode.id,
+      }
+    }
+    if (selectedSection) {
+      return {
+        contextType: 'section',
+        section: selectedSection,
+      }
+    }
+    return {
+      contextType: 'global',
+      section: 'root',
+    }
+  }
+
+  function captureContextJSON() {
+    return JSON.stringify(resolveCaptureContext())
+  }
+
+  function captureContextLabel() {
+    if (selectedNode && selectedNode.id) {
+      return t('capture.dropOverlayNode', { title: selectedNode.title })
+    }
+    return t('capture.dropOverlayGlobal')
+  }
+
+  async function refreshInboxAfterCapture(item = null) {
+    if (item) addInboxCapture(item)
+    if (selectedSection === 'inbox') {
+      inboxNodes = await wailsCall('ListInboxNodes') || inboxNodes
+    }
+  }
+
+  async function captureTextPayload(text, source) {
+    const value = String(text || '').trim()
+    if (!value) return null
+    const normalizedURL = normalizeURL(value)
+    const item = normalizedURL
+      ? await wailsCall('CaptureURLWithContext', normalizedURL, '', source, captureContextJSON())
+      : await wailsCall('CaptureTextWithContext', value, source, captureContextJSON())
+    await refreshInboxAfterCapture(item)
+    return item
+  }
+
+  async function captureUrlPayload(url, title, source) {
+    const value = String(url || '').trim()
+    if (!value) return null
+    const item = await wailsCall('CaptureURLWithContext', value, title || '', source, captureContextJSON())
+    await refreshInboxAfterCapture(item)
+    return item
+  }
+
+  async function captureFilePayload(file, source) {
+    if (!file) return null
+    const path = file.path || file.webkitRelativePath || ''
+    if (path) {
+      const item = await wailsCall('CapturePathWithContext', path, source, captureContextJSON())
+      await refreshInboxAfterCapture(item)
+      return item
+    }
+    const data = await blobToBase64(file)
+    const item = await wailsCall('CaptureFileDataWithContext', file.name || `clipboard.${extensionForMime(file.type)}`, data, source, captureContextJSON())
+    await refreshInboxAfterCapture(item)
+    return item
+  }
+
+  function parseMozURL(value) {
+    const lines = String(value || '').split(/\r?\n/).map(line => line.trim()).filter(Boolean)
+    if (!lines.length) return null
+    return { url: lines[0], title: lines[1] || '' }
+  }
+
+  function parseURIList(value) {
+    const lines = String(value || '').split(/\r?\n/).map(line => line.trim()).filter(line => line && !line.startsWith('#'))
+    return lines[0] || ''
+  }
+
+  async function captureTransferData(dataTransfer, source) {
+    if (!dataTransfer) return false
+    let captured = false
+    const filesList = Array.from(dataTransfer.files || [])
+    for (const file of filesList) {
+      await captureFilePayload(file, source)
+      captured = true
+    }
+    const moz = dataTransfer.getData?.('text/x-moz-url')
+    if (moz) {
+      const parsed = parseMozURL(moz)
+      const normalizedURL = parsed ? normalizeURL(parsed.url) : ''
+      if (normalizedURL) {
+        await captureUrlPayload(normalizedURL, parsed.title, source)
+        return true
+      }
+    }
+    const uri = dataTransfer.getData?.('text/uri-list')
+    if (uri) {
+      const url = parseURIList(uri)
+      const normalizedURL = normalizeURL(url)
+      if (normalizedURL) {
+        await captureUrlPayload(normalizedURL, '', source)
+        return true
+      }
+    }
+    const text = dataTransfer.getData?.('text/plain')
+    if (String(text || '').trim()) {
+      await captureTextPayload(text, source)
+      captured = true
+    }
+    return captured
+  }
+
+  async function captureClipboard() {
+    if (inboxCaptureBusy) return
+    inboxCaptureStatus = ''
+    inboxCaptureBusy = true
+    try {
+      const item = await wailsCall('CaptureClipboardTextWithContext', captureContextJSON())
+      await refreshInboxAfterCapture(item)
+      inboxCaptureStatus = t('inbox.captured')
+    } catch (e) {
+      error = String(e).includes('clipboard is empty') ? t('inbox.clipboardEmpty') : t('inbox.clipboardUnavailable')
+    } finally {
+      inboxCaptureBusy = false
+    }
+  }
+  async function captureDroppedPaths(paths, source = 'drop') {
+    if (inboxCaptureBusy) return
+    inboxCaptureBusy = true
+    inboxCaptureStatus = ''
+    try {
+      for (const path of paths) {
+        const item = await wailsCall('CapturePathWithContext', path, source, captureContextJSON())
+        await refreshInboxAfterCapture(item)
+      }
+      inboxCaptureStatus = t('inbox.captured')
+    } catch (e) {
+      error = String(e)
+    } finally {
+      inboxCaptureBusy = false
+      inboxDropValid = false
+    }
+  }
+  async function handleGlobalPaste(e) {
+    if (showFirstRun || showRecovery) return
+    if (isEditableTarget(e.target)) return
+    if (!e.clipboardData) return
+    try {
+      const captured = await captureTransferData(e.clipboardData, 'paste')
+      if (captured) {
+        e.preventDefault()
+        inboxCaptureStatus = t('inbox.captured')
+      }
+    } catch (err) {
+      error = String(err)
+    }
+  }
+  function hasExternalCaptureData(dataTransfer) {
+    if (dragIds.length > 0) return false
+    const types = Array.from(dataTransfer?.types || [])
+    return types.includes('Files') ||
+      types.includes('text/uri-list') ||
+      types.includes('text/x-moz-url') ||
+      (types.includes('text/plain') && !types.includes('application/x-verstak-node'))
+  }
+
+  function clearCaptureDragTimer() {
+    if (captureDragResetTimer) {
+      clearTimeout(captureDragResetTimer)
+      captureDragResetTimer = null
+    }
+  }
+
+  function resetCaptureDragState() {
+    captureDragDepth = 0
+    captureDropActive = false
+    captureDropLabel = ''
+    lastCaptureDragOverAt = 0
+    inboxDropValid = false
+    clearCaptureDragTimer()
+  }
+
+  function scheduleCaptureDragReset() {
+    if (captureDragResetTimer) return
+    captureDragResetTimer = setTimeout(() => {
+      captureDragResetTimer = null
+      if (captureDropActive && Date.now() - lastCaptureDragOverAt > 2000) {
+        resetCaptureDragState()
+      } else if (captureDropActive) {
+        scheduleCaptureDragReset()
+      }
+    }, 2500)
+  }
+
+  function activateCaptureDrop(dataTransfer) {
+    if (!hasExternalCaptureData(dataTransfer)) return false
+    captureDropLabel = captureContextLabel()
+    captureDropActive = true
+    lastCaptureDragOverAt = Date.now()
+    scheduleCaptureDragReset()
+    return true
+  }
+
+  function handleGlobalDragEnter(e) {
+    if (!activateCaptureDrop(e.dataTransfer)) return
+    captureDragDepth += 1
+  }
+
+  function handleGlobalDragOver(e) {
+    if (!activateCaptureDrop(e.dataTransfer)) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'copy'
+  }
+  function handleGlobalDragLeave(e) {
+    if (captureDragDepth > 0) captureDragDepth -= 1
+    if (e.clientX <= 0 || e.clientY <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
+      resetCaptureDragState()
+    } else if (captureDragDepth <= 0) {
+      resetCaptureDragState()
+    }
+  }
+  function handleVisibilityChange() {
+    if (document.hidden) {
+      resetCaptureDragState()
+    }
+  }
+  async function handleGlobalDrop(e) {
+    if (!hasExternalCaptureData(e.dataTransfer)) return
+    e.preventDefault()
+    try {
+      const captured = await captureTransferData(e.dataTransfer, 'drop')
+      if (captured) inboxCaptureStatus = t('inbox.captured')
+    } catch (err) {
+      error = String(err)
+    } finally {
+      resetCaptureDragState()
+    }
+  }
+  function handleInboxDragOver(e) {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'copy'
+    inboxDropValid = true
+  }
+  function handleInboxDragLeave() {
+    inboxDropValid = false
+  }
+  async function handleInboxDrop(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      const captured = await captureTransferData(e.dataTransfer, 'drop')
+      if (captured) inboxCaptureStatus = t('inbox.captured')
+    } catch (err) {
+      error = String(err)
+    } finally {
+      resetCaptureDragState()
+    }
+  }
+  function openAssignInbox(item) {
+    assignInboxItem = item
+    inboxAssignQuery = ''
+    inboxAssignResults = []
+    inboxAssignTarget = null
+  }
+  function closeAssignInbox() {
+    assignInboxItem = null
+    inboxAssignQuery = ''
+    inboxAssignResults = []
+    inboxAssignTarget = null
+    inboxAssignSearching = false
+  }
+  function isAssignTarget(result) {
+    return ['case', 'client', 'project', 'folder', 'document', 'recipe'].includes(result.type)
+  }
+  async function searchInboxAssignTargets() {
+    const q = inboxAssignQuery.trim()
+    if (!q || q.length < 2) {
+      inboxAssignResults = []
+      return
+    }
+    inboxAssignSearching = true
+    try {
+      const results = await wailsCall('SearchNodes', q) || []
+      inboxAssignResults = results.filter(result => isAssignTarget(result) && result.id !== assignInboxItem?.id)
+    } catch (e) {
+      inboxAssignResults = []
+    } finally {
+      inboxAssignSearching = false
+    }
+  }
+  function onInboxAssignSearchInput(e) {
+    inboxAssignQuery = e.target.value
+    inboxAssignTarget = null
+    clearTimeout(inboxAssignTimer)
+    inboxAssignTimer = setTimeout(searchInboxAssignTargets, 200)
+  }
+  function selectInboxAssignTarget(result) {
+    inboxAssignTarget = result
+    inboxAssignQuery = result.path || result.title
+    inboxAssignResults = []
+  }
+  async function submitAssignInbox() {
+    if (!assignInboxItem || !inboxAssignTarget) return
+    try {
+      await resolveInboxToTarget(assignInboxItem, inboxAssignTarget.id)
+      closeAssignInbox()
+    } catch (e) {
+      error = String(e)
+    }
+  }
+  async function resolveInboxToTarget(item, targetNodeId) {
+    if (!item || !targetNodeId) return
+    await wailsCall('ResolveInboxNode', item.id, targetNodeId)
+    inboxNodes = inboxNodes.filter(existing => existing.id !== item.id)
+    localInboxNodes = localInboxNodes.filter(existing => existing.id !== item.id)
+    await reloadTreePreservingExpanded()
+    if (selectedNode) {
+      await loadTabData(selectedNode.id)
+    }
+  }
+  async function resolveInboxHere(item) {
+    const targetId = item?.suggestedTargetNodeId || selectedNode?.id || ''
+    if (!targetId) return
+    try {
+      await resolveInboxToTarget(item, targetId)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+  function confirmDeleteInbox(item) {
+    openConfirm({
+      title: t('inbox.deleteTitle'),
+      message: t('inbox.deleteConfirm', { title: item.title }),
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('DeleteInboxNode', item.id)
+          inboxNodes = inboxNodes.filter(existing => existing.id !== item.id)
+          localInboxNodes = localInboxNodes.filter(existing => existing.id !== item.id)
+        } catch (e) {
+          error = String(e)
+        }
+      }
+    })
+  }
+  function openEditLink(link) {
+    editingLink = link
+    linkTitle = link.title || ''
+    linkURL = link.url || ''
+    linkNote = link.note || ''
+    linkStatus = ''
+  }
+  function closeEditLink() {
+    editingLink = null
+    linkTitle = ''
+    linkURL = ''
+    linkNote = ''
+    linkStatus = ''
+  }
+  async function submitEditLink() {
+    if (!editingLink || !linkURL.trim()) return
+    try {
+      const updated = await wailsCall('UpdateLink', editingLink.id, linkTitle.trim(), linkURL.trim(), linkNote)
+      links = links.map(link => link.id === updated.id ? updated : link)
+      closeEditLink()
+    } catch (e) {
+      linkStatus = String(e)
+    }
+  }
+  async function deleteLink(link) {
+    openConfirm({
+      title: t('links.deleteTitle'),
+      message: t('links.deleteConfirm', { title: link.title }),
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('DeleteLink', link.id)
+          links = links.filter(item => item.id !== link.id)
+        } catch (e) {
+          error = String(e)
+        }
+      }
+    })
+  }
+  async function openLink(link) {
+    try {
+      await wailsCall('OpenLink', link.id)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+  async function copyLinkURL(link) {
+    try {
+      await navigator.clipboard?.writeText?.(link.url)
+      linkStatus = t('links.copied')
+    } catch (e) {
+      linkStatus = t('links.copyUnavailable')
+    }
+  }
+  function pluralize(n, one, few, many) {
+    n = Math.abs(n) % 100
+    if (n >= 5 && n <= 20) return many
+    n %= 10
+    if (n === 1) return one
+    if (n >= 2 && n <= 4) return few
+    return many
+  }
+  // ===== Actions =====
+  function openCreateAction() {
+    showCreateAction = true
+    newActionTitle = ''
+    newActionKind = 'open_url'
+    newActionData = ''
+  }
+  function cancelCreateAction() { showCreateAction = false; newActionTitle = ''; newActionData = '' }
+  async function submitCreateAction() {
+    if (!newActionTitle.trim() || !newActionData.trim() || !selectedNode) return
+    try {
+      const action = await wailsCall('CreateAction', selectedNode.id, newActionKind, newActionTitle.trim(), newActionData.trim())
+      if (action && action.id) {
+        actions = [...actions, action]
+      }
+      showCreateAction = false
+      newActionTitle = ''
+      newActionData = ''
+    } catch (e) { error = String(e) }
+  }
+  async function deleteAction(id) {
+    try {
+      await wailsCall('DeleteAction', id)
+      actions = actions.filter(a => a.id !== id)
+    } catch (e) { error = String(e) }
+  }
+  function actionKindLabel(kind) {
+    const k = actionKinds.find(k => k.id === kind)
+    return k ? k.label : kind
+  }
+
+  async function openNodeById(id) {
+    try {
+      const node = await wailsCall('GetNodeDetail', id)
+      if (node) selectNode(node)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  function resolveActivityTarget(ev) {
+    if (ev.targetType === 'note' && ev.targetId) {
+      return { nodeId: ev.nodeId, tab: 'notes', targetId: ev.targetId }
+    }
+    if (ev.targetType === 'file') {
+      return { nodeId: ev.nodeId, tab: 'files', targetId: ev.targetId, targetPath: ev.targetPath }
+    }
+    if (ev.targetType === 'folder') {
+      return { nodeId: ev.nodeId, tab: 'files', targetPath: ev.targetPath || ev.targetId }
+    }
+    return { nodeId: ev.nodeId }
+  }
+
+  async function openActivityTarget(ev) {
+    const target = resolveActivityTarget(ev)
+    const targetNode = target.nodeId
+    if (!targetNode) return
+    try {
+      const node = await wailsCall('GetNodeDetail', targetNode)
+      if (!node) return
+      selectNode(node)
+      if (target.tab === 'notes') {
+        setActiveTab('notes')
+        if (target.targetId) {
+          try { notes = await wailsCall('ListNotes', targetNode) || [] } catch(e) {}
+          const note = notes.find(n => n.id === target.targetId)
+          if (note) setTimeout(() => openNote(note), 100)
+        }
+      } else if (target.tab === 'files') {
+        setActiveTab('files')
+        if (target.targetId) {
+          // targetId is the node ID of the file/folder in the tree.
+          // Navigate to its parent folder so the user sees context.
+          try {
+            const detail = await wailsCall('GetNodeDetail', target.targetId)
+            if (detail && detail.parent_id) {
+              await loadFolder(detail.parent_id)
+              const fileItem = fileItems.find(f => f.id === target.targetId)
+              if (fileItem && fileItem.type === 'file' && canPreviewFile(fileItem)) {
+                setTimeout(() => openPreview(fileItem), 150)
+              }
+            } else {
+              // No parent — item sits at the root level
+              await loadFolder(targetNode)
+            }
+          } catch(e) {
+            await loadFolder(targetNode)
+          }
+        } else {
+          await loadFolder(targetNode)
+        }
+      }
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  async function openActivityEvent(ev) {
+    return openActivityTarget(ev)
+  }
+
+  async function openSearchResult(result) {
+    if (!result || !result.nodeId) return
+    try {
+      if (result.type === 'link') {
+        const node = await wailsCall('GetNodeDetail', result.nodeId)
+        if (node) {
+          await selectNode(node)
+          setActiveTab('links')
+        }
+        return
+      }
+      if (result.type === 'action') {
+        const node = await wailsCall('GetNodeDetail', result.nodeId)
+        if (node) {
+          await selectNode(node)
+          setActiveTab('actions')
+        }
+        return
+      }
+      const detail = await wailsCall('GetNodeDetail', result.nodeId)
+      if (!detail) return
+      if (result.type === 'note') {
+        const parentId = detail.parent_id || detail.parentId || ''
+        const parent = parentId ? await wailsCall('GetNodeDetail', parentId) : null
+        if (parent) {
+          await selectNode(parent)
+          setActiveTab('notes')
+          notes = await wailsCall('ListNotes', parent.id) || []
+          const note = notes.find(item => item.id === detail.id)
+          if (note) await openNote(note)
+        }
+        return
+      }
+      if (result.type === 'file') {
+        const parentId = detail.parent_id || detail.parentId || ''
+        const parent = parentId ? await wailsCall('GetNodeDetail', parentId) : null
+        if (parent) {
+          await selectNode(parent)
+          setActiveTab('files')
+          await loadFolder(parent.id)
+          const fileItem = fileItems.find(item => item.id === detail.id)
+          if (fileItem && canPreviewFile(fileItem)) {
+            await openPreview(fileItem)
+          }
+        }
+        return
+      }
+      if (result.type === 'folder') {
+        await selectNode(detail)
+        setActiveTab('files')
+        await loadFolder(detail.id)
+        return
+      }
+      await selectNode(detail)
+    } catch (e) {
+      error = String(e)
+    }
+  }
+
+  // ===== Sync =====
+  async function loadSyncStatus() {
+    try {
+      syncStatus = await wailsCall('SyncStatus')
+    } catch (e) {
+      syncStatus = { configured: false, serverUrl: '', deviceId: '', unpushedOps: 0, lastSyncAt: '', syncInterval: 0 }
+    }
+  }
+
+  let settingsInitialSection = 'general'
+
+  function openSettings(section) {
+    settingsInitialSection = section || 'general'
+    showSettings = true
+  }
+
+  function closeSettings() {
+    showSettings = false
+  }
+
+  async function refreshSystemViews() {
+    try {
+      systemViews = await wailsCall('ListSystemViewsWithPlugins') || []
+    } catch (e) {
+      // Fallback: keep current views
+    }
+  }
+
+  function syncResultMessage(result) {
+    const conflicts = Array.isArray(result?.conflicts) ? result.conflicts : []
+    const applyErrors = Array.isArray(result?.applyErrors) ? result.applyErrors : []
+    const parts = []
+    if (conflicts.length > 0) {
+      parts.push(t('sync.conflictsCount', { count: conflicts.length }))
+    }
+    if (applyErrors.length > 0) {
+      parts.push(t('sync.applyErrorsCount', { count: applyErrors.length }))
+    }
+    return parts.join(' · ')
+  }
+
+  async function runSyncNow() {
+    syncLoading = true
+    syncMessage = ''
+    syncMessageKind = ''
+    try {
+      const result = await wailsCall('SyncNow')
+      await loadSyncStatus()
+      syncMessage = syncResultMessage(result)
+      syncMessageKind = syncMessage ? 'warning' : ''
+    } catch (e) {
+      console.error('sync error:', e)
+      syncMessage = `${t('sync.status.error')}: ${e?.message || e}`
+      syncMessageKind = 'warning'
+    } finally {
+      syncLoading = false
+    }
+  }
+
+  // First run / recovery handlers
+  function onFirstRunComplete(status) {
+    showFirstRun = false
+    startupStatus = status
+    loading = false
+    // Reload main UI
+    window.location.reload()
+  }
+
+  function onRecoveryComplete(status) {
+    showRecovery = false
+    startupStatus = status
+    loading = false
+    window.location.reload()
+  }
+
+  function onKeyActivate(fn) {
+    return (e) => {
+      if (isEditableTarget(e.target)) return
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        fn()
+      }
+    }
+  }
+</script>
+
+{#if showFirstRun}
+  <FirstRun onComplete={onFirstRunComplete} />
+{:else if showRecovery}
+  <VaultRecovery vaultPath={startupStatus?.vaultPath || ''} onComplete={onRecoveryComplete} />
+{:else}
+<div class="app">
+  {#if captureDropActive}
+    <div class="capture-drop-overlay">
+      <div class="capture-drop-box">{captureDropLabel}</div>
+    </div>
+  {/if}
+  <!-- Sidebar -->
+  <aside class="sidebar">
+    <div class="sidebar-brand">
+      <img class="logo" src="/assets/app-icons/icon_32x32.png" width="20" height="20" alt="" />
+      <span class="brand-name">{t('nav.brand')}</span>
+    </div>
+    <nav class="sidebar-nav">
+      <div class="nav-group">
+        <div class="nav-label">{t('nav.system')}</div>
+        {#each systemViews as view}
+          <button class="nav-item {selectedSection === view.id ? 'selected' : ''}"
+                  on:click={() => selectSystemView(view.id)}>
+            {view.label}
+            {#if view.id === 'journal' && suggestionCount > 0}
+              <span class="nav-badge">{suggestionCount}</span>
+            {/if}
+            {#if view.id === 'trash' && trashCount > 0}
+              <span class="nav-badge">{trashCount}</span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+      <div class="nav-group">
+        <div class="nav-label-row">
+          <span>{t('nav.workspace')}</span>
+          <button class="nav-add-btn" on:click={openCreateRoot} title={t('common.create')}>+</button>
+        </div>
+        {#if workspaceTree.length > 0}
+          <div class="workspace-tree-area"
+               class:drop-valid={dropRootValid}
+               role="region" aria-label={t('nav.workspace')}
+               on:dragover|preventDefault={handleDragOverRoot}
+               on:dragleave={handleDragLeaveRoot}
+               on:drop={handleDropRoot}>
+            <TreeNode
+              nodes={workspaceTree}
+              {expanded}
+              selectedNodeId={selectedNode?.id || ''}
+              onSelect={selectNode}
+              onToggle={toggleExpand}
+              onContextMenu={handleContextMenu}
+              onDrop={handleNodeDrop}
+            />
+          </div>
+        {:else}
+          <div class="nav-empty">{t('nav.noNodes')}</div>
+        {/if}
+      </div>
+    </nav>
+    <div class="sidebar-footer">
+      <SyncStatus {syncStatus} {syncLoading} {syncMessage} {syncMessageKind} onSync={runSyncNow} onOpenSettings={() => openSettings('sync')} />
+      <div class="sidebar-footer-row">
+        <button class="sidebar-settings-btn" on:click={() => openSettings()} title={t('common.settings')}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+          </svg>
+        </button>
+        <span class="version">{version}</span>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Main -->
+  <main class="main">
+    <AppHeader
+      title={currentViewTitle}
+      subtitle={currentViewSubtitle}
+      {wailsCall}
+      typeLabel={searchResultTypeLabel}
+      onOpenSearchResult={openSearchResult}
+    >
+      <div slot="actions" class="header-actions">
+        {#if selectedSection === 'inbox'}
+          <button class="btn btn-primary" on:click={captureClipboard} disabled={inboxCaptureBusy}>
+            {inboxCaptureBusy ? t('common.loading') : t('inbox.pasteClipboard')}
+          </button>
+          {#if inboxCaptureStatus}
+            <span class="inbox-capture-status">{inboxCaptureStatus}</span>
+          {/if}
+        {:else if selectedSection === 'trash'}
+          {#if trashSelectedIds.length > 0}
+            <button class="btn btn-sm btn-primary" on:click={() => restoreTrash(trashSelectedIds)}>{@html actionIcon('restore', 14)} {t('trash.restore')} ({trashSelectedIds.length})</button>
+            <button class="btn btn-sm btn-danger" on:click={() => purgeTrash(trashSelectedIds)}>{@html actionIcon('purge', 14)} {t('common.delete')} ({trashSelectedIds.length})</button>
+          {/if}
+          <button class="btn btn-sm btn-danger" on:click={emptyTrash}>{@html actionIcon('emptyTrash', 14)} {t('trash.emptyTrash')}</button>
+          <button class="btn btn-sm" on:click={() => wailsCall('OpenTrashFolder')}>{t('trash.openFolder')}</button>
+        {/if}
+      </div>
+    </AppHeader>
+
+    {#if error}
+      <div class="error-banner" role="button" tabindex="0" on:click={() => error = ''} on:keydown={onKeyActivate(() => error = '')}>
+        {translateError(error)}
+        <button class="dismiss-btn" on:click|stopPropagation={() => error = ''} aria-label="Dismiss">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+    {/if}
+
+    {#if noteEditor}
+      <!-- Note editor with markdown preview -->
+      <div class="note-editor-wrapper">
+        <div class="note-editor-header">
+          {#if renamingNoteId === noteEditor.id}
+            <div class="note-rename-inline">
+              <input
+                type="text"
+                bind:value={renamingNoteTitle}
+                on:keydown={(e) => { if (e.key === 'Enter') submitRenameNote(); if (e.key === 'Escape') cancelRenameNote(); }}
+                class="note-rename-input"
+              />
+              <button class="btn btn-primary btn-sm" on:click={submitRenameNote}>{t('common.save')}</button>
+              <button class="btn btn-sm" on:click={cancelRenameNote}>{t('common.cancel')}</button>
+            </div>
+          {:else}
+            <span class="note-title">{noteEditor.title}</span>
+            <button class="btn btn-sm note-rename-btn" on:click={() => startRenameNote(noteEditor.id, noteEditor.title)} title={t('common.rename')}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+            </button>
+            {#if noteEditor.dirty}<span class="dirty-mark">●</span>{/if}
+          {/if}
+          <div class="note-editor-actions">
+            <button class="btn btn-primary" on:click={saveCurrentNote}>{t('common.save')}</button>
+            <button class="btn" on:click={closeNoteEditor}>{t('common.close')}</button>
+          </div>
+        </div>
+        <NoteEditorPanel
+          bind:this={noteEditorPanel}
+          content={noteEditor.content}
+          viewMode={noteViewMode}
+          placeholder={t('note.placeholder')}
+          on:content-change={handleNoteContentChange}
+          on:mode-change={handleNoteModeChange}
+          on:save={saveCurrentNote}
+          on:insert-link={handleNoteInsertLink}
+          on:insert-internal-link={handleNoteInsertInternalLink}
+          on:verstak-link={handleVerstakLink}
+        />
+      </div>
+
+    {:else if selectedNode}
+      <!-- Tabs -->
+      <div class="tabs">
+        {#each tabs as tab}
+          {#if tab.id === 'activity'}
+            <span class="tab-separator" aria-hidden="true"></span>
+          {/if}
+          <button class="tab" class:active={activeTab === tab.id} on:click={() => setActiveTab(tab.id)}>{tab.label}</button>
+        {/each}
+      </div>
+      <div class="tab-content">
+        {#if activeTab === 'overview'}
+          <div class="overview">
+            <h2>{selectedNode.title}</h2>
+            <div class="meta-grid">
+              <div class="meta-item"><span class="meta-label">{t('overview.type')}</span><span>{nodeKindLabel(selectedNode.type)}</span></div>
+              <div class="meta-item"><span class="meta-label">{t('overview.section')}</span><span>{selectedNode.section || '—'}</span></div>
+              <div class="meta-item"><span class="meta-label">{t('overview.created')}</span><span>{formatDate(selectedNode.createdAt)}</span></div>
+            </div>
+            <div class="quick-actions">
+              <button class="qa-btn" on:click={() => { setActiveTab('notes'); openCreateNote() }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+                {t('overview.newNote')}
+              </button>
+              <button class="qa-btn" on:click={() => { setActiveTab('files'); addFile() }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                {t('overview.addFile')}
+              </button>
+              <button class="qa-btn" on:click={openCreateAction}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+                {t('overview.addAction')}
+              </button>
+              <button class="qa-btn" on:click={() => setActiveTab('worklog')}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                {t('overview.logTime')}
+              </button>
+            </div>
+            {#if notes.length > 0}
+              <div class="recent-section">
+                <h3>{t('overview.recentNotes')}</h3>
+                {#each notes.slice(0, 5) as note}
+                  <div class="recent-note" role="button" tabindex="0" on:click={() => openNote(note)} on:keydown={onKeyActivate(() => openNote(note))}>
+                    <span>{note.title}</span><span class="recent-date">{formatDate(note.createdAt)}</span>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+            {#if worklog.length > 0}
+              <div class="recent-section">
+                <h3>{t('overview.recentEntries')}</h3>
+                {#each worklog.slice(0, 3) as e}
+                  <div class="recent-entry">{e.summary} ({e.minutes} {t('worklog.min')})</div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+
+        {:else if activeTab === 'notes'}
+          <div class="notes-tab">
+            <div class="tab-toolbar">
+              <button class="btn btn-primary" on:click={openCreateNote}>{t('note.add')}</button>
+            </div>
+            {#if showCreateNote}
+              <div class="create-form">
+                <input type="text" placeholder={t('note.title')} bind:value={newNoteTitle}
+                       on:keydown={(e) => e.key === 'Enter' && submitCreateNote()} />
+                <div class="form-actions">
+                  <button class="btn btn-primary" on:click={submitCreateNote}>{t('common.create')}</button>
+                  <button class="btn" on:click={cancelCreateNote}>{t('common.cancel')}</button>
+                </div>
+              </div>
+            {/if}
+            {#if notes.length === 0 && !showCreateNote}
+              <div class="empty-state"><p>{t('note.noNotes')}</p><p class="hint">{t('note.createFirst')}</p></div>
+            {:else}
+              <div class="notes-list">
+                {#each notes as note}
+                  <div class="note-card" role="button" tabindex="0" on:click={() => openNote(note)} on:keydown={onKeyActivate(() => openNote(note))}>
+                    <div class="note-card-info">
+                      <div class="note-card-title">{note.title}</div>
+                      <div class="note-card-date">{formatDate(note.createdAt)}</div>
+                    </div>
+                    <div class="note-card-actions" on:click|stopPropagation>
+                      <button class="note-action-btn" on:click={() => startRenameNote(note.id, note.title)} title={t('common.rename')}>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+                      </button>
+                      <button class="note-action-btn note-action-danger" on:click={() => deleteNote(note)} title={t('common.delete')}>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                      </button>
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+
+        {:else if activeTab === 'files'}
+          <!-- External file drops are handled by the unified capture flow and land in the selected case inbox. -->
+          <div class="files-tab">
+            <div class="tab-toolbar">
+              <button class="btn btn-primary" on:click={addFile} disabled={importing}>{t('file.addFile')}</button>
+              <button class="btn" on:click={addFolder} disabled={importing}>{t('file.addFolder')}</button>
+              <button class="btn" on:click={createFile}>{t('file.newFile')}</button>
+              {#if clipboard.items.length > 0}
+                <button class="btn" on:click={pasteItem}>{t('common.paste')} {clipboard.items.length}</button>
+              {/if}
+            </div>
+
+            {#if loadingFiles}
+              <div class="empty-state">
+                <p>{t('common.loading')}</p>
+              </div>
+            {:else}
+              {#if folderStack.length > 0}
+                <FileBreadcrumbs crumbs={[{ name: t('file.root') }, ...folderStack]} on:navigate={(e) => {
+                  const i = e.detail
+                  if (i === 0) {
+                    folderStack = []
+                    currentFolderId = null
+                    loadFolder(selectedNode.id)
+                  } else {
+                    navigateToBreadcrumb(i - 1)
+                  }
+                }}/>
+                <button class="btn btn-sm back-btn" on:click={navigateBack}>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+                  {t('common.backLabel')}
+                </button>
+              {:else}
+                <FileBreadcrumbs crumbs={[{ name: t('file.root') }]}/>
+              {/if}
+
+              {#if fileItems.length === 0}
+                <div class="empty-state">
+                  <div class="empty-icon">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                      <polyline points="14 2 14 8 20 8"/>
+                    </svg>
+                  </div>
+                  <p>{folderStack.length > 0 ? t('file.noFiles') : t('file.noFilesCase')}</p>
+                  <p class="hint">{t('file.hint')}</p>
+                  <div class="empty-actions">
+                    <button class="btn btn-primary" on:click={addFile}>{t('file.addFileSimple')}</button>
+                    <button class="btn" on:click={addFolder}>{t('file.addFolderSimple')}</button>
+                  </div>
+                </div>
+              {:else}
+                <div class="file-list">
+                  {#each fileItems as item (item.id)}
+                    <FileTreeRow
+                      {item}
+                      selected={selectedIds.includes(item.id)}
+                      {onDragStart}
+                      {onDragOver}
+                      {onDrop}
+                      on:navigate={(e) => navigateToFolder(e.detail)}
+                      on:preview={(e) => openPreview(e.detail)}
+                      on:openExternal={(e) => wailsCall('OpenFile', e.detail)}
+                      on:showInFolder={(e) => wailsCall('OpenFolder', e.detail)}
+                      on:delete={(e) => deleteFile(e.detail)}
+                      on:rename={(e) => renameItem(e.detail.id)}
+                      on:duplicate={(e) => duplicateItem(e.detail)}
+                      on:cut={(e) => cutItem(e.detail)}
+                      on:copy={(e) => copyItem(e.detail)}
+                      on:selectOne={(e) => selectOne(e.detail)}
+                      on:toggleSelect={(e) => toggleSelection(e.detail)}
+                      on:rangeSelect={(e) => rangeSelect(e.detail)}
+                    />
+                  {/each}
+                </div>
+              {/if}
+            {/if}
+
+            {#if importing && !showImportDialog}
+              <div class="empty-state"><p>{t('file.scanning')}</p></div>
+            {/if}
+          </div>
+
+        {:else if activeTab === 'inbox'}
+          <div class="inbox-tab">
+            {#if localInboxNodes.length === 0}
+              <div class="empty-state"><p>{t('inbox.localEmpty')}</p></div>
+            {:else}
+              <div class="inbox-list">
+                {#each localInboxNodes as item}
+                  <div class="inbox-item" role="button" tabindex="0" on:click={() => openInboxArtifact(item)} on:keydown={(e) => e.key === 'Enter' && openInboxArtifact(item)}>
+                    <div class="inbox-item-main">
+                      <span class="inbox-item-title">{item.title}</span>
+                      <span class="inbox-item-meta">{inboxMetaText(item)}</span>
+                    </div>
+                    <div class="inbox-item-actions">
+                      <button class="inbox-icon-btn inbox-icon-btn-primary" title={t('inbox.keepHere')} aria-label={t('inbox.keepHere')} on:click|stopPropagation={() => resolveInboxHere(item)}>
+                        {@html actionIcon('attach')}
+                      </button>
+                      <button class="inbox-icon-btn" title={t('inbox.assign')} aria-label={t('inbox.assign')} on:click|stopPropagation={() => openAssignInbox(item)}>
+                        {@html actionIcon('move')}
+                      </button>
+                      <button class="inbox-icon-btn" title={t('common.open')} aria-label={t('common.open')} on:click|stopPropagation={() => openInboxArtifact(item)}>
+                        {@html actionIcon('open')}
+                      </button>
+                      {#if canShowInboxArtifactInFolder(item)}
+                        <button class="inbox-icon-btn" title={t('file.showInExplorer')} aria-label={t('file.showInExplorer')} on:click|stopPropagation={() => openNodeFolder(item)}>
+                          {@html actionIcon('showInExplorer')}
+                        </button>
+                      {:else}
+                        <span class="inbox-icon-slot" aria-hidden="true"></span>
+                      {/if}
+                      <button class="inbox-icon-btn inbox-icon-btn-danger" title={t('common.delete')} aria-label={t('common.delete')} on:click|stopPropagation={() => confirmDeleteInbox(item)}>
+                        {@html actionIcon('delete')}
+                      </button>
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+
+        {:else if activeTab === 'links'}
+          <div class="links-tab">
+            {#if links.length === 0}
+              <div class="empty-state"><p>{t('links.empty')}</p></div>
+            {:else}
+              <div class="links-list">
+                {#each links as link}
+                  <div class="link-card">
+                    <div class="link-main">
+                      <span class="link-title">{link.title}</span>
+                      <span class="link-url" title={link.url}>{link.hostname || link.url}</span>
+                      <span class="link-date">{formatDate(link.createdAt)}</span>
+                      {#if link.note}<span class="link-note">{link.note}</span>{/if}
+                    </div>
+                    <div class="link-actions">
+                      <button class="btn btn-sm btn-primary" on:click={() => openLink(link)}>{t('common.open')}</button>
+                      <button class="btn btn-sm" on:click={() => copyLinkURL(link)}>{t('links.copyUrl')}</button>
+                      <button class="btn btn-sm" on:click={() => openEditLink(link)}>{t('common.rename')}</button>
+                      <button class="btn btn-sm btn-danger" on:click={() => deleteLink(link)}>{t('common.delete')}</button>
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+            {#if linkStatus}
+              <div class="link-status">{linkStatus}</div>
+            {/if}
+          </div>
+
+        {:else if activeTab === 'actions'}
+          <div class="actions-tab">
+            <div class="tab-toolbar">
+              <button class="btn btn-primary" on:click={openCreateAction}>{t('action.addAction')}</button>
+            </div>
+            {#if actions.length === 0}
+              <div class="empty-state"><p>{t('action.noActions')}</p></div>
+            {:else}
+              {#each actions as action}
+                <div class="action-card">
+                  <div class="action-info">
+                    <span class="action-title">{action.title}</span>
+                    <span class="action-type">{actionKindLabel(action.type)}</span>
+                    <span class="action-data">{action.data}</span>
+                  </div>
+                  <div class="action-btns">
+                    <button class="btn btn-sm" on:click={() => wailsCall('RunAction', action.id)}>{t('action.run')}</button>
+                    <button class="btn btn-sm btn-danger" on:click={() => deleteAction(action.id)}>
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    </button>
+                  </div>
+                </div>
+              {/each}
+            {/if}
+          </div>
+
+        {:else if activeTab === 'worklog'}
+          <div class="worklog-tab">
+            <div class="worklog-toolbar">
+              <button class="btn btn-primary btn-sm" on:click={() => openWorklogModal()}>+ {t('worklog.addEntry')}</button>
+            </div>
+            {#if selectedNode && suggestions.filter(s => s.nodeId === selectedNode.id).length > 0}
+              <div class="worklog-tab-suggestions">
+                <div class="suggestions-title">{t('worklog.suggestions')}</div>
+                {#each suggestions.filter(s => s.nodeId === selectedNode.id) as s}
+                  <div class="suggestion-card" class:expanded={s._expanded}>
+                    <div class="suggestion-main" on:click={() => s._expanded = !s._expanded} role="button" tabindex="0" on:keydown={(e) => e.key === 'Enter' && (s._expanded = !s._expanded)}>
+                      <div class="suggestion-info">
+                        <span class="suggestion-summary">{s.summary}</span>
+                        <span class="suggestion-meta">{s.suggestedMin} {t('worklog.min')}{#if s.events && s.events.length > 0} · {s.events.length} {t('suggest.detectedEvents')}{/if}</span>
+                      </div>
+                      <div class="suggestion-actions">
+                        <span class="suggestion-confidence-dot" class:low={s.confidence === 'low'} class:medium={s.confidence === 'medium'} class:high={s.confidence === 'high'} title={t('suggest.confidence.' + s.confidence)} aria-label={t('suggest.confidence.' + s.confidence)}></span>
+                        <button class="btn btn-sm" on:click|stopPropagation={() => openSuggestionWorklogModal(s)}>
+                          {t('suggest.edit')}
+                        </button>
+                        <button class="btn btn-sm btn-primary" on:click|stopPropagation={() => acceptTodaySuggestion(s)}>
+                          {t('worklog.apply')}
+                        </button>
+                        <button class="btn btn-sm btn-danger" on:click|stopPropagation={() => deleteSuggestion(s)}>
+                          {t('common.delete')}
+                        </button>
+                      </div>
+                    </div>
+                    {#if s._expanded && s.events && s.events.length > 0}
+                      <div class="suggestion-detail">
+                        <div class="suggestion-detail-title">{t('suggest.detectedEvents')}</div>
+                        {#each s.events as ev}
+                          <div class="suggestion-detail-event">
+                            <span class="suggestion-event-time">{formatTime(ev.createdAt)}</span>
+                            {#if ev.nodePath}<span class="suggestion-event-path">{ev.nodePath}</span>{/if}
+                            <span class="suggestion-event-type">{eventLabel(ev.eventType)}</span>
+                            <span class="suggestion-event-title">{ev.title}</span>
+                            <button class="link-btn" on:click={() => openActivityTarget(ev)}>{t('common.open')}</button>
+                            {#if ev.targetType === 'file' || ev.eventType.startsWith('file_')}
+                              <button class="link-btn" on:click={() => openNodeFolder(ev.nodeId)}>{t('file.showInExplorer')}</button>
+                            {/if}
+                          </div>
+                        {/each}
+                      </div>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            {/if}
+            {#if worklog.length === 0}
+              <div class="empty-state"><p>{t('worklog.empty')}</p></div>
+            {:else}
+              {#each worklog as e}
+                <div class="worklog-entry" class:expanded={e._expanded} on:click={() => toggleWorklogEntry(e)} role="button" tabindex="0" on:keydown={(e2) => e2.key === 'Enter' && toggleWorklogEntry(e)}>
+                  <div class="worklog-entry-head">
+                    <span class="worklog-toggle">{e._expanded ? '▾' : '▸'}</span>
+                    <span class="worklog-entry-summary">{e.summary}</span>
+                    {#if e.nodePath}<span class="worklog-entry-path">{e.nodePath}</span>{/if}
+                    <span class="worklog-entry-mins">{e.minutes} {t('worklog.min')}</span>
+                    {#if e.billable}<span class="wl-tag-billable">{t('journal.billableYes')}</span>{/if}
+                    {#if e.approximate}<span class="wl-tag-approx">{t('journal.approxEstimated')}</span>{/if}
+                    <span class="worklog-entry-date">{e.date}</span>
+                  </div>
+                  {#if e._expanded}
+                    <div class="worklog-entry-detail">
+                      <div class="worklog-entry-actions">
+                        <button class="btn btn-sm" on:click|stopPropagation={() => openWorklogModal(e)}>{t('worklog.editEntry')}</button>
+                        <button class="btn btn-sm btn-danger" on:click|stopPropagation={() => deleteWorklogEntry(e)}>{t('worklog.deleteEntry')}</button>
+                      </div>
+                      {#if e.details}
+                        <div class="wl-detail-section">
+                          <span class="wl-detail-label">{t('worklog.details')}</span>
+                          <p>{e.details}</p>
+                        </div>
+                      {/if}
+                      <div class="wl-detail-section">
+                        <span class="wl-detail-label">{t('worklog.source')}</span>
+                        {#if e.source === 'manual'}
+                          <p>{t('worklog.sourceManual')}</p>
+                        {:else if e.source === 'suggestion' && e._events && e._events.length > 0}
+                          <p>{t('worklog.sourceSuggestion')}</p>
+                        {:else if e.source === 'suggestion'}
+                          <p>{t('worklog.sourceSuggestionNoEvents')}</p>
+                        {:else if e.source === 'unknown' || e.source === 'imported'}
+                          <p>{t('worklog.sourceUnknown')}</p>
+                        {:else}
+                          <p>{t('worklog.sourceUnknown')}</p>
+                        {/if}
+                      </div>
+                      {#if e.source === 'suggestion' && e._events && e._events.length > 0}
+                        <div class="wl-detail-section">
+                          <span class="wl-detail-label">{t('journal.relatedEvents')}</span>
+                          {#each e._events as ev}
+                            <div class="journal-event-row">
+                              <span class="journal-event-time">{formatTime(ev.createdAt)}</span>
+                              <span class="journal-event-type">{eventLabel(ev.eventType)}</span>
+                              <span class="journal-event-title">{ev.title}</span>
+                              <button class="link-btn" on:click={() => openActivityTarget(ev)}>{t('common.open')}</button>
+                              {#if ev.targetType === 'file' || ev.eventType.startsWith('file_')}
+                                <button class="link-btn" on:click={() => openNodeFolder(ev.nodeId)}>{t('file.showInExplorer')}</button>
+                              {/if}
+                            </div>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            {/if}
+          </div>
+
+        {:else if activeTab === 'activity'}
+          <div class="activity-tab">
+            {#if caseActivity.length === 0}
+              <div class="empty-state"><p>{t('activity.perCaseEmpty')}</p></div>
+            {:else}
+              <div class="activity-events">
+                {#each caseActivity as ev}
+                  <div class="activity-event" role="button" tabindex="0" on:click={() => openActivityEvent(ev)} on:keydown={(e) => e.key === 'Enter' && openActivityEvent(ev)}>
+                    <span class="activity-event-icon">{eventIcon(ev.eventType)}</span>
+                    <span class="activity-event-title">{ev.title}</span>
+                    {#if ev.nodePath}<span class="activity-event-path">{ev.nodePath}</span>{/if}
+                    <span class="activity-event-type">{eventLabel(ev.eventType)}</span>
+                    {#if ev.targetType}<span class="activity-event-target">{ev.targetType}</span>{/if}
+                    <span class="activity-event-time">{formatTime(ev.createdAt)}</span>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+
+    {:else if selectedSection === 'inbox'}
+      <div class="inbox-screen"
+           class:drop-valid={inboxDropValid}
+           role="region"
+           aria-label={t('nav.inbox')}
+           on:dragover={handleInboxDragOver}
+           on:dragleave={handleInboxDragLeave}
+           on:drop={handleInboxDrop}>
+        <div class="inbox-header">
+          <div>
+            <p>{t('inbox.subtitle')}</p>
+          </div>
+        </div>
+
+        {#if inboxNodes.length > 0}
+          <div class="inbox-controls">
+            <div class="inbox-sort-row">
+              <button class="sort-btn" class:active={inboxSortBy === 'date'} on:click={() => { inboxSortBy = 'date'; inboxSortDir = inboxSortBy === 'date' && inboxSortDir === 'desc' ? 'asc' : 'desc' }}>{t('inbox.sortByDate')}</button>
+              <button class="sort-btn" class:active={inboxSortBy === 'name'} on:click={() => { inboxSortBy = 'name'; inboxSortDir = inboxSortBy === 'name' && inboxSortDir === 'desc' ? 'asc' : 'desc' }}>{t('inbox.sortByName')}</button>
+              <button class="sort-btn" class:active={inboxSortBy === 'type'} on:click={() => { inboxSortBy = 'type'; inboxSortDir = inboxSortBy === 'type' && inboxSortDir === 'desc' ? 'asc' : 'desc' }}>{t('inbox.sortByType')}</button>
+              <span class="sort-dir">{inboxSortDir === 'asc' ? '↑' : '↓'}</span>
+              <span class="inbox-controls-divider"></span>
+              <label class="checkbox-label-inline">
+                <input type="checkbox" bind:checked={inboxGroupByContext} />
+                <span>{t('inbox.groupByContext')}</span>
+              </label>
+            </div>
+          </div>
+        {/if}
+
+        {#if inboxNodes.length === 0}
+          <div class="empty-state">
+            <p>{t('inbox.empty')}</p>
+          </div>
+        {:else if groupedInboxNodes}
+          {#each groupedInboxNodes as group}
+            <div class="inbox-group">
+              <div class="inbox-group-header">{group.label} <span class="inbox-group-count">{group.items.length}</span></div>
+              <div class="inbox-list">
+                {#each group.items as item}
+                  <div class="inbox-item" role="button" tabindex="0" on:click={() => openInboxArtifact(item)} on:keydown={(e) => e.key === 'Enter' && openInboxArtifact(item)}>
+                    <div class="inbox-item-main">
+                      <span class="inbox-item-title">{item.title}</span>
+                      <span class="inbox-item-meta">{inboxMetaText(item)}</span>
+                    </div>
+                    <div class="inbox-item-actions">
+                      {#if item.suggestedTargetNodeId}
+                        <button class="inbox-icon-btn inbox-icon-btn-primary" title={t('inbox.keepHere')} aria-label={t('inbox.keepHere')} on:click|stopPropagation={() => resolveInboxHere(item)}>
+                          {@html actionIcon('attach')}
+                        </button>
+                      {:else}
+                        <span class="inbox-icon-slot" aria-hidden="true"></span>
+                      {/if}
+                      <button class="inbox-icon-btn" title={t('inbox.assign')} aria-label={t('inbox.assign')} on:click|stopPropagation={() => openAssignInbox(item)}>
+                        {@html actionIcon('move')}
+                      </button>
+                      <button class="inbox-icon-btn" title={t('common.open')} aria-label={t('common.open')} on:click|stopPropagation={() => openInboxArtifact(item)}>
+                        {@html actionIcon('open')}
+                      </button>
+                      {#if canShowInboxArtifactInFolder(item)}
+                        <button class="inbox-icon-btn" title={t('file.showInExplorer')} aria-label={t('file.showInExplorer')} on:click|stopPropagation={() => openNodeFolder(item)}>
+                          {@html actionIcon('showInExplorer')}
+                        </button>
+                      {:else}
+                        <span class="inbox-icon-slot" aria-hidden="true"></span>
+                      {/if}
+                      <button class="inbox-icon-btn inbox-icon-btn-danger" title={t('common.delete')} aria-label={t('common.delete')} on:click|stopPropagation={() => confirmDeleteInbox(item)}>
+                        {@html actionIcon('delete')}
+                      </button>
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/each}
+        {:else}
+          <div class="inbox-list">
+            {#each sortedInboxNodes as item}
+              <div class="inbox-item" role="button" tabindex="0" on:click={() => openInboxArtifact(item)} on:keydown={(e) => e.key === 'Enter' && openInboxArtifact(item)}>
+                <div class="inbox-item-main">
+                  <span class="inbox-item-title">{item.title}</span>
+                  <span class="inbox-item-meta">{inboxMetaText(item)}</span>
+                </div>
+                <div class="inbox-item-actions">
+                  {#if item.suggestedTargetNodeId}
+                    <button class="inbox-icon-btn inbox-icon-btn-primary" title={t('inbox.keepHere')} aria-label={t('inbox.keepHere')} on:click|stopPropagation={() => resolveInboxHere(item)}>
+                      {@html actionIcon('attach')}
+                    </button>
+                  {:else}
+                    <span class="inbox-icon-slot" aria-hidden="true"></span>
+                  {/if}
+                  <button class="inbox-icon-btn" title={t('inbox.assign')} aria-label={t('inbox.assign')} on:click|stopPropagation={() => openAssignInbox(item)}>
+                    {@html actionIcon('move')}
+                  </button>
+                  <button class="inbox-icon-btn" title={t('common.open')} aria-label={t('common.open')} on:click|stopPropagation={() => openInboxArtifact(item)}>
+                    {@html actionIcon('open')}
+                  </button>
+                  {#if canShowInboxArtifactInFolder(item)}
+                    <button class="inbox-icon-btn" title={t('file.showInExplorer')} aria-label={t('file.showInExplorer')} on:click|stopPropagation={() => openNodeFolder(item)}>
+                      {@html actionIcon('showInExplorer')}
+                    </button>
+                  {:else}
+                    <span class="inbox-icon-slot" aria-hidden="true"></span>
+                  {/if}
+                  <button class="inbox-icon-btn inbox-icon-btn-danger" title={t('common.delete')} aria-label={t('common.delete')} on:click|stopPropagation={() => confirmDeleteInbox(item)}>
+                    {@html actionIcon('delete')}
+                  </button>
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+    {:else if selectedSection === 'trash'}
+      <div class="trash-screen">
+        <div class="trash-header">
+          <div>
+            <p>{currentTrashPath}</p>
+          </div>
+        </div>
+        {#if !trashInfo || (trashInfo.nodes || []).length === 0}
+          <div class="empty-state">
+            <p>{t('trash.empty')}</p>
+          </div>
+        {:else}
+          <div class="trash-browser">
+            <section class="trash-section">
+              <div class="trash-section-head">
+                {#if trashFolderId}
+                  <button class="inbox-icon-btn" title={t('common.backLabel')} aria-label={t('common.backLabel')} on:click={trashBack}>
+                    {@html actionIcon('back')}
+                  </button>
+                {/if}
+                <div>
+                  <h3>{currentTrashTitle}</h3>
+                  <p>{currentTrashPath}</p>
+                </div>
+              </div>
+              {#if visibleTrashNodes.length === 0}
+                <p class="trash-empty-line">{t('common.empty')}</p>
+              {:else}
+                {#each visibleTrashNodes as node}
+                  <div class="trash-row" class:selected={trashSelectedIds.includes(node.id)} class:folder={node.type !== 'file' && node.type !== 'note'}>
+                    <input type="checkbox" checked={trashSelectedIds.includes(node.id)} on:change={() => toggleTrashSelection(node.id)} />
+                    <span class="trash-row-icon"
+                      role="button" tabindex="0"
+                      title={node.type !== 'file' ? t('file.openFolder') : t('common.open')}
+                      on:click|stopPropagation={() => node.type !== 'file' ? openTrashFolderNode(node) : openTrashFilePreview(node)}
+                      on:keydown={(e) => e.key === 'Enter' && (node.type !== 'file' ? openTrashFolderNode(node) : openTrashFilePreview(node))}>
+                      {@html actionIcon(node.type !== 'file' && node.type !== 'note' ? 'folder' : 'open')}
+                    </span>
+                    <button class="trash-row-main"
+                      title={node.type !== 'file' ? t('file.openFolder') : t('common.open')}
+                      on:click|stopPropagation={() => node.type !== 'file' ? openTrashFolderNode(node) : openTrashFilePreview(node)}
+                      on:keydown={(e) => e.key === 'Enter' && (node.type !== 'file' ? openTrashFolderNode(node) : openTrashFilePreview(node))}>
+                      <span class="trash-row-title">{node.title}</span>
+                      <span class="trash-row-meta">{node.nodePath}</span>
+                      <span class="trash-row-date">{formatDate(node.deletedAt)}</span>
+                    </button>
+                    <div class="trash-row-actions">
+                      <button class="inbox-icon-btn inbox-icon-btn-primary" title={t('trash.restore')} aria-label={t('trash.restore')} on:click={() => restoreTrash(trashSelectionOr(node.id))}>
+                        {@html actionIcon('restore')}
+                      </button>
+                      <button class="inbox-icon-btn inbox-icon-btn-danger" title={t('common.delete')} aria-label={t('common.delete')} on:click={() => purgeTrash(trashSelectionOr(node.id))}>
+                        {@html actionIcon('purge')}
+                      </button>
+                    </div>
+                  </div>
+                {/each}
+              {/if}
+            </section>
+          </div>
+        {/if}
+      </div>
+
+    {:else if selectedSection === 'journal'}
+      <div class="journal-screen">
+        <div class="journal-tabs">
+          <button class="journal-tab" class:active={journalActiveTab === 'suggestions'} on:click={() => journalActiveTab = 'suggestions'}>
+            {t('suggest.title')}
+            {#if suggestionCount > 0}<span class="tab-badge">{suggestionCount}</span>{/if}
+          </button>
+          <button class="journal-tab" class:active={journalActiveTab === 'worklog'} on:click={() => journalActiveTab = 'worklog'}>
+            {t('journal.worklogTab')}
+          </button>
+        </div>
+
+        {#if journalActiveTab === 'suggestions'}
+          {#if suggestions.length === 0}
+            <div class="empty-state"><p>{t('suggest.noSuggestions')}</p></div>
+          {:else}
+            <div class="journal-suggestions">
+              {#each suggestions as s}
+                <div class="suggestion-card" class:expanded={s._expanded}>
+                  <div class="suggestion-main" on:click={() => s._expanded = !s._expanded} role="button" tabindex="0" on:keydown={(e) => e.key === 'Enter' && (s._expanded = !s._expanded)}>
+                    <div class="suggestion-info">
+                      <button class="suggestion-node link-btn" on:click|stopPropagation={() => openNodeById(s.nodeId)}>{s.nodeTitle}</button>
+                      <span class="suggestion-summary">{s.summary}</span>
+                      <span class="suggestion-meta">{s.suggestedMin} {t('worklog.min')}{#if s.events && s.events.length > 0} · {s.events.length} {t('suggest.detectedEvents')}{/if}</span>
+                    </div>
+                    <div class="suggestion-actions">
+                      <span class="suggestion-confidence-dot" class:low={s.confidence === 'low'} class:medium={s.confidence === 'medium'} class:high={s.confidence === 'high'} title={t('suggest.confidence.' + s.confidence)} aria-label={t('suggest.confidence.' + s.confidence)}></span>
+                      <input type="number" class="suggestion-min-input" value={s.suggestedMin} min="1" max="480"
+                        on:change|stopPropagation={(e) => s.suggestedMin = parseInt(e.target.value)} />
+                      <span class="suggestion-min-label">{t('suggest.minutes')}</span>
+                      <button class="btn btn-sm" on:click|stopPropagation={() => openSuggestionWorklogModal(s)}>{t('suggest.edit')}</button>
+                      <button class="btn btn-sm btn-primary" on:click|stopPropagation={() => acceptJournalSuggestion(s)}>{t('suggest.apply')}</button>
+                      <button class="btn btn-sm btn-danger" on:click|stopPropagation={() => deleteSuggestion(s)}>{t('common.delete')}</button>
+                    </div>
+                  </div>
+                  {#if s._expanded && s.events && s.events.length > 0}
+                    <div class="suggestion-detail">
+                      <div class="suggestion-detail-title">{t('suggest.detectedEvents')}</div>
+                      {#each s.events as ev}
+                        <div class="suggestion-detail-event">
+                          <span class="suggestion-event-time">{formatTime(ev.createdAt)}</span>
+                          {#if ev.nodePath}<span class="suggestion-event-path">{ev.nodePath}</span>{/if}
+                          <span class="suggestion-event-type">{eventLabel(ev.eventType)}</span>
+                          <span class="suggestion-event-title">{ev.title}</span>
+                          <button class="link-btn" on:click={() => openActivityTarget(ev)}>{t('common.open')}</button>
+                          {#if ev.targetType === 'file' || ev.eventType.startsWith('file_')}
+                            <button class="link-btn" on:click={() => openNodeFolder(ev.nodeId)}>{t('file.showInExplorer')}</button>
+                          {/if}
+                        </div>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          {/if}
+        {:else}
+          {#if journalSummary}
+            <div class="journal-summary">
+              <div class="summary-total">{t('journal.total')}: {Math.floor(journalSummary.totalMinutes / 60)}ч {journalSummary.totalMinutes % 60}м ({journalSummary.totalEntries} {t('worklog.min')})</div>
+              {#if journalSummary.byDay && journalSummary.byDay.length > 0}
+                <div class="summary-section">
+                  <div class="summary-label">{t('journal.byDay')}</div>
+                  {#each journalSummary.byDay as g}
+                    <div class="summary-row"><span>{g.label}</span><span>{Math.floor(g.minutes / 60)}ч {g.minutes % 60}м</span><span class="summary-count">{g.count}</span></div>
+                  {/each}
+                </div>
+              {/if}
+              {#if journalSummary.byNode && journalSummary.byNode.length > 0}
+                <div class="summary-section">
+                  <div class="summary-label">{t('journal.byNode')}</div>
+                  {#each journalSummary.byNode as g}
+                    <div class="summary-row"><span>{g.label}</span><span>{Math.floor(g.minutes / 60)}ч {g.minutes % 60}м</span><span class="summary-count">{g.count}</span></div>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {/if}
+
+          <div class="journal-header">
+            <div class="journal-export-section">
+              <div class="journal-export-heading">{t('journal.exportHeading')}</div>
+              <div class="journal-export-row">
+                <button class="btn btn-sm" on:click={() => saveJournalReport('csv')}>{t('journal.exportCSV')}</button>
+                <button class="btn btn-sm" on:click={() => saveJournalReport('markdown')}>{t('journal.exportMarkdown')}</button>
+                <button class="btn btn-sm" on:click={() => saveJournalReport('pdf')}>PDF</button>
+                {#if journalStatusMsg}
+                  <span class="journal-status-msg">{journalStatusMsg}</span>
+                {/if}
+              </div>
+            </div>
+            <div class="journal-filter-section">
+              <div class="journal-filter-heading">{t('journal.filterHeading')}</div>
+              <div class="journal-filters-row">
+                <label><span class="label-text">{t('journal.dateFrom')}</span>
+                  <input type="date" bind:value={journalDateFrom} />
+                </label>
+                <label><span class="label-text">{t('journal.dateTo')}</span>
+                  <input type="date" bind:value={journalDateTo} />
+                </label>
+                <label><span class="label-text">{t('journal.node')}</span>
+                  <div class="journal-node-picker" style="position:relative">
+                    {#if journalFilteredNodeTitle}
+                      <button class="journal-selected-node" on:click={() => { journalSearchQuery = ''; journalFilteredNodeTitle = ''; clearJournalNode() }}>
+                        {journalFilteredNodeTitle} <span class="journal-node-clear">✕</span>
+                      </button>
+                    {:else}
+                      <input type="text" placeholder={t('journal.nodeSearch')} bind:value={journalSearchQuery}
+                        on:input={onJournalSearchInput} on:blur={() => setTimeout(() => journalShowResults = false, 200)} />
+                      {#if journalShowResults}
+                        <div class="journal-search-dropdown">
+                          {#each journalSearchResults as r}
+                            <button class="journal-search-item" on:click={() => selectJournalNode(r)}>
+                              <span class="journal-search-title">{r.title}</span>
+                              <span class="journal-search-path">{r.path}</span>
+                            </button>
+                          {/each}
+                        </div>
+                      {/if}
+                    {/if}
+                  </div>
+                </label>
+                {#if journalNodeID}
+                  <label class="checkbox-label">
+                    <input type="checkbox" bind:checked={journalIncludeChildren} class="journal-include-chk" />
+                    <span>{t('journal.includeChildren')}</span>
+                  </label>
+                {/if}
+                <label title={t('journal.billableHint')}>
+                  <span class="label-text">{t('journal.billable')}</span>
+                  <select bind:value={journalBillableFilter}>
+                    <option value="all">{t('common.all')}</option>
+                    <option value="yes">{t('journal.billableYes')}</option>
+                    <option value="no">{t('journal.billableNo')}</option>
+                  </select>
+                </label>
+                <label title={t('journal.approxHint')}>
+                  <span class="label-text">{t('journal.approx')}</span>
+                  <select bind:value={journalApproxFilter}>
+                    <option value="all">{t('common.all')}</option>
+                    <option value="no">{t('journal.approxExact')}</option>
+                    <option value="yes">{t('journal.approxEstimated')}</option>
+                  </select>
+                </label>
+                <button class="btn btn-sm" on:click={loadJournal}>{t('journal.filter')}</button>
+                <button class="btn btn-sm" on:click={resetJournalFilters}>{t('journal.reset')}</button>
+              </div>
+            </div>
+          </div>
+
+          {#if journalRows.length === 0}
+            <div class="empty-state"><p>{t('journal.empty')}</p></div>
+          {:else}
+            <div class="journal-table-wrap">
+              <table class="journal-table">
+                <thead>
+                  <tr>
+                    <th class="journal-toggle-col"></th>
+                    <th>{t('journal.title')}</th>
+                    <th>{t('journal.node')}</th>
+                    <th>{t('journal.path')}</th>
+                    <th>{t('worklog.minutes')}</th>
+                    <th>{t('journal.billable')}</th>
+                    <th>{t('journal.approx')}</th>
+                    <th>{t('common.date')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each journalRows as r}
+                    <tr class="journal-row" class:expanded={r._expanded} on:click={() => toggleJournalRow(r)} role="button" tabindex="0" on:keydown={(e) => e.key === 'Enter' && toggleJournalRow(r)}>
+                      <td class="journal-toggle-col"><span class="journal-toggle-icon">{r._expanded ? '▾' : '▸'}</span></td>
+                      <td class="journal-summary-cell">{r.summary}</td>
+                      <td><button class="link-btn" on:click|stopPropagation={() => openNodeById(r.nodeId)}>{r.nodeTitle}</button></td>
+                      <td class="journal-path-cell">{r.nodePath}</td>
+                      <td class="journal-min-cell">{r.minutes}</td>
+                      <td class="journal-bool-cell">{#if r.billable}✓{/if}</td>
+                      <td class="journal-bool-cell">{#if r.approximate}~{/if}</td>
+                      <td class="journal-date-cell">{r.date}</td>
+                    </tr>
+                    {#if r._expanded}
+                      <tr class="journal-row-detail">
+                        <td colspan="8">
+                          <div class="journal-detail-body">
+                            <div class="journal-detail-actions">
+                              <button class="btn btn-sm" on:click|stopPropagation={() => openWorklogModal(r)}>{t('worklog.editEntry')}</button>
+                              <button class="btn btn-sm btn-danger" on:click|stopPropagation={() => deleteWorklogEntry(r)}>{t('worklog.deleteEntry')}</button>
+                            </div>
+                            {#if r.details}
+                              <div class="journal-detail-section">
+                                <span class="journal-detail-label">{t('worklog.details')}</span>
+                                <p>{r.details}</p>
+                              </div>
+                            {/if}
+                            <div class="journal-detail-section">
+                              <span class="journal-detail-label">{t('worklog.source')}</span>
+                              {#if r.source === 'manual'}
+                                <p>{t('worklog.sourceManual')}</p>
+                              {:else if r.source === 'suggestion' && r._events && r._events.length > 0}
+                                <p>{t('worklog.sourceSuggestion')}</p>
+                              {:else if r.source === 'suggestion'}
+                                <p>{t('worklog.sourceSuggestionNoEvents')}</p>
+                              {:else if r.source === 'unknown' || r.source === 'imported'}
+                                <p>{t('worklog.sourceUnknown')}</p>
+                              {:else if r._hasEvents}
+                                <p>{t('worklog.sourceSuggestion')}</p>
+                              {:else}
+                                <p>{t('worklog.sourceUnknown')}</p>
+                              {/if}
+                            </div>
+                            {#if r._events}
+                              <div class="journal-detail-section">
+                                <span class="journal-detail-label">{t('journal.relatedEvents')}</span>
+                                {#each r._events as ev}
+                                  <div class="journal-event-row">
+                                    <span class="journal-event-time">{formatTime(ev.createdAt)}</span>
+                                    <span class="journal-event-type">{eventLabel(ev.eventType)}</span>
+                                    <span class="journal-event-title">{ev.title}</span>
+                                    <button class="link-btn" on:click={() => openActivityTarget(ev)}>{t('common.open')}</button>
+                                  </div>
+                                {/each}
+                              </div>
+                            {/if}
+                          </div>
+                        </td>
+                      </tr>
+                    {/if}
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+          {/if}
+        {/if}
+      </div>
+
+    {:else if selectedSection === 'today'}
+      {#if todayDashboard}
+        <TodayScreen
+          {todayDashboard}
+          {suggestions}
+          {inProgressItems}
+          {todayCaptures}
+          suggestionCount={suggestions.length}
+          {formatTime}
+          {eventLabel}
+          {eventIcon}
+          {inboxMetaText}
+          onOpenNodeById={(id) => openNodeById(id)}
+          onOpenActivityEvent={(ev) => openActivityEvent(ev)}
+          onOpenActivityTarget={(ev) => openActivityTarget(ev)}
+          onOpenSuggestionWorklog={(s) => openSuggestionWorklogModal(s)}
+          onAcceptSuggestion={(s) => acceptTodaySuggestion(s)}
+          onDeleteSuggestion={(s) => deleteSuggestion(s)}
+          onOpenNodeFolder={(id) => openNodeFolder(id)}
+          onOpenInboxArtifact={(item) => openInboxArtifact(item)}
+          onOpenTrashNode={(nodeId) => { selectSystemView('trash'); openTrashFolderNode({ id: nodeId, title: '' }); refreshTrash() }}
+          {browserEvents}
+          {browserLoading}
+          onBrowserAccept={acceptBrowserEvent}
+          onBrowserDismiss={dismissBrowserEvent}
+          onBrowserAttach={attachBrowserEvent}
+          onBrowserRefresh={loadBrowserEvents}
+        />
+      {:else}
+        <div class="today-empty">
+          <p>{t('today.empty')}</p>
+          <p class="hint">{t('today.emptyHint')}</p>
+        </div>
+      {/if}
+
+    {:else if selectedSection === 'activity'}
+      <div class="activity-feed">
+        {#if activityFeed.length === 0}
+          <div class="empty-state"><p>{t('activity.empty')}</p></div>
+        {:else}
+          <div class="activity-feed-events">
+            {#each activityFeed as ev}
+              <div class="activity-feed-event" role="button" tabindex="0" on:click={() => openActivityEvent(ev)} on:keydown={(e) => e.key === 'Enter' && openActivityEvent(ev)}>
+                <span class="activity-feed-icon">{eventIcon(ev.eventType)}</span>
+                <div class="activity-feed-body">
+                  <span class="activity-feed-title">{ev.title}</span>
+                  <div class="activity-feed-meta">
+                    <span class="activity-feed-type">{eventLabel(ev.eventType)}</span>
+                    {#if ev.targetType}<span class="activity-feed-target">{ev.targetType}</span>{/if}
+                    <span class="activity-feed-time">{formatDate(ev.createdAt)} {formatTime(ev.createdAt)}</span>
+                  </div>
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+    {:else if selectedSection && selectedSection.startsWith('plugin:')}
+      <CalendarPluginPage sectionId={selectedSection} />
+
+    {:else}
+      <div class="welcome">
+        <h2>{t('welcome.title')}</h2>
+        {#if loading}<p>{t('common.loading')}</p>
+        {:else if systemViews.length > 0}
+          <p>{t('welcome.selectSection')}</p>
+          <p class="hint">{t('welcome.createCase')}</p>
+        {:else if error}<p class="error-text">{t('common.error')} {error}</p>{/if}
+      </div>
+    {/if}
+
+    {#if showCreateNode}
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelCreateNode} on:keydown={onKeyActivate(cancelCreateNode)}>
+        <div class="modal modal-create">
+          <h3>{t('nav.createNode')}</h3>
+          {#if createInNode}
+            <div class="create-context">{t('nav.createInside')} «{createInNode.title}»</div>
+          {/if}
+          <div class="form-group">
+            <span class="form-label">{t('template.select')}</span>
+            <div class="template-cards" role="group" aria-label={t('template.select')}>
+              <button class="template-card" class:selected={createWithTemplate === null}
+                      on:click={() => createWithTemplate = null}>
+                <TemplateIcon kind="folder" size={24} />
+                <div class="template-card-text">
+                  <span class="template-card-title">{t('template.optionNone')}</span>
+                  <span class="template-card-desc">{t('template.none.desc')}</span>
+                </div>
+              </button>
+              {#each enabledTemplates as tpl}
+                <button class="template-card" class:selected={createWithTemplate?.id === tpl.id}
+                        on:click={() => createWithTemplate = tpl}>
+                  <TemplateIcon kind={tpl.icon || 'generic'} size={24} />
+                  <div class="template-card-text">
+                    <span class="template-card-title">{t(tpl.title)}</span>
+                    <span class="template-card-desc">{t(tpl.title + '.desc')}</span>
+                  </div>
+                </button>
+              {/each}
+            </div>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">{t('common.name')}</span>
+            <input type="text" placeholder={t('case.namePlaceholder')} bind:value={newNodeTitle}
+                   on:keydown={(e) => e.key === 'Enter' && submitCreateNode()} />
+            </label>
+          </div>
+          <div class="modal-actions">
+            <button class="btn btn-primary" on:click={submitCreateNode}
+                    disabled={!newNodeTitle.trim() || createWithTemplate === undefined}>{t('common.create')}</button>
+            <button class="btn" on:click={cancelCreateNode}>{t('common.cancel')}</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if contextMenu.visible}
+      <div class="context-menu-backdrop" role="button" tabindex="0" on:click={closeContextMenu} on:contextmenu|preventDefault={closeContextMenu} on:keydown={onKeyActivate(closeContextMenu)}>
+        <div class="context-menu" style="left: {contextMenu.x}px; top: {contextMenu.y}px">
+          {#if contextMenu.node && ['folder','project','client','document','recipe'].includes(contextMenu.node.type)}
+            <div class="context-menu-section">{t('common.create')}</div>
+            {#each (enabledTemplates.length > 0 ? enabledTemplates : [{ id: '', title: 'template.optionNone', icon: 'folder' }]) as tpl}
+              <button class="context-menu-item" on:click={() => openCreateInNode(tpl)}>
+                <TemplateIcon kind={tpl.icon || 'folder'} size={16} />
+                <span>{t(tpl.title)}</span>
+              </button>
+            {/each}
+            <div class="context-menu-divider"></div>
+          {/if}
+          {#if contextMenu.node && contextMenu.node.parent_id}
+            <button class="context-menu-item" on:click={() => moveNodeToRoot(contextMenu.node)}>
+              {t('nav.moveToRoot')}
+            </button>
+            <div class="context-menu-divider"></div>
+          {/if}
+          <button class="context-menu-item" on:click={() => openRenameForNode(contextMenu.node)}>
+            {t('common.rename')}
+          </button>
+          <button class="context-menu-item danger" on:click={() => deleteWorkspaceNode(contextMenu.node)}>
+            {t('common.delete')}
+          </button>
+          <button class="context-menu-item" on:click={() => openNodeFolder(contextMenu.node)}>
+            {t('file.showInExplorer')}
+          </button>
+        </div>
+      </div>
+    {/if}
+
+    {#if showWorklogModal}
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={closeWorklogModal} on:keydown={onKeyActivate(closeWorklogModal)}>
+        <div class="modal modal-worklog">
+          <h3>{acceptingSuggestion ? t('worklog.acceptSuggestion') : editingWorklogEntry ? t('worklog.editEntry') : t('worklog.addEntry')}</h3>
+          <div class="form-group">
+            <label><span class="label-text">{t('worklog.date')}</span>
+              <input type="date" bind:value={wlModalDate} />
+            </label>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">{t('worklog.whatDone')}</span>
+              <input type="text" placeholder={t('worklog.whatDone')} bind:value={wlModalSummary} />
+            </label>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">{t('worklog.minutes')}</span>
+              <input type="number" bind:value={wlModalMinutes} min="1" />
+            </label>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">{t('worklog.details')}</span>
+              <textarea bind:value={wlModalDetails}></textarea>
+            </label>
+          </div>
+          <div class="form-row">
+            <label class="checkbox-label-inline">
+              <input type="checkbox" bind:checked={wlModalBillable} />
+              <span>{t('journal.billableYes')}</span>
+            </label>
+            <label class="checkbox-label-inline">
+              <input type="checkbox" bind:checked={wlModalApprox} />
+              <span>{t('journal.approxEstimated')}</span>
+            </label>
+          </div>
+          <div class="modal-actions">
+            <button class="btn btn-primary" on:click={submitWorklogModal}
+                    disabled={!wlModalSummary.trim() || !wlModalMinutes}>{t('common.save')}</button>
+            <button class="btn" on:click={closeWorklogModal}>{t('common.cancel')}</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if showCreateAction}
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelCreateAction} on:keydown={onKeyActivate(cancelCreateAction)}>
+        <div class="modal">
+          <h3>{t('action.newAction')}</h3>
+          <div class="form-group">
+            <label><span class="label-text">{t('common.name')}</span>
+            <input type="text" placeholder={t('action.namePlaceholder')} bind:value={newActionTitle}
+                   on:keydown={(e) => e.key === 'Enter' && submitCreateAction()} />
+            </label>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">{t('common.type')}</span>
+            <select bind:value={newActionKind}>
+              {#each actionKinds as k}
+                <option value={k.id}>{k.label}</option>
+              {/each}
+            </select>
+            </label>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">{newActionKind === 'open_url' ? t('action.dataUrl') : newActionKind === 'open_folder' || newActionKind === 'open_file' ? t('action.dataPath') : t('action.dataCommand')}</span>
+            <input type="text" placeholder={newActionKind === 'open_url' ? t('action.urlPlaceholder') : newActionKind === 'open_folder' || newActionKind === 'open_file' ? t('action.pathPlaceholder') : t('action.commandPlaceholder')}
+                   bind:value={newActionData}
+                   on:keydown={(e) => e.key === 'Enter' && submitCreateAction()} />
+            </label>
+          </div>
+          <div class="modal-actions">
+            <button class="btn btn-primary" on:click={submitCreateAction}>{t('common.create')}</button>
+            <button class="btn" on:click={cancelCreateAction}>{t('common.cancel')}</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if showImportDialog && importSummary}
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelImport} on:keydown={onKeyActivate(cancelImport)}>
+        <div class="modal">
+          <h3>{t('file.importTitle')} «{selectedNode ? selectedNode.title : ''}»</h3>
+          <div class="import-summary">
+            <div class="summary-row"><span>{t('file.importFiles')}</span><span>{importSummary.files}</span></div>
+            <div class="summary-row"><span>{t('file.importFolders')}</span><span>{importSummary.folders}</span></div>
+            <div class="summary-row"><span>{t('file.importSize')}</span><span>{(importSummary.totalBytes / 1024).toFixed(1)} KB</span></div>
+            {#if importSummary.isDangerous}
+              <div class="summary-warn">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                {importSummary.dangerReason}
+              </div>
+            {/if}
+          </div>
+          <div class="modal-actions">
+            <button class="btn btn-primary" on:click={() => confirmImport('copy')}>{t('file.importCopy')}</button>
+            <button class="btn" on:click={() => confirmImport('link')}>{t('file.importLink')}</button>
+            <button class="btn" on:click={cancelImport}>{t('common.cancel')}</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if showRename}
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelRename} on:keydown={onKeyActivate(cancelRename)}>
+        <div class="modal">
+          <h3>{t('rename.title')}</h3>
+          <div class="form-group">
+            <label><span class="label-text">{t('common.newName')}</span>
+            <input type="text" bind:value={renameValue}
+                   on:keydown={onRenameKeydown} />
+            </label>
+          </div>
+          {#if renameError}
+            <div class="rename-error">{renameError}</div>
+          {/if}
+          <div class="modal-actions">
+            <button class="btn btn-primary" on:click={submitRename}>{t('common.rename')}</button>
+            <button class="btn" on:click={cancelRename}>{t('common.cancel')}</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if assignInboxItem}
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={closeAssignInbox} on:keydown={onKeyActivate(closeAssignInbox)}>
+        <div class="modal">
+          <h3>{t('inbox.assignTitle')}</h3>
+          <div class="create-context">{assignInboxItem.title}</div>
+          <div class="form-group assign-search">
+            <label><span class="label-text">{t('inbox.assignTarget')}</span>
+              <input type="text" placeholder={t('inbox.assignSearchPlaceholder')} bind:value={inboxAssignQuery}
+                     on:input={onInboxAssignSearchInput}
+                     on:keydown={(e) => e.key === 'Enter' && inboxAssignTarget && submitAssignInbox()} />
+              <div class="assign-hint">{t('inbox.assignSearchHint')}</div>
+            </label>
+            {#if inboxAssignResults.length > 0}
+              <div class="assign-search-results">
+                {#each inboxAssignResults as result}
+                  <button class="assign-search-result" on:click={() => selectInboxAssignTarget(result)}>
+                    <span>{result.path || result.title}</span>
+                    <span>{nodeKindLabel(result.type)}</span>
+                  </button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+          {#if inboxAssignSearching}
+            <div class="assign-status">{t('common.loading')}</div>
+          {/if}
+          <div class="modal-actions">
+            <button class="btn btn-primary" on:click={submitAssignInbox} disabled={!inboxAssignTarget}>{t('inbox.assign')}</button>
+            <button class="btn" on:click={closeAssignInbox}>{t('common.cancel')}</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if editingLink}
+      <div class="modal-overlay" role="button" tabindex="0" on:click|self={closeEditLink} on:keydown={onKeyActivate(closeEditLink)}>
+        <div class="modal">
+          <h3>{t('links.editTitle')}</h3>
+          <div class="form-group">
+            <label><span class="label-text">{t('common.name')}</span>
+              <input type="text" bind:value={linkTitle} />
+            </label>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">URL</span>
+              <input type="url" bind:value={linkURL} />
+            </label>
+          </div>
+          <div class="form-group">
+            <label><span class="label-text">{t('links.note')}</span>
+              <textarea bind:value={linkNote}></textarea>
+            </label>
+          </div>
+          {#if linkStatus}
+            <div class="rename-error">{linkStatus}</div>
+          {/if}
+          <div class="modal-actions">
+            <button class="btn btn-primary" on:click={submitEditLink} disabled={!linkURL.trim()}>{t('common.save')}</button>
+            <button class="btn" on:click={closeEditLink}>{t('common.cancel')}</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if showConfirm}
+      <ConfirmModal
+        title={confirmTitle}
+        message={confirmMessage}
+        confirmText={confirmText}
+        danger={confirmDanger}
+        on:confirm={handleConfirm}
+        on:cancel={handleCancel}
+      />
+    {/if}
+
+    {#if previewItem}
+      <FilePreviewModal
+        item={previewItem}
+        content={previewContent}
+        loading={previewLoading}
+        error={previewError}
+        on:close={closePreview}
+        on:openExternal={(e) => wailsCall('OpenFile', e.detail)}
+      />
+    {/if}
+
+    {#if showSettings}
+      <SettingsWindow onClose={closeSettings} onSyncRefresh={loadSyncStatus} onPluginToggle={refreshSystemViews} initialSection={settingsInitialSection} />
+    {/if}
+  </main>
+</div>
+{/if}
+
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+.app { display: flex; width: 100vw; height: 100vh; overflow: hidden; background: #13131f; color: #e4e4ef; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; }
+.capture-drop-overlay { position: fixed; inset: 0; z-index: 120; pointer-events: none; display: flex; align-items: center; justify-content: center; background: rgba(19, 19, 31, 0.42); border: 2px dashed #818cf8; }
+.capture-drop-box { max-width: min(520px, calc(100vw - 48px)); padding: 14px 18px; border: 1px solid #3a3a5c; border-radius: 8px; background: #1a1a28; color: #e4e4ef; font-size: 14px; font-weight: 600; box-shadow: 0 12px 32px rgba(0,0,0,0.35); text-align: center; }
+
+/* Sidebar */
+.sidebar { width: 260px; min-width: 200px; height: 100vh; display: flex; flex-direction: column; background: #1a1a28; border-right: 1px solid #2a2a3c; flex-shrink: 0; overflow: hidden; }
+.sidebar-brand { padding: 16px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #2a2a3c; flex-shrink: 0; }
+.logo { display: block; width: 20px; height: 20px; flex-shrink: 0; }
+.brand-name { font-size: 16px; font-weight: 600; }
+.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
+.nav-group { margin-bottom: 16px; }
+.nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; padding: 4px 20px; margin-bottom: 4px; }
+.nav-item { display: block; width: 100%; padding: 8px 20px; border: none; background: none; color: #ccc; font-size: 13px; text-align: left; cursor: pointer; border-radius: 0; font-family: inherit; }
+.nav-item:hover { background: #222233; }
+.nav-item.selected { background: #2a2a4a; color: #fff; font-weight: 500; }
+.workspace-tree-area { min-height: 32px; }
+.workspace-tree-area.drop-valid { outline: 2px dashed #4ade80; outline-offset: -2px; background: rgba(74, 222, 128, 0.05); }
+.nav-empty { padding: 8px 20px; color: #555; font-size: 12px; }
+.nav-label-row { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; padding: 4px 20px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
+.nav-add-btn { background: none; border: none; color: #666; cursor: pointer; font-size: 16px; padding: 0 4px; font-family: inherit; line-height: 1; }
+.nav-add-btn:hover { color: #ccc; }
+
+/* Context menu */
+.context-menu-backdrop { position: fixed; inset: 0; z-index: 200; }
+.context-menu { position: fixed; background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 8px; padding: 4px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
+.context-menu-section { padding: 6px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; }
+.context-menu-item { display: flex; width: 100%; padding: 6px 12px; border: none; background: none; color: #ccc; font-size: 13px; text-align: left; cursor: pointer; border-radius: 4px; font-family: inherit; align-items: center; gap: 6px; }
+.context-menu-item:hover { background: #222233; color: #fff; }
+.context-menu-item.danger { color: #ff6b6b; }
+.context-menu-item.danger:hover { background: #3a2222; color: #ff6b6b; }
+.context-menu-divider { height: 1px; background: #2a2a3c; margin: 4px 0; }
+
+.create-context { font-size: 12px; color: #888; margin-bottom: 12px; }
+
+.sidebar-footer { padding: 8px 12px; border-top: 1px solid #2a2a3c; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
+.sidebar-footer-row { display: flex; align-items: center; justify-content: space-between; }
+.version { font-size: 11px; color: #555; text-align: center; }
+
+/* Main */
+.main { flex: 1; display: flex; flex-direction: column; height: 100vh; min-width: 0; overflow: hidden; background: #13131f; }
+.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
+.sidebar-settings-btn { background: transparent; border: none; border-radius: 6px; padding: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #666; font-family: inherit; width: 32px; height: 32px; }
+.sidebar-settings-btn:hover { background: #1e1e38; color: #a5b4fc; }
+.sidebar-settings-btn:active { background: #252545; color: #818cf8; }
+
+.error-banner { background: #3a2222; color: #ff8888; padding: 8px 24px; font-size: 12px; border-bottom: 1px solid #4a2222; flex-shrink: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
+.dismiss-btn { background: none; border: none; color: #ff6666; cursor: pointer; padding: 2px; display: flex; align-items: center; border-radius: 2px; }
+.dismiss-btn:hover { color: #ff4444; }
+
+/* Tabs */
+.tabs { display: flex; align-items: stretch; border-bottom: 1px solid #2a2a3c; flex-shrink: 0; padding: 0 24px; }
+.tab { padding: 10px 16px; border: none; background: none; color: #888; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
+.tab:hover { color: #a5b4fc; }
+.tab.active { color: #e4e4ef; border-bottom-color: #818cf8; background: rgba(99,102,241,0.12); font-weight: 600; }
+.tab-separator { width: 1px; height: 22px; margin: 8px 10px 0; background: #2a2a3c; flex-shrink: 0; }
+
+/* Tab content */
+.tab-content { flex: 1; overflow-y: auto; }
+
+/* Note editor */
+.note-editor { flex: 1; display: flex; flex-direction: column; height: 100%; }
+.note-editor-header { padding: 12px 24px; border-bottom: 1px solid #2a2a3c; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
+.note-title { font-size: 16px; font-weight: 500; }
+.dirty-mark { color: #f59e0b; font-size: 10px; }
+.note-editor-actions { margin-left: auto; display: flex; gap: 8px; }
+.note-rename-btn { opacity: 0; margin-left: 6px; color: #666; }
+.note-editor-header:hover .note-rename-btn { opacity: 1; }
+.note-rename-btn:hover { color: #ccc; }
+.note-rename-inline { display: flex; align-items: center; gap: 8px; flex: 1; }
+.note-rename-input { flex: 1; padding: 6px 10px; border: 1px solid #2a2a3c; border-radius: 4px; background: #13131f; color: #e4e4ef; font-size: 14px; font-family: inherit; outline: none; }
+.note-rename-input:focus { border-color: #818cf8; }
+
+/* Note card actions */
+.note-card { position: relative; }
+.note-card-info { flex: 1; min-width: 0; }
+.note-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; }
+.note-card:hover .note-card-actions { opacity: 1; }
+.note-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent; color: #666; cursor: pointer; transition: background 0.12s, color 0.12s; }
+.note-action-btn:hover { background: #2a2a3c; color: #ccc; }
+.note-action-danger:hover { background: rgba(239, 68, 68, 0.15); color: #f87171; }
+
+/* Form groups in modals */
+.form-group { margin-bottom: 14px; }
+.form-group label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
+.form-group input { width: 100%; padding: 8px 12px; border: 1px solid #2a2a3c; border-radius: 4px; background: #13131f; color: #e4e4ef; font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; }
+.form-group input:focus { border-color: #818cf8; }
+.note-textarea { flex: 1; width: 100%; border: none; outline: none; background: #13131f; color: #e4e4ef; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 14px; line-height: 1.6; padding: 24px; resize: none; }
+
+/* Overview */
+.overview { padding: 24px; }
+.overview h2 { font-size: 24px; margin-bottom: 16px; }
+.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.meta-item { background: #1a1a28; padding: 12px 16px; border-radius: 8px; }
+.meta-label { display: block; font-size: 11px; color: #666; margin-bottom: 4px; text-transform: uppercase; }
+.quick-actions { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
+.qa-btn { padding: 10px 16px; border: 1px solid #2a2a3c; background: #1a1a28; color: #ccc; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
+.qa-btn:hover { background: #222233; }
+.qa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.recent-section { margin-bottom: 24px; }
+.recent-section h3 { font-size: 13px; color: #666; text-transform: uppercase; margin-bottom: 8px; }
+.recent-note { padding: 8px 12px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; }
+.recent-note:hover { background: #1a1a28; }
+.recent-date { font-size: 11px; color: #555; }
+.recent-entry { padding: 6px 0; font-size: 13px; color: #888; border-bottom: 1px solid #1a1a28; }
+
+/* Notes tab */
+.notes-tab { padding: 24px; }
+.tab-toolbar { margin-bottom: 16px; }
+.create-form { background: #1a1a28; padding: 16px; border-radius: 8px; margin-bottom: 16px; }
+.create-form input { width: 100%; padding: 8px 12px; border: 1px solid #2a2a3c; background: #13131f; color: #e4e4ef; border-radius: 4px; font-size: 14px; font-family: inherit; margin-bottom: 8px; }
+.create-form input:focus { outline: none; border-color: #6366f1; }
+.form-actions { display: flex; gap: 8px; }
+.notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+.note-card { background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 8px; padding: 16px; cursor: pointer; }
+.note-card:hover { border-color: #3a3a5c; }
+.note-card-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
+.note-card-date { font-size: 11px; color: #555; }
+
+/* Worklog tab */
+.worklog-tab { padding: 24px; }
+.worklog-toolbar { margin-bottom: 16px; }
+.worklog-entry { padding: 12px 0; border-bottom: 1px solid #1a1a28; }
+.suggestions-title { font-size: 13px; font-weight: 600; color: #a5b4fc; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
+.suggestion-summary { font-size: 14px; color: #e4e4ef; }
+.suggestion-meta { font-size: 12px; color: #8888a0; margin-top: 2px; }
+.suggestion-main { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; cursor: pointer; gap: 10px; min-height: 38px; }
+.suggestion-card.expanded { border-color: #3a3a5c; }
+.suggestion-detail { width: 100%; padding: 6px 10px 8px; border-top: 1px solid #2a2a3c; }
+.suggestion-detail-title { font-size: 10px; font-weight: 600; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.3px; padding: 4px 0; }
+.suggestion-detail-event { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 12px; color: #b0b0c0; }
+.suggestion-event-time { color: #a0a0b8; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 48px; }
+.suggestion-event-type { color: #8888a0; font-size: 11px; background: #1a1a2e; padding: 1px 6px; border-radius: 3px; }
+.suggestion-event-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.suggestion-event-path { max-width: 220px; color: #8ea0d8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Suggestion cards */
+.suggestion-card { display: flex; flex-direction: column; align-items: stretch; padding: 0; background: #1e1e32; border-radius: 6px; margin-bottom: 6px; gap: 0; border: 1px solid transparent; }
+.suggestion-card:last-child { margin-bottom: 0; }
+.suggestion-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
+.suggestion-node { color: #a5b4fc; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; }
+.suggestion-node:hover { text-decoration: underline; }
+.suggestion-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.suggestion-min-input { width: 54px; padding: 3px 7px; border: 1px solid #2a2a3c; background: #13131f; color: #e4e4ef; border-radius: 4px; font-size: 13px; text-align: center; }
+.suggestion-min-label { font-size: 12px; color: #8888a0; }
+.suggestion-confidence-dot { width: 9px; height: 9px; border-radius: 999px; background: #77798a; box-shadow: 0 0 0 3px rgba(119,121,138,0.12); flex: 0 0 auto; }
+.suggestion-confidence-dot.low { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
+.suggestion-confidence-dot.medium { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.12); }
+.suggestion-confidence-dot.high { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,0.12); }
+
+/* Inbox screen */
+.inbox-screen { padding: 24px; overflow-y: auto; flex: 1; }
+.inbox-screen.drop-valid { outline: 2px dashed #4ade80; outline-offset: -4px; background: rgba(74, 222, 128, 0.04); }
+.inbox-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
+.inbox-header p { margin: 0; color: #a0a0b8; font-size: 13px; }
+.inbox-capture-status { color: #8ee6b1; font-size: 12px; }
+.inbox-list { display: flex; flex-direction: column; gap: 8px; }
+.inbox-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #2a2a3c; border-radius: 8px; background: #1a1a28; cursor: pointer; }
+.inbox-item:hover { border-color: #3a3a5c; background: #1e1e32; }
+.inbox-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.inbox-item-title { color: #e4e4ef; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.inbox-item-meta { color: #8888a0; font-size: 12px; }
+.inbox-item-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
+.inbox-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #2a2a3c; border-radius: 6px; background: #13131f; color: #a0a0b8; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; }
+.inbox-icon-slot { width: 30px; height: 30px; display: inline-block; flex: 0 0 30px; }
+.inbox-icon-btn:hover { color: #e4e4ef; border-color: #3a3a5c; background: #222238; }
+.inbox-icon-btn-primary { color: #a5b4fc; border-color: #34346a; }
+.inbox-icon-btn-primary:hover { color: #fff; border-color: #6366f1; background: #272750; }
+.inbox-icon-btn-danger { color: #f87171; border-color: #4a252c; }
+.inbox-icon-btn-danger:hover { color: #fff; border-color: #dc2626; background: #3a1f24; }
+.inbox-tab { padding: 24px; }
+
+/* Inbox sort/group controls */
+.inbox-controls { margin-bottom: 12px; }
+.inbox-sort-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.sort-btn { padding: 4px 10px; border: 1px solid #2a2a3c; background: #13131f; color: #888; border-radius: 4px; font-size: 12px; cursor: pointer; font-family: inherit; }
+.sort-btn:hover { border-color: #3a3a5c; color: #ccc; }
+.sort-btn.active { border-color: #6366f1; color: #a5b4fc; background: rgba(99,102,241,0.08); }
+.sort-dir { font-size: 12px; color: #8888a0; margin-left: 2px; }
+.inbox-controls-divider { width: 1px; height: 20px; background: #2a2a3c; margin: 0 4px; }
+.inbox-group { margin-bottom: 16px; }
+.inbox-group-header { font-size: 12px; font-weight: 600; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 0 6px; margin-bottom: 6px; border-bottom: 1px solid #2a2a3c; display: flex; align-items: center; gap: 8px; }
+.inbox-group-count { font-size: 10px; color: #8888a0; background: #1e1e30; padding: 1px 6px; border-radius: 8px; }
+
+/* Links tab */
+.links-tab { padding: 24px; }
+.links-list { display: flex; flex-direction: column; gap: 8px; }
+.link-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #2a2a3c; border-radius: 8px; background: #1a1a28; }
+.link-card:hover { border-color: #3a3a5c; background: #1e1e32; }
+.link-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(160px, 1fr) minmax(120px, 220px) auto; gap: 8px 12px; align-items: baseline; }
+.link-title { color: #e4e4ef; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.link-url { color: #a5b4fc; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.link-date { color: #8888a0; font-size: 12px; white-space: nowrap; }
+.link-note { grid-column: 1 / -1; color: #8888a0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.link-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.link-status { margin-top: 12px; color: #8ee6b1; font-size: 12px; }
+
+/* Trash screen */
+.trash-screen { padding: 24px; overflow-y: auto; flex: 1; }
+.trash-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
+.trash-header p { margin: 0; color: #8888a0; font-size: 12px; }
+.trash-browser { max-width: 980px; }
+.trash-section { min-width: 0; }
+.trash-section h3 { margin: 0 0 10px; font-size: 13px; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.3px; }
+.trash-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 36px; }
+.trash-section-head h3 { margin: 0 0 2px; }
+.trash-section-head p { margin: 0; color: #8888a0; font-size: 12px; }
+.trash-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #2a2a3c; border-radius: 8px; background: #1a1a28; margin-bottom: 8px; }
+.trash-row.folder { background: #1b2132; border-color: #303856; }
+.trash-row.selected { border-color: #6366f1; background: #20203a; }
+.trash-row-icon { color: #a5b4fc; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; border-radius: 4px; background: transparent; border: none; }
+.trash-row-icon:hover { background: #222238; color: #e4e4ef; }
+.trash-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px 0; cursor: pointer; background: transparent; border: none; color: inherit; font: inherit; text-align: left; width: 100%; border-radius: 4px; }
+.trash-row-main:hover { background: rgba(255,255,255,0.03); }
+.trash-row-main:hover .trash-row-title { color: #a5b4fc; }
+.trash-row-main:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
+.trash-row-title { min-width: 0; color: #e4e4ef; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trash-row-meta { color: #8ea0d8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trash-row-date { color: #666; font-size: 11px; }
+.trash-row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
+.trash-empty-line { color: #8888a0; font-size: 13px; margin: 0; }
+
+/* Journal screen */
+.journal-screen { padding: 24px; overflow-y: auto; flex: 1; }
+.journal-tabs { display: flex; gap: 0; border-bottom: 1px solid #2a2a3c; margin-bottom: 16px; }
+.journal-tab { padding: 10px 16px; border: none; background: none; color: #888; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; position: relative; }
+.journal-tab:hover { color: #a5b4fc; }
+.journal-tab.active { color: #e4e4ef; border-bottom-color: #818cf8; background: rgba(99,102,241,0.12); font-weight: 600; }
+.journal-header { margin-bottom: 24px; }
+.journal-summary { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; padding: 16px; background: #1a1a2e; border-radius: 8px; border: 1px solid #2a2a3c; }
+.summary-total { font-size: 18px; font-weight: 700; color: #e4e4ef; width: 100%; margin-bottom: 4px; }
+.summary-section { flex: 1; min-width: 200px; }
+.summary-label { font-size: 12px; font-weight: 600; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
+.summary-row { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #2a2a3c; }
+.summary-row span:first-child { flex: 1; color: #e4e4ef; }
+.summary-count { color: #8888a0; }
+.journal-table-wrap { overflow-x: auto; }
+.journal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.journal-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid #2a2a3c; color: #b0b0c8; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
+.journal-table td { padding: 8px 12px; border-bottom: 1px solid #1a1a28; color: #e4e4ef; }
+.journal-table tr:hover td { background: #1e1e32; }
+.journal-table .link-btn { color: #a5b4fc; }
+.journal-path-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a0a0b8; font-size: 12px; }
+.journal-min-cell { text-align: right; font-variant-numeric: tabular-nums; }
+.journal-date-cell { color: #b0b0c0; white-space: nowrap; }
+.journal-bool-cell { text-align: center; color: #a0a0b8; }
+.journal-row { cursor: pointer; }
+.journal-row:hover td { background: #1e1e32; }
+.journal-row.expanded td { background: #1a1a30; border-bottom: none; }
+.journal-summary-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.journal-row-detail td { padding: 0 12px 12px; background: #16162a; }
+.journal-detail-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
+.journal-detail-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.journal-detail-section { font-size: 13px; }
+.journal-detail-label { font-size: 11px; font-weight: 600; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 4px; }
+.journal-detail-section p { margin: 0; color: #c0c0d0; }
+.journal-event-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: #b0b0c0; }
+.journal-event-time { color: #a0a0b8; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 48px; }
+.journal-event-type { color: #8888a0; font-size: 11px; background: #1a1a2e; padding: 1px 6px; border-radius: 3px; }
+.journal-event-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.journal-node-picker input[type="text"] { padding: 6px 10px; border: 1px solid #2a2a3c; background: #13131f; color: #e4e4ef; border-radius: 4px; font-size: 13px; font-family: inherit; width: 240px; }
+.journal-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 6px; margin-top: 4px; max-height: 240px; overflow-y: auto; min-width: 260px; }
+.journal-search-item { display: block; width: 100%; padding: 8px 12px; border: none; background: transparent; color: #e4e4ef; cursor: pointer; font-family: inherit; font-size: 13px; text-align: left; }
+.journal-search-item:hover { background: #2a2a4a; }
+.journal-search-title { display: block; font-weight: 500; }
+.journal-search-path { display: block; font-size: 11px; color: #8888a0; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.journal-selected-node { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #1e1e3a; border: 1px solid #3a3a5c; border-radius: 4px; font-size: 13px; color: #a5b4fc; white-space: nowrap; font-family: inherit; }
+.journal-selected-node:hover { background: #2a2a4a; }
+.journal-node-clear { color: #8888a0; font-size: 14px; margin-left: 4px; }
+.journal-status-msg { font-size: 12px; color: #34d399; padding: 4px 8px; background: #1a2a1e; border-radius: 4px; }
+.journal-include-chk { width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer; }
+
+/* Link-style buttons */
+.link-btn { background: none; border: none; padding: 0; color: #a5b4fc; font: inherit; cursor: pointer; text-align: left; }
+.link-btn:hover { text-decoration: underline; }
+
+/* Nav badge */
+.nav-badge { background: #6366f1; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; margin-left: 6px; line-height: 1.4; }
+
+/* Actions */
+.actions-tab { padding: 24px; }
+.action-card { background: #1a1a28; padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
+.action-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
+.action-title { font-weight: 500; }
+.action-type { font-size: 11px; color: #888; background: #222233; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
+.action-data { font-size: 11px; color: #555; font-family: 'SF Mono', 'Fira Code', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
+.action-btns { display: flex; gap: 4px; flex-shrink: 0; }
+.action-btns .btn-danger { color: #ff6b6b; border-color: #4a2222; padding: 4px 8px; }
+.action-btns .btn-danger:hover { background: #3a2222; }
+
+/* Empty states */
+.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
+.empty-state p { margin: 0; font-size: 14px; color: #666; }
+.empty-state .empty-icon { margin-bottom: 12px; color: #444; }
+.empty-state .hint { font-size: 12px; color: #555; margin-top: 6px; }
+.empty-state .empty-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
+
+/* Welcome */
+.welcome { padding: 48px 24px; text-align: center; }
+.welcome h2 { font-size: 32px; font-weight: 300; color: #8888a4; margin-bottom: 16px; }
+.welcome p { color: #666; font-size: 14px; }
+.error-text { color: #ff8888; }
+
+/* Modal */
+.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
+.modal { background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 12px; padding: 24px; width: 400px; max-width: 90vw; }
+.modal h3 { font-size: 18px; margin-bottom: 16px; }
+.modal textarea { width: 100%; padding: 8px 12px; border: 1px solid #2a2a3c; background: #13131f; color: #e4e4ef; border-radius: 4px; font-size: 14px; font-family: inherit; min-height: 60px; resize: vertical; box-sizing: border-box; }
+.modal-worklog { width: 460px; }
+.form-group { margin-bottom: 12px; }
+.form-row { display: flex; gap: 16px; margin-bottom: 12px; }
+.form-group label { display: block; }
+.form-group .label-text, .form-group .form-label { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
+.form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #2a2a3c; background: #13131f; color: #e4e4ef; border-radius: 4px; font-size: 14px; font-family: inherit; }
+.form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
+.form-group input:focus, .form-group select:focus { outline: none; border-color: #6366f1; }
+.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
+.assign-search { position: relative; }
+.assign-search-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 110; margin-top: 4px; background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 6px; max-height: 220px; overflow-y: auto; }
+.assign-search-result { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; border-bottom: 1px solid #24243a; background: transparent; color: #e4e4ef; text-align: left; cursor: pointer; font-family: inherit; }
+.assign-search-result:hover { background: #222238; }
+.assign-search-result span:last-child { color: #8888a0; font-size: 12px; flex-shrink: 0; }
+.assign-hint { color: #8888a0; font-size: 11px; margin-top: 4px; }
+.assign-status { color: #8888a0; font-size: 12px; }
+
+/* Buttons */
+.btn { padding: 8px 16px; border: 1px solid #2a2a3c; background: #1a1a28; color: #ccc; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
+.btn :global(svg), .inbox-icon-btn :global(svg) { flex-shrink: 0; }
+.btn:hover { background: #222233; }
+.btn-primary { background: #6366f1; border-color: #6366f1; color: #fff; }
+.btn-primary:hover { background: #4f46e5; }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-sm { padding: 4px 10px; font-size: 12px; }
+.btn-danger { color: #ff6b6b; border-color: #4a2222; }
+.btn-danger:hover { background: #3a2222; }
+
+/* Dark form controls for settings */
+:global(.settings-section select),
+:global(.settings-section input[type="text"]),
+:global(.settings-section input[type="url"]),
+:global(.settings-section input[type="number"]),
+:global(.settings-section input[type="password"]) {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: #13131f;
+  border: 1px solid #2a2a3e;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 0.9rem;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+:global(.settings-section select) {
+  padding-right: 2rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.6rem center;
+  background-size: 0.85rem;
+}
+:global(.settings-section select:hover),
+:global(.settings-section input:hover) {
+  border-color: #3a3a5e;
+}
+:global(.settings-section select:focus),
+:global(.settings-section input:focus) {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+:global(.settings-section select:disabled),
+:global(.settings-section input:disabled) {
+  opacity: 0.45;
+  cursor: not-allowed;
+  border-color: #2a2a3e;
+}
+:global(.settings-section select option) {
+  background: #1e1e2e;
+  color: #e0e0e0;
+}
+
+/* Files tab */
+.files-tab { padding: 20px; }
+.files-tab .tab-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
+.file-list { display: flex; flex-direction: column; }
+.back-btn { margin-bottom: 4px; display: inline-flex; align-items: center; gap: 4px; }
+
+/* Import summary */
+.import-summary { margin-bottom: 16px; }
+.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px solid #2a2a3c; }
+.summary-warn { margin-top: 8px; padding: 8px 12px; background: #3a2a22; border-radius: 6px; color: #ffaa66; font-size: 13px; }
+
+.rename-error { color: #ff6b6b; font-size: 12px; margin-top: 4px; }
+
+/* Template cards */
+.template-cards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
+.template-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #2a2a3c; background: #13131f; color: #ccc; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; width: 100%; text-align: left; }
+.template-card:hover { background: #1e1e30; border-color: #3a3a5c; }
+.template-card.selected { background: #2a2a50; border-color: #6366f1; color: #e4e4ef; }
+.template-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.template-card-title { font-weight: 500; }
+.template-card-desc { font-size: 11px; color: #888; }
+
+/* Activity tab (per-case) */
+.activity-tab { padding: 24px; }
+.activity-events { display: flex; flex-direction: column; gap: 2px; }
+.activity-event { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: #b0b0c0; cursor: pointer; }
+.activity-event:hover { background: #1a1a28; color: #e4e4ef; }
+.activity-event-icon { width: 18px; text-align: center; color: #6366f1; font-size: 13px; flex-shrink: 0; }
+.activity-event-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.activity-event-path { max-width: 240px; color: #8ea0d8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.activity-event-type { font-size: 11px; color: #666; flex-shrink: 0; }
+.activity-event-target { font-size: 10px; color: #555; background: #1e1e2e; padding: 1px 6px; border-radius: 8px; flex-shrink: 0; }
+.activity-event-time { font-size: 11px; color: #555; margin-left: 8px; flex-shrink: 0; }
+
+/* Activity feed (global section) */
+.activity-feed { padding: 24px; overflow-y: auto; flex: 1; }
+.activity-feed-events { display: flex; flex-direction: column; gap: 2px; }
+.activity-feed-event { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
+.activity-feed-event:hover { background: #1a1a28; color: #e4e4ef; }
+.activity-feed-icon { width: 20px; text-align: center; color: #6366f1; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
+.activity-feed-body { flex: 1; min-width: 0; }
+.activity-feed-title { font-size: 14px; color: #e4e4ef; }
+.activity-feed-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
+.activity-feed-type { font-size: 11px; color: #666; }
+.activity-feed-target { font-size: 10px; color: #555; background: #1e1e2e; padding: 1px 6px; border-radius: 8px; }
+.activity-feed-time { font-size: 11px; color: #555; }
+
+
+
+
+/* Journal filter/export sections */
+.journal-filter-section { margin-bottom: 12px; padding: 12px 16px; background: #1a1a2e; border: 1px solid #2a2a3c; border-radius: 8px; }
+.journal-filter-heading { font-size: 11px; font-weight: 600; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; }
+.journal-filters-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
+.journal-filters-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #8888a0; }
+.journal-filters-row input[type="date"] { padding: 5px 8px; border: 1px solid #2a2a3c; background: #13131f; color: #e4e4ef; border-radius: 4px; font-size: 12px; font-family: inherit; }
+.journal-filters-row .checkbox-label { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
+.journal-filters-row .checkbox-label input { width: auto; }
+.journal-export-section { padding: 8px 16px; background: #1a1a2e; border: 1px solid #2a2a3c; border-radius: 8px; }
+.journal-export-heading { font-size: 11px; font-weight: 600; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
+.journal-export-row { display: flex; gap: 8px; align-items: center; }
+
+/* Journal toggle column */
+.journal-toggle-col { width: 32px; min-width: 32px; text-align: center; padding: 8px 4px !important; }
+.journal-toggle-icon { color: #6366f1; font-size: 12px; }
+
+/* Per-node worklog expandable entries */
+.worklog-entry { padding: 8px 12px; background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
+.worklog-entry:hover { border-color: #3a3a5c; }
+.worklog-entry.expanded { border-color: #6366f1; }
+.worklog-entry-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e4e4ef; }
+.worklog-toggle { color: #6366f1; font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }
+.worklog-entry-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.worklog-entry-path { max-width: 240px; color: #8ea0d8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.worklog-entry-mins { color: #b0b0c8; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.worklog-entry-date { color: #b0b0c0; font-size: 12px; white-space: nowrap; }
+.worklog-entry-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid #2a2a3c; display: flex; flex-direction: column; gap: 8px; }
+.worklog-entry-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.wl-detail-section { font-size: 13px; }
+.wl-detail-label { font-size: 11px; font-weight: 600; color: #a5b4fc; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 2px; }
+.wl-detail-section p { margin: 0; color: #c0c0d0; }
+.wl-tag-billable { font-size: 10px; color: #34d399; background: #1a2a1e; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
+.wl-tag-approx { font-size: 10px; color: #fbbf24; background: #2a2a1a; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
+.checkbox-label-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #e4e4ef; cursor: pointer; }
+.checkbox-label-inline input { width: auto; }
+
+/* ===== Note editor wrapper ===== */
+.note-editor-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ===== Verstak toast ===== */
+.verstak-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #1e1e38;
+  border: 1px solid #3a3a5c;
+  border-radius: 8px;
+  padding: 12px 20px;
+  color: #e4e4ef;
+  font-size: 13px;
+  z-index: 9999;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  animation: toast-in 0.2s ease-out;
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+/* ===== Modal overlay ===== */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9998;
+}
+
+.modal-box {
+  background: #1a1a2e;
+  border: 1px solid #2a2a3c;
+  border-radius: 10px;
+  padding: 24px;
+  width: 420px;
+  max-width: 90vw;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.modal-box h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #e4e4ef;
+  margin: 0;
+}
+
+.modal-box label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: #888;
+}
+
+.modal-box input[type="text"],
+.modal-box select {
+  padding: 8px 12px;
+  border: 1px solid #2a2a3c;
+  border-radius: 6px;
+  background: #13131f;
+  color: #e4e4ef;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.modal-box input[type="text"]:focus,
+.modal-box select:focus {
+  border-color: #818cf8;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+</style>
+
+<!-- Link modal -->
+{#if showLinkModal}
+<div class="modal-overlay" role="dialog" aria-modal="true" aria-label={t('note.toolbar.link')} on:click|self={() => showLinkModal = false} on:keydown={(e) => e.key === 'Escape' && (showLinkModal = false)}>
+  <div class="modal-box" role="document">
+    <h3>{t('note.toolbar.link')}</h3>
+    <label>
+      {t('link.label')}
+      <input type="text" bind:value={linkModalLabel} placeholder="Example" on:keydown={(e) => { if (e.key === 'Enter') submitLinkModal(); if (e.key === 'Escape') showLinkModal = false; }} />
+    </label>
+    <label>
+      {t('link.url')}
+      <input type="text" bind:value={linkModalUrl} placeholder={t('link.urlPlaceholder')} on:keydown={(e) => { if (e.key === 'Enter') submitLinkModal(); if (e.key === 'Escape') showLinkModal = false; }} />
+    </label>
+    <div class="modal-actions">
+      <button type="button" class="btn btn-primary" on:click={submitLinkModal}>{t('link.insert')}</button>
+      <button type="button" class="btn" on:click={() => showLinkModal = false}>{t('common.cancel')}</button>
+    </div>
+  </div>
+</div>
+{/if}
+
+<!-- Internal link picker -->
+{#if showInternalLinkPicker}
+<InternalLinkPicker
+  visible={true}
+  on:insert={handleInternalLinkPickerInsert}
+  on:close={handleInternalLinkPickerClose}
+/>
+{/if}
+
+<!-- Note rename modal (for rename from notes list) -->
+{#if renamingNoteId && renamingNoteId !== noteEditor?.id}
+<div class="modal-overlay" role="dialog" aria-modal="true" aria-label={t('note.rename')} on:click|self={cancelRenameNote} on:keydown={(e) => e.key === 'Escape' && cancelRenameNote()}>
+  <div class="modal" style="width: 380px;">
+    <h3>{t('note.rename')}</h3>
+    <div class="form-group">
+      <label for="rn-title">{t('note.title')}</label>
+      <input id="rn-title" type="text" bind:value={renamingNoteTitle} on:keydown={(e) => { if (e.key === 'Enter') submitRenameNote(); if (e.key === 'Escape') cancelRenameNote(); }} />
+    </div>
+    <div class="modal-actions">
+      <button class="btn" on:click={cancelRenameNote}>{t('common.cancel')}</button>
+      <button class="btn btn-primary" on:click={submitRenameNote}>{t('common.save')}</button>
+    </div>
+  </div>
+</div>
+{/if}
+
+<!-- Verstak toast -->
+{#if showVerstakToast}
+<div class="verstak-toast" role="alert" aria-live="polite">
+  {verstakToastMessage}
+</div>
+{/if}
+
diff --git a/frontend/src/lib/components/files/FilesTab.svelte b/frontend/src/lib/components/files/FilesTab.svelte
new file mode 100644
index 0000000..0b78b87
--- /dev/null
+++ b/frontend/src/lib/components/files/FilesTab.svelte
@@ -0,0 +1,734 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+  import FileBreadcrumbs from '../../FileBreadcrumbs.svelte'
+  import FileTreeRow from '../../../FileTreeRow.svelte'
+  import FilePreviewModal from '../FilePreviewModal.svelte'
+  import ConfirmModal from '../ConfirmModal.svelte'
+  import { canPreviewFile, needsBase64Preview, needsTextPreview, isMarkdownFile } from '../fileUtils.js'
+  import { t } from '../i18n'
+
+  // ===== Props =====
+  export let selectedNode = null
+  export let wailsCall = async () => {}
+
+  // ===== Events =====
+  const dispatch = createEventDispatcher()
+
+  // ===== Internal state (owned by FilesTab) =====
+  let loadingFiles = false
+  let currentFolderId = null
+  let folderStack = []
+  let fileItems = []
+  let previewItem = null
+  let previewContent = ''
+  let previewLoading = false
+  let previewError = ''
+  let clipboard = { items: [], mode: 'copy' }
+  let selectedIds = []
+  let dragIds = []
+  let importing = false
+  let importSummary = null
+  let showImportDialog = false
+  let pendingImportPath = ''
+  let pendingImportParent = ''
+  let showRename = false
+  let renameId = ''
+  let renameValue = ''
+  let renameError = ''
+  let showConfirm = false
+  let confirmTitle = ''
+  let confirmMessage = ''
+  let confirmDanger = false
+  let confirmText = t('common.delete')
+  let confirmAction = null
+  let cancelAction = null
+
+  // ===== Public API (called via bind:this) =====
+  export function resetToNode(nodeId) {
+    folderStack = []
+    currentFolderId = null
+    selectedIds = []
+    dragIds = []
+    previewItem = null
+    previewContent = ''
+    loadFolder(nodeId)
+  }
+
+  export function addFile() {
+    _addFile()
+  }
+
+  export function loadFolder(folderId) {
+    _loadFolder(folderId)
+  }
+
+  export function openFileById(fileNodeId) {
+    // Find the file in the current fileItems and open preview
+    const fileItem = fileItems.find(f => f.id === fileNodeId)
+    if (fileItem) {
+      _openPreview(fileItem)
+    }
+  }
+
+  export function focusItem(nodeId) {
+    selectedIds = [nodeId]
+  }
+
+  // ===== Folder navigation =====
+  async function _loadFolder(folderId) {
+    loadingFiles = true
+    try {
+      let items = await wailsCall('ListItems', folderId) || []
+      items.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
+        return (a.name || '').localeCompare(b.name || '')
+      })
+      fileItems = items
+    } catch (e) {
+      fileItems = []
+    }
+    loadingFiles = false
+  }
+
+  async function navigateToFolder(folderId) {
+    if (!selectedNode) return
+    try {
+      const node = await wailsCall('GetNodeDetail', folderId)
+      if (node) {
+        folderStack = [...folderStack, { id: folderId, name: node.title }]
+      }
+    } catch (e) {
+      folderStack = [...folderStack, { id: folderId, name: '...' }]
+    }
+    currentFolderId = folderId
+    await _loadFolder(folderId)
+  }
+
+  function navigateBack() {
+    if (folderStack.length < 2) {
+      folderStack = []
+      currentFolderId = null
+      if (selectedNode) _loadFolder(selectedNode.id)
+    } else {
+      const target = folderStack[folderStack.length - 2]
+      folderStack = folderStack.slice(0, -1)
+      currentFolderId = target.id
+      _loadFolder(target.id)
+    }
+  }
+
+  function navigateToBreadcrumb(index) {
+    const target = folderStack[index]
+    folderStack = folderStack.slice(0, index + 1)
+    currentFolderId = target.id
+    _loadFolder(target.id)
+  }
+
+  // ===== File preview =====
+  async function _openPreview(item) {
+    // For .md files: check if linked to a note, open note editor instead
+    if (item && item.fileId && isMarkdownFile(item)) {
+      try {
+        const action = await wailsCall('CheckFileAction', item.fileId)
+        if (action.action === 'note') {
+          dispatch('openNote', { id: action.noteId, title: action.noteTitle })
+          return
+        }
+        if (action.action === 'external') {
+          await wailsCall('OpenFile', item.fileId)
+          return
+        }
+      } catch (e) {
+        console.warn('CheckFileAction failed, falling back to preview:', e)
+      }
+    }
+
+    previewItem = item
+    previewContent = ''
+    previewError = ''
+    previewLoading = true
+    try {
+      if (needsBase64Preview(item)) {
+        previewContent = await wailsCall('GetFileBase64', item.fileId) || ''
+      } else if (needsTextPreview(item)) {
+        previewContent = await wailsCall('ReadFileText', item.fileId) || ''
+      }
+    } catch (e) {
+      previewError = String(e)
+    }
+    previewLoading = false
+  }
+
+  function closePreview() {
+    previewItem = null
+    previewContent = ''
+    previewError = ''
+  }
+
+  // ===== File operations =====
+  async function _addFile() {
+    const path = await wailsCall('PickFile')
+    if (!path) return
+    const parentId = currentFolderId || selectedNode.id
+    await _startImport(parentId, path)
+  }
+
+  async function _addFolder() {
+    const path = await wailsCall('PickDirectory')
+    if (!path) return
+    const parentId = currentFolderId || selectedNode.id
+    await _startImport(parentId, path)
+  }
+
+  async function createFile() {
+    const name = prompt(t('file.namePrompt'))
+    if (!name || !name.trim()) return
+    try {
+      const parentId = currentFolderId || selectedNode.id
+      await wailsCall('CreateEmptyFile', parentId, name.trim())
+      await _loadFolder(parentId)
+      dispatch('refreshParent', { nodeId: parentId })
+    } catch (e) {
+      dispatch('error', { message: String(e) })
+    }
+  }
+
+  async function duplicateItem(id) {
+    try {
+      await wailsCall('DuplicateNode', id)
+      const parentId = currentFolderId || selectedNode.id
+      await _loadFolder(parentId)
+      dispatch('refreshParent', { nodeId: parentId })
+    } catch (e) {
+      dispatch('error', { message: String(e) })
+    }
+  }
+
+  function renameItem(id) {
+    const item = fileItems.find(x => x.id === id)
+    if (item) _openRename(item.id, item.name)
+  }
+
+  function cutItem(id) {
+    clipboard = { items: [id], mode: 'cut' }
+  }
+
+  function copyItem(id) {
+    clipboard = { items: [id], mode: 'copy' }
+  }
+
+  async function pasteItem() {
+    if (clipboard.items.length === 0) return
+    const targetId = currentFolderId || selectedNode.id
+    try {
+      if (clipboard.mode === 'copy') {
+        for (const id of clipboard.items) {
+          await wailsCall('DuplicateNode', id)
+        }
+      } else {
+        for (const id of clipboard.items) {
+          await wailsCall('MoveNode', id, targetId)
+        }
+      }
+      clipboard = { items: [], mode: 'copy' }
+      await _loadFolder(targetId)
+    } catch (e) {
+      dispatch('error', { message: String(e) })
+    }
+  }
+
+  // ===== Selection =====
+  function toggleSelection(id) {
+    if (selectedIds.includes(id)) {
+      selectedIds = selectedIds.filter(x => x !== id)
+    } else {
+      selectedIds = [...selectedIds, id]
+    }
+  }
+
+  function selectOne(id) {
+    selectedIds = [id]
+  }
+
+  function selectAll() {
+    selectedIds = fileItems.map(x => x.id)
+  }
+
+  function rangeSelect(id) {
+    if (fileItems.length === 0) return
+    const lastId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : fileItems[0].id
+    const lastIdx = fileItems.findIndex(x => x.id === lastId)
+    const curIdx = fileItems.findIndex(x => x.id === id)
+    if (lastIdx === -1 || curIdx === -1) return
+    const start = Math.min(lastIdx, curIdx)
+    const end = Math.max(lastIdx, curIdx)
+    const range = fileItems.slice(start, end + 1).map(x => x.id)
+    const set = new Set(selectedIds)
+    range.forEach(x => set.add(x))
+    selectedIds = [...set]
+  }
+
+  function clearSelection() {
+    selectedIds = []
+  }
+
+  function getTargetIds(ids) {
+    return ids.length > 0 ? ids : fileItems.map(x => x.id)
+  }
+
+  async function deleteSelected() {
+    const ids = getTargetIds(selectedIds)
+    const item = fileItems.find(x => x.id === ids[0])
+    let label
+    if (ids.length === 1 && item?.type === 'folder') {
+      label = t('delete.folder')
+    } else if (ids.length === 1) {
+      label = t('delete.file')
+    } else {
+      label = t('delete.files', { count: ids.length })
+    }
+    _openConfirm({
+      title: t('delete.confirmTitle'),
+      message: t('delete.confirmMessage') + ' ' + label + '?',
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        for (const id of ids) {
+          try {
+            await wailsCall('DeleteFileOrFolder', id)
+          } catch (e) {
+            dispatch('error', { message: String(e) })
+          }
+        }
+        selectedIds = []
+        const reloadId = currentFolderId || selectedNode.id
+        await _loadFolder(reloadId)
+      }
+    })
+  }
+
+  function cutSelected() {
+    const ids = getTargetIds(selectedIds)
+    clipboard = { items: ids, mode: 'cut' }
+    selectedIds = []
+  }
+
+  function copySelected() {
+    const ids = getTargetIds(selectedIds)
+    clipboard = { items: ids, mode: 'copy' }
+    selectedIds = []
+  }
+
+  // ===== Drag-and-drop =====
+  function onDragStart(e, id) {
+    e.stopPropagation()
+    const ids = selectedIds.includes(id) ? selectedIds : [id]
+    dragIds = ids
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', ids.join(','))
+  }
+
+  function onDragOver(e, folderId) {
+    const item = fileItems.find(x => x.id === folderId)
+    if (item && item.type === 'folder') {
+      e.preventDefault()
+      e.stopPropagation()
+      e.dataTransfer.dropEffect = 'move'
+    }
+  }
+
+  async function onDrop(e, folderId) {
+    e.preventDefault()
+    e.stopPropagation()
+    if (dragIds.length === 0) return
+    for (const id of dragIds) {
+      try {
+        await wailsCall('MoveNode', id, folderId)
+      } catch (e) {
+        dispatch('error', { message: String(e) })
+      }
+    }
+    dragIds = []
+    selectedIds = []
+    await _loadFolder(currentFolderId || selectedNode.id)
+  }
+
+  // ===== Keyboard =====
+  function openSelected() {
+    if (selectedIds.length === 1) {
+      const item = fileItems.find(x => x.id === selectedIds[0])
+      if (item) {
+        if (item.type === 'folder') {
+          navigateToFolder(item.id)
+        } else {
+          _openPreview(item)
+        }
+      }
+    }
+  }
+
+  function openSelectedExternal() {
+    if (selectedIds.length === 1) {
+      const item = fileItems.find(x => x.id === selectedIds[0])
+      if (item && item.fileId) {
+        wailsCall('OpenFile', item.fileId)
+      }
+    }
+  }
+
+  function openRenameForSelection() {
+    if (selectedIds.length === 1) {
+      const item = fileItems.find(x => x.id === selectedIds[0])
+      if (item) {
+        _openRename(item.id, item.name)
+      }
+    }
+  }
+
+  // ===== Rename modal =====
+  function _openRename(id, currentName) {
+    renameId = id
+    renameValue = currentName
+    renameError = ''
+    showRename = true
+  }
+
+  async function submitRename() {
+    const name = renameValue.trim()
+    if (!name) { renameError = t('rename.emptyError'); return }
+    try {
+      await wailsCall('ValidateName', name)
+    } catch (e) {
+      renameError = t('rename.invalidError')
+      return
+    }
+    showRename = false
+    const id = renameId
+    renameId = ''
+    try {
+      await wailsCall('RenameNode', id, name)
+      if (selectedNode && selectedNode.id === id) {
+        selectedNode = { ...selectedNode, title: name }
+      }
+      dispatch('refreshParent', { nodeId: currentFolderId || selectedNode.id })
+      if (currentFolderId) {
+        await _loadFolder(currentFolderId)
+      }
+    } catch (e) {
+      dispatch('error', { message: String(e) })
+    }
+  }
+
+  function cancelRename() {
+    showRename = false
+    renameId = ''
+    renameValue = ''
+    renameError = ''
+  }
+
+  function onRenameKeydown(e) {
+    if (e.key === 'Enter') submitRename()
+    else renameError = ''
+  }
+
+  // ===== Confirm modal =====
+  function _openConfirm(opts) {
+    confirmTitle = opts.title || t('common.confirm')
+    confirmMessage = opts.message || ''
+    confirmDanger = opts.danger !== undefined ? opts.danger : true
+    confirmText = opts.confirmText || t('common.delete')
+    confirmAction = opts.onConfirm || null
+    cancelAction = opts.onCancel || null
+    showConfirm = true
+  }
+
+  function closeConfirm() {
+    showConfirm = false
+    confirmAction = null
+    cancelAction = null
+  }
+
+  function handleConfirm() {
+    if (confirmAction) confirmAction()
+    closeConfirm()
+  }
+
+  function handleCancel() {
+    if (cancelAction) cancelAction()
+    closeConfirm()
+  }
+
+  // ===== Import =====
+  async function _startImport(parentID, sourcePath) {
+    importing = true
+    try {
+      const summary = await wailsCall('PreviewImport', sourcePath)
+      importSummary = summary
+      pendingImportPath = sourcePath
+      pendingImportParent = parentID
+      showImportDialog = true
+    } catch (e) {
+      dispatch('error', { message: String(e) })
+    }
+    importing = false
+  }
+
+  async function confirmImport(mode) {
+    try {
+      const parentId = pendingImportParent || selectedNode.id
+      if (mode === 'copy') {
+        await wailsCall('AddPathCopy', parentId, pendingImportPath)
+      } else {
+        await wailsCall('AddPathLink', parentId, pendingImportPath)
+      }
+      showImportDialog = false
+      importSummary = null
+      folderStack = []
+      currentFolderId = null
+      await _loadFolder(parentId)
+      dispatch('refreshParent', { nodeId: parentId })
+    } catch (e) {
+      dispatch('error', { message: String(e) })
+    }
+  }
+
+  function cancelImport() {
+    showImportDialog = false
+    importSummary = null
+  }
+
+  async function deleteFile({ id, type }) {
+    const label = type === 'folder' ? t('delete.folder') : t('delete.file')
+    _openConfirm({
+      title: t('delete.confirmTitle'),
+      message: t('delete.confirmMessage') + ' ' + label + '?',
+      confirmText: t('common.delete'),
+      danger: true,
+      onConfirm: async () => {
+        try {
+          await wailsCall('DeleteFileOrFolder', id)
+          const reloadId = currentFolderId || selectedNode.id
+          await _loadFolder(reloadId)
+        } catch (e) {
+          dispatch('error', { message: String(e) })
+        }
+      }
+    })
+  }
+
+  async function openSelectedFile(fileID) {
+    try {
+      await wailsCall('OpenFile', fileID)
+    } catch (e) {
+      dispatch('error', { message: String(e) })
+    }
+  }
+
+  // ===== Keyboard handler (called from parent) =====
+  export function handleFilesKeydown(e) {
+    if (e.ctrlKey || e.metaKey) {
+      if (e.key === 'c' || e.key === 'C') { e.preventDefault(); copySelected() }
+      else if (e.key === 'x' || e.key === 'X') { e.preventDefault(); cutSelected() }
+      else if (e.key === 'v' || e.key === 'V') { e.preventDefault(); pasteItem() }
+      else if (e.key === 'a' || e.key === 'A') { e.preventDefault(); selectAll() }
+      else if (e.key === 'o' || e.key === 'O') { e.preventDefault(); openSelectedExternal() }
+      else if (e.key === 'Enter') { e.preventDefault(); openSelected() }
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      openSelected()
+    } else if (e.key === 'Delete') {
+      if (previewItem) { e.preventDefault(); closePreview(); return }
+      if (selectedIds.length > 0) { e.preventDefault(); deleteSelected(); return }
+    } else if (e.key === 'Escape') {
+      if (previewItem) { closePreview(); return }
+      if (selectedIds.length > 0) { clearSelection(); return }
+    } else if (e.key === 'F2') {
+      e.preventDefault()
+      openRenameForSelection()
+    }
+  }
+
+  // ===== Reset on node change =====
+  export function resetState() {
+    folderStack = []
+    currentFolderId = null
+    fileItems = []
+    selectedIds = []
+    dragIds = []
+    previewItem = null
+    previewContent = ''
+    previewError = ''
+    clipboard = { items: [], mode: 'copy' }
+    importing = false
+    importSummary = null
+    showImportDialog = false
+    showRename = false
+    showConfirm = false
+  }
+</script>
+
+<!-- Files tab template -->
+<div class="files-tab">
+  <div class="tab-toolbar">
+    <button class="btn btn-primary" on:click={_addFile} disabled={importing}>{t('file.addFile')}</button>
+    <button class="btn" on:click={_addFolder} disabled={importing}>{t('file.addFolder')}</button>
+    <button class="btn" on:click={createFile}>{t('file.newFile')}</button>
+    {#if clipboard.items.length > 0}
+      <button class="btn" on:click={pasteItem}>{t('common.paste')} {clipboard.items.length}</button>
+    {/if}
+  </div>
+
+  {#if loadingFiles}
+    <div class="empty-state">
+      <p>{t('common.loading')}</p>
+    </div>
+  {:else}
+    {#if folderStack.length > 0}
+      <FileBreadcrumbs crumbs={[{ name: t('file.root') }, ...folderStack]} on:navigate={(e) => {
+        const i = e.detail
+        if (i === 0) {
+          folderStack = []
+          currentFolderId = null
+          if (selectedNode) _loadFolder(selectedNode.id)
+        } else {
+          navigateToBreadcrumb(i - 1)
+        }
+      }}/>
+      <button class="btn btn-sm back-btn" on:click={navigateBack}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+        {t('common.backLabel')}
+      </button>
+    {:else}
+      <FileBreadcrumbs crumbs={[{ name: t('file.root') }]}/>
+    {/if}
+
+    {#if fileItems.length === 0}
+      <div class="empty-state">
+        <div class="empty-icon">
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+        </div>
+        <p>{folderStack.length > 0 ? t('file.noFiles') : t('file.noFilesCase')}</p>
+        <p class="hint">{t('file.hint')}</p>
+        <div class="empty-actions">
+          <button class="btn btn-primary" on:click={_addFile}>{t('file.addFileSimple')}</button>
+          <button class="btn" on:click={_addFolder}>{t('file.addFolderSimple')}</button>
+        </div>
+      </div>
+    {:else}
+      <div class="file-list">
+        {#each fileItems as item (item.id)}
+          <FileTreeRow
+            {item}
+            selected={selectedIds.includes(item.id)}
+            {onDragStart}
+            {onDragOver}
+            {onDrop}
+            on:navigate={(e) => navigateToFolder(e.detail)}
+            on:preview={(e) => _openPreview(e.detail)}
+            on:openExternal={(e) => wailsCall('OpenFile', e.detail)}
+            on:showInFolder={(e) => wailsCall('OpenFolder', e.detail)}
+            on:delete={(e) => deleteFile(e.detail)}
+            on:rename={(e) => renameItem(e.detail.id)}
+            on:duplicate={(e) => duplicateItem(e.detail)}
+            on:cut={(e) => cutItem(e.detail)}
+            on:copy={(e) => copyItem(e.detail)}
+            on:selectOne={(e) => selectOne(e.detail)}
+            on:toggleSelect={(e) => toggleSelection(e.detail)}
+            on:rangeSelect={(e) => rangeSelect(e.detail)}
+          />
+        {/each}
+      </div>
+    {/if}
+  {/if}
+
+  {#if importing && !showImportDialog}
+    <div class="empty-state"><p>{t('file.scanning')}</p></div>
+  {/if}
+</div>
+
+<!-- Rename modal (inline in FilesTab) -->
+{#if showRename}
+  <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelRename} on:keydown={(e) => e.key === 'Escape' && cancelRename()}>
+    <div class="modal">
+      <h3>{t('rename.title')}</h3>
+      <div class="form-group">
+        <label><span class="label-text">{t('common.newName')}</span>
+        <input type="text" bind:value={renameValue}
+               on:keydown={onRenameKeydown} />
+        </label>
+      </div>
+      {#if renameError}
+        <div class="rename-error">{renameError}</div>
+      {/if}
+      <div class="modal-actions">
+        <button class="btn btn-primary" on:click={submitRename}>{t('common.rename')}</button>
+        <button class="btn" on:click={cancelRename}>{t('common.cancel')}</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<!-- Confirm modal (inline in FilesTab) -->
+{#if showConfirm}
+  <ConfirmModal
+    title={confirmTitle}
+    message={confirmMessage}
+    confirmText={confirmText}
+    danger={confirmDanger}
+    on:confirm={handleConfirm}
+    on:cancel={handleCancel}
+  />
+{/if}
+
+<!-- Import dialog (inline in FilesTab) -->
+{#if showImportDialog && importSummary}
+  <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelImport} on:keydown={(e) => e.key === 'Escape' && cancelImport()}>
+    <div class="modal">
+      <h3>{t('file.importTitle')} «{selectedNode ? selectedNode.title : ''}»</h3>
+      <div class="import-summary">
+        <div class="summary-row"><span>{t('file.importFiles')}</span><span>{importSummary.files}</span></div>
+        <div class="summary-row"><span>{t('file.importFolders')}</span><span>{importSummary.folders}</span></div>
+        <div class="summary-row"><span>{t('file.importSize')}</span><span>{(importSummary.totalBytes / 1024).toFixed(1)} KB</span></div>
+        {#if importSummary.isDangerous}
+          <div class="summary-warn">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+            {importSummary.dangerReason}
+          </div>
+        {/if}
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-primary" on:click={() => confirmImport('copy')}>{t('file.importCopy')}</button>
+        <button class="btn" on:click={() => confirmImport('link')}>{t('file.importLink')}</button>
+        <button class="btn" on:click={cancelImport}>{t('common.cancel')}</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<!-- File preview modal (inline in FilesTab) -->
+{#if previewItem}
+  <FilePreviewModal
+    item={previewItem}
+    content={previewContent}
+    loading={previewLoading}
+    error={previewError}
+    on:close={closePreview}
+    on:openExternal={(e) => wailsCall('OpenFile', e.detail)}
+  />
+{/if}
+
+<style>
+  .files-tab { padding: 20px; }
+  .files-tab .tab-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
+  .file-list { display: flex; flex-direction: column; }
+  .back-btn { margin-bottom: 4px; display: inline-flex; align-items: center; gap: 4px; }
+
+  .import-summary { margin-bottom: 16px; }
+  .summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px solid #2a2a3c; }
+  .summary-warn { margin-top: 8px; padding: 8px 12px; background: #3a2a22; border-radius: 6px; color: #ffaa66; font-size: 13px; }
+
+  .rename-error { color: #ff6b6b; font-size: 12px; margin-top: 4px; }
+</style>