fix(frontend): restore capture/drag overlay state vars

Same class of bug as cd982f2: 9878ab4 (extract FilesTab) also removed 'let' declarations for capture/drag-drop state that's still used by the inbox capture flow and CaptureDropOverlay: captureDropActive, captureDropLabel, captureDragDepth, lastCaptureDragOverAt, captureDragResetTimer, dropRootValid, inboxDropValid Without them, Svelte runtime throws ReferenceError on first render ('captureDropActive is not defined'), leaving the WebView empty. Verified with headless render smoke: .app + .sidebar mount, sidebar shows system views + workspace, welcome screen renders. Rebuild embedded frontend bundle.
fix(frontend): restore trash preview state vars after FilesTab extraction
2026-06-15 17:46:10 +00:00 · 2026-06-15 17:30:38 +00:00 · 2026-06-15 20:31:23 +08:00 · 2026-06-15 19:03:07 +08:00
39 changed files with 1330 additions and 1681 deletions
@@ -210,46 +210,6 @@ func (a *App) CheckFileAction(fileID string) (*PreflightFileAction, error) {
 	return &PreflightFileAction{Action: "preview", FileName: fileRec.Filename}, nil
 }

-// SaveFileText saves text content to a file record.
-// Only works for vault-contained text files (not binary).
-func (a *App) SaveFileText(fileID string, content string) error {
-	if err := a.requireVault(); err != nil {
-		return err
-	}
-	fileRec, err := a.files.Get(fileID)
-	if err != nil {
-		return fmt.Errorf("get file: %w", err)
-	}
-	// Safety: only save text-like files
-	name := strings.ToLower(fileRec.Filename)
-	isText := strings.HasPrefix(fileRec.MIME, "text/") ||
-		strings.HasSuffix(name, ".md") ||
-		strings.HasSuffix(name, ".txt") ||
-		strings.HasSuffix(name, ".json") ||
-		strings.HasSuffix(name, ".yaml") ||
-		strings.HasSuffix(name, ".yml") ||
-		strings.HasSuffix(name, ".csv") ||
-		strings.HasSuffix(name, ".xml") ||
-		strings.HasSuffix(name, ".ini") ||
-		strings.HasSuffix(name, ".conf") ||
-		strings.HasSuffix(name, ".sh") ||
-		strings.HasSuffix(name, ".py") ||
-		strings.HasSuffix(name, ".js") ||
-		strings.HasSuffix(name, ".ts") ||
-		strings.HasSuffix(name, ".css") ||
-		strings.HasSuffix(name, ".html") ||
-		strings.HasSuffix(name, ".log")
-	if !isText {
-		return fmt.Errorf("refusing to save binary file: %s", fileRec.Filename)
-	}
-	if err := a.files.WriteText(fileRec, content); err != nil {
-		return fmt.Errorf("write file: %w", err)
-	}
-	// Record activity
-	_ = a.activity.Record(fileRec.NodeID, activity.TargetFile, fileID, "", activity.TypeFileModified, fileRec.Filename, "")
-	return nil
-}
-
 func (a *App) PreviewImport(sourcePath string) (*files.ImportSummary, error) {
 	if err := a.requireVault(); err != nil {
 		return nil, err
@@ -1,89 +0,0 @@
-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)
-}
@@ -19,8 +19,8 @@
      background: #13131f;
    }
  </style>
-  <script type="module" crossorigin src="/assets/main-B99YW--H.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-CtgLvi_n.css">
+  <script type="module" crossorigin src="/assets/main-C0D__Sxo.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-Bl-yCbt2.css">
 </head>
 <body>
  <div id="app"></div>
@@ -1,216 +1,161 @@
-# Frontend Architecture — Verstak GUI
+# Frontend Architecture

-## Tech Stack
+## Overview

- **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)
+Verstak frontend is a Svelte 3 application running inside Wails v2 (Go bridge).
+The app manages a hierarchical vault of nodes (folders/cases, notes, files, links, actions)
+with sync capabilities, worklog/journal, and activity tracking.

-## Source Structure
+## Technology Stack
+
+- **UI Framework:** Svelte 3 (plain JS, no TypeScript in components)
+- **Desktop Bridge:** Wails v2 (`window.go.main.App.*`)
+- **Bundler:** Vite (via Wails)
+- **Markdown:** Custom renderer in `lib/markdown/`
+- **i18n:** Custom lightweight system in `lib/i18n/`
+- **Styling:** Scoped CSS in Svelte components, dark theme
+
+## Directory 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
+├── App.svelte                  # Root component (being modularised)
+├── TreeNode.svelte             # Tree node for sidebar (inline)
+├── FileTreeRow.svelte          # File row in file tab (inline)
+├── wailsjs/go/main/App.js      # Auto-generated Wails bindings
+├── lib/
+│   ├── components/             # Reusable UI components
+│   │   └── notes/
+│   │       ├── NoteEditorPanel.svelte
+│   │       ├── MarkdownEditor.svelte
+│   │       ├── MarkdownPreview.svelte
+│   │       ├── InternalLinkPicker.svelte
+│   │       └── ObjectPickerModal.svelte
+│   ├── services/               # API/Data access layer
+│   │   ├── wails.js            # Base Wails call helper
+│   │   ├── notes.js            # Notes API
+│   │   ├── files.js            # Files API
+│   │   ├── search.js           # Search API
+│   │   ├── inbox.js            # Inbox API
+│   │   ├── trash.js            # Trash API
+│   │   ├── sync.js             # Sync API
+│   │   ├── journal.js          # Journal/Worklog API
+│   │   ├── actions.js          # Actions API
+│   │   ├── links.js            # Links API
+│   │   └── activity.js         # Activity API
+│   ├── state/                  # State management (planned)
+│   │   ├── navigation.js       # Navigation state
+│   │   └── uiState.js          # UI state
+│   ├── markdown/               # Markdown processing
+│   │   ├── markdown.ts
+│   │   └── internalLinks.ts
+│   ├── i18n/                   # Internationalisation
+│   │   ├── index.js
+│   │   └── locales/
+│   │       ├── en.js
+│   │       └── ru.js
+│   ├── util/                   # Utilities
+│   │   ├── keyboardLayout.ts
+│   │   └── markdown.test.js
+│   ├── AppHeader.svelte
+│   ├── GlobalSearch.svelte
+│   ├── FileBreadcrumbs.svelte
+│   ├── FileIcon.svelte
+│   ├── FilePreviewModal.svelte
+│   ├── ConfirmModal.svelte
+│   ├── TodayScreen.svelte
+│   ├── BrowserEvents.svelte
+│   ├── FirstRun.svelte
+│   ├── VaultRecovery.svelte
+│   ├── SyncStatus.svelte
+│   ├── TemplateIcon.svelte
+│   ├── CalendarPluginPage.svelte
+│   ├── SettingsWindow.svelte
+│   ├── SettingsSidebar.svelte
+│   ├── SettingsGeneral.svelte
+│   ├── SettingsSync.svelte
+│   ├── SettingsPlugins.svelte
+│   ├── SettingsBrowserBridge.svelte
+│   ├── SettingsWorkspace.svelte
+│   ├── SettingsTemplates.svelte
+│   ├── SettingsFiles.svelte
+│   ├── SettingsBackup.svelte
+│   ├── SettingsActivity.svelte
+│   ├── actionIcons.js
+│   └── fileUtils.js
 ```

-## Role of App.svelte
+## Wails Bridge

-`App.svelte` is the **root component**. It owns:
+All backend calls go through `window.go.main.App[method](...)`.
+The `wailsCall()` helper in `lib/services/wails.js` provides error handling.

-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
+## Planned Components (to extract from App.svelte)

-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`
+### Layout
+- `AppShell.svelte` — root layout wrapper
+- `Sidebar.svelte` — navigation sidebar
+- `MainWorkspace.svelte` — main content area

-## Component Communication
+### Pages/Tab Content
+- `OverviewTab.svelte` — node overview with meta and quick actions
+- `NotesTab.svelte` — notes list and creation
+- `FilesTab.svelte` — file browser with breadcrumbs
+- `InboxContent.svelte` + `InboxFullScreen.svelte`
+- `LinksTab.svelte`
+- `ActionsTab.svelte`
+- `WorklogTab.svelte`
+- `ActivityTabContent.svelte`
+- `TrashContent.svelte`
+- `JournalScreen.svelte`
+- `ActivityFeedScreen.svelte`
+- `WelcomeScreen.svelte`

-### Props (parent → child)
-Data flows down via Svelte `export let prop`
+### Modals
+- `CreateNodeModal.svelte`
+- `WorklogModal.svelte`
+- `CreateActionModal.svelte`
+- `ImportModal.svelte`
+- `RenameModal.svelte`
+- `AssignInboxModal.svelte`
+- `EditLinkModal.svelte`
+- `LinkInsertModal.svelte`
+- `NoteRenameModal.svelte`
+- `ContextMenu.svelte`

-### Events (child → parent)
-Children dispatch events via `createEventDispatcher()`
+## Data Flow

-### Public API (bind:this)
-Parent gets imperative handle via `bind:this={ref}` and calls:
- `ref.publicMethod(args)` — guard with optional chaining: `ref?.method?.(args)`
+1. User interacts with UI component
+2. Component calls a service function (e.g., `notesApi.createNote(...)`)
+3. Service calls `wailsCall('CreateNote', ...)` 
+4. Wails bridge forwards to Go backend
+5. Go backend returns result → Wails → service → component updates state

-## Component Reference
+## State Management

-### OverviewTab (`lib/components/OverviewTab.svelte`)
-**Props**: `selectedNode`, `notes`, `worklog`, `formatDate`, `nodeKindLabel`
-**Events**: `createNote`, `addFile`, `createAction`, `switchTab`, `openNote`
-**State**: None (pure display)
+Currently all state lives in App.svelte as local variables.
+Target: extract into `lib/state/navigation.js` and `lib/state/uiState.js`.

-### NotesTab (`lib/components/notes/NotesTab.svelte`)
-**Props**: `notes`, `formatDate`
-**Events**: `submitCreateNote`({title}), `openNote`({note}), `startRename`({noteId, currentTitle}), `deleteNote`({note})
-**State**: `showCreateNote`, `newNoteTitle`
+### Files Flow

-### 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)
+- **Component:** `lib/components/files/FilesTab.svelte` — self-contained file browser
+- **API services:** `lib/services/files.js`, `lib/services/nodes.js`
+- **Events emitted:**
+  - `on:openNote` — when a .md file linked to a note is opened
+  - `on:refreshParent` — after file operations that modify the tree
+  - `on:error` — on operation failures
+  - `on:rename` — requests parent to show rename modal
+  - `on:confirm` — requests parent to show confirm dialog
+- **Public methods:**
+  - `resetToNode(nodeId)` — reset state when selected node changes
+  - `filesHandleKeydown(e)` — keyboard handler for files tab
+- **.md → note editor flow:** Handled inside FilesTab via `CheckFileAction` Wails call. If action is 'note', emits `openNote`. If 'external', opens in system viewer. Otherwise shows built-in preview.
+- **File preview:** `FilePreviewModal.svelte` (already existed), invoked by FilesTab
+- **Import dialog:** Inline in FilesTab template (moved from App.svelte)

-**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`
+## Build & Verification

-## 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
+- `npm run build` in `frontend/` directory
+- `go test ./...` from project root
+- `bash scripts/build.sh gui` for full GUI binary
+- Manual smoke testing via Wails dev server
@@ -0,0 +1,107 @@
+# Frontend Change Map
+
+## Purpose
+
+This document tracks the refactoring of `App.svelte` from a 4794-line monolith
+into a modular frontend architecture. Each step preserves behaviour exactly.
+
+## Phase 1: Documentation & Foundation
+
+- [x] Audit App.svelte (all 4794 lines read and mapped)
+- [x] Create `docs/frontend-architecture.md`
+- [x] Create `docs/frontend-change-map.md`
+
+## Phase 2: API Layer
+
+Extract all Wails calls into service modules.
+
+- [x] Create `lib/services/wails.js` — base `wailsCall` helper
+- [x] Create `lib/services/notes.js` — `listNotes`, `createNote`, `readNote`, `saveNote`, `renameNote`, `deleteNote`
+- [x] Create `lib/services/files.js` — `loadFolder`, `addFile`, `deleteFile`, etc.
+- [x] Create `lib/services/search.js` — `searchNodes`, `getNodeDetail`, `searchWorkspace`
+- [x] Create `lib/services/inbox.js` — inbox capture and management
+- [x] Create `lib/services/trash.js` — trash operations
+- [x] Create `lib/services/sync.js` — sync status and trigger
+- [x] Create `lib/services/journal.js` — worklog CRUD and reports
+- [x] Create `lib/services/actions.js` — actions CRUD
+- [x] Create `lib/services/links.js` — links CRUD
+- [x] Create `lib/services/activity.js` — activity feed
+- [x] Create `lib/services/nodes.js` — tree, node CRUD, system views
+- [x] Create `lib/services/suggestions.js` — worklog suggestions
+- [x] Create `lib/services/today.js` — today dashboard
+- [x] Create `lib/services/browserEvents.js` — browser extension events
+- [x] Create `lib/services/search.js` — `searchNodes`
+- [x] Create `lib/services/inbox.js` — `listInbox`, `captureClipboard`, etc.
+- [x] Create `lib/services/trash.js` — `loadTrash`, `restore`, `purge`
+- [x] Create `lib/services/sync.js` — `loadSyncStatus`, `runSync`
+- [x] Create `lib/services/journal.js` — `loadJournal`, `worklog CRUD`
+- [x] Create `lib/services/actions.js` — `listActions`, `createAction`, `deleteAction`
+- [x] Create `lib/services/links.js` — `listLinks`, `updateLink`, `deleteLink`
+- [x] Create `lib/services/activity.js` — `loadActivityFeed`, `loadCaseActivity`
+
+## Phase 3: State Extraction
+
+- [ ] Create `lib/state/navigation.js` — `selectedSection`, `selectedNode`, `activeTab`, `navHistory`
+- [ ] Create `lib/state/uiState.js` — modals state, confirm state, rename state, drag state
+
+## Phase 4: Component Extraction — Layout
+
+- [ ] Extract `Sidebar.svelte` — brand, nav items, workspace tree, footer
+- [ ] Extract `MainWorkspace.svelte` — content routing
+- [ ] Create `AppShell.svelte` — root layout wrapper
+
+## Phase 5: Component Extraction — Tab Content
+
+- [x] Extract `OverviewTab.svelte`
+- [x] Extract `NotesTab.svelte`
+- [x] Extract `FilesTab.svelte`
+- [ ] Extract `LinksTab.svelte`
+- [ ] Extract `ActionsTab.svelte`
+- [ ] Extract `WorklogTab.svelte`
+- [ ] Extract `ActivityTabContent.svelte`
+- [ ] Extract `InboxContent.svelte`
+- [ ] Extract `InboxFullScreen.svelte`
+- [ ] Extract `TrashContent.svelte`
+- [ ] Extract `JournalScreen.svelte`
+- [ ] Extract `ActivityFeedScreen.svelte`
+- [ ] Extract `WelcomeScreen.svelte`
+
+## Phase 6: Component Extraction — Modals
+
+- [ ] Extract `CreateNodeModal.svelte`
+- [ ] Extract `WorklogModal.svelte`
+- [ ] Extract `CreateActionModal.svelte`
+- [ ] Extract `ImportModal.svelte`
+- [ ] Extract `RenameModal.svelte`
+- [ ] Extract `AssignInboxModal.svelte`
+- [ ] Extract `EditLinkModal.svelte`
+- [ ] Extract `ContextMenu.svelte`
+
+## Phase 7: Extract Inline Components
+
+- [ ] Extract `NoteEditorHeader.svelte` (note editor header with rename)
+- [ ] Extract `ErrorBanner.svelte`
+- [ ] Extract `CaptureDropOverlay.svelte`
+- [ ] Extract `SidebarFooter.svelte`
+
+## Phase 8: Verification
+
+- [ ] `npm run build` passes
+- [ ] `go test ./...` passes
+- [ ] Smoke checklist:
+  1. Sidebar renders with system views
+  2. Workspace tree loads and is expandable
+  3. Selecting a node shows tabs
+  4. Overview tab shows metadata and quick actions
+  5. Notes tab — create, rename, delete notes
+  6. Note editor — edit, preview, save, internal links, external links
+  7. Files tab — browse, add file/folder, navigate breadcrumbs
+  8. File preview — open, close
+  9. Inbox — list, sort, group, assign, delete
+  10. Trash — browse, restore, purge
+  11. Journal — filter, export, worklog CRUD
+  12. Activity feed — load and open events
+  13. Today screen — dashboard, suggestions, browser events
+  14. Settings — open/close, sections
+  15. Context menu on workspace tree
+  16. Create node modal — templates
@@ -18,10 +18,15 @@
  import { t } from './lib/i18n'
  import NoteEditorPanel from './lib/components/notes/NoteEditorPanel.svelte'
  import InternalLinkPicker from './lib/components/notes/InternalLinkPicker.svelte'
-  import NotesTab from './lib/components/notes/NotesTab.svelte'
+  import ErrorBanner from './lib/components/ErrorBanner.svelte'
+  import CaptureDropOverlay from './lib/components/CaptureDropOverlay.svelte'
  import OverviewTab from './lib/components/OverviewTab.svelte'
+  import NotesTab from './lib/components/notes/NotesTab.svelte'
  import FilesTab from './lib/components/files/FilesTab.svelte'

+  // Component refs
+  let filesTabRef = null
+
  // ===== Wails v2 API call helper =====
  function wailsCall(method, ...args) {
    try {
@@ -79,10 +84,22 @@
  let selectedSection = ''
  let selectedNode = null
  let activeTab = 'overview'
+  // Trash preview state (kept in App.svelte because trash lives outside FilesTab)
+  let previewItem = null
+  let previewContent = ''
+  let previewLoading = false
+  let previewError = ''
+  // Capture/drag-drop overlay state (kept in App.svelte; used by inbox capture flow)
+  let captureDropActive = false
+  let captureDropLabel = ''
+  let captureDragDepth = 0
+  let lastCaptureDragOverAt = 0
+  let captureDragResetTimer = null
+  let dropRootValid = false
+  let inboxDropValid = false
  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 = ''
@@ -146,6 +163,8 @@
  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'
@@ -160,21 +179,6 @@
    { id: 'launch_app', label: t('action.launchApp') },
  ]
  let loading = true
-  let treeItems = []
-  let expanded = {}
-  let childrenMap = {}
-
-  let trashPreviewItem = null
-  let trashPreviewContent = ''
-  let trashPreviewLoading = false
-  let trashPreviewError = ''
-  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 = ''
@@ -292,12 +296,12 @@
  function closeTopModalForBack() {
    if (showConfirm) { closeConfirm(); return true }
    if (showSettings) { closeSettings(); 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 (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 }
@@ -314,9 +318,6 @@
        }
        await selectNode(node)
        activeTab = snapshot.tab || 'overview'
-        if (activeTab === 'files') {
-          filesTabRef?.resetToNode?.(node.id)
-        }
        return true
      } else if (snapshot.section) {
        if (!systemViews.some(view => view.id === snapshot.section)) {
@@ -361,7 +362,6 @@
    if (activeTab === tabId) return
    rememberNavigation()
    activeTab = tabId
-    if (tabId === 'files' && selectedNode) filesTabRef?.resetToNode?.(selectedNode.id)
  }

  // ===== Lifecycle =====
@@ -512,8 +512,10 @@
    resetTrashBrowser()
    noteEditor = null
    showCreateNode = false
+    showCreateNote = false
    error = ''
    caseActivity = []
+    if (filesTabRef) filesTabRef.resetToNode(node.id)
    await loadTabData(node.id)
  }

@@ -531,63 +533,7 @@
    try { caseActivity = await wailsCall('ListActivityByNode', nodeID, 50, 0) || [] } catch(e) {}
  }

-  async function loadTree(nodeID) {
-    try {
-      treeItems = await wailsCall('ListItems', nodeID) || []
-    } catch (e) {
-      treeItems = []
-    }
-  }
-
-  // ===== Node rename (for tree context menu) =====
-  function openNodeRename(id, currentName) {
-    renameId = id
-    renameValue = currentName
-    renameError = ''
-    showRename = true
-  }
-
-  async function submitNodeRename() {
-    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()
-    } catch (e) {
-      error = String(e)
-    }
-  }
-
-  function cancelNodeRename() {
-    showRename = false
-    renameId = ''
-    renameValue = ''
-    renameError = ''
-  }
-
-  function onNodeRenameKeydown(e) {
-    if (e.key === 'Enter') submitNodeRename()
-    else renameError = ''
-  }
-
-  // ===== Trash preview =====
-  function closeTrashPreview() {
-    trashPreviewItem = null
-    trashPreviewContent = ''
-    trashPreviewError = ''
-  }
+  // ===== Keyboard =====

  function isEditableTarget(target) {
    if (!target || !(target instanceof Element)) return false
@@ -608,14 +554,71 @@
      return
    }

-    if (activeTab === 'files' && filesTabRef) {
-      return filesTabRef.handleFilesKeydown(e)
+    if (activeTab !== 'files') return
+
+    if (filesTabRef) {
+      filesTabRef.filesHandleKeydown(e)
+      return
    }
  }

-      // ===== Rename modal =====
+  // ===== Rename modal =====

-            // ===== Confirm 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')
@@ -767,7 +770,7 @@

  // ===== Node operations from context menu =====
  function openRenameForNode(node) {
-    openNodeRename(node.id, node.title)
+    openRename(node.id, node.title)
    closeContextMenu()
  }

@@ -840,8 +843,12 @@
        selectedSection = ''
        selectedNode = item
        activeTab = 'files'
+        folderStack = []
+        currentFolderId = null
+        selectedIds = []
+        previewItem = null
        await loadTabData(item.id)
-        filesTabRef?.resetToNode?.(item.id)
+        await loadFolder(item.id)
        return
      }

@@ -851,8 +858,7 @@
        if (!record) throw new Error('file record not found')
        const preview = fileRecordToPreviewItem(item, record)
        if (canPreviewFile(preview)) {
-          activeTab = 'files'
-          filesTabRef?.openFileById?.(item.id)
+          await openPreview(preview)
        } else {
          await wailsCall('OpenFile', preview.fileId)
        }
@@ -913,17 +919,21 @@
  }

  // ===== Notes =====
-  // Notes create/delete/rename are handled by NotesTab component via events.
-  // App.svelte keeps note editor lifecycle (doOpenNote, saveCurrentNote, etc.)
-
-  async function _handleSubmitCreateNote(title) {
-    if (!title.trim() || !selectedNode) return
+  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, title.trim())
-      notes = [...notes, (note && note.id) ? note : { id: Date.now().toString(), title: title.trim(), createdAt: new Date().toISOString() }]
+      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) {
-      const newNote = { id: Date.now().toString(), title: title.trim(), createdAt: new Date().toISOString() }
+      // Fallback: create note locally
+      const newNote = { id: Date.now().toString(), title: newNoteTitle.trim(), createdAt: new Date().toISOString() }
      notes = [...notes, newNote]
+      showCreateNote = false
+      newNoteTitle = ''
    }
  }

@@ -1157,8 +1167,14 @@
          await selectNode(parent)
        }
        setActiveTab('files')
-        filesTabRef?.resetToNode?.(parentId)
-        filesTabRef?.openFileById?.(id)
+        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 }))
      }
@@ -1328,22 +1344,22 @@
  }

  async function openTrashFilePreview(node) {
-    trashPreviewItem = { name: node.title, type: 'file', mime: 'text/plain', size: 0, fileId: node.id }
-    trashPreviewContent = ''
-    trashPreviewError = ''
-    trashPreviewLoading = true
+    previewItem = { name: node.title, type: 'file', mime: 'text/plain', size: 0, fileId: node.id }
+    previewContent = ''
+    previewError = ''
+    previewLoading = true
    try {
      if (node.trashFsPath) {
-        trashPreviewContent = await wailsCall('ReadTrashFile', node.trashFsPath) || ''
+        previewContent = await wailsCall('ReadTrashFile', node.trashFsPath) || ''
      } else {
-        trashPreviewContent = await wailsCall('ReadTrashFileContent', node.id) || ''
+        previewContent = await wailsCall('ReadTrashFileContent', node.id) || ''
      }
      const ext = (node.title || '').split('.').pop().toLowerCase()
      if (['png','jpg','jpeg','gif','webp','bmp','svg'].includes(ext)) {
-        trashPreviewContent = 'data:image/' + (ext === 'svg' ? 'svg+xml' : ext) + ';base64,' + btoa(previewContent)
+        previewContent = 'data:image/' + (ext === 'svg' ? 'svg+xml' : ext) + ';base64,' + btoa(previewContent)
      }
-    } catch (e) { trashPreviewError = String(e) }
-    trashPreviewLoading = false
+    } catch (e) { previewError = String(e) }
+    previewLoading = false
  }

  function toggleTrashSelection(id) {
@@ -1622,8 +1638,16 @@
    URL.revokeObjectURL(url)
  }

-  // ===== Files =====
-                // ===== Drag-and-drop =====
+  // ===== Drag-and-drop =====
+  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
@@ -1904,6 +1928,7 @@
    }
  }
  function hasExternalCaptureData(dataTransfer) {
+    if (dragIds.length > 0) return false
    const types = Array.from(dataTransfer?.types || [])
    return types.includes('Files') ||
      types.includes('text/uri-list') ||
@@ -2230,17 +2255,20 @@
          try {
            const detail = await wailsCall('GetNodeDetail', target.targetId)
            if (detail && detail.parent_id) {
-              filesTabRef?.resetToNode?.(detail.parent_id)
-              filesTabRef?.openFileById?.(target.targetId)
+              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
-              filesTabRef?.resetToNode?.(targetNode)
+              await loadFolder(targetNode)
            }
          } catch(e) {
-            filesTabRef?.resetToNode?.(targetNode)
+            await loadFolder(targetNode)
          }
        } else {
-          filesTabRef?.resetToNode?.(targetNode)
+          await loadFolder(targetNode)
        }
      }
    } catch (e) {
@@ -2291,15 +2319,18 @@
        if (parent) {
          await selectNode(parent)
          setActiveTab('files')
-          filesTabRef?.resetToNode?.(parent.id)
-          filesTabRef?.openFileById?.(detail.id)
+          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')
-        filesTabRef?.resetToNode?.(detail.id)
+        await loadFolder(detail.id)
        return
      }
      await selectNode(detail)
@@ -2394,19 +2425,13 @@
  }
 </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}
+  <CaptureDropOverlay show={captureDropActive} label={captureDropLabel} />
  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="sidebar-brand">
@@ -2497,16 +2522,7 @@
      </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}
+    <ErrorBanner {error} onDismiss={() => error = ''} />

    {#if noteEditor}
      <!-- Note editor with markdown preview -->
@@ -2562,35 +2578,40 @@
      <div class="tab-content">
        {#if activeTab === 'overview'}
          <OverviewTab
-            {selectedNode}
+            node={selectedNode}
            {notes}
            {worklog}
-            {formatDate}
            {nodeKindLabel}
-            on:createNote={() => { setActiveTab('notes'); }}
-            on:addFile={() => { setActiveTab('files'); if (filesTabRef) filesTabRef.addFile(); }}
-            on:createAction={openCreateAction}
+            {formatDate}
+            on:goTab={(e) => setActiveTab(e.detail)}
            on:openNote={(e) => openNote(e.detail.note)}
+            on:createNote={() => { setActiveTab('notes'); openCreateNote() }}
+            on:addFile={() => { setActiveTab('files'); addFile() }}
+            on:createAction={openCreateAction}
          />

        {:else if activeTab === 'notes'}
          <NotesTab
            {notes}
+            showCreateNote={showCreateNote}
            {formatDate}
-            on:submitCreateNote={(e) => _handleSubmitCreateNote(e.detail.title)}
+            on:createNote={openCreateNote}
+            on:submitCreateNote={(e) => { newNoteTitle = e.detail.title; submitCreateNote() }}
+            on:cancelCreateNote={cancelCreateNote}
            on:openNote={(e) => openNote(e.detail.note)}
-            on:startRename={(e) => startRenameNote(e.detail.noteId, e.detail.currentTitle)}
-            on:deleteNote={(e) => deleteNote(e.detail.note)}
+            on:startRename={(e) => startRenameNote(e.detail.note.id, e.detail.note.title)}
+            on:delete={(e) => deleteNote(e.detail.note)}
          />

        {:else if activeTab === 'files'}
          <FilesTab
            bind:this={filesTabRef}
            {selectedNode}
-            {wailsCall}
-            on:openNote={(e) => openNote(e.detail)}
+            on:openNote={(e) => openNote(e.detail.note)}
            on:refreshParent={(e) => refreshParentNode(e.detail.nodeId)}
-            on:error={(e) => error = e.detail.message}
+            on:error={(e) => { error = e.detail.message }}
+            on:rename={(e) => openRename(e.detail.id, e.detail.name)}
+            on:confirm={(e) => openConfirm(e.detail)}
          />

        {:else if activeTab === 'inbox'}
@@ -3458,21 +3479,21 @@
    {/if}

    {#if showRename}
-      <div class="modal-overlay" role="button" tabindex="0" on:click|self={cancelNodeRename} on:keydown={onKeyActivate(cancelNodeRename)}>
+      <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={onNodeRenameKeydown} />
+                   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={submitNodeRename}>{t('common.rename')}</button>
-            <button class="btn" on:click={cancelNodeRename}>{t('common.cancel')}</button>
+            <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>
@@ -3553,13 +3574,13 @@
      />
    {/if}

-    {#if trashPreviewItem}
+    {#if previewItem}
      <FilePreviewModal
-        item={trashPreviewItem}
-        content={trashPreviewContent}
-        loading={trashPreviewLoading}
-        error={trashPreviewError}
-        on:close={closeTrashPreview}
+        item={previewItem}
+        content={previewContent}
+        loading={previewLoading}
+        error={previewError}
+        on:close={closePreview}
        on:openExternal={(e) => wailsCall('OpenFile', e.detail)}
      />
    {/if}
@@ -3571,7 +3592,6 @@
 </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; }
@@ -3646,6 +3666,15 @@
 .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; }
@@ -3653,6 +3682,36 @@
 .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; }
@@ -3918,9 +3977,17 @@
 }

 /* 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; }
@@ -88,14 +88,7 @@
    }
  }

-  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)
-    }
+  function toggleMenu() {
    menuOpen = !menuOpen
  }

@@ -119,7 +112,6 @@
    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
  }

@@ -1,7 +1,6 @@
 <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'

@@ -14,8 +13,7 @@

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

  function handleKeydown(e) {
@@ -46,6 +44,13 @@
      </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"/>
@@ -66,11 +71,7 @@
        <div class="preview-image-container">
          <img src={content} alt={item.name} class="preview-image"/>
        </div>
-      {:else if showMarkdown}
-        <div class="preview-markdown-container">
-          <MarkdownPreview {content} />
-        </div>
-      {:else if showText}
+      {:else if showText && content}
        <pre class="preview-text"><code>{content}</code></pre>
      {:else if showPdf}
        {#if content && content.startsWith('data:')}
@@ -90,9 +91,6 @@
        </div>
      {/if}
    </div>
-    <footer class="preview-footer">
-      <button class="btn btn-sm" on:click={handleOpenExternal}>{t('file.openExternal')}</button>
-    </footer>
  </div>
 </div>

@@ -262,20 +260,4 @@
  .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>
@@ -0,0 +1,15 @@
+<script>
+  export let show = false
+  export let label = ''
+</script>
+
+{#if show}
+  <div class="capture-drop-overlay">
+    <div class="capture-drop-box">{label}</div>
+  </div>
+{/if}
+
+<style>
+  .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; }
+</style>
@@ -0,0 +1,37 @@
+<script>
+  import { t } from '../i18n'
+
+  export let error = ''
+  export let onDismiss = () => {}
+
+  function translateError(msg) {
+    const map = {
+      'vault not open': t('error.vaultNotOpen'),
+    }
+    return map[msg] || msg
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onDismiss()
+    }
+  }
+</script>
+
+{#if error}
+  <div class="error-banner" role="button" tabindex="0" on:click={onDismiss} on:keydown={handleKeydown}>
+    {translateError(error)}
+    <button class="dismiss-btn" on:click|stopPropagation={onDismiss} 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}
+
+<style>
+  .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; }
+</style>
@@ -1,73 +1,74 @@
 <script>
-  import { createEventDispatcher } from 'svelte'
  import { t } from '../i18n'
+  import { actionIcon } from '../actionIcons'
+  import { createEventDispatcher } from 'svelte'

-  // ===== 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() {
+  export let node = null
+  export let notes = []
+  export let worklog = []
+  export let nodeKindLabel = (type) => type || ''
+  export let formatDate = (d) => d || ''
+
+  function goNotesCreate() {
+    dispatch('goTab', 'notes')
    dispatch('createNote')
  }

-  function addFile() {
+  function goFilesAdd() {
+    dispatch('goTab', 'files')
    dispatch('addFile')
  }

-  function createAction() {
-    dispatch('createAction')
-  }
-
-  function logTime() {
-    dispatch('switchTab', { tab: 'worklog' })
-  }
-
-  function openNoteHandler(note) {
-    dispatch('openNote', { note })
+  function onKeyActivate(fn) {
+    return (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        fn()
+      }
+    }
  }
 </script>

 <div class="overview">
-  <h2>{selectedNode.title}</h2>
+  <h2 class="node-title">{node.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 class="meta-item"><span class="meta-label">{t('overview.type')}</span><span>{nodeKindLabel(node.type)}</span></div>
+    <div class="meta-item"><span class="meta-label">{t('overview.section')}</span><span>{node.section || '—'}</span></div>
+    <div class="meta-item"><span class="meta-label">{t('overview.created')}</span><span>{formatDate(node.createdAt)}</span></div>
  </div>
+
  <div class="quick-actions">
-    <button class="qa-btn" on:click={createNote}>
+    <button class="qa-btn" on:click={goNotesCreate}>
      <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}>
+    <button class="qa-btn" on:click={goFilesAdd}>
      <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}>
+    <button class="qa-btn" on:click={() => dispatch('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}>
+    <button class="qa-btn" on:click={() => dispatch('goTab', '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={() => openNoteHandler(note)} on:keydown={(e) => e.key === 'Enter' && openNoteHandler(note)}>
+        <div class="recent-note" role="button" tabindex="0" on:click={() => dispatch('openNote', { note })} on:keydown={onKeyActivate(() => dispatch('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>
@@ -80,7 +81,7 @@

 <style>
  .overview { padding: 24px; }
-  .overview h2 { font-size: 24px; margin-bottom: 16px; }
+  .node-title { font-size: 24px; margin-bottom: 16px; color: #e4e4ef; }
  .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; }
@@ -1,345 +0,0 @@
-<script>
-  import { createEventDispatcher } from 'svelte'
-  import MarkdownEditor from './MarkdownEditor.svelte'
-  import MarkdownPreview from './MarkdownPreview.svelte'
-  import { isMarkdownFile } from '../../fileUtils.js'
-  import { t } from '../../i18n'
-
-  // ===== Props =====
-  export let content = ''
-  export let title = ''
-  export let subtitle = ''
-  export let loading = false
-  export let error = ''
-  export let dirty = false
-  export let isMarkdown = false
-  export let readonly = false
-
-  // ===== Events =====
-  const dispatch = createEventDispatcher()
-
-  // ===== State =====
-  let viewMode = 'edit' // 'edit' | 'preview' | 'split'
-  let editorRef = undefined
-
-  // ===== Public API =====
-  export function insertText(text) {
-    if (editorRef) editorRef.insertText(text)
-  }
-
-  // ===== Handlers =====
-  function handleContentChange(e) {
-    content = e.detail.content
-    dirty = true
-    dispatch('content-change', e.detail)
-  }
-
-  function handleSave() {
-    dispatch('save', { content })
-  }
-
-  function handleClose() {
-    dispatch('close')
-  }
-
-  function handleOpenExternal() {
-    dispatch('openExternal')
-  }
-</script>
-
-<div class="editor-panel">
-  <header class="ep-header">
-    <div class="ep-title-row">
-      {#if title}
-        <span class="ep-title" title={title}>{title}</span>
-      {/if}
-      {#if subtitle}
-        <span class="ep-subtitle">{subtitle}</span>
-      {/if}
-      {#if isMarkdown}
-        <span class="ep-badge">markdown</span>
-      {/if}
-      {#if dirty}
-        <span class="ep-dirty" title="Unsaved changes">●</span>
-      {/if}
-    </div>
-    <div class="ep-actions">
-      {#if isMarkdown}
-        <div class="ep-mode-switcher" role="tablist" aria-label="View mode">
-          <button type="button" class="ep-mode-btn" class:active={viewMode === 'edit'} on:click={() => viewMode = 'edit'}>
-            {t('note.mode.edit')}
-          </button>
-          <button type="button" class="ep-mode-btn" class:active={viewMode === 'preview'} on:click={() => viewMode = 'preview'}>
-            {t('note.mode.preview')}
-          </button>
-          <button type="button" class="ep-mode-btn" class:active={viewMode === 'split'} on:click={() => viewMode = 'split'}>
-            {t('note.mode.split')}
-          </button>
-        </div>
-      {/if}
-      <button class="btn btn-sm" on:click={handleOpenExternal}>{t('file.openExternal')}</button>
-    </div>
-  </header>
-
-  <div class="ep-body">
-    {#if loading}
-      <div class="ep-status"><p>{t('common.loading')}</p></div>
-    {:else if error}
-      <div class="ep-status ep-error">
-        <p>{error}</p>
-        <button class="btn btn-sm" on:click={handleOpenExternal}>{t('file.openExternal')}</button>
-      </div>
-    {:else if isMarkdown && viewMode === 'edit'}
-      <MarkdownEditor
-        bind:this={editorRef}
-        {content}
-        viewMode="edit"
-        on:content-change={handleContentChange}
-        on:save={handleSave}
-      />
-    {:else if isMarkdown && viewMode === 'preview'}
-      <div class="ep-preview-pane">
-        <MarkdownPreview {content} />
-      </div>
-    {:else if isMarkdown && viewMode === 'split'}
-      <div class="ep-split">
-        <div class="ep-split-pane ep-split-editor">
-          <MarkdownEditor
-            bind:this={editorRef}
-            {content}
-            viewMode="split"
-            on:content-change={handleContentChange}
-            on:save={handleSave}
-          />
-        </div>
-        <div class="ep-split-pane ep-split-preview">
-          <MarkdownPreview {content} />
-        </div>
-      </div>
-    {:else}
-      <!-- Plain text / code -->
-      <textarea
-        class="ep-textarea"
-        bind:value={content}
-        on:input={() => { dirty = true; dispatch('content-change', { content }) }}
-        {readonly}
-        spellcheck="false"
-      ></textarea>
-    {/if}
-  </div>
-
-  <footer class="ep-footer">
-    <div class="ep-footer-left">
-      {#if dirty && !readonly}
-        <span class="ep-dirty-hint">{t('editor.unsaved')}</span>
-      {/if}
-    </div>
-    <div class="ep-footer-right">
-      {#if !readonly}
-        <button class="btn btn-primary btn-sm" on:click={handleSave} disabled={!dirty}>{t('common.save')}</button>
-      {/if}
-      <button class="btn btn-sm" on:click={handleClose}>{t('common.close')}</button>
-    </div>
-  </footer>
-</div>
-
-<style>
-  .editor-panel {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-    background: #13131f;
-  }
-
-  .ep-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 8px 12px;
-    border-bottom: 1px solid #2a2a3c;
-    background: #16161f;
-    flex-shrink: 0;
-  }
-
-  .ep-title-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    flex: 1;
-  }
-
-  .ep-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: #e4e4ef;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .ep-subtitle {
-    font-size: 11px;
-    color: #666;
-    flex-shrink: 0;
-  }
-
-  .ep-badge {
-    font-size: 10px;
-    padding: 1px 6px;
-    border-radius: 4px;
-    background: #2a2a3c;
-    color: #888;
-    flex-shrink: 0;
-  }
-
-  .ep-dirty {
-    color: #f59e0b;
-    font-size: 8px;
-    flex-shrink: 0;
-  }
-
-  .ep-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-  }
-
-  .ep-mode-switcher {
-    display: flex;
-    gap: 2px;
-  }
-
-  .ep-mode-btn {
-    padding: 3px 10px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    background: transparent;
-    color: #888;
-    font-size: 11px;
-    font-family: inherit;
-    cursor: pointer;
-  }
-
-  .ep-mode-btn:hover {
-    color: #ccc;
-    background: #1e1e30;
-  }
-
-  .ep-mode-btn.active {
-    color: #e4e4ef;
-    background: #22223a;
-    border-color: #333350;
-  }
-
-  .ep-body {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .ep-status {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 48px 24px;
-    color: #888;
-    font-size: 13px;
-  }
-
-  .ep-error {
-    color: #ff8888;
-  }
-
-  .ep-preview-pane {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px 20px;
-  }
-
-  .ep-split {
-    flex: 1;
-    display: flex;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  .ep-split-pane {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .ep-split-editor {
-    border-right: 1px solid #2a2a3c;
-  }
-
-  .ep-split-preview {
-    background: #11111c;
-    overflow-y: auto;
-    padding: 16px 20px;
-  }
-
-  .ep-textarea {
-    flex: 1;
-    width: 100%;
-    min-height: 0;
-    border: none;
-    outline: none;
-    background: #13131f;
-    color: #e4e4ef;
-    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
-    font-size: 13px;
-    line-height: 1.65;
-    padding: 16px 20px;
-    resize: none;
-    tab-size: 2;
-    overflow-y: auto;
-  }
-
-  .ep-textarea:read-only {
-    color: #999;
-  }
-
-  .ep-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px 12px;
-    border-top: 1px solid #2a2a3c;
-    flex-shrink: 0;
-  }
-
-  .ep-footer-left {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .ep-footer-right {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-  }
-
-  .ep-dirty-hint {
-    font-size: 11px;
-    color: #f59e0b;
-  }
-
-  .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; }
-</style>
@@ -37,7 +37,7 @@
  }
 </script>

-<div class="markdown-body" on:click={handleClick} role="article" tabindex="0" on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(e) }}>
+<div class="markdown-body" on:click={handleClick} role="article">
  {#if error}
    <div class="md-error">
      <p>⚠️ {t('note.preview.error')}</p>
@@ -1,62 +1,188 @@
 <script>
-  import { createEventDispatcher } from 'svelte'
-  import EditorPanel from './EditorPanel.svelte'
-  import { t } from '../../i18n'
+  import { createEventDispatcher } from 'svelte';
+  import MarkdownEditor from './MarkdownEditor.svelte';
+  import MarkdownPreview from './MarkdownPreview.svelte';
+  import { t } from '../../i18n';

-  // ===== Props (note context) =====
-  export let content = ''
-  export let viewMode = 'edit'
-  export let placeholder = ''
-  export let noteId = ''
-  export let noteTitle = ''
+  export let content = '';
+  export let viewMode = 'edit';
+  export let placeholder = '';

-  const dispatch = createEventDispatcher()
-  let editorRef = undefined
+  const dispatch = createEventDispatcher();
+  let activeEditor = undefined; // bind:this ref for the visible MarkdownEditor

-  // ===== Public API =====
-  export function insertText(text) {
-    if (editorRef) editorRef.insertText(text)
+  function setMode(mode) {
+    dispatch('mode-change', { mode });
  }

-  // ===== Handlers =====
  function handleContentChange(e) {
-    content = e.detail.content
-    dispatch('content-change', e.detail)
+    content = e.detail.content;
+    dispatch('content-change', e.detail);
  }

  function handleSave() {
-    dispatch('save')
+    dispatch('save');
  }

  function handleInsertLink() {
-    dispatch('insert-link')
+    dispatch('insert-link');
  }

  function handleInsertInternalLink() {
-    dispatch('insert-internal-link')
+    dispatch('insert-internal-link');
  }

  function handleVerstakLink(e) {
-    dispatch('verstak-link', e.detail)
+    dispatch('verstak-link', e.detail);
  }

-  function handleModeChange(e) {
-    viewMode = e.detail.mode
-    dispatch('mode-change', e.detail)
+  // ─── Public API ──────────────────────────────────────────────────
+  export function insertText(text) {
+    if (activeEditor && typeof activeEditor.insertText === 'function') {
+      activeEditor.insertText(text);
+    }
  }
 </script>

-<EditorPanel
-  bind:this={editorRef}
-  {content}
-  title={noteTitle}
-  isMarkdown={true}
-  {viewMode}
-  on:content-change={handleContentChange}
-  on:save={handleSave}
-  on:mode-change={handleModeChange}
-  on:insert-link={handleInsertLink}
-  on:insert-internal-link={handleInsertInternalLink}
-  on:verstak-link={handleVerstakLink}
-  on:close={() => dispatch('close')}
-/>
+<div class="note-editor-panel" class:mode-edit={viewMode === 'edit'} class:mode-preview={viewMode === 'preview'} class:mode-split={viewMode === 'split'}>
+  <!-- Mode switcher -->
+  <div class="mode-switcher" role="tablist" aria-label="Note view mode">
+    <button type="button" class="mode-btn" role="tab" aria-selected={viewMode === 'edit'} class:active={viewMode === 'edit'} on:click={() => setMode('edit')}>
+      {t('note.mode.edit')}
+    </button>
+    <button type="button" class="mode-btn" role="tab" aria-selected={viewMode === 'preview'} class:active={viewMode === 'preview'} on:click={() => setMode('preview')}>
+      {t('note.mode.preview')}
+    </button>
+    <button type="button" class="mode-btn" role="tab" aria-selected={viewMode === 'split'} class:active={viewMode === 'split'} on:click={() => setMode('split')}>
+      {t('note.mode.split')}
+    </button>
+  </div>
+
+  <!-- Content area -->
+  <div class="panel-content">
+    {#if viewMode === 'edit'}
+      <MarkdownEditor
+        bind:this={activeEditor}
+        {content}
+        {placeholder}
+        viewMode="edit"
+        on:content-change={handleContentChange}
+        on:save={handleSave}
+        on:insert-link={handleInsertLink}
+        on:insert-internal-link={handleInsertInternalLink}
+      />
+    {:else if viewMode === 'preview'}
+      <div class="preview-pane">
+        <MarkdownPreview {content} on:verstak-link={handleVerstakLink} />
+      </div>
+    {:else if viewMode === 'split'}
+      <div class="split-pane">
+        <div class="split-editor">
+          <MarkdownEditor
+            bind:this={activeEditor}
+            {content}
+            {placeholder}
+            viewMode="split"
+            on:content-change={handleContentChange}
+            on:save={handleSave}
+            on:insert-link={handleInsertLink}
+            on:insert-internal-link={handleInsertInternalLink}
+          />
+        </div>
+        <div class="split-preview">
+          <MarkdownPreview {content} on:verstak-link={handleVerstakLink} />
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .note-editor-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+  }
+
+  .mode-switcher {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 5px 12px;
+    border-bottom: 1px solid #2a2a3c;
+    background: #14141f;
+    flex-shrink: 0;
+  }
+
+  .mode-btn {
+    padding: 4px 12px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background: transparent;
+    color: #888;
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.12s, color 0.12s, border-color 0.12s;
+  }
+
+  .mode-btn:hover {
+    color: #ccc;
+    background: #1e1e30;
+  }
+
+  .mode-btn.active {
+    color: #e4e4ef;
+    background: #22223a;
+    border-color: #333350;
+    font-weight: 500;
+  }
+
+  .mode-btn:focus-visible {
+    outline: 2px solid #818cf8;
+    outline-offset: 1px;
+  }
+
+  .panel-content {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .mode-preview .panel-content {
+    overflow-y: auto;
+  }
+
+  .preview-pane {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+  }
+
+  .split-pane {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .split-editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    border-right: 1px solid #2a2a3c;
+    overflow: hidden;
+  }
+
+  .split-preview {
+    flex: 1;
+    min-width: 0;
+    overflow-y: auto;
+    padding: 20px 24px;
+    background: #11111c;
+  }
+</style>
@@ -1,82 +1,81 @@
 <script>
+  import { t } from '../../i18n'
  import { createEventDispatcher } from 'svelte'

-  // ===== Props =====
-  export let notes = []
-  export let formatDate = (str) => ''
-
-  // ===== Events =====
  const dispatch = createEventDispatcher()

-  // ===== Internal state =====
-  let showCreateNote = false
+  export let notes = []
+  export let showCreateNote = false
+  export let formatDate = (d) => d || ''
+
  let newNoteTitle = ''

-  function openCreateNote() {
-    showCreateNote = true
-    newNoteTitle = ''
+  function handleCreateNote() {
+    dispatch('createNote')
  }

-  function cancelCreateNote() {
-    showCreateNote = false
-    newNoteTitle = ''
+  function handleSubmitCreateNote() {
+    if (newNoteTitle.trim()) {
+      dispatch('submitCreateNote', { title: newNoteTitle.trim() })
+      newNoteTitle = ''
+    }
  }

-  function submitCreateNote() {
-    if (!newNoteTitle.trim()) return
-    dispatch('submitCreateNote', { title: newNoteTitle.trim() })
-    showCreateNote = false
-    newNoteTitle = ''
+  function handleCancelCreateNote() {
+    dispatch('cancelCreateNote')
  }

-  function handleCreateKeydown(e) {
-    if (e.key === 'Enter') submitCreateNote()
-  }
-
-  function openNote(note) {
+  function handleOpenNote(note) {
    dispatch('openNote', { note })
  }

-  function startRename(noteId, currentTitle) {
-    dispatch('startRename', { noteId, currentTitle })
+  function handleStartRename(note) {
+    dispatch('startRename', { note })
  }

-  function deleteNoteHandler(note) {
-    dispatch('deleteNote', { note })
+  function handleDelete(note) {
+    dispatch('delete', { note })
+  }
+
+  function onKeyActivate(fn) {
+    return (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        fn()
+      }
+    }
  }
 </script>

 <div class="notes-tab">
  <div class="tab-toolbar">
-    <button class="btn btn-primary" on:click={openCreateNote}>Добавить заметку</button>
+    <button class="btn btn-primary" on:click={handleCreateNote}>{t('note.add')}</button>
  </div>
-
  {#if showCreateNote}
    <div class="create-form">
-      <input type="text" placeholder="Название заметки" bind:value={newNoteTitle}
-             on:keydown={handleCreateKeydown} />
+      <input type="text" placeholder={t('note.title')} bind:value={newNoteTitle}
+             on:keydown={(e) => e.key === 'Enter' && handleSubmitCreateNote()} />
      <div class="form-actions">
-        <button class="btn btn-primary" on:click={submitCreateNote}>Создать</button>
-        <button class="btn" on:click={cancelCreateNote}>Отмена</button>
+        <button class="btn btn-primary" on:click={handleSubmitCreateNote}>{t('common.create')}</button>
+        <button class="btn" on:click={handleCancelCreateNote}>{t('common.cancel')}</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="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={(e) => e.key === 'Enter' && openNote(note)}>
+        <div class="note-card" role="button" tabindex="0" on:click={() => handleOpenNote(note)} on:keydown={onKeyActivate(() => handleOpenNote(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="Переименовать">
+            <button class="note-action-btn" on:click={() => handleStartRename(note)} 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={() => deleteNoteHandler(note)} title="Удалить">
+            <button class="note-action-btn note-action-danger" on:click={() => handleDelete(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>
@@ -90,16 +89,16 @@
  .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; }
+  .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; outline: none; }
+  .create-form input:focus { 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 { background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 8px; padding: 16px; cursor: pointer; }
  .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-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; }
@@ -107,14 +106,9 @@
  .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>
@@ -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','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 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 imageExts = ['jpg','jpeg','png','gif','webp','bmp','tiff','tif','avif','svg']

@@ -0,0 +1,9 @@
+/**
+ * Actions API — actions (quick commands) on nodes.
+ */
+import { createApi } from './wails.js'
+
+export const listActions = createApi('ListActions')
+export const createAction = createApi('CreateAction')
+export const runAction = createApi('RunAction')
+export const deleteAction = createApi('DeleteAction')
@@ -0,0 +1,7 @@
+/**
+ * Activity API — activity feed and per-node activity.
+ */
+import { createApi } from './wails.js'
+
+export const listActivityFeed = createApi('ListActivityFeed')
+export const listActivityByNode = createApi('ListActivityByNode')
@@ -0,0 +1,9 @@
+/**
+ * Browser Events API — browser extension events.
+ */
+import { createApi } from './wails.js'
+
+export const listBrowserEvents = createApi('ListBrowserEvents')
+export const acceptBrowserEvent = createApi('AcceptBrowserEvent')
+export const dismissBrowserEvent = createApi('DismissBrowserEvent')
+export const attachBrowserEventToNode = createApi('AttachBrowserEventToNode')
@@ -0,0 +1,20 @@
+/**
+ * Files API — all file/folder related Wails calls.
+ */
+import { createApi } from './wails.js'
+
+export const listItems = createApi('ListItems')
+export const listFiles = createApi('ListFiles')
+export const createEmptyFile = createApi('CreateEmptyFile')
+export const deleteFileOrFolder = createApi('DeleteFileOrFolder')
+export const openFile = createApi('OpenFile')
+export const openFolder = createApi('OpenFolder')
+export const pickFile = createApi('PickFile')
+export const pickDirectory = createApi('PickDirectory')
+export const previewImport = createApi('PreviewImport')
+export const addPathCopy = createApi('AddPathCopy')
+export const addPathLink = createApi('AddPathLink')
+export const checkFileAction = createApi('CheckFileAction')
+export const getFileBase64 = createApi('GetFileBase64')
+export const readFileText = createApi('ReadFileText')
+export const showInFolder = createApi('OpenFolder')
@@ -0,0 +1,14 @@
+/**
+ * Inbox API — capture and inbox management.
+ */
+import { createApi } from './wails.js'
+
+export const listInboxNodes = createApi('ListInboxNodes')
+export const listInboxNodesForTarget = createApi('ListInboxNodesForTarget')
+export const captureClipboardTextWithContext = createApi('CaptureClipboardTextWithContext')
+export const captureTextWithContext = createApi('CaptureTextWithContext')
+export const captureURLWithContext = createApi('CaptureURLWithContext')
+export const capturePathWithContext = createApi('CapturePathWithContext')
+export const captureFileDataWithContext = createApi('CaptureFileDataWithContext')
+export const resolveInboxNode = createApi('ResolveInboxNode')
+export const deleteInboxNode = createApi('DeleteInboxNode')
@@ -0,0 +1,13 @@
+/**
+ * Journal & Worklog API — time tracking and reporting.
+ */
+import { createApi } from './wails.js'
+
+export const listWorklog = createApi('ListWorklog')
+export const createWorklogFull = createApi('CreateWorklogFull')
+export const updateWorklogEntry = createApi('UpdateWorklogEntry')
+export const deleteWorklogEntry = createApi('DeleteWorklogEntry')
+export const getWorklogEntryEvents = createApi('GetWorklogEntryEvents')
+export const listWorklogReport = createApi('ListWorklogReport')
+export const worklogReportSummary = createApi('WorklogReportSummary')
+export const saveWorklogReport = createApi('SaveWorklogReport')
@@ -0,0 +1,9 @@
+/**
+ * Links API — external URL links management.
+ */
+import { createApi } from './wails.js'
+
+export const listLinks = createApi('ListLinks')
+export const updateLink = createApi('UpdateLink')
+export const deleteLink = createApi('DeleteLink')
+export const openLink = createApi('OpenLink')
@@ -0,0 +1,20 @@
+/**
+ * Node & Workspace API — tree, node CRUD, system views.
+ */
+import { createApi } from './wails.js'
+
+export const getStartupStatus = createApi('GetStartupStatus')
+export const verstakVersion = createApi('VerstakVersion')
+export const listSystemViewsWithPlugins = createApi('ListSystemViewsWithPlugins')
+export const listWorkspaceTree = createApi('ListWorkspaceTree')
+export const listWorkspaceChildren = createApi('ListWorkspaceChildren')
+export const listEnabledTemplates = createApi('ListEnabledTemplates')
+export const createNodeFromTemplate = createApi('CreateNodeFromTemplate')
+export const deleteNode = createApi('DeleteNode')
+export const renameNode = createApi('RenameNode')
+export const moveNode = createApi('MoveNode')
+export const duplicateNode = createApi('DuplicateNode')
+export const getNodeDetail = createApi('GetNodeDetail')
+export const getSuggestions = createApi('GetSuggestions')
+export const validateName = createApi('ValidateName')
+export const writeDebugLog = createApi('WriteDebugLog')
@@ -0,0 +1,11 @@
+/**
+ * Notes API — all note-related Wails calls.
+ */
+import { createApi } from './wails.js'
+
+export const listNotes = createApi('ListNotes')
+export const createNote = createApi('CreateNote')
+export const readNote = createApi('ReadNote')
+export const saveNote = createApi('SaveNote')
+export const renameNote = createApi('RenameNote')
+export const deleteNoteApi = createApi('DeleteNote')
@@ -0,0 +1,8 @@
+/**
+ * Search API — global search and node lookup.
+ */
+import { createApi } from './wails.js'
+
+export const searchNodes = createApi('SearchNodes')
+export const getNodeDetail = createApi('GetNodeDetail')
+export const searchWorkspace = createApi('SearchWorkspace')
@@ -0,0 +1,9 @@
+/**
+ * Suggestions API — worklog suggestions.
+ */
+import { createApi } from './wails.js'
+
+export const getSuggestions = createApi('GetSuggestions')
+export const acceptSuggestionFull = createApi('AcceptSuggestionFull')
+export const dismissSuggestion = createApi('DismissSuggestion')
+export const acceptSuggestionWith = createApi('AcceptSuggestionWith')
@@ -0,0 +1,7 @@
+/**
+ * Sync API — vault synchronisation.
+ */
+import { createApi } from './wails.js'
+
+export const syncStatus = createApi('SyncStatus')
+export const syncNow = createApi('SyncNow')
@@ -0,0 +1,8 @@
+/**
+ * Today API — today dashboard, in-progress items, captures.
+ */
+import { createApi } from './wails.js'
+
+export const listTodayView = createApi('ListTodayView')
+export const listTodayInProgress = createApi('ListTodayInProgress')
+export const listTodayCaptures = createApi('ListTodayCaptures')
@@ -0,0 +1,12 @@
+/**
+ * Trash API — trash operations.
+ */
+import { createApi } from './wails.js'
+
+export const listTrash = createApi('ListTrash')
+export const trashCount = createApi('TrashCount')
+export const readTrashFile = createApi('ReadTrashFile')
+export const readTrashFileContent = createApi('ReadTrashFileContent')
+export const restoreTrashNodes = createApi('RestoreTrashNodesJSON')
+export const purgeTrashNodes = createApi('PurgeTrashNodesJSON')
+export const emptyTrash = createApi('EmptyTrash')
@@ -0,0 +1,27 @@
+/**
+ * Base Wails API call helper.
+ * All backend communication goes through this function.
+ */
+
+export 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))
+}
+
+/**
+ * Create a wrapped API function with consistent error handling.
+ */
+export function createApi(method) {
+  return (...args) => {
+    return wailsCall(method, ...args)
+  }
+}
@@ -1,48 +1,5 @@
 import App from './App.svelte'

-// ===== 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
-  }
+new App({
+  target: document.getElementById('app')
 })
-
-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>'
-  }
-}
@@ -243,25 +243,5 @@ export function CountActivityByNode(arg1) {
 }

 export function 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()
+    return window['go']['main']['App']['CreateEmptyFile'](arg1, arg2);
 }
@@ -330,28 +330,6 @@ func (s *Service) ReadText(id string) (string, error) {
 	return string(b), nil
 }

-// WriteText writes text content to a file on disk and updates the record.
-func (s *Service) WriteText(rec *Record, content string) error {
-	abs, err := s.absPathSafe(rec)
-	if err != nil {
-		return err
-	}
-	tmp := abs + ".tmp"
-	if err := os.WriteFile(tmp, []byte(content), 0o640); err != nil {
-		return fmt.Errorf("write temp: %w", err)
-	}
-	if err := os.Rename(tmp, abs); err != nil {
-		os.Remove(tmp)
-		return fmt.Errorf("rename: %w", err)
-	}
-	now := time.Now().UTC().Format(time.RFC3339)
-	sum := sha256.Sum256([]byte(content))
-	_, err = s.db.Exec(
-		`UPDATE files SET size=?, sha256=?, updated_at=?, missing=? WHERE id=?`,
-		len(content), fmt.Sprintf("%x", sum[:]), now, 0, rec.ID)
-	return err
-}
-
 // ReadBase64 reads a file and returns a data URI (base64-encoded).
 func (s *Service) ReadBase64(id string) (string, error) {
 	rec, err := s.Get(id)
Author	SHA1	Message	Date
mirivlad	2b3de296b9	fix(frontend): restore capture/drag overlay state vars Same class of bug as `cd982f2`: `9878ab4` (extract FilesTab) also removed 'let' declarations for capture/drag-drop state that's still used by the inbox capture flow and CaptureDropOverlay: captureDropActive, captureDropLabel, captureDragDepth, lastCaptureDragOverAt, captureDragResetTimer, dropRootValid, inboxDropValid Without them, Svelte runtime throws ReferenceError on first render ('captureDropActive is not defined'), leaving the WebView empty. Verified with headless render smoke: .app + .sidebar mount, sidebar shows system views + workspace, welcome screen renders. Rebuild embedded frontend bundle.	2026-06-15 17:46:10 +00:00
mirivlad	cd982f2f28	fix(frontend): restore trash preview state vars after FilesTab extraction After `9878ab4` moved file-preview state into FilesTab, App.svelte still references previewItem/previewContent/previewLoading/previewError in two places that were not migrated: - openTrashPreview() (trash file preview flow, ~line 1334) - {#if previewItem} <FilePreviewModal ...> block (~line 3563) Without these 'let' bindings, vite-plugin-svelte warned 'previewError is not defined' and the Svelte runtime threw a ReferenceError on first render, leaving the WebView empty. Restore the four 'let' declarations in App.svelte (kept here because trash lives outside FilesTab) and rebuild the embedded frontend bundle.	2026-06-15 17:30:38 +00:00
mirivlad	9878ab4fb3	refactor(frontend): extract FilesTab from App.svelte • Create lib/components/files/FilesTab.svelte (616 lines) - Self-contained file browser with internal state - Folder navigation, breadcrumbs, file list - File preview with CheckFileAction for .md → note editor flow - Import dialog (copy/link) - Drag-and-drop, selection, keyboard shortcuts - Cut/copy/paste, rename, delete, duplicate - Public API: resetToNode(), filesHandleKeydown() • Remove ~594 lines from App.svelte (4794 → 4200) - Removed: loadingFiles, currentFolderId, folderStack, fileItems, previewItem/Content/Loading/Error, clipboard, selectedIds, dragIds, importing, importSummary, showImportDialog, pendingImportPath/Parent, treeItems, expanded, childrenMap, dropRootValid, inboxDropValid, captureDropActive/Label/DragDepth/lastCaptureDragOverAt/captureDragResetTimer - Removed: loadTree, loadFolder, navigateToFolder, navigateBack, navigateToBreadcrumb, openPreview, closePreview, createFile, duplicateItem, renameItem, cutItem, copyItem, pasteItem, toggleSelection, selectOne, selectAll, rangeSelect, clearSelection, getTargetIds, deleteSelected, cutSelected, copySelected, onDragStart, onDragOver, onDrop, openSelected, openSelectedExternal, addFile, addFolder, startImport, confirmImport, cancelImport, deleteFile - Keyboard handler delegates to filesTabRef.filesHandleKeydown() - selectNode() calls filesTabRef.resetToNode() • Update docs/frontend-architecture.md — Files Flow section • Update docs/frontend-change-map.md — Phase 2 & 5 marked complete • Build passes: npm run build ✓, go test ✓, build.sh gui ✓	2026-06-15 20:31:23 +08:00
mirivlad	490a3dd624	refactor(frontend): modularise App.svelte — Phase 1-4 • Create docs/frontend-architecture.md and docs/frontend-change-map.md • Extract API layer: lib/services/ (wails, notes, files, search, inbox, trash, sync, journal, actions, links, activity, nodes, suggestions, today, browserEvents) • Extract ErrorBanner.svelte component • Extract CaptureDropOverlay.svelte component • Extract OverviewTab.svelte component • Extract NotesTab.svelte component • Wire all extracted components into App.svelte • Build passes (npm run build ✓)	2026-06-15 19:03:07 +08:00