fix: FilesTab empty state, button styles, text preview, menu positioning

- Add reactive $: block in FilesTab to auto-load files on selectedNode change - Copy .btn/.btn-primary/.btn-sm styles into NotesTab.svelte and FilesTab.svelte (scoped CSS) - Fix FilePreviewModal: render .md with MarkdownPreview, text files in <pre><code>, external open in footer - Expand codeNames/textMimes in fileUtils.js to cover all text file types - Add fallback text read for unknown file types in _openPreview - Fix toggleMenu in FileTreeRow: position menu near button using getBoundingClientRect - Add debug logs for file open flow and menu positioning - Add tabindex+keydown to MarkdownPreview div (a11y partial fix) Co-Authored-By: OWL (Hermes Agent) <hermes@nousresearch.com>
refactor(frontend): extract OverviewTab safely
2026-06-16 09:08:13 +08:00 · 2026-06-16 03:29:18 +08:00 · 2026-06-16 03:21:49 +08:00 · 2026-06-16 03:00:24 +08:00 · 2026-06-16 02:22:44 +08:00
17 changed files with 1609 additions and 876 deletions
--- a/cmd/verstak-gui/bindings_logging.go
+++ b/cmd/verstak-gui/bindings_logging.go
@ -0,0 +1,89 @@
+package main
+
+import (
+	"fmt"
+	"log"
+	"os"
+	"path/filepath"
+	"time"
+
+	"verstak/internal/core/config"
+)
+
+// appLogPath returns the path to the application log file.
+// Uses ~/.local/state/verstak/logs/verstak.log on Linux,
+// or falls back to ~/.config/verstak/logs/verstak.log.
+func appLogPath() string {
+	// Prefer XDG_STATE_HOME, then fallback to config dir
+	stateDir := os.Getenv("XDG_STATE_HOME")
+	if stateDir == "" {
+		home, err := os.UserHomeDir()
+		if err == nil {
+			stateDir = filepath.Join(home, ".local", "state")
+		}
+	}
+	if stateDir != "" {
+		dir := filepath.Join(stateDir, "verstak", "logs")
+		if err := os.MkdirAll(dir, 0o755); err == nil {
+			return filepath.Join(dir, "verstak.log")
+		}
+	}
+	// Fallback to config dir
+	cfgDir, err := config.EnsureConfigDir()
+	if err != nil {
+		return ""
+	}
+	dir := filepath.Join(cfgDir, "logs")
+	if err := os.MkdirAll(dir, 0o755); err != nil {
+		return ""
+	}
+	return filepath.Join(dir, "verstak.log")
+}
+
+// appLog writes a timestamped line to the application log file.
+func appLog(level, msg string) {
+	logPath := appLogPath()
+	if logPath == "" {
+		log.Printf("[%s] %s", level, msg)
+		return
+	}
+	line := fmt.Sprintf("[%s] [%s] %s\n", time.Now().Format("2006-01-02T15:04:05"), level, msg)
+	f, err := os.OpenFile(logPath, os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0o644)
+	if err != nil {
+		log.Printf("[%s] %s", level, msg)
+		return
+	}
+	defer f.Close()
+	f.WriteString(line)
+}
+
+// FrontendLog receives log messages from the frontend runtime.
+// Called from JS via Wails binding. Works even if vault is not open.
+// level: "info", "warn", "error"
+// message: human-readable message
+// stack: JS stack trace (optional, only for errors)
+func (a *App) FrontendLog(level, message, stack string) {
+	msg := "[frontend] " + message
+	if stack != "" {
+		msg += "\n  stack: " + stack
+	}
+	// Always log to Go's standard logger (visible in dev mode console)
+	log.Printf("[frontend][%s] %s", level, message)
+	// Persist to log file
+	appLog("frontend-"+level, msg)
+}
+
+// LogStartupStep logs a startup diagnostic step.
+// Called from Go side to trace initialization progress.
+func (a *App) LogStartupStep(step string, success bool, detail string) {
+	status := "ok"
+	if !success {
+		status = "fail"
+	}
+	msg := fmt.Sprintf("[startup] %s: %s", step, status)
+	if detail != "" {
+		msg += " — " + detail
+	}
+	log.Print(msg)
+	appLog("startup", msg)
+}
--- a/cmd/verstak-gui/frontend-dist/assets/main-CzfuqGWF.js
+++ b/cmd/verstak-gui/frontend-dist/assets/main-CzfuqGWF.js
--- a/cmd/verstak-gui/frontend-dist/assets/main-DKrNFx34.css
+++ b/cmd/verstak-gui/frontend-dist/assets/main-DKrNFx34.css
--- a/cmd/verstak-gui/frontend-dist/assets/main-WcQPBFFT.js
+++ b/cmd/verstak-gui/frontend-dist/assets/main-WcQPBFFT.js
--- a/cmd/verstak-gui/frontend-dist/assets/main-bQpH1es2.css
+++ b/cmd/verstak-gui/frontend-dist/assets/main-bQpH1es2.css
--- a/cmd/verstak-gui/frontend-dist/index.html
+++ b/cmd/verstak-gui/frontend-dist/index.html
@ -19,8 +19,8 @@
      background: #13131f;
    }
  </style>
-  <script type="module" crossorigin src="/assets/main-CzfuqGWF.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-bQpH1es2.css">
+  <script type="module" crossorigin src="/assets/main-WcQPBFFT.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-DKrNFx34.css">
 </head>
 <body>
  <div id="app"></div>
--- a/docs/frontend-architecture.md
+++ b/docs/frontend-architecture.md
@ -0,0 +1,216 @@
+# Frontend Architecture — Verstak GUI
+
+## Tech Stack
+
+- **Framework**: Svelte 4 (runes-free, compiler-only)
+- **Build tool**: Vite 5
+- **GUI shell**: Wails v2 (Go backend + WebKit GTK frontend)
+- **Language**: Plain JavaScript (no TypeScript in Svelte files — `lang="ts"` is NOT used)
+
+## Source Structure
+
+```
+frontend/src/
+  main.js                        # Entry: mounts App.svelte, global error handlers
+  App.svelte                     # Root component: sidebar, header, modals, tab router
+  FileTreeRow.svelte             # Sidebar tree node row
+  TreeNode.svelte                # Recursive tree node
+  lib/
+    AppHeader.svelte             # Top bar with title, search, actions
+    BrowserEvents.svelte         # Browser extension events panel
+    CalendarPluginPage.svelte    # Plugin page host
+    ConfirmModal.svelte          # Reusable confirm dialog
+    FileBreadcrumbs.svelte       # File tab breadcrumb navigation
+    FileIcon.svelte              # Icon resolver for file types
+    FilePreviewModal.svelte      # File content preview modal
+    FirstRun.svelte              # First-run wizard
+    GlobalSearch.svelte          # Global search bar + results
+    SettingsWindow.svelte        # Settings modal container
+    Settings*.svelte             # Settings sub-sections (General, Sync, etc.)
+    SyncStatus.svelte            # Sync status badge
+    TemplateIcon.svelte          # Template type icon
+    TodayScreen.svelte           # Today dashboard
+    VaultRecovery.svelte         # Vault recovery wizard
+    actionIcons.js               # SVG icon strings
+    fileUtils.js                 # File type helpers (canPreview, isMarkdown, etc.)
+    i18n/                        # Internationalization (en, ru)
+    markdown/                    # Markdown rendering + internal links
+    util/                        # Keyboard layout helper
+    components/
+      OverviewTab.svelte         # Overview tab: meta, quick actions, recent items
+      files/
+        FilesTab.svelte          # Files tab: file browser, preview, import, rename
+      notes/
+        NotesTab.svelte          # Notes tab: note list, create form
+        MarkdownEditor.svelte    # Markdown textarea with toolbar
+        MarkdownPreview.svelte   # Rendered markdown preview
+        NoteEditorPanel.svelte   # Editor + preview layout, public API: insertText()
+        InternalLinkPicker.svelte # Object picker for verstak:// links
+        ObjectPickerModal.svelte  # Legacy object picker modal
+```
+
+## Role of App.svelte
+
+`App.svelte` is the **root component**. It owns:
+
+1. **Global UI state**: sidebar (system views, workspace tree), active tab, selected node/section
+2. **Lifecycle**: startup checks (GetStartupStatus, VerstakVersion, ListWorkspaceTree), event listeners
+3. **Top-level modals**: confirm, node rename, import (removed — now in FilesTab), worklog, inbox assign, link edit, settings, trash preview
+4. **Cross-cutting concerns**: navigation history (goBack, rememberNavigation), keyboard shortcuts, drag-and-drop orchestration, capture/inbox flow
+5. **Note editor lifecycle**: `noteEditor` state, `doOpenNote()`, `saveCurrentNote()`, `closeNoteEditor()`, link modal, internal link picker
+
+App.svelte is **NOT** responsible for:
+- **Files tab** → `FilesTab.svelte` (owns all file browser state, preview, import, rename)
+- **Notes tab list** → `NotesTab.svelte` (owns note list UI, create form; editor stays in App)
+- **Overview tab** → `OverviewTab.svelte` (pure display: meta, quick actions, recent items)
+- **Settings sections** → each has its own `Settings*.svelte`
+
+## Component Communication
+
+### Props (parent → child)
+Data flows down via Svelte `export let prop`
+
+### Events (child → parent)
+Children dispatch events via `createEventDispatcher()`
+
+### Public API (bind:this)
+Parent gets imperative handle via `bind:this={ref}` and calls:
+- `ref.publicMethod(args)` — guard with optional chaining: `ref?.method?.(args)`
+
+## Component Reference
+
+### OverviewTab (`lib/components/OverviewTab.svelte`)
+**Props**: `selectedNode`, `notes`, `worklog`, `formatDate`, `nodeKindLabel`
+**Events**: `createNote`, `addFile`, `createAction`, `switchTab`, `openNote`
+**State**: None (pure display)
+
+### NotesTab (`lib/components/notes/NotesTab.svelte`)
+**Props**: `notes`, `formatDate`
+**Events**: `submitCreateNote`({title}), `openNote`({note}), `startRename`({noteId, currentTitle}), `deleteNote`({note})
+**State**: `showCreateNote`, `newNoteTitle`
+
+### FilesTab (`lib/components/files/FilesTab.svelte`)
+**Props**: `selectedNode`, `wailsCall`
+**Events**: `openNote`({id, title}), `refreshParent`({nodeId}), `error`({message})
+**Public API** (via bind:this):
+- `resetToNode(nodeId)` — reset to root of given node
+- `addFile()` — open file picker and import
+- `loadFolder(folderId)` — load folder contents
+- `openFileById(fileNodeId)` — find and preview file
+- `focusItem(nodeId)` — select item by ID
+- `handleFilesKeydown(e)` — delegate keyboard handling
+- `resetState()` — full reset (on node change)
+
+**Internal state** (owned by FilesTab, NOT accessible from App):
+- `loadingFiles`, `currentFolderId`, `folderStack`, `fileItems`
+- `previewItem`, `previewContent`, `previewLoading`, `previewError`
+- `clipboard`, `selectedIds`, `dragIds`
+- `importing`, `importSummary`, `showImportDialog`, `pendingImportPath`, `pendingImportParent`
+- `showRename`, `renameId`, `renameValue`, `renameError`
+- `showConfirm`, `confirmTitle`, `confirmMessage`, `confirmAction`, `cancelAction`
+
+## State Ownership Rules
+
+### App.svelte MUST own:
+- `selectedSection`, `selectedNode`, `activeTab`
+- `systemViews`, `workspaceTree`, `enabledTemplates`
+- `noteEditor` (the note being edited), `noteViewMode`
+- `showFirstRun`, `showRecovery`, `showSettings`, `loading`
+- `startupStatus`, `startupChecked`
+- Navigation state: `navHistory`, `restoringHistory`
+- Trash browser state: `trashInfo`, `trashCount`, `trashSelectedIds`, `trashFolderId`, `trashFolderStack`
+- Trash preview: `trashPreviewItem`, `trashPreviewContent`, `trashPreviewLoading`, `trashPreviewError`
+- Journal state: `journalRows`, `journalSummary`, filters
+- Worklog modal state: `showWorklogModal`, `wlModal*`
+- Inbox: `inboxNodes`, `localInboxNodes`, capture state
+- Links: `links`
+- Sync: `syncStatus`
+- `error` (global error banner)
+- `notes` (loaded by `loadTabData`, passed to NotesTab and OverviewTab as prop)
+- `worklog` (loaded by `loadTabData`, passed to OverviewTab as prop)
+
+### App.svelte must NOT directly reference:
+- Files tab internal state (all in FilesTab)
+- Notes tab create form state (showCreateNote, newNoteTitle — in NotesTab)
+- Any `fileItems`, `selectedIds`, `currentFolderId`, `folderStack`, etc.
+
+## Services (Wails API)
+
+All backend calls go through the `wailsCall()` helper in App.svelte:
+
+```js
+function wailsCall(method, ...args) {
+  // Returns Promise, rejects with 'Wails not connected: <method>' if backend unavailable
+}
+```
+
+Key backend methods:
+- **Startup**: `GetStartupStatus`, `VerstakVersion`, `ListSystemViewsWithPlugins`, `ListWorkspaceTree`, `ListEnabledTemplates`
+- **Nodes**: `GetNodeDetail`, `ListItems`, `ListWorkspaceChildren`, `CreateNodeFromTemplate`, `DeleteNode`, `MoveNode`, `RenameNode`
+- **Notes**: `ListNotes`, `CreateNote`, `ReadNote`, `SaveNote`, `DeleteNote`, `RenameNote`
+- **Files**: `ListFiles`, `DeleteFileOrFolder`, `CreateEmptyFile`, `DuplicateNode`, `OpenFile`, `OpenFolder`, `GetFileBase64`, `ReadFileText`, `PreviewImport`, `AddPathCopy`, `AddPathLink`
+- **Worklog**: `ListWorklog`, `CreateWorklogFull`, `UpdateWorklogEntry`, `DeleteWorklogEntry`, `AcceptSuggestionFull/With`, `GetSuggestions`
+- **Inbox**: `ListInboxNodes`, `Capture*WithContext`, `DeleteInboxNode`, `ResolveInboxNode`
+- **Sync**: `SyncStatus`, `SyncNow`, `TrashCount`, `ListTrash`
+- **Logging**: `FrontendLog(level, message, stack)`, `LogStartupStep(step, success, detail)`
+
+## Logging & Diagnostics
+
+### Frontend errors
+- Global `window.addEventListener('error', ...)` catches uncaught exceptions
+- Global `window.addEventListener('unhandledrejection', ...)` catches broken promises
+- Both log to `console.error` and forward to `FrontendLog()` backend binding
+- Fatal mount error: renders error message inline in `#app` div (blank window becomes diagnostic)
+
+### Backend logs
+- Application log file: `~/.local/state/verstak/logs/verstak.log` (Linux)
+- Fallback: `~/.config/verstak/logs/verstak.log`
+- Format: `[timestamp] [level] message`
+- Go `log.Printf()` output goes to stderr (visible in dev console)
+
+### Vault debug log
+- `<vault>/.verstak/debug.log` — written by `WriteDebugLog` binding (existing feature)
+
+## Refactor Rules
+
+### After each extraction step:
+1. `grep` App.svelte for state that moved to child — must be zero hits or documented exceptions
+2. `npm run build` — must pass
+3. `go test ./...` — must pass
+4. Manual GUI check:
+   - Window is not blank/white
+   - Sidebar shows (system views + workspace tree)
+   - No infinite "Загрузка..." on welcome screen
+   - Clicking system sections works
+   - Opening a case shows tabs
+
+### Forbidden patterns:
+- Child component state referenced directly in App.svelte after extraction
+- `lang="ts"` in Svelte files (svelte-preprocess not installed)
+- `[]string` passed directly to Wails bindings (must JSON-serialize)
+- Modal without `role="dialog" aria-modal="true"` and Escape handler
+- Buttons without `type="button"` in forms
+- `resize: none` on textareas that should be resizable (use `resize: vertical`)
+
+## Troubleshooting
+
+### Blank window, no errors in terminal
+1. Check browser DevTools console (F12 on Windows/Linux, Cmd+Alt+I on macOS)
+2. In Wails dev mode: right-click → Inspect → Console
+3. Look for `[Frontend Error]` messages
+4. Check application log: `~/.local/state/verstak/logs/verstak.log`
+
+### Stuck on "Загрузка..."
+- `GetStartupStatus` likely failed or returned unexpected status
+- Check network calls in DevTools Network tab
+- Check backend log for startup errors
+
+### Wails method not found
+- Ensure method is registered in `bindings*.go` files
+- Ensure method is exported (capitalized name)
+- Ensure `wailsCall()` helper is used (not direct window access)
+
+### Child component state moved but App still references old variable
+- This causes a silent `undefined` reference or runtime crash
+- Run `grep -n 'oldStateName' App.svelte` after each extraction
+- Use `ref?.method?.()` for all public API calls on child components
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
--- a/frontend/src/FileTreeRow.svelte
+++ b/frontend/src/FileTreeRow.svelte
@ -88,7 +88,14 @@
    }
  }

-  function toggleMenu() {
+  function toggleMenu(e) {
+    if (e) {
+      e.stopPropagation()
+      const rect = e.currentTarget.getBoundingClientRect()
+      menuX = Math.min(rect.right, window.innerWidth - 240)
+      menuY = Math.min(rect.bottom, window.innerHeight - 320)
+      console.log('[FileTreeRow] menu source=button x=' + menuX + ' y=' + menuY)
+    }
    menuOpen = !menuOpen
  }

@ -112,6 +119,7 @@
    e.preventDefault()
    menuX = Math.min(e.clientX, window.innerWidth - 240)
    menuY = Math.min(e.clientY, window.innerHeight - 320)
+    console.log('[FileTreeRow] menu source=contextmenu x=' + menuX + ' y=' + menuY)
    menuOpen = true
  }

--- a/frontend/src/lib/FilePreviewModal.svelte
+++ b/frontend/src/lib/FilePreviewModal.svelte
@ -1,6 +1,7 @@
 <script>
  import { createEventDispatcher, onMount, onDestroy } from 'svelte'
  import FileIcon from './FileIcon.svelte'
+  import MarkdownPreview from './components/notes/MarkdownPreview.svelte'
  import { formatFileSize, formatMimeType, getFileKind, isImageFile, isTextFile, isPdfFile, isMarkdownFile } from './fileUtils.js'
  import { t } from './i18n'

@ -13,7 +14,8 @@

  const kind = getFileKind(item)
  $: showImage = isImageFile(item) && content && content.startsWith('data:')
-  $: showText = isTextFile(item) || isMarkdownFile(item)
+  $: showMarkdown = isMarkdownFile(item) && content
+  $: showText = (isTextFile(item) || isMarkdownFile(item)) && content && !showMarkdown
  $: showPdf = isPdfFile(item)

  function handleKeydown(e) {
@ -44,13 +46,6 @@
      </div>
      <div class="preview-meta">{formatFileSize(item.size)} · {formatMimeType(item.mime)}</div>
      <div class="preview-actions">
-        <button class="action-btn" on:click={handleOpenExternal} title={t('file.openExternal')} aria-label={t('file.openExternal')}>
-          <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="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
-            <polyline points="15 3 21 3 21 9"/>
-            <line x1="10" y1="14" x2="21" y2="3"/>
-          </svg>
-        </button>
        <button class="action-btn action-btn-close" on:click={() => dispatch('close')} title="Close" aria-label="Close preview">
          <svg width="18" height="18" 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"/>
@ -71,7 +66,11 @@
        <div class="preview-image-container">
          <img src={content} alt={item.name} class="preview-image"/>
        </div>
-      {:else if showText && content}
+      {:else if showMarkdown}
+        <div class="preview-markdown-container">
+          <MarkdownPreview {content} />
+        </div>
+      {:else if showText}
        <pre class="preview-text"><code>{content}</code></pre>
      {:else if showPdf}
        {#if content && content.startsWith('data:')}
@ -91,6 +90,9 @@
        </div>
      {/if}
    </div>
+    <footer class="preview-footer">
+      <button class="btn btn-sm" on:click={handleOpenExternal}>{t('file.openExternal')}</button>
+    </footer>
  </div>
 </div>

@ -260,4 +262,20 @@
  .btn-sm:hover {
    background: #222233;
  }
+
+  .preview-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 10px 16px;
+    border-top: 1px solid #2a2a3c;
+    flex-shrink: 0;
+  }
+
+  .preview-markdown-container {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+    padding: 16px;
+  }
 </style>
--- a/frontend/src/lib/components/OverviewTab.svelte
+++ b/frontend/src/lib/components/OverviewTab.svelte
@ -0,0 +1,97 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+  import { t } from '../i18n'
+
+  // ===== Props =====
+  export let selectedNode = null
+  export let notes = []
+  export let worklog = []
+  export let formatDate = (str) => ''
+  export let nodeKindLabel = (kind) => kind || ''
+
+  // ===== Events =====
+  const dispatch = createEventDispatcher()
+
+  function createNote() {
+    dispatch('createNote')
+  }
+
+  function addFile() {
+    dispatch('addFile')
+  }
+
+  function createAction() {
+    dispatch('createAction')
+  }
+
+  function logTime() {
+    dispatch('switchTab', { tab: 'worklog' })
+  }
+
+  function openNoteHandler(note) {
+    dispatch('openNote', { note })
+  }
+</script>
+
+<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={createNote}>
+      <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={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={createAction}>
+      <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={logTime}>
+      <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={() => openNoteHandler(note)} on:keydown={(e) => e.key === 'Enter' && openNoteHandler(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>
+
+<style>
+  .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; }
+</style>
--- a/frontend/src/lib/components/files/FilesTab.svelte
+++ b/frontend/src/lib/components/files/FilesTab.svelte
@ -0,0 +1,770 @@
+<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 () => {}
+
+  // ===== Debug helper =====
+  function _fdl(msg) {
+    try { wailsCall('WriteDebugLog', '[FilesTab] ' + msg) } catch(e) {}
+  }
+
+  // ===== 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)
+  }
+
+  // ===== React to selectedNode changes =====
+  let lastLoadedNodeId = null
+  $: if (selectedNode && selectedNode.id && selectedNode.id !== lastLoadedNodeId) {
+    _fdl('selectedNode changed: id=' + selectedNode.id + ' title=' + selectedNode.title + ' type=' + selectedNode.type)
+    lastLoadedNodeId = selectedNode.id
+    resetToNode(selectedNode.id)
+  }
+
+  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) || []
+      _fdl('loadFolder nodeId=' + folderId + ' count=' + items.length + ' first=' + (items[0] ? JSON.stringify({id: items[0].id, name: items[0].name, type: items[0].type, fileId: items[0].fileId}) : 'none'))
+      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) {
+      _fdl('loadFolder ERROR nodeId=' + folderId + ' err=' + String(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) {
+    _fdl('openPreview item=' + JSON.stringify({id: item.id, name: item.name, type: item.type, fileId: item.fileId}))
+    // For .md files: check if linked to a note, open note editor instead
+    if (item && item.fileId && isMarkdownFile(item)) {
+      _fdl('isMarkdown=true fileId=' + item.fileId)
+      try {
+        const action = await wailsCall('CheckFileAction', item.fileId)
+        _fdl('CheckFileAction result=' + JSON.stringify(action))
+        if (action.action === 'note') {
+          dispatch('openNote', { id: action.noteId, title: action.noteTitle })
+          return
+        }
+        if (action.action === 'external') {
+          await wailsCall('OpenFile', item.fileId)
+          return
+        }
+        // action === 'preview' → fall through to built-in preview below
+      } catch (e) {
+        _fdl('CheckFileAction ERROR: ' + String(e))
+        console.warn('CheckFileAction failed, falling back to preview:', e)
+      }
+    } else {
+      _fdl('isMarkdown=false or no fileId, type=' + item.type)
+    }
+
+    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) || ''
+      } else if (item.fileId && item.type !== 'folder') {
+        // Fallback: try to read as text for unknown types
+        _fdl('fallback text read for item=' + item.name + ' mime=' + item.mime)
+        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; }
+
+  /* Button styles (mirroring global App.svelte .btn) */
+  .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: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; }
+</style>
--- a/frontend/src/lib/components/notes/MarkdownPreview.svelte
+++ b/frontend/src/lib/components/notes/MarkdownPreview.svelte
@ -37,7 +37,7 @@
  }
 </script>

-<div class="markdown-body" on:click={handleClick} role="article">
+<div class="markdown-body" on:click={handleClick} role="article" tabindex="0" on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(e) }}>
  {#if error}
    <div class="md-error">
      <p>⚠️ {t('note.preview.error')}</p>
--- a/frontend/src/lib/components/notes/NotesTab.svelte
+++ b/frontend/src/lib/components/notes/NotesTab.svelte
@ -0,0 +1,120 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+
+  // ===== Props =====
+  export let notes = []
+  export let formatDate = (str) => ''
+
+  // ===== Events =====
+  const dispatch = createEventDispatcher()
+
+  // ===== Internal state =====
+  let showCreateNote = false
+  let newNoteTitle = ''
+
+  function openCreateNote() {
+    showCreateNote = true
+    newNoteTitle = ''
+  }
+
+  function cancelCreateNote() {
+    showCreateNote = false
+    newNoteTitle = ''
+  }
+
+  function submitCreateNote() {
+    if (!newNoteTitle.trim()) return
+    dispatch('submitCreateNote', { title: newNoteTitle.trim() })
+    showCreateNote = false
+    newNoteTitle = ''
+  }
+
+  function handleCreateKeydown(e) {
+    if (e.key === 'Enter') submitCreateNote()
+  }
+
+  function openNote(note) {
+    dispatch('openNote', { note })
+  }
+
+  function startRename(noteId, currentTitle) {
+    dispatch('startRename', { noteId, currentTitle })
+  }
+
+  function deleteNoteHandler(note) {
+    dispatch('deleteNote', { note })
+  }
+</script>
+
+<div class="notes-tab">
+  <div class="tab-toolbar">
+    <button class="btn btn-primary" on:click={openCreateNote}>Добавить заметку</button>
+  </div>
+
+  {#if showCreateNote}
+    <div class="create-form">
+      <input type="text" placeholder="Название заметки" bind:value={newNoteTitle}
+             on:keydown={handleCreateKeydown} />
+      <div class="form-actions">
+        <button class="btn btn-primary" on:click={submitCreateNote}>Создать</button>
+        <button class="btn" on:click={cancelCreateNote}>Отмена</button>
+      </div>
+    </div>
+  {/if}
+
+  {#if notes.length === 0 && !showCreateNote}
+    <div class="empty-state"><p>Нет заметок</p><p class="hint">Создайте первую заметку</p></div>
+  {:else if notes.length > 0}
+    <div class="notes-list">
+      {#each notes as note}
+        <div class="note-card" role="button" tabindex="0" on:click={() => openNote(note)} on:keydown={(e) => e.key === 'Enter' && 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={() => startRename(note.id, note.title)} title="Переименовать">
+              <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={() => deleteNoteHandler(note)} title="Удалить">
+              <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>
+
+<style>
+  .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; position: relative; }
+  .note-card:hover { border-color: #3a3a5c; }
+  .note-card-info { flex: 1; min-width: 0; }
+  .note-card-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
+  .note-card-date { font-size: 11px; color: #555; }
+  .note-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; position: absolute; top: 8px; right: 8px; }
+  .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; }
+  .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 .hint { font-size: 12px; color: #555; margin-top: 6px; }
+
+  /* Button styles (mirroring global App.svelte .btn) */
+  .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: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; }
+</style>
--- a/frontend/src/lib/fileUtils.js
+++ b/frontend/src/lib/fileUtils.js
@ -78,8 +78,8 @@ export function getFileKind(item) {
 }

 const imageMimes = ['image/jpeg','image/png','image/gif','image/webp','image/bmp','image/tiff','image/avif','image/svg+xml']
-const textMimes = ['text/plain','text/html','text/css','text/javascript','application/json','application/xml','application/x-yaml','text/x-shellscript']
-const codeNames = ['txt','log','conf','ini','yaml','yml','json','xml','csv','sh','py','js','ts','css','html','md','markdown','cfg']
+const textMimes = ['text/plain','text/html','text/css','text/javascript','application/json','application/xml','application/x-yaml','text/x-shellscript','text/csv','text/tab-separated-values','text/x-python','text/x-java','text/x-c','text/x-cpp','text/x-ruby','text/x-perl','text/x-php','text/x-go','text/x-rust','text/markdown']
+const codeNames = ['txt','log','conf','ini','yaml','yml','json','xml','csv','tsv','sh','py','js','ts','css','html','md','markdown','cfg','env','gitignore','dockerignore','toml','bat','cmd','ps1','sql','graphql','proto','gradle','cmake','makefile','dockerfile','vbs','lua','r','m','scala','kt','swift','dart','elm','erl','ex','exs','fs','fsi','fsx','hs','lhs','ml','mli','pl','pm','rb','rake','rs','scm','ss','clj','cljs','cljc','edn','lisp','lsp','el','vim','vimrc','zsh','bash','fish','csh','ksh','tcsh','awk','sed','make','mk','nim','nims','d','go','java','svelte','vue','jsx','tsx','coffee','litcoffee','scss','sass','less','styl','properties','dotenv','editorconfig','gitattributes','browserslistrc','htaccess','nginx','shader','glsl','vert','frag','asm','h','hpp','cxx','cc','cpp','capnp','flatbuf','prisma','dtd','xsl','xsd','sch','svg','vtt','srt','sub','m3u','m3u8','pls','xspf','cue','toc','nfo','diz','readme','changelog','copying','license','authors','contributors','setup','config','strings','po','pot','locale','translation']

 const imageExts = ['jpg','jpeg','png','gif','webp','bmp','tiff','tif','avif','svg']

--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -1,5 +1,48 @@
 import App from './App.svelte'

-new App({
-  target: document.getElementById('app')
+// ===== Global frontend error diagnostics =====
+// These catch runtime errors that would otherwise cause a silent blank window.
+
+window.addEventListener('error', (event) => {
+  const msg = event.error ? String(event.error) : event.message
+  const stack = event.error && event.error.stack ? event.error.stack : ''
+  console.error('[Frontend Error]', msg, stack)
+  try {
+    if (window['go'] && window['go']['main'] && window['go']['main']['App'] && typeof window['go']['main']['App']['FrontendLog'] === 'function') {
+      window['go']['main']['App']['FrontendLog']('error', msg, stack)
+    }
+  } catch (e) {
+    // Backend not ready — ignore
+  }
 })
+
+window.addEventListener('unhandledrejection', (event) => {
+  const reason = event.reason
+  const msg = reason instanceof Error ? String(reason) : JSON.stringify(reason)
+  const stack = reason instanceof Error && reason.stack ? reason.stack : ''
+  console.error('[Unhandled Promise Rejection]', msg, stack)
+  try {
+    if (window['go'] && window['go']['main'] && window['go']['main']['App'] && typeof window['go']['main']['App']['FrontendLog'] === 'function') {
+      window['go']['main']['App']['FrontendLog']('error', 'Unhandled rejection: ' + msg, stack)
+    }
+  } catch (e) {
+    // Backend not ready — ignore
+  }
+})
+
+// Mount App with error fallback
+try {
+  new App({
+    target: document.getElementById('app')
+  })
+} catch (e) {
+  console.error('[Fatal] App mount failed:', e)
+  const el = document.getElementById('app')
+  if (el) {
+    el.innerHTML = '<div style="padding:24px;color:#ff6b6b;font-family:monospace;white-space:pre-wrap">'
+      + '<h2>Frontend Runtime Error</h2>'
+      + '<p>' + String(e) + '</p>'
+      + (e.stack ? '<pre>' + e.stack + '</pre>' : '')
+      + '</div>'
+  }
+}
--- a/frontend/src/wailsjs/go/main/App.js
+++ b/frontend/src/wailsjs/go/main/App.js
@ -243,5 +243,25 @@ export function CountActivityByNode(arg1) {
 }

 export function CreateEmptyFile(arg1, arg2) {
-    return window['go']['main']['App']['CreateEmptyFile'](arg1, arg2);
+    return window['go']['main']['App']['CreateEmptyFile'](arg1, arg2)
+}
+
+// ===== Logging & Diagnostics =====
+
+export function FrontendLog(level, message, stack) {
+    try {
+        if (window['go'] && window['go']['main'] && window['go']['main']['App']) {
+            return window['go']['main']['App']['FrontendLog'](level, message, stack || '')
+        }
+    } catch (e) {}
+    return Promise.resolve()
+}
+
+export function LogStartupStep(step, success, detail) {
+    try {
+        if (window['go'] && window['go']['main'] && window['go']['main']['App']) {
+            return window['go']['main']['App']['LogStartupStep'](step, success, detail || '')
+        }
+    } catch (e) {}
+    return Promise.resolve()
 }
Author	SHA1	Message	Date
mirivlad	82f59ab8da	fix: FilesTab empty state, button styles, text preview, menu positioning - Add reactive $: block in FilesTab to auto-load files on selectedNode change - Copy .btn/.btn-primary/.btn-sm styles into NotesTab.svelte and FilesTab.svelte (scoped CSS) - Fix FilePreviewModal: render .md with MarkdownPreview, text files in <pre><code>, external open in footer - Expand codeNames/textMimes in fileUtils.js to cover all text file types - Add fallback text read for unknown file types in _openPreview - Fix toggleMenu in FileTreeRow: position menu near button using getBoundingClientRect - Add debug logs for file open flow and menu positioning - Add tabindex+keydown to MarkdownPreview div (a11y partial fix) Co-Authored-By: OWL (Hermes Agent) <hermes@nousresearch.com>	2026-06-16 09:08:13 +08:00
mirivlad	208cd970d7	refactor(frontend): extract OverviewTab safely - New component: frontend/src/lib/components/OverviewTab.svelte - Props: selectedNode, notes, worklog, formatDate, nodeKindLabel - Events: createNote, addFile, createAction, switchTab, openNote - Pure display component, no internal state - App.svelte changes: - Replaced inline overview markup with <OverviewTab> - Removed overview-related CSS (overview, meta-grid, qa-btn, etc.) - openCreateNote() call replaced with setActiveTab('notes') only (create note is now handled by NotesTab component) - Build: npm run build ✅, go test ./... ✅	2026-06-16 03:29:18 +08:00
mirivlad	58cdd61d27	refactor(frontend): extract NotesTab safely - New component: frontend/src/lib/components/notes/NotesTab.svelte - Owns notes list UI, create-note form, note cards with rename/delete - Props: notes array, formatDate - Events: submitCreateNote, openNote, startRename, deleteNote - App.svelte changes: - Removed inline notes tab markup (replaced with <NotesTab>) - Removed showCreateNote, newNoteTitle state variables - Removed openCreateNote, cancelCreateNote, submitCreateNote functions - Added _handleSubmitCreateNote() event handler from NotesTab - Removed notes-related CSS (notes-tab, note-card, note-action-*) - Fixed import paths in FilesTab (../../ instead of ../ for lib/ files) - Build: npm run build ✅, go test ./... ✅, build.sh gui ✅	2026-06-16 03:21:49 +08:00
mirivlad	acdbbdfa55	refactor(frontend): extract FilesTab safely - New component: frontend/src/lib/components/files/FilesTab.svelte - Owns all file tab state: loadingFiles, currentFolderId, folderStack, fileItems, preview, clipboard, selectedIds, dragIds, importing, importSummary, etc. - Public API via bind:this: resetToNode(), addFile(), loadFolder(), openFileById(), focusItem(), handleFilesKeydown(), resetState() - Events: openNote, refreshParent, error - Inline modals: rename, confirm, import dialog, file preview - App.svelte changes: - Removed all file-specific state variables and functions - Preview state renamed to trashPreview (for trash preview only) - Files tab inline markup replaced with <FilesTab> component - Overview 'Add file' button delegates to filesTabRef.addFile() - openInboxArtifact, navigateToFile, openActivityTarget, openSearchResult delegate to filesTabRef for file operations - Node rename (tree context menu) uses separate openNodeRename/submitNodeRename functions (file rename is now in FilesTab) - closeTrashPreview for trash file preview modal - Build: npm run build ✅, go test ./... ✅, build.sh gui ✅	2026-06-16 03:00:24 +08:00
mirivlad	df21340402	chore(frontend): add diagnostics before app split - main.js: global error handlers (error + unhandledrejection), try/catch around App mount with inline fallback UI - bindings_logging.go: FrontendLog() and LogStartupStep() backend bindings for persistent application logging - App.js: FrontendLog() and LogStartupStep() Wails JS bindings - docs/frontend-architecture.md: component architecture, state ownership rules, communication patterns, logging guide, troubleshooting All existing code untouched. This is a pure additive step that enables blank-window debugging before any App.svelte extraction begins.	2026-06-16 02:22:44 +08:00