refactor(desktop-standalone): rename project

This reverts commit c7cf8d5255.

.github/workflows/deploy-app.yml

@@ -0,0 +1,67 @@
+name: Deploy Standalone App
+
+on:
+  # Trigger on push to main branch
+  push:
+    branches:
+      - standalone
+    # Only run when app files change
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+      - '.github/workflows/deploy-app.yml'
+
+  # Allow manual triggering from Actions tab
+  workflow_dispatch:
+
+  # Run on pull requests for preview deployments
+  pull_request:
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+      - '.github/workflows/deploy-app.yml'
+jobs:
+  build-and-deploy:
+    name: Build and Deploy App
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    # Required permissions for deployment
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write # For PR preview comments
+      id-token: write # For OIDC authentication (if needed)
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Trigger build of app
+        run: pnpm --filter=client-standalone build
+
+      - name: Deploy
+        uses: ./.github/actions/deploy-to-cloudflare-pages
+        if: github.repository == vars.REPO_MAIN
+        with:
+          project_name: "trilium-app"
+          comment_body: "🖥️ App preview is ready"
+          production_url: "https://app.triliumnotes.org"
+          deploy_dir: "apps/client-standalone/dist"
+          cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dev.yml

@@ -1,9 +1,9 @@
 name: Dev
 on:
   push:
-    branches: [ main ]
+    branches: [ main, standalone ]
   pull_request:
-    branches: [ main ]
+    branches: [ main, standalone ]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.gitignore

@@ -51,3 +51,6 @@ upload
 site/
 apps/*/coverage
 scripts/translation/.language*.json
+
+# AI
+.claude/settings.local.json

CLAUDE.md

@@ -4,158 +4,197 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Overview
 
-Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using pnpm, with multiple applications and shared packages.
+Trilium Notes is a hierarchical note-taking application with synchronization, scripting, and rich text editing. TypeScript monorepo using pnpm with multiple apps and shared packages.
 
 ## Development Commands
 
-### Setup
-- `pnpm install` - Install all dependencies
-- `corepack enable` - Enable pnpm if not available
+```bash
+# Setup
+corepack enable && pnpm install
 
-### Running Applications
-- `pnpm run server:start` - Start development server (http://localhost:8080)
-- `pnpm run server:start-prod` - Run server in production mode
+# Run
+pnpm server:start              # Dev server at http://localhost:8080
+pnpm desktop:start             # Electron dev app
+pnpm standalone:start          # Standalone client dev
 
-### Building
-- `pnpm run client:build` - Build client application
-- `pnpm run server:build` - Build server application
-- `pnpm run electron:build` - Build desktop application
+# Build
+pnpm client:build              # Frontend
+pnpm server:build              # Backend
+pnpm desktop:build             # Electron
 
-### Testing
-- `pnpm test:all` - Run all tests (parallel + sequential)
-- `pnpm test:parallel` - Run tests that can run in parallel
-- `pnpm test:sequential` - Run tests that must run sequentially (server, ckeditor5-mermaid, ckeditor5-math)
-- `pnpm coverage` - Generate coverage reports
+# Test
+pnpm test:all                  # All tests (parallel + sequential)
+pnpm test:parallel             # Client + most package tests
+pnpm test:sequential           # Server, ckeditor5-mermaid, ckeditor5-math (shared DB)
+pnpm --filter server test      # Single package tests
+pnpm coverage                  # Coverage reports
 
-## Architecture Overview
+# Lint & Format
+pnpm dev:linter-check          # ESLint check
+pnpm dev:linter-fix            # ESLint fix
+pnpm dev:format-check          # Format check (stricter stylistic rules)
+pnpm dev:format-fix            # Format fix
+pnpm typecheck                 # TypeScript type check across all projects
+```
 
-### Monorepo Structure
-- **apps/**: Runnable applications
-  - `client/` - Frontend application (shared by server and desktop)
-  - `server/` - Node.js server with web interface
-  - `desktop/` - Electron desktop application
-  - `web-clipper/` - Browser extension for saving web content
-  - Additional tools: `db-compare`, `dump-db`, `edit-docs`
+**Running a single test file**: `pnpm --filter server test spec/etapi/search.spec.ts`
 
-- **packages/**: Shared libraries
-  - `commons/` - Shared interfaces and utilities
-  - `ckeditor5/` - Custom rich text editor with Trilium-specific plugins
-  - `codemirror/` - Code editor customizations
-  - `highlightjs/` - Syntax highlighting
-  - Custom CKEditor plugins: `ckeditor5-admonition`, `ckeditor5-footnotes`, `ckeditor5-math`, `ckeditor5-mermaid`
+## Main Applications
 
-### Core Architecture Patterns
+The four main apps share `packages/trilium-core/` for business logic but differ in runtime:
 
-#### Three-Layer Cache System
-- **Becca** (Backend Cache): Server-side entity cache (`apps/server/src/becca/`)
-- **Froca** (Frontend Cache): Client-side mirror of backend data (`apps/client/src/services/froca.ts`)
-- **Shaca** (Share Cache): Optimized cache for shared/published notes (`apps/server/src/share/`)
+- **client** (`apps/client/`): Preact frontend with jQuery widget system. Shared UI layer used by both server and desktop.
+- **server** (`apps/server/`): Node.js backend (Express, better-sqlite3). Serves the client and provides REST/WebSocket APIs.
+- **desktop** (`apps/desktop/`): Electron wrapper around server + client, running both in a single process.
+- **standalone** (`apps/client-standalone/` + `apps/standalone-desktop/`): Runs the entire stack in the browser — server logic compiled to WASM via sql.js, executed in a service worker. No Node.js dependency at runtime.
 
-#### Entity System
-Core entities are defined in `apps/server/src/becca/entities/`:
-- `BNote` - Notes with content and metadata
-- `BBranch` - Hierarchical relationships between notes (allows multiple parents)
-- `BAttribute` - Key-value metadata attached to notes
-- `BRevision` - Note version history
-- `BOption` - Application configuration
+## Monorepo Structure
 
-#### Widget-Based UI
-Frontend uses a widget system (`apps/client/src/widgets/`):
-- `BasicWidget` - Base class for all UI components
-- `NoteContextAwareWidget` - Widgets that respond to note changes
-- `RightPanelWidget` - Widgets displayed in the right panel
+```
+apps/
+  client/               # Preact frontend (shared by server, desktop, standalone)
+  server/               # Node.js backend (Express, better-sqlite3)
+  desktop/              # Electron (bundles server + client)
+  client-standalone/    # Standalone client (WASM + service workers, no Node.js)
+  standalone-desktop/   # Standalone desktop variant
+  server-e2e/           # Playwright E2E tests for server
+  web-clipper/          # Browser extension
+  website/              # Project website
+  db-compare/, dump-db/, edit-docs/, build-docs/, icon-pack-builder/
+
+packages/
+  trilium-core/         # Core business logic: entities, services, SQL, sync
+  commons/              # Shared interfaces and utilities
+  ckeditor5/            # Custom rich text editor bundle
+  codemirror/           # Code editor integration
+  highlightjs/          # Syntax highlighting
+  share-theme/          # Theme for shared/published notes
+  ckeditor5-admonition/, ckeditor5-footnotes/, ckeditor5-math/, ckeditor5-mermaid/
+  ckeditor5-keyboard-marker/, express-partial-content/, pdfjs-viewer/, splitjs/
+  turndown-plugin-gfm/
+```
+
+Use `pnpm --filter <package-name> <command>` to run commands in specific packages.
+
+## Core Architecture
+
+### Three-Layer Cache System
+
+All data access goes through cache layers — never bypass with direct DB queries:
+
+- **Becca** (`packages/trilium-core/src/becca/`): Server-side entity cache. Access via `becca.notes[noteId]`.
+- **Froca** (`apps/client/src/services/froca.ts`): Client-side mirror synced via WebSocket. Access via `froca.getNote()`.
+- **Shaca** (`apps/server/src/share/`): Optimized cache for shared/published notes.
+
+**Critical**: Always use cache methods, not direct DB writes. Cache methods create `EntityChange` records needed for synchronization.
+
+### Entity System
+
+Core entities live in `packages/trilium-core/src/becca/entities/` (not `apps/server/`):
+
+- `BNote` — Notes with content and metadata
+- `BBranch` — Multi-parent tree relationships (cloning supported)
+- `BAttribute` — Key-value metadata (labels and relations)
+- `BRevision` — Version history
+- `BOption` — Application configuration
+- `BBlob` — Binary content storage
+
+Entities extend `AbstractBeccaEntity<T>` with built-in change tracking, hash generation, and date management.
+
+### Entity Change & Sync Protocol
+
+Every entity modification creates an `EntityChange` record driving sync:
+1. Login with HMAC authentication (document secret + timestamp)
+2. Push changes → Pull changes → Push again (conflict resolution)
+3. Content hash verification with retry loop
+
+Sync services: `packages/trilium-core/src/services/sync.ts`, `syncMutexService`, `syncUpdateService`.
+
+### Widget-Based UI
+
+Frontend widgets in `apps/client/src/widgets/`:
+- `BasicWidget` / `TypedBasicWidget` — Base classes (jQuery `this.$widget` for DOM)
+- `NoteContextAwareWidget` — Responds to note changes
+- `RightPanelWidget` — Sidebar widgets with position ordering
 - Type-specific widgets in `type_widgets/` directory
 
-#### API Architecture
-- **Internal API**: REST endpoints in `apps/server/src/routes/api/`
-- **ETAPI**: External API for third-party integrations (`apps/server/src/etapi/`)
-- **WebSocket**: Real-time synchronization (`apps/server/src/services/ws.ts`)
+**Widget lifecycle**: `doRenderBody()` for initial render, `refreshWithNote()` for note changes, `entitiesReloadedEvent({loadResults})` for entity updates. Uses jQuery — don't mix React patterns.
 
-### Key Files for Understanding Architecture
+Fluent builder pattern: `.child()`, `.class()`, `.css()` chaining with position-based ordering.
 
-1. **Application Entry Points**:
-   - `apps/server/src/main.ts` - Server startup
-   - `apps/client/src/desktop.ts` - Client initialization
+### API Architecture
 
-2. **Core Services**:
-   - `apps/server/src/becca/becca.ts` - Backend data management
-   - `apps/client/src/services/froca.ts` - Frontend data synchronization
-   - `apps/server/src/services/backend_script_api.ts` - Scripting API
+- **Internal API** (`apps/server/src/routes/api/`): REST endpoints, trusts frontend
+- **ETAPI** (`apps/server/src/etapi/`): External API with basic auth tokens — maintain backwards compatibility
+- **WebSocket** (`apps/server/src/services/ws.ts`): Real-time sync
 
-3. **Database Schema**:
-   - `apps/server/src/assets/db/schema.sql` - Core database structure
+### Platform Abstraction
 
-4. **Configuration**:
-   - `package.json` - Project dependencies and scripts
+`packages/trilium-core/src/services/platform.ts` defines `PlatformProvider` interface with implementations in `apps/desktop/`, `apps/server/`, and `apps/client-standalone/`. Singleton via `initPlatform()`/`getPlatform()`.
 
-## Note Types and Features
+**PlatformProvider** provides:
+- `crash(message)` — Platform-specific fatal error handling
+- `getEnv(key)` — Environment variable access (server/desktop use `process.env`, standalone maps URL query params like `?safeMode` → `TRILIUM_SAFE_MODE`)
+- `isElectron`, `isMac`, `isWindows` — Platform detection flags
 
-Trilium supports multiple note types, each with specialized widgets:
-- **Text**: Rich text with CKEditor5 (markdown import/export)
-- **Code**: Syntax-highlighted code editing with CodeMirror
-- **File**: Binary file attachments
-- **Image**: Image display with editing capabilities
-- **Canvas**: Drawing/diagramming with Excalidraw
-- **Mermaid**: Diagram generation
-- **Relation Map**: Visual note relationship mapping
-- **Web View**: Embedded web pages
-- **Doc/Book**: Hierarchical documentation structure
+**Critical rules for `trilium-core`**:
+- **No `process.env` in core** — use `getPlatform().getEnv()` instead (not available in standalone/browser)
+- **No `import path from "path"` in core** — Node's `path` module is externalized in browser builds. Use `packages/trilium-core/src/services/utils/path.ts` for `extname()`/`basename()` equivalents
+- **No Node.js built-in modules in core** — core runs in both Node.js and the browser (standalone). Use platform-agnostic alternatives or platform providers
+- **Platform detection via functions** — `isElectron()`, `isMac()`, `isWindows()` from `utils/index.ts` are functions (not constants) that call `getPlatform()`. They can only be called after `initializeCore()`, not at module top-level. If used in static definitions, wrap in a closure: `value: () => isWindows() ? "0.9" : "1.0"`
+- **Barrel import caution** — `import { x } from "@triliumnext/core"` loads ALL core exports. Early-loading modules like `config.ts` should import specific subpaths (e.g. `@triliumnext/core/src/services/utils/index`) to avoid circular dependencies or initialization ordering issues
+- **Electron IPC** — In desktop mode, client API calls use Electron IPC (not HTTP). The IPC handler in `apps/server/src/routes/electron.ts` must be registered via `utils.isElectron` from the **server's** utils (which correctly checks `process.versions["electron"]`), not from core's utils
 
-## Development Guidelines
+### Database
 
-### Testing Strategy
-- Server tests run sequentially due to shared database
-- Client tests can run in parallel
-- E2E tests use Playwright for both server and desktop apps
-- Build validation tests check artifact integrity
+SQLite via `better-sqlite3`. SQL abstraction in `packages/trilium-core/src/services/sql/` with `DatabaseProvider` interface, prepared statement caching, and transaction support.
 
-### Scripting System
-Trilium provides powerful user scripting capabilities:
-- Frontend scripts run in browser context
-- Backend scripts run in Node.js context with full API access
-- Script API documentation available in `docs/Script API/`
+- Schema: `apps/server/src/assets/db/schema.sql`
+- Migrations: `apps/server/src/migrations/YYMMDD_HHMM__description.sql`
 
-### Internationalization
-- Translation files in `apps/client/src/translations/`
-- Supported languages: English, German, Spanish, French, Romanian, Chinese
+### Attribute Inheritance
 
-### Security Considerations
-- Per-note encryption with granular protected sessions
-- CSRF protection for API endpoints
-- OpenID and TOTP authentication support
-- Sanitization of user-generated content
+Three inheritance mechanisms:
+1. **Standard**: `note.getInheritableAttributes()` walks parent tree
+2. **Child prefix**: `child:label` on parent copies to children
+3. **Template relation**: `#template=noteNoteId` includes template's inheritable attributes
 
-### Client-Side API Restrictions
-- **Do not use `crypto.randomUUID()`** or other Web Crypto APIs that require secure contexts - Trilium can run over HTTP, not just HTTPS
-- Use `randomString()` from `apps/client/src/services/utils.ts` for generating IDs instead
+Use `note.getOwnedAttribute()` for direct, `note.getAttribute()` for inherited.
 
-### Shared Types Policy
-- Types shared between client and server belong in `@triliumnext/commons` (`packages/commons/src/lib/`)
-- Import shared types directly from `@triliumnext/commons` - do not re-export them from app-specific modules
-- Keep app-specific types (e.g., `LlmProvider` for server, `StreamCallbacks` for client) in their respective apps
+## Important Patterns
 
-## Common Development Tasks
+- **Protected notes**: Check `note.isContentAvailable()` before accessing content; use `note.getTitleOrProtected()` for safe title access
+- **Long operations**: Use `TaskContext` for progress reporting via WebSocket
+- **Event system** (`packages/trilium-core/src/services/events.ts`): Events emitted in order (notes → branches → attributes) during load for referential integrity
+- **Search**: Expression-based, scoring happens in-memory — cannot add SQL-level LIMIT/OFFSET without losing scoring
+- **Widget cleanup**: Unsubscribe from events in `cleanup()`/`doDestroy()` to prevent memory leaks
 
-### Adding New Note Types
-1. Create widget in `apps/client/src/widgets/type_widgets/`
-2. Register in `apps/client/src/services/note_types.ts`
-3. Add backend handling in `apps/server/src/services/notes.ts`
+## Code Style
 
-### Extending Search
-- Search expressions handled in `apps/server/src/services/search/`
-- Add new search operators in search context files
+- 4-space indentation, semicolons always required
+- Double quotes (enforced by format config)
+- Max line length: 100 characters
+- Unix line endings
+- Import sorting via `eslint-plugin-simple-import-sort`
 
-### Custom CKEditor Plugins
-- Create new package in `packages/` following existing plugin structure
-- Register in `packages/ckeditor5/src/plugins.ts`
+## Testing
 
-### Database Migrations
-- Add migration scripts in `apps/server/src/migrations/`
-- Update schema in `apps/server/src/assets/db/schema.sql`
+- **Server tests** (`apps/server/spec/`): Vitest, must run sequentially (shared DB), forks pool, max 6 workers
+- **Client tests** (`apps/client/src/`): Vitest with happy-dom environment, can run in parallel
+- **E2E tests** (`apps/server-e2e/`): Playwright, Chromium, server started automatically on port 8082
+- **ETAPI tests** (`apps/server/spec/etapi/`): External API contract tests
 
-## Build System Notes
-- Uses pnpm for monorepo management
-- Vite for fast development builds
-- ESBuild for production optimization
-- pnpm workspaces for dependency management
-- Docker support with multi-stage builds
+## Documentation
+
+- `docs/Script API/` — Auto-generated, never edit directly
+- `docs/User Guide/` — Edit via `pnpm edit-docs:edit-docs`, not manually
+- `docs/Developer Guide/` and `docs/Release Notes/` — Safe for direct Markdown editing
+
+## Key Entry Points
+
+- `apps/server/src/main.ts` — Server startup
+- `apps/client/src/desktop.ts` — Client initialization
+- `packages/trilium-core/src/becca/becca.ts` — Backend data management
+- `apps/client/src/services/froca.ts` — Frontend cache
+- `apps/server/src/routes/routes.ts` — API route registration
+- `packages/trilium-core/src/services/sql/sql.ts` — Database abstraction

apps/build-docs/package.json

@@ -16,7 +16,7 @@
   "license": "AGPL-3.0-only",
   "packageManager": "pnpm@10.33.0",
   "devDependencies": {
-    "@redocly/cli": "2.25.2",
+    "@redocly/cli": "2.25.1",
     "archiver": "7.0.1",
     "fs-extra": "11.3.4",
     "js-yaml": "4.1.1",

apps/client-standalone/.env

@@ -0,0 +1,4 @@
+# The development license key for premium CKEditor features.
+# Note: This key must only be used for the Trilium Notes project.
+VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3ODcyNzA0MDAsImp0aSI6IjkyMWE1MWNlLTliNDMtNGRlMC1iOTQwLTc5ZjM2MDBkYjg1NyIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOiJ0cmlsaXVtIiwiZmVhdHVyZXMiOlsiVFJJTElVTSJdLCJ2YyI6ImU4YzRhMjBkIn0.hny77p-U4-jTkoqbwPytrEar5ylGCWBN7Ez3SlB8i6_mJCBIeCSTOlVQk_JMiOEq3AGykUMHzWXzjdMFwgniOw
+VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client-standalone/.env.production

@@ -0,0 +1 @@
+VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client-standalone/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@triliumnext/client-standalone",
+  "version": "0.102.1",
+  "description": "Standalone client for TriliumNext with SQLite WASM backend",
+  "private": true,
+  "license": "AGPL-3.0-only",
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
+    "dev": "vite dev",
+    "test": "vitest",
+    "start-prod": "pnpm build && pnpm http-server dist -p 8888",
+    "coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "@excalidraw/excalidraw": "0.18.0",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/multimonth": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
+    "@maplibre/maplibre-gl-leaflet": "0.1.3",
+    "@mermaid-js/layout-elk": "0.2.1",
+    "@mind-elixir/node-menu": "5.0.1",
+    "@popperjs/core": "2.11.8",
+    "@preact/signals": "2.8.2",
+    "@sqlite.org/sqlite-wasm": "3.51.1-build2",
+    "@triliumnext/ckeditor5": "workspace:*",
+    "@triliumnext/codemirror": "workspace:*",
+    "@triliumnext/commons": "workspace:*",
+    "@triliumnext/core": "workspace:*",
+    "@triliumnext/highlightjs": "workspace:*",
+    "@triliumnext/share-theme": "workspace:*",
+    "@triliumnext/split.js": "workspace:*",
+    "@zumer/snapdom": "2.6.0",
+    "autocomplete.js": "0.38.1",
+    "bootstrap": "5.3.8",
+    "boxicons": "2.1.4",
+    "clsx": "2.1.1",
+    "color": "5.0.3",
+    "debounce": "3.0.0",
+    "draggabilly": "3.0.0",
+    "force-graph": "1.51.2",
+    "globals": "17.4.0",
+    "i18next": "25.10.10",
+    "i18next-http-backend": "3.0.2",
+    "jquery": "4.0.0",
+    "jquery.fancytree": "2.38.5",
+    "js-sha1": "0.7.0",
+    "js-sha256": "0.11.1",
+    "js-sha512": "0.9.0",
+    "jsplumb": "2.15.6",
+    "katex": "0.16.43",
+    "knockout": "3.5.1",
+    "leaflet": "1.9.4",
+    "leaflet-gpx": "2.2.0",
+    "mark.js": "8.11.1",
+    "marked": "17.0.5",
+    "mermaid": "11.13.0",
+    "mind-elixir": "5.9.3",
+    "normalize.css": "8.0.1",
+    "panzoom": "9.4.4",
+    "preact": "10.29.0",
+    "react-i18next": "16.6.6",
+    "react-window": "2.2.7",
+    "reveal.js": "6.0.0",
+    "svg-pan-zoom": "3.6.2",
+    "tabulator-tables": "6.4.0",
+    "vanilla-js-wheel-zoom": "9.0.4"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-inspector": "5.0.0",
+    "@preact/preset-vite": "2.10.2",
+    "@types/bootstrap": "5.2.10",
+    "@types/jquery": "4.0.0",
+    "@types/leaflet": "1.9.21",
+    "@types/leaflet-gpx": "1.3.8",
+    "@types/mark.js": "8.11.12",
+    "@types/reveal.js": "5.2.2",
+    "@types/tabulator-tables": "6.3.1",
+    "copy-webpack-plugin": "14.0.0",
+    "cross-env": "7.0.3",
+    "happy-dom": "20.8.8",
+    "script-loader": "0.7.2",
+    "vite-plugin-static-copy": "3.4.0"
+  }
+}

apps/client-standalone/public/_headers

@@ -0,0 +1,3 @@
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp

apps/client-standalone/public/manifest.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "Trilium Notes",
+    "short_name": "Trilium",
+    "description": "Trilium Notes is a hierarchical note taking application with focus on building large personal knowledge bases.",
+    "theme_color": "#333333",
+    "background_color": "#1F1F1F",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "display_override": [
+        "window-controls-overlay"
+    ],
+    "icons": [
+        {
+            "src": "assets/icon.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

apps/client-standalone/src/desktop.ts

@@ -0,0 +1,2 @@
+// Re-export desktop from client
+export * from "../../client/src/desktop";

apps/client-standalone/src/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="shortcut icon" href="favicon.ico">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+        <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
+        <title>Trilium Notes</title>
+    </head>
+
+    <body id="trilium-app">
+        <noscript>Trilium requires JavaScript to be enabled.</noscript>
+
+        <div id="context-menu-cover"></div>
+        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
+
+        <!-- Required for match the PWA's top bar color with the theme -->
+        <!-- This works even when the user directly changes --root-background in CSS -->
+        <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
+
+        <!-- Bootstrap (request server for required information) -->
+        <script src="./main.ts" type="module"></script>
+
+        <!-- Required for correct loading of scripts in Electron -->
+        <script>
+            if (typeof module === 'object') {window.module = module; module = undefined;}
+        </script>
+    </body>
+</html>

apps/client-standalone/src/lightweight/browser_router.ts

@@ -0,0 +1,283 @@
+/**
+ * Browser-compatible router that mimics Express routing patterns.
+ * Supports path parameters (e.g., /api/notes/:noteId) and query strings.
+ */
+
+import { getContext, routes } from "@triliumnext/core";
+
+export interface BrowserRequest {
+    method: string;
+    url: string;
+    path: string;
+    params: Record<string, string>;
+    query: Record<string, string | undefined>;
+    headers?: Record<string, string>;
+    body?: unknown;
+}
+
+export interface BrowserResponse {
+    status: number;
+    headers: Record<string, string>;
+    body: ArrayBuffer | null;
+}
+
+export type RouteHandler = (req: BrowserRequest) => unknown | Promise<unknown>;
+
+interface Route {
+    method: string;
+    pattern: RegExp;
+    paramNames: string[];
+    handler: RouteHandler;
+}
+
+/**
+ * Symbol used to mark a result as an already-formatted response,
+ * so that formatResult passes it through without JSON-serializing.
+ * Must match the symbol exported from browser_routes.ts.
+ */
+const RAW_RESPONSE = Symbol.for('RAW_RESPONSE');
+
+const encoder = new TextEncoder();
+
+/**
+ * Convert an Express-style path pattern to a RegExp.
+ * Supports :param syntax for path parameters.
+ *
+ * Examples:
+ *   /api/notes/:noteId -> /^\/api\/notes\/([^\/]+)$/
+ *   /api/notes/:noteId/revisions -> /^\/api\/notes\/([^\/]+)\/revisions$/
+ */
+function pathToRegex(path: string): { pattern: RegExp; paramNames: string[] } {
+    const paramNames: string[] = [];
+
+    // Escape special regex characters except for :param patterns
+    const regexPattern = path
+        .replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // Escape special chars
+        .replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, paramName) => {
+            paramNames.push(paramName);
+            return '([^/]+)';
+        });
+
+    return {
+        pattern: new RegExp(`^${regexPattern}$`),
+        paramNames
+    };
+}
+
+/**
+ * Parse query string into an object.
+ */
+function parseQuery(search: string): Record<string, string | undefined> {
+    const query: Record<string, string | undefined> = {};
+    if (!search || search === '?') return query;
+
+    const params = new URLSearchParams(search);
+    for (const [key, value] of params) {
+        query[key] = value;
+    }
+    return query;
+}
+
+/**
+ * Convert a result to a JSON response.
+ */
+function jsonResponse(obj: unknown, status = 200, extraHeaders: Record<string, string> = {}): BrowserResponse {
+    const parsedObj = routes.convertEntitiesToPojo(obj);
+    const body = encoder.encode(JSON.stringify(parsedObj)).buffer as ArrayBuffer;
+    return {
+        status,
+        headers: { "content-type": "application/json; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+/**
+ * Convert a string to a text response.
+ */
+function textResponse(text: string, status = 200, extraHeaders: Record<string, string> = {}): BrowserResponse {
+    const body = encoder.encode(text).buffer as ArrayBuffer;
+    return {
+        status,
+        headers: { "content-type": "text/plain; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+/**
+ * Browser router class that handles route registration and dispatching.
+ */
+export class BrowserRouter {
+    private routes: Route[] = [];
+
+    /**
+     * Register a route handler.
+     */
+    register(method: string, path: string, handler: RouteHandler): void {
+        const { pattern, paramNames } = pathToRegex(path);
+        this.routes.push({
+            method: method.toUpperCase(),
+            pattern,
+            paramNames,
+            handler
+        });
+    }
+
+    /**
+     * Convenience methods for common HTTP methods.
+     */
+    get(path: string, handler: RouteHandler): void {
+        this.register('GET', path, handler);
+    }
+
+    post(path: string, handler: RouteHandler): void {
+        this.register('POST', path, handler);
+    }
+
+    put(path: string, handler: RouteHandler): void {
+        this.register('PUT', path, handler);
+    }
+
+    patch(path: string, handler: RouteHandler): void {
+        this.register('PATCH', path, handler);
+    }
+
+    delete(path: string, handler: RouteHandler): void {
+        this.register('DELETE', path, handler);
+    }
+
+    /**
+     * Dispatch a request to the appropriate handler.
+     */
+    async dispatch(method: string, urlString: string, body?: unknown, headers?: Record<string, string>): Promise<BrowserResponse> {
+        const url = new URL(urlString);
+        const path = url.pathname;
+        const query = parseQuery(url.search);
+        const upperMethod = method.toUpperCase();
+
+        // Parse JSON body if it's an ArrayBuffer and content-type suggests JSON
+        let parsedBody = body;
+        if (body instanceof ArrayBuffer && headers) {
+            const contentType = headers['content-type'] || headers['Content-Type'] || '';
+            if (contentType.includes('application/json')) {
+                try {
+                    const text = new TextDecoder().decode(body);
+                    if (text.trim()) {
+                        parsedBody = JSON.parse(text);
+                    }
+                } catch (e) {
+                    console.warn('[Router] Failed to parse JSON body:', e);
+                    // Keep original body if JSON parsing fails
+                    parsedBody = body;
+                }
+            }
+        }
+        // Find matching route
+        for (const route of this.routes) {
+            if (route.method !== upperMethod) continue;
+
+            const match = path.match(route.pattern);
+            if (!match) continue;
+
+            // Extract path parameters
+            const params: Record<string, string> = {};
+            for (let i = 0; i < route.paramNames.length; i++) {
+                params[route.paramNames[i]] = decodeURIComponent(match[i + 1]);
+            }
+
+            const request: BrowserRequest = {
+                method: upperMethod,
+                url: urlString,
+                path,
+                params,
+                query,
+                headers: headers ?? {},
+                body: parsedBody
+            };
+
+            try {
+                const result = await getContext().init(async () => await route.handler(request));
+                return this.formatResult(result);
+            } catch (error) {
+                return this.formatError(error, `Error handling ${method} ${path}`);
+            }
+        }
+
+        // No route matched
+        return textResponse(`Not found: ${method} ${path}`, 404);
+    }
+
+    /**
+     * Format a handler result into a response.
+     * Follows the same patterns as the server's apiResultHandler.
+     */
+    private formatResult(result: unknown): BrowserResponse {
+        // Handle raw responses (e.g. from image routes that write directly to res)
+        if (result && typeof result === 'object' && RAW_RESPONSE in result) {
+            const raw = result as unknown as { status: number; headers: Record<string, string>; body: unknown };
+            let body: ArrayBuffer | null = null;
+
+            if (raw.body instanceof ArrayBuffer) {
+                body = raw.body;
+            } else if (raw.body instanceof Uint8Array) {
+                body = raw.body.buffer as ArrayBuffer;
+            } else if (typeof raw.body === 'string') {
+                body = encoder.encode(raw.body).buffer as ArrayBuffer;
+            }
+
+            return {
+                status: raw.status,
+                headers: raw.headers,
+                body
+            };
+        }
+
+        // Handle [statusCode, response] format
+        if (Array.isArray(result) && result.length > 0 && Number.isInteger(result[0])) {
+            const [statusCode, response] = result;
+            return jsonResponse(response, statusCode);
+        }
+
+        // Handle undefined (no content) - 204 should have no body
+        if (result === undefined) {
+            return {
+                status: 204,
+                headers: {},
+                body: null
+            };
+        }
+
+        // Default: JSON response with 200
+        return jsonResponse(result, 200);
+    }
+
+    /**
+     * Format an error into a response.
+     */
+    private formatError(error: unknown, context: string): BrowserResponse {
+        console.error('[Router] Handler error:', context, error);
+
+        // Check for known error types
+        if (error && typeof error === 'object') {
+            const err = error as { constructor?: { name?: string }; message?: string };
+
+            if (err.constructor?.name === 'NotFoundError') {
+                return jsonResponse({ message: err.message || 'Not found' }, 404);
+            }
+
+            if (err.constructor?.name === 'ValidationError') {
+                return jsonResponse({ message: err.message || 'Validation error' }, 400);
+            }
+        }
+
+        // Generic error
+        const message = error instanceof Error ? error.message : String(error);
+        return jsonResponse({ message }, 500);
+    }
+}
+
+/**
+ * Create a new router instance.
+ */
+export function createRouter(): BrowserRouter {
+    return new BrowserRouter();
+}

apps/client-standalone/src/lightweight/browser_routes.ts

@@ -0,0 +1,284 @@
+/**
+ * Browser route definitions.
+ * This integrates with the shared route builder from @triliumnext/core.
+ */
+
+import { BootstrapDefinition } from '@triliumnext/commons';
+import { entity_changes, getContext, getPlatform, getSharedBootstrapItems, getSql, routes, sql_init } from '@triliumnext/core';
+
+import packageJson from '../../package.json' with { type: 'json' };
+import { type BrowserRequest, BrowserRouter } from './browser_router';
+
+/** Minimal response object used by apiResultHandler to capture the processed result. */
+interface ResultHandlerResponse {
+    headers: Record<string, string>;
+    result: unknown;
+    setHeader(name: string, value: string): void;
+}
+
+/**
+ * Symbol used to mark a result as an already-formatted BrowserResponse,
+ * so that BrowserRouter.formatResult passes it through without JSON-serializing.
+ * Uses Symbol.for() so the same symbol is shared across modules.
+ */
+const RAW_RESPONSE = Symbol.for('RAW_RESPONSE');
+
+type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';
+
+/**
+ * Creates an Express-like request object from a BrowserRequest.
+ */
+function toExpressLikeReq(req: BrowserRequest) {
+    return {
+        params: req.params,
+        query: req.query,
+        body: req.body,
+        headers: req.headers ?? {},
+        method: req.method,
+        get originalUrl() { return req.url; }
+    };
+}
+
+/**
+ * Extracts context headers from the request and sets them in the execution context,
+ * mirroring what the server does in route_api.ts.
+ */
+function setContextFromHeaders(req: BrowserRequest) {
+    const headers = req.headers ?? {};
+    const ctx = getContext();
+    ctx.set("componentId", headers["trilium-component-id"]);
+    ctx.set("localNowDateTime", headers["trilium-local-now-datetime"]);
+    ctx.set("hoistedNoteId", headers["trilium-hoisted-note-id"] || "root");
+}
+
+/**
+ * Wraps a core route handler to work with the BrowserRouter.
+ * Core handlers expect an Express-like request object with params, query, and body.
+ * Each request is wrapped in an execution context (like cls.init() on the server)
+ * to ensure entity change tracking works correctly.
+ */
+function wrapHandler(handler: (req: any) => unknown, transactional: boolean) {
+    return (req: BrowserRequest) => {
+        return getContext().init(() => {
+            setContextFromHeaders(req);
+            const expressLikeReq = toExpressLikeReq(req);
+            if (transactional) {
+                return getSql().transactional(() => handler(expressLikeReq));
+            }
+            return handler(expressLikeReq);
+        });
+    };
+}
+
+/**
+ * Creates an apiRoute function compatible with buildSharedApiRoutes.
+ * This bridges the core's route registration to the BrowserRouter.
+ */
+function createApiRoute(router: BrowserRouter, transactional: boolean) {
+    return (method: HttpMethod, path: string, handler: (req: any) => unknown) => {
+        router.register(method, path, wrapHandler(handler, transactional));
+    };
+}
+
+/**
+ * Low-level route registration matching the server's `route()` signature:
+ *   route(method, path, middleware[], handler, resultHandler)
+ *
+ * In standalone mode:
+ * - Middleware (e.g. checkApiAuth) is skipped — there's no authentication.
+ * - The resultHandler is applied to post-process the result (entity conversion, status codes).
+ */
+function createRoute(router: BrowserRouter) {
+    return (method: HttpMethod, path: string, _middleware: any[], handler: (req: any, res: any) => unknown, resultHandler?: ((req: any, res: any, result: unknown) => unknown) | null) => {
+        router.register(method, path, (req: BrowserRequest) => {
+            return getContext().init(() => {
+                setContextFromHeaders(req);
+                const expressLikeReq = toExpressLikeReq(req);
+                const mockRes = createMockExpressResponse();
+                const result = getSql().transactional(() => handler(expressLikeReq, mockRes));
+
+                // If the handler used the mock response (e.g. image routes that call res.send()),
+                // return it as a raw response so BrowserRouter doesn't JSON-serialize it.
+                if (mockRes._used) {
+                    return {
+                        [RAW_RESPONSE]: true as const,
+                        status: mockRes._status,
+                        headers: mockRes._headers,
+                        body: mockRes._body
+                    };
+                }
+
+                if (resultHandler) {
+                    // Create a minimal response object that captures what apiResultHandler sets.
+                    const res = createResultHandlerResponse();
+                    resultHandler(expressLikeReq, res, result);
+                    return res.result;
+                }
+
+                return result;
+            });
+        });
+    };
+}
+
+/**
+ * Creates a mock Express response object that captures calls to set(), send(), sendStatus(), etc.
+ * Used for route handlers (like image routes) that write directly to the response.
+ */
+function createMockExpressResponse() {
+    const res = {
+        _used: false,
+        _status: 200,
+        _headers: {} as Record<string, string>,
+        _body: null as unknown,
+        set(name: string, value: string) {
+            res._headers[name] = value;
+            return res;
+        },
+        setHeader(name: string, value: string) {
+            res._headers[name] = value;
+            return res;
+        },
+        status(code: number) {
+            res._status = code;
+            return res;
+        },
+        send(body: unknown) {
+            res._used = true;
+            res._body = body;
+            return res;
+        },
+        sendStatus(code: number) {
+            res._used = true;
+            res._status = code;
+            return res;
+        }
+    };
+    return res;
+}
+
+/**
+ * Standalone apiResultHandler matching the server's behavior:
+ * - Converts Becca entities to POJOs
+ * - Handles [statusCode, response] tuple format
+ * - Sets trilium-max-entity-change-id (captured in response headers)
+ */
+function apiResultHandler(_req: any, res: ResultHandlerResponse, result: unknown) {
+    res.headers["trilium-max-entity-change-id"] = String(entity_changes.getMaxEntityChangeId());
+    result = routes.convertEntitiesToPojo(result);
+
+    if (Array.isArray(result) && result.length > 0 && Number.isInteger(result[0])) {
+        const [_statusCode, response] = result;
+        res.result = response;
+    } else if (result === undefined) {
+        res.result = "";
+    } else {
+        res.result = result;
+    }
+}
+
+/**
+ * No-op middleware stubs for standalone mode.
+ *
+ * In a browser context there is no network authentication, rate limiting,
+ * or multi-user access, so all auth/rate-limit middleware is a no-op.
+ *
+ * `checkAppNotInitialized` still guards setup routes: if the database is
+ * already initialised the middleware throws so the route handler is never
+ * reached (mirrors the server behaviour).
+ */
+function noopMiddleware() {
+    // No-op.
+}
+
+function checkAppNotInitialized() {
+    if (sql_init.isDbInitialized()) {
+        throw new Error("App already initialized.");
+    }
+}
+
+/**
+ * Creates a minimal response-like object for the apiResultHandler.
+ */
+function createResultHandlerResponse(): ResultHandlerResponse {
+    return {
+        headers: {},
+        result: undefined,
+        setHeader(name: string, value: string) {
+            this.headers[name] = value;
+        }
+    };
+}
+
+/**
+ * Register all API routes on the browser router using the shared builder.
+ *
+ * @param router - The browser router instance
+ */
+export function registerRoutes(router: BrowserRouter): void {
+    const apiRoute = createApiRoute(router, true);
+    routes.buildSharedApiRoutes({
+        route: createRoute(router),
+        asyncRoute: createRoute(router),
+        apiRoute,
+        asyncApiRoute: createApiRoute(router, false),
+        apiResultHandler,
+        checkApiAuth: noopMiddleware,
+        checkApiAuthOrElectron: noopMiddleware,
+        checkAppNotInitialized,
+        checkCredentials: noopMiddleware,
+        loginRateLimiter: noopMiddleware
+    });
+    apiRoute('get', '/bootstrap', bootstrapRoute);
+
+    // Dummy routes for compatibility.
+    apiRoute("get", "/api/script/widgets", () => []);
+    apiRoute("get", "/api/script/startup", () => []);
+    apiRoute("get", "/api/system-checks", () => ({ isCpuArchMismatch: false }));
+}
+
+function bootstrapRoute(): BootstrapDefinition {
+    const assetPath = ".";
+
+    const isDbInitialized = sql_init.isDbInitialized();
+    const commonItems = {
+        ...getSharedBootstrapItems(assetPath, isDbInitialized),
+        isDev: import.meta.env.DEV,
+        isStandalone: true,
+        isMainWindow: true,
+        isElectron: false,
+        hasNativeTitleBar: false,
+        hasBackgroundEffects: false,
+        triliumVersion: packageJson.version,
+        device: false as const, // Let the client detect device type.
+        appPath: assetPath,
+        instanceName: "standalone",
+        TRILIUM_SAFE_MODE: !!getPlatform().getEnv("TRILIUM_SAFE_MODE")
+    };
+
+    if (!isDbInitialized) {
+        return {
+            ...commonItems,
+            baseApiUrl: "../api/",
+            isProtectedSessionAvailable: false,
+        };
+    }
+
+    return {
+        ...commonItems,
+        csrfToken: "dummy-csrf-token",
+        baseApiUrl: "../api/",
+        headingStyle: "plain",
+        layoutOrientation: "vertical",
+        platform: "web",
+    };
+}
+
+/**
+ * Create and configure a router with all routes registered.
+ */
+export function createConfiguredRouter(): BrowserRouter {
+    const router = new BrowserRouter();
+    registerRoutes(router);
+    return router;
+}

apps/client-standalone/src/lightweight/cls_provider.ts

@@ -0,0 +1,77 @@
+import { ExecutionContext } from "@triliumnext/core";
+
+/**
+ * Browser execution context implementation.
+ * 
+ * Handles per-request context isolation with support for fire-and-forget async operations
+ * using a context stack and grace-period cleanup to allow unawaited promises to complete.
+ */
+export default class BrowserExecutionContext implements ExecutionContext {
+    private contextStack: Map<string, any>[] = [];
+    private cleanupTimers = new WeakMap<Map<string, any>, ReturnType<typeof setTimeout>>();
+    private readonly CLEANUP_GRACE_PERIOD = 1000; // 1 second for fire-and-forget operations
+
+    private getCurrentContext(): Map<string, any> {
+        if (this.contextStack.length === 0) {
+            throw new Error("ExecutionContext not initialized");
+        }
+        return this.contextStack[this.contextStack.length - 1];
+    }
+
+    get<T = any>(key: string): T {
+        return this.getCurrentContext().get(key);
+    }
+
+    set(key: string, value: any): void {
+        this.getCurrentContext().set(key, value);
+    }
+
+    reset(): void {
+        this.contextStack = [];
+    }
+
+    init<T>(callback: () => T): T {
+        const context = new Map<string, any>();
+        this.contextStack.push(context);
+
+        // Cancel any pending cleanup timer for this context
+        const existingTimer = this.cleanupTimers.get(context);
+        if (existingTimer) {
+            clearTimeout(existingTimer);
+            this.cleanupTimers.delete(context);
+        }
+
+        try {
+            const result = callback();
+
+            // If the result is a Promise
+            if (result && typeof result === 'object' && 'then' in result && 'catch' in result) {
+                const promise = result as unknown as Promise<any>;
+                return promise.finally(() => {
+                    this.scheduleContextCleanup(context);
+                }) as T;
+            } else {
+                // For synchronous results, schedule delayed cleanup to allow fire-and-forget operations
+                this.scheduleContextCleanup(context);
+                return result;
+            }
+        } catch (error) {
+            // Always clean up on error with grace period
+            this.scheduleContextCleanup(context);
+            throw error;
+        }
+    }
+
+    private scheduleContextCleanup(context: Map<string, any>): void {
+        const timer = setTimeout(() => {
+            // Remove from stack if still present
+            const index = this.contextStack.indexOf(context);
+            if (index !== -1) {
+                this.contextStack.splice(index, 1);
+            }
+            this.cleanupTimers.delete(context);
+        }, this.CLEANUP_GRACE_PERIOD);
+
+        this.cleanupTimers.set(context, timer);
+    }
+}

apps/client-standalone/src/lightweight/crypto_provider.ts

@@ -0,0 +1,158 @@
+import type { CryptoProvider } from "@triliumnext/core";
+import { sha1 } from "js-sha1";
+import { sha256 } from "js-sha256";
+import { sha512 } from "js-sha512";
+
+interface Cipher {
+    update(data: Uint8Array): Uint8Array;
+    final(): Uint8Array;
+}
+
+const CHARS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+
+/**
+ * Crypto provider for browser environments using the Web Crypto API.
+ */
+export default class BrowserCryptoProvider implements CryptoProvider {
+
+    createHash(algorithm: "sha1" | "sha512", content: string | Uint8Array): Uint8Array {
+        const data = typeof content === "string" ? content :
+                new TextDecoder().decode(content);
+
+        const hexHash = algorithm === "sha1" ? sha1(data) : sha512(data);
+
+        // Convert hex string to Uint8Array
+        const bytes = new Uint8Array(hexHash.length / 2);
+        for (let i = 0; i < hexHash.length; i += 2) {
+            bytes[i / 2] = parseInt(hexHash.substr(i, 2), 16);
+        }
+        return bytes;
+    }
+
+    createCipheriv(algorithm: "aes-128-cbc", key: Uint8Array, iv: Uint8Array): Cipher {
+        // Web Crypto API doesn't support streaming cipher like Node.js
+        // We need to implement a wrapper that collects data and encrypts on final()
+        return new WebCryptoCipher(algorithm, key, iv, "encrypt");
+    }
+
+    createDecipheriv(algorithm: "aes-128-cbc", key: Uint8Array, iv: Uint8Array): Cipher {
+        return new WebCryptoCipher(algorithm, key, iv, "decrypt");
+    }
+
+    randomBytes(size: number): Uint8Array {
+        const bytes = new Uint8Array(size);
+        crypto.getRandomValues(bytes);
+        return bytes;
+    }
+
+    randomString(length: number): string {
+        const bytes = this.randomBytes(length);
+        let result = "";
+        for (let i = 0; i < length; i++) {
+            result += CHARS[bytes[i] % CHARS.length];
+        }
+        return result;
+    }
+
+    hmac(secret: string | Uint8Array, value: string | Uint8Array): string {
+        const secretStr = typeof secret === "string" ? secret : new TextDecoder().decode(secret);
+        const valueStr = typeof value === "string" ? value : new TextDecoder().decode(value);
+        // sha256.hmac returns hex, convert to base64 to match Node's behavior
+        const hexHash = sha256.hmac(secretStr, valueStr);
+        const bytes = new Uint8Array(hexHash.length / 2);
+        for (let i = 0; i < hexHash.length; i += 2) {
+            bytes[i / 2] = parseInt(hexHash.substr(i, 2), 16);
+        }
+        return btoa(String.fromCharCode(...bytes));
+    }
+}
+
+/**
+ * A cipher implementation that wraps Web Crypto API.
+ * Note: This buffers all data until final() is called, which differs from
+ * Node.js's streaming cipher behavior.
+ */
+class WebCryptoCipher implements Cipher {
+    private chunks: Uint8Array[] = [];
+    private algorithm: string;
+    private key: Uint8Array;
+    private iv: Uint8Array;
+    private mode: "encrypt" | "decrypt";
+    private finalized = false;
+
+    constructor(
+        algorithm: "aes-128-cbc",
+        key: Uint8Array,
+        iv: Uint8Array,
+        mode: "encrypt" | "decrypt"
+    ) {
+        this.algorithm = algorithm;
+        this.key = key;
+        this.iv = iv;
+        this.mode = mode;
+    }
+
+    update(data: Uint8Array): Uint8Array {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        // Buffer the data - Web Crypto doesn't support streaming
+        this.chunks.push(data);
+        // Return empty array since we process everything in final()
+        return new Uint8Array(0);
+    }
+
+    final(): Uint8Array {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        this.finalized = true;
+
+        // Web Crypto API is async, but we need sync behavior
+        // This is a fundamental limitation that requires architectural changes
+        // For now, throw an error directing users to use async methods
+        throw new Error(
+            "Synchronous cipher finalization not available in browser. " +
+            "The Web Crypto API is async-only. Use finalizeAsync() instead."
+        );
+    }
+
+    /**
+     * Async version that actually performs the encryption/decryption.
+     */
+    async finalizeAsync(): Promise<Uint8Array> {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        this.finalized = true;
+
+        // Concatenate all chunks
+        const totalLength = this.chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+        const data = new Uint8Array(totalLength);
+        let offset = 0;
+        for (const chunk of this.chunks) {
+            data.set(chunk, offset);
+            offset += chunk.length;
+        }
+
+        // Copy key and iv to ensure they're plain ArrayBuffer-backed
+        const keyBuffer = new Uint8Array(this.key);
+        const ivBuffer = new Uint8Array(this.iv);
+
+        // Import the key
+        const cryptoKey = await crypto.subtle.importKey(
+            "raw",
+            keyBuffer,
+            { name: "AES-CBC" },
+            false,
+            [this.mode]
+        );
+
+        // Perform encryption/decryption
+        const result = this.mode === "encrypt"
+            ? await crypto.subtle.encrypt({ name: "AES-CBC", iv: ivBuffer }, cryptoKey, data)
+            : await crypto.subtle.decrypt({ name: "AES-CBC", iv: ivBuffer }, cryptoKey, data);
+
+        return new Uint8Array(result);
+    }
+}

apps/client-standalone/src/lightweight/messaging_provider.ts

@@ -0,0 +1,120 @@
+import type { WebSocketMessage } from "@triliumnext/commons";
+import type { ClientMessageHandler, MessageHandler,MessagingProvider } from "@triliumnext/core";
+
+/**
+ * Messaging provider for browser Worker environments.
+ *
+ * This provider uses the Worker's postMessage API to communicate
+ * with the main thread. It's designed to be used inside a Web Worker
+ * that runs the core services.
+ *
+ * Message flow:
+ * - Outbound (worker → main): Uses self.postMessage() with type: "WS_MESSAGE"
+ * - Inbound (main → worker): Listens to onmessage for type: "WS_MESSAGE"
+ */
+export default class WorkerMessagingProvider implements MessagingProvider {
+    private messageHandlers: MessageHandler[] = [];
+    private clientMessageHandler?: ClientMessageHandler;
+    private isDisposed = false;
+
+    constructor() {
+        // Listen for incoming messages from the main thread
+        self.addEventListener("message", this.handleIncomingMessage);
+    }
+
+    private handleIncomingMessage = (event: MessageEvent) => {
+        if (this.isDisposed) return;
+
+        const { type, message } = event.data || {};
+
+        if (type === "WS_MESSAGE" && message) {
+            // Dispatch to the client message handler (used by ws.ts for log-error, log-info, ping)
+            if (this.clientMessageHandler) {
+                try {
+                    this.clientMessageHandler("main-thread", message);
+                } catch (e) {
+                    console.error("[WorkerMessagingProvider] Error in client message handler:", e);
+                }
+            }
+
+            // Dispatch to all registered handlers
+            for (const handler of this.messageHandlers) {
+                try {
+                    handler(message as WebSocketMessage);
+                } catch (e) {
+                    console.error("[WorkerMessagingProvider] Error in message handler:", e);
+                }
+            }
+        }
+    };
+
+    /**
+     * Send a message to all clients (in this case, the main thread).
+     * The main thread is responsible for further distribution if needed.
+     */
+    sendMessageToAllClients(message: WebSocketMessage): void {
+        if (this.isDisposed) {
+            console.warn("[WorkerMessagingProvider] Cannot send message - provider is disposed");
+            return;
+        }
+
+        try {
+            self.postMessage({
+                type: "WS_MESSAGE",
+                message
+            });
+        } catch (e) {
+            console.error("[WorkerMessagingProvider] Error sending message:", e);
+        }
+    }
+
+    /**
+     * Send a message to a specific client.
+     * In worker context, there's only one client (the main thread), so clientId is ignored.
+     */
+    sendMessageToClient(_clientId: string, message: WebSocketMessage): boolean {
+        if (this.isDisposed) {
+            return false;
+        }
+
+        this.sendMessageToAllClients(message);
+        return true;
+    }
+
+    /**
+     * Register a handler for incoming client messages.
+     */
+    setClientMessageHandler(handler: ClientMessageHandler): void {
+        this.clientMessageHandler = handler;
+    }
+
+    /**
+     * Subscribe to incoming messages from the main thread.
+     */
+    onMessage(handler: MessageHandler): () => void {
+        this.messageHandlers.push(handler);
+
+        return () => {
+            this.messageHandlers = this.messageHandlers.filter(h => h !== handler);
+        };
+    }
+
+    /**
+     * Get the number of connected "clients".
+     * In worker context, there's always exactly 1 client (the main thread).
+     */
+    getClientCount(): number {
+        return this.isDisposed ? 0 : 1;
+    }
+
+    /**
+     * Clean up resources.
+     */
+    dispose(): void {
+        if (this.isDisposed) return;
+
+        this.isDisposed = true;
+        self.removeEventListener("message", this.handleIncomingMessage);
+        this.messageHandlers = [];
+    }
+}

apps/client-standalone/src/lightweight/platform_provider.ts

@@ -0,0 +1,36 @@
+import type { PlatformProvider } from "@triliumnext/core";
+
+/** Maps URL query parameter names to TRILIUM_ environment variable names. */
+const QUERY_TO_ENV: Record<string, string> = {
+    "safeMode": "TRILIUM_SAFE_MODE",
+    "startNoteId": "TRILIUM_START_NOTE_ID",
+};
+
+export default class StandalonePlatformProvider implements PlatformProvider {
+    readonly isElectron = false;
+    readonly isMac = false;
+    readonly isWindows = false;
+
+    private envMap: Record<string, string> = {};
+
+    constructor(queryString: string) {
+        const params = new URLSearchParams(queryString);
+        for (const [queryKey, envKey] of Object.entries(QUERY_TO_ENV)) {
+            if (params.has(queryKey)) {
+                this.envMap[envKey] = params.get(queryKey) || "true";
+            }
+        }
+    }
+
+    crash(message: string): void {
+        console.error("[Standalone] FATAL:", message);
+        self.postMessage({
+            type: "FATAL_ERROR",
+            message
+        });
+    }
+
+    getEnv(key: string): string | undefined {
+        return this.envMap[key];
+    }
+}

apps/client-standalone/src/lightweight/request_provider.ts

@@ -0,0 +1,93 @@
+import type { ExecOpts, RequestProvider } from "@triliumnext/core";
+
+/**
+ * Fetch-based implementation of RequestProvider for browser environments.
+ *
+ * Uses the Fetch API instead of Node's http/https modules.
+ * Proxy support is not available in browsers, so the proxy option is ignored.
+ */
+export default class FetchRequestProvider implements RequestProvider {
+
+    async exec<T>(opts: ExecOpts): Promise<T> {
+        const paging = opts.paging || {
+            pageCount: 1,
+            pageIndex: 0,
+            requestId: "n/a"
+        };
+
+        const headers: Record<string, string> = {
+            "Content-Type": paging.pageCount === 1 ? "application/json" : "text/plain",
+            "pageCount": String(paging.pageCount),
+            "pageIndex": String(paging.pageIndex),
+            "requestId": paging.requestId
+        };
+
+        // Note: the Cookie header is a forbidden header in fetch —
+        // the browser manages cookies automatically via credentials: 'include'.
+
+        if (opts.auth?.password) {
+            headers["trilium-cred"] = btoa(`dummy:${opts.auth.password}`);
+        }
+
+        let body: string | undefined;
+        if (opts.body) {
+            body = typeof opts.body === "object" ? JSON.stringify(opts.body) : opts.body;
+        }
+
+        const controller = new AbortController();
+        const timeoutId = opts.timeout
+            ? setTimeout(() => controller.abort(), opts.timeout)
+            : undefined;
+
+        try {
+            const response = await fetch(opts.url, {
+                method: opts.method,
+                headers,
+                body,
+                signal: controller.signal,
+                credentials: "include"
+            });
+
+            if ([200, 201, 204].includes(response.status)) {
+                const text = await response.text();
+                return text.trim() ? JSON.parse(text) : null;
+            }
+            const text = await response.text();
+            let errorMessage: string;
+            try {
+                const json = JSON.parse(text);
+                errorMessage = json?.message || "";
+            } catch {
+                errorMessage = text.substring(0, 100);
+            }
+            throw new Error(`${response.status} ${opts.method} ${opts.url}: ${errorMessage}`);
+
+        } catch (e: any) {
+            if (e.name === "AbortError") {
+                throw new Error(`${opts.method} ${opts.url} failed, error: timeout after ${opts.timeout}ms`);
+            }
+            if (e instanceof TypeError && e.message === "Failed to fetch") {
+                const isCrossOrigin = !opts.url.startsWith(location.origin);
+                if (isCrossOrigin) {
+                    throw new Error(`Request to ${opts.url} was blocked. The server may not allow requests from this origin (CORS), or it may be unreachable.`);
+                }
+                throw new Error(`Request to ${opts.url} failed. The server may be unreachable.`);
+            }
+            throw e;
+        } finally {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        }
+    }
+
+    async getImage(imageUrl: string): Promise<ArrayBuffer> {
+        const response = await fetch(imageUrl);
+
+        if (!response.ok) {
+            throw new Error(`${response.status} GET ${imageUrl} failed`);
+        }
+
+        return await response.arrayBuffer();
+    }
+}

apps/client-standalone/src/lightweight/sql_provider.ts

@@ -0,0 +1,613 @@
+import { type BindableValue, default as sqlite3InitModule } from "@sqlite.org/sqlite-wasm";
+import type { DatabaseProvider, RunResult, Statement, Transaction } from "@triliumnext/core";
+
+// Type definitions for SQLite WASM (the library doesn't export these directly)
+type Sqlite3Module = Awaited<ReturnType<typeof sqlite3InitModule>>;
+type Sqlite3Database = InstanceType<Sqlite3Module["oo1"]["DB"]>;
+type Sqlite3PreparedStatement = ReturnType<Sqlite3Database["prepare"]>;
+
+/**
+ * Wraps an SQLite WASM PreparedStatement to match the Statement interface
+ * expected by trilium-core.
+ */
+class WasmStatement implements Statement {
+    private isRawMode = false;
+    private isPluckMode = false;
+    private isFinalized = false;
+
+    constructor(
+        private stmt: Sqlite3PreparedStatement,
+        private db: Sqlite3Database,
+        private sqlite3: Sqlite3Module,
+        private sql: string
+    ) {}
+
+    run(...params: unknown[]): RunResult {
+        if (this.isFinalized) {
+            throw new Error("Cannot call run() on finalized statement");
+        }
+
+        this.bindParams(params);
+        try {
+            // Use step() and then reset instead of stepFinalize()
+            // This allows the statement to be reused
+            this.stmt.step();
+            const changes = this.db.changes();
+            // Get the last insert row ID using the C API
+            const lastInsertRowid = this.db.pointer ? this.sqlite3.capi.sqlite3_last_insert_rowid(this.db.pointer) : 0;
+            this.stmt.reset();
+            return {
+                changes,
+                lastInsertRowid: typeof lastInsertRowid === "bigint" ? Number(lastInsertRowid) : lastInsertRowid
+            };
+        } catch (e) {
+            // Reset on error to allow reuse
+            this.stmt.reset();
+            throw e;
+        }
+    }
+
+    get(params: unknown): unknown {
+        if (this.isFinalized) {
+            throw new Error("Cannot call get() on finalized statement");
+        }
+
+        this.bindParams(Array.isArray(params) ? params : params !== undefined ? [params] : []);
+        try {
+            if (this.stmt.step()) {
+                if (this.isPluckMode) {
+                    // In pluck mode, return only the first column value
+                    const row = this.stmt.get([]);
+                    return Array.isArray(row) && row.length > 0 ? row[0] : undefined;
+                }
+                return this.isRawMode ? this.stmt.get([]) : this.stmt.get({});
+            }
+            return undefined;
+        } finally {
+            this.stmt.reset();
+        }
+    }
+
+    all(...params: unknown[]): unknown[] {
+        if (this.isFinalized) {
+            throw new Error("Cannot call all() on finalized statement");
+        }
+
+        this.bindParams(params);
+        const results: unknown[] = [];
+        try {
+            while (this.stmt.step()) {
+                if (this.isPluckMode) {
+                    // In pluck mode, return only the first column value for each row
+                    const row = this.stmt.get([]);
+                    if (Array.isArray(row) && row.length > 0) {
+                        results.push(row[0]);
+                    }
+                } else {
+                    results.push(this.isRawMode ? this.stmt.get([]) : this.stmt.get({}));
+                }
+            }
+            return results;
+        } finally {
+            this.stmt.reset();
+        }
+    }
+
+    iterate(...params: unknown[]): IterableIterator<unknown> {
+        if (this.isFinalized) {
+            throw new Error("Cannot call iterate() on finalized statement");
+        }
+
+        this.bindParams(params);
+        const stmt = this.stmt;
+        const isRaw = this.isRawMode;
+        const isPluck = this.isPluckMode;
+
+        return {
+            [Symbol.iterator]() {
+                return this;
+            },
+            next(): IteratorResult<unknown> {
+                if (stmt.step()) {
+                    if (isPluck) {
+                        const row = stmt.get([]);
+                        const value = Array.isArray(row) && row.length > 0 ? row[0] : undefined;
+                        return { value, done: false };
+                    }
+                    return { value: isRaw ? stmt.get([]) : stmt.get({}), done: false };
+                }
+                stmt.reset();
+                return { value: undefined, done: true };
+            }
+        };
+    }
+
+    raw(toggleState?: boolean): this {
+        // In raw mode, rows are returned as arrays instead of objects
+        // If toggleState is undefined, enable raw mode (better-sqlite3 behavior)
+        this.isRawMode = toggleState !== undefined ? toggleState : true;
+        return this;
+    }
+
+    pluck(toggleState?: boolean): this {
+        // In pluck mode, only the first column of each row is returned
+        // If toggleState is undefined, enable pluck mode (better-sqlite3 behavior)
+        this.isPluckMode = toggleState !== undefined ? toggleState : true;
+        return this;
+    }
+
+    /**
+     * Detect the prefix used for a parameter name in the SQL query.
+     * SQLite supports @name, :name, and $name parameter styles.
+     * Returns the prefix character, or ':' as default if not found.
+     */
+    private detectParamPrefix(paramName: string): string {
+        // Search for the parameter with each possible prefix
+        for (const prefix of [':', '@', '$']) {
+            // Use word boundary to avoid partial matches
+            const pattern = new RegExp(`\\${prefix}${paramName}(?![a-zA-Z0-9_])`);
+            if (pattern.test(this.sql)) {
+                return prefix;
+            }
+        }
+        // Default to ':' if not found (most common in Trilium)
+        return ':';
+    }
+
+    private bindParams(params: unknown[]): void {
+        this.stmt.clearBindings();
+        if (params.length === 0) {
+            return;
+        }
+
+        // Handle single object with named parameters
+        if (params.length === 1 && typeof params[0] === "object" && params[0] !== null && !Array.isArray(params[0])) {
+            const inputBindings = params[0] as { [paramName: string]: BindableValue };
+
+            // SQLite WASM expects parameter names to include the prefix (@ : or $)
+            // We detect the prefix used in the SQL for each parameter
+            const bindings: { [paramName: string]: BindableValue } = {};
+            for (const [key, value] of Object.entries(inputBindings)) {
+                // If the key already has a prefix, use it as-is
+                if (key.startsWith('@') || key.startsWith(':') || key.startsWith('$')) {
+                    bindings[key] = value;
+                } else {
+                    // Detect the prefix used in the SQL and apply it
+                    const prefix = this.detectParamPrefix(key);
+                    bindings[`${prefix}${key}`] = value;
+                }
+            }
+
+            this.stmt.bind(bindings);
+        } else {
+            // Handle positional parameters - flatten and cast to BindableValue[]
+            const flatParams = params.flat() as BindableValue[];
+            if (flatParams.length > 0) {
+                this.stmt.bind(flatParams);
+            }
+        }
+    }
+
+    finalize(): void {
+        if (!this.isFinalized) {
+            try {
+                this.stmt.finalize();
+            } catch (e) {
+                console.warn("Error finalizing SQLite statement:", e);
+            } finally {
+                this.isFinalized = true;
+            }
+        }
+    }
+}
+
+/**
+ * SQLite database provider for browser environments using SQLite WASM.
+ *
+ * This provider wraps the official @sqlite.org/sqlite-wasm package to provide
+ * a DatabaseProvider implementation compatible with trilium-core.
+ *
+ * @example
+ * ```typescript
+ * const provider = new BrowserSqlProvider();
+ * await provider.initWasm(); // Initialize SQLite WASM module
+ * provider.loadFromMemory(); // Open an in-memory database
+ * // or
+ * provider.loadFromBuffer(existingDbBuffer); // Load from existing data
+ * ```
+ */
+export default class BrowserSqlProvider implements DatabaseProvider {
+    private db?: Sqlite3Database;
+    private sqlite3?: Sqlite3Module;
+    private _inTransaction = false;
+    private initPromise?: Promise<void>;
+    private initError?: Error;
+    private statementCache: Map<string, WasmStatement> = new Map();
+
+    // OPFS state tracking
+    private opfsDbPath?: string;
+
+    /**
+     * Get the SQLite WASM module version info.
+     * Returns undefined if the module hasn't been initialized yet.
+     */
+    get version(): { libVersion: string; sourceId: string } | undefined {
+        return this.sqlite3?.version;
+    }
+
+    /**
+     * Initialize the SQLite WASM module.
+     * This must be called before using any database operations.
+     * Safe to call multiple times - subsequent calls return the same promise.
+     *
+     * @returns A promise that resolves when the module is initialized
+     * @throws Error if initialization fails
+     */
+    async initWasm(): Promise<void> {
+        // Return existing promise if already initializing/initialized
+        if (this.initPromise) {
+            return this.initPromise;
+        }
+
+        // Fail fast if we already tried and failed
+        if (this.initError) {
+            throw this.initError;
+        }
+
+        this.initPromise = this.doInitWasm();
+        return this.initPromise;
+    }
+
+    private async doInitWasm(): Promise<void> {
+        try {
+            console.log("[BrowserSqlProvider] Initializing SQLite WASM...");
+            const startTime = performance.now();
+
+            this.sqlite3 = await sqlite3InitModule({
+                print: console.log,
+                printErr: console.error,
+            });
+
+            const initTime = performance.now() - startTime;
+            console.log(
+                `[BrowserSqlProvider] SQLite WASM initialized in ${initTime.toFixed(2)}ms:`,
+                this.sqlite3.version.libVersion
+            );
+        } catch (e) {
+            this.initError = e instanceof Error ? e : new Error(String(e));
+            console.error("[BrowserSqlProvider] SQLite WASM initialization failed:", this.initError);
+            throw this.initError;
+        }
+    }
+
+    /**
+     * Check if the SQLite WASM module has been initialized.
+     */
+    get isInitialized(): boolean {
+        return this.sqlite3 !== undefined;
+    }
+
+    // ==================== OPFS Support ====================
+
+    /**
+     * Check if the OPFS VFS is available.
+     * This requires:
+     * - Running in a Worker context
+     * - Browser support for OPFS APIs
+     * - COOP/COEP headers sent by the server (for SharedArrayBuffer)
+     *
+     * @returns true if OPFS VFS is available for use
+     */
+    isOpfsAvailable(): boolean {
+        this.ensureSqlite3();
+        // SQLite WASM automatically installs the OPFS VFS if the environment supports it
+        // We can check for its presence via sqlite3_vfs_find or the OpfsDb class
+        return this.sqlite3!.oo1.OpfsDb !== undefined;
+    }
+
+    /**
+     * Load or create a database stored in OPFS for persistent storage.
+     * The database will persist across browser sessions.
+     *
+     * Requires COOP/COEP headers to be set by the server:
+     * - Cross-Origin-Opener-Policy: same-origin
+     * - Cross-Origin-Embedder-Policy: require-corp
+     *
+     * @param path - The path for the database file in OPFS (e.g., "/trilium.db")
+     *               Paths without a leading slash are treated as relative to OPFS root.
+     *               Leading directories are created automatically.
+     * @param options - Additional options
+     * @throws Error if OPFS VFS is not available
+     *
+     * @example
+     * ```typescript
+     * const provider = new BrowserSqlProvider();
+     * await provider.initWasm();
+     * if (provider.isOpfsAvailable()) {
+     *     provider.loadFromOpfs("/my-database.db");
+     * } else {
+     *     console.warn("OPFS not available, using in-memory database");
+     *     provider.loadFromMemory();
+     * }
+     * ```
+     */
+    loadFromOpfs(path: string, options: { createIfNotExists?: boolean } = {}): void {
+        this.ensureSqlite3();
+
+        if (!this.isOpfsAvailable()) {
+            throw new Error(
+                "OPFS VFS is not available. This requires:\n" +
+                "1. Running in a Worker context\n" +
+                "2. Browser support for OPFS (Chrome 102+, Firefox 111+, Safari 17+)\n" +
+                "3. COOP/COEP headers from the server:\n" +
+                "   Cross-Origin-Opener-Policy: same-origin\n" +
+                "   Cross-Origin-Embedder-Policy: require-corp"
+            );
+        }
+
+        console.log(`[BrowserSqlProvider] Loading database from OPFS: ${path}`);
+        const startTime = performance.now();
+
+        try {
+            // OpfsDb automatically creates directories in the path
+            // Mode 'c' = create if not exists
+            const mode = options.createIfNotExists !== false ? 'c' : '';
+            this.db = new this.sqlite3!.oo1.OpfsDb(path, mode);
+            this.opfsDbPath = path;
+
+            // Configure the database for OPFS
+            // Note: WAL mode requires exclusive locking in OPFS environment
+            this.db.exec("PRAGMA journal_mode = DELETE");
+            this.db.exec("PRAGMA synchronous = NORMAL");
+
+            const loadTime = performance.now() - startTime;
+            console.log(`[BrowserSqlProvider] OPFS database loaded in ${loadTime.toFixed(2)}ms`);
+        } catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            console.error(`[BrowserSqlProvider] Failed to load OPFS database: ${error.message}`);
+            throw error;
+        }
+    }
+
+    /**
+     * Check if the currently open database is stored in OPFS.
+     */
+    get isUsingOpfs(): boolean {
+        return this.opfsDbPath !== undefined;
+    }
+
+    /**
+     * Get the OPFS path of the currently open database.
+     * Returns undefined if not using OPFS.
+     */
+    get currentOpfsPath(): string | undefined {
+        return this.opfsDbPath;
+    }
+
+    /**
+     * Check if the database has been initialized with a schema.
+     * This is a simple sanity check that looks for the existence of core tables.
+     *
+     * @returns true if the database appears to be initialized
+     */
+    isDbInitialized(): boolean {
+        this.ensureDb();
+
+        // Check if the 'notes' table exists (a core table that must exist in an initialized DB)
+        const tableExists = this.db!.selectValue(
+            "SELECT name FROM sqlite_master WHERE type = 'table' AND name = 'notes'"
+        );
+
+        return tableExists !== undefined;
+    }
+
+    // ==================== End OPFS Support ====================
+
+    loadFromFile(_path: string, _isReadOnly: boolean): void {
+        // Browser environment doesn't have direct file system access.
+        // Use OPFS for persistent storage.
+        throw new Error(
+            "loadFromFile is not supported in browser environment. " +
+            "Use loadFromMemory() for temporary databases, loadFromBuffer() to load from data, " +
+            "or loadFromOpfs() for persistent storage."
+        );
+    }
+
+    /**
+     * Create an empty in-memory database.
+     * Data will be lost when the page is closed.
+     *
+     * For persistent storage, use loadFromOpfs() instead.
+     * To load demo data, call initializeDemoDatabase() after this.
+     */
+    loadFromMemory(): void {
+        this.ensureSqlite3();
+        console.log("[BrowserSqlProvider] Creating in-memory database...");
+        const startTime = performance.now();
+
+        this.db = new this.sqlite3!.oo1.DB(":memory:", "c");
+        this.opfsDbPath = undefined; // Not using OPFS
+        this.db.exec("PRAGMA journal_mode = WAL");
+
+        const loadTime = performance.now() - startTime;
+        console.log(`[BrowserSqlProvider] In-memory database created in ${loadTime.toFixed(2)}ms`);
+    }
+
+    loadFromBuffer(buffer: Uint8Array): void {
+        this.ensureSqlite3();
+        // SQLite WASM can deserialize a database from a byte array
+        const p = this.sqlite3!.wasm.allocFromTypedArray(buffer);
+        try {
+            this.db = new this.sqlite3!.oo1.DB({ filename: ":memory:", flags: "c" });
+            this.opfsDbPath = undefined; // Not using OPFS
+
+            const rc = this.sqlite3!.capi.sqlite3_deserialize(
+                this.db.pointer!,
+                "main",
+                p,
+                buffer.byteLength,
+                buffer.byteLength,
+                this.sqlite3!.capi.SQLITE_DESERIALIZE_FREEONCLOSE |
+                this.sqlite3!.capi.SQLITE_DESERIALIZE_RESIZEABLE
+            );
+            if (rc !== 0) {
+                throw new Error(`Failed to deserialize database: ${rc}`);
+            }
+        } catch (e) {
+            this.sqlite3!.wasm.dealloc(p);
+            throw e;
+        }
+    }
+
+    backup(_destinationFile: string): void {
+        // In browser, we can serialize the database to a byte array
+        // For actual file backup, we'd need to use File System Access API or download
+        throw new Error(
+            "backup to file is not supported in browser environment. " +
+            "Use serialize() to get the database as a Uint8Array instead."
+        );
+    }
+
+    /**
+     * Serialize the database to a byte array.
+     * This can be used to save the database to IndexedDB, download it, etc.
+     */
+    serialize(): Uint8Array {
+        this.ensureDb();
+        // Use the convenience wrapper which handles all the memory management
+        return this.sqlite3!.capi.sqlite3_js_db_export(this.db!);
+    }
+
+    prepare(query: string): Statement {
+        this.ensureDb();
+
+        // Check if we already have this statement cached
+        if (this.statementCache.has(query)) {
+            return this.statementCache.get(query)!;
+        }
+
+        // Create new statement and cache it
+        const stmt = this.db!.prepare(query);
+        const wasmStatement = new WasmStatement(stmt, this.db!, this.sqlite3!, query);
+        this.statementCache.set(query, wasmStatement);
+        return wasmStatement;
+    }
+
+    transaction<T>(func: (statement: Statement) => T): Transaction {
+        this.ensureDb();
+
+        const self = this;
+        let savepointCounter = 0;
+
+        // Helper function to execute within a transaction
+        const executeTransaction = (beginStatement: string, ...args: unknown[]): T => {
+            // If we're already in a transaction, use SAVEPOINTs for nesting
+            // This mimics better-sqlite3's behavior
+            if (self._inTransaction) {
+                const savepointName = `sp_${++savepointCounter}_${Date.now()}`;
+                self.db!.exec(`SAVEPOINT ${savepointName}`);
+                try {
+                    const result = func.apply(null, args as [Statement]);
+                    self.db!.exec(`RELEASE SAVEPOINT ${savepointName}`);
+                    return result;
+                } catch (e) {
+                    self.db!.exec(`ROLLBACK TO SAVEPOINT ${savepointName}`);
+                    throw e;
+                }
+            }
+
+            // Not in a transaction, start a new one
+            self._inTransaction = true;
+            self.db!.exec(beginStatement);
+            try {
+                const result = func.apply(null, args as [Statement]);
+                self.db!.exec("COMMIT");
+                return result;
+            } catch (e) {
+                self.db!.exec("ROLLBACK");
+                throw e;
+            } finally {
+                self._inTransaction = false;
+            }
+        };
+
+        // Create the transaction function that acts like better-sqlite3's Transaction interface
+        // In better-sqlite3, the transaction function is callable and has .deferred(), .immediate(), etc.
+        const transactionWrapper = Object.assign(
+            // Default call executes with BEGIN (same as immediate)
+            (...args: unknown[]): T => executeTransaction("BEGIN", ...args),
+            {
+                // Deferred transaction - locks acquired on first data access
+                deferred: (...args: unknown[]): T => executeTransaction("BEGIN DEFERRED", ...args),
+                // Immediate transaction - acquires write lock immediately
+                immediate: (...args: unknown[]): T => executeTransaction("BEGIN IMMEDIATE", ...args),
+                // Exclusive transaction - exclusive lock
+                exclusive: (...args: unknown[]): T => executeTransaction("BEGIN EXCLUSIVE", ...args),
+                // Default is same as calling directly
+                default: (...args: unknown[]): T => executeTransaction("BEGIN", ...args)
+            }
+        );
+
+        return transactionWrapper as unknown as Transaction;
+    }
+
+    get inTransaction(): boolean {
+        return this._inTransaction;
+    }
+
+    exec(query: string): void {
+        this.ensureDb();
+        this.db!.exec(query);
+    }
+
+    close(): void {
+        // Clean up all cached statements first
+        for (const statement of this.statementCache.values()) {
+            try {
+                statement.finalize();
+            } catch (e) {
+                // Ignore errors during cleanup
+                console.warn("Error finalizing statement during cleanup:", e);
+            }
+        }
+        this.statementCache.clear();
+
+        if (this.db) {
+            this.db.close();
+            this.db = undefined;
+        }
+
+        // Reset OPFS state
+        this.opfsDbPath = undefined;
+    }
+
+    /**
+     * Get the number of rows changed by the last INSERT, UPDATE, or DELETE statement.
+     */
+    changes(): number {
+        this.ensureDb();
+        return this.db!.changes();
+    }
+
+    /**
+     * Check if the database is currently open.
+     */
+    isOpen(): boolean {
+        return this.db !== undefined && this.db.isOpen();
+    }
+
+    private ensureSqlite3(): void {
+        if (!this.sqlite3) {
+            throw new Error(
+                "SQLite WASM module not initialized. Call initialize() first with the sqlite3 module."
+            );
+        }
+    }
+
+    private ensureDb(): void {
+        this.ensureSqlite3();
+        if (!this.db) {
+            throw new Error("Database not opened. Call loadFromMemory(), loadFromBuffer(), or loadFromOpfs() first.");
+        }
+    }
+}

apps/client-standalone/src/lightweight/translation_provider.ts

@@ -0,0 +1,16 @@
+import { LOCALE_IDS } from "@triliumnext/commons";
+import type i18next from "i18next";
+import I18NextHttpBackend from "i18next-http-backend";
+
+export default async function translationProvider(i18nextInstance: typeof i18next, locale: LOCALE_IDS) {
+    await i18nextInstance.use(I18NextHttpBackend).init({
+        lng: locale,
+        fallbackLng: "en",
+        ns: "server",
+        backend: {
+            loadPath: `${import.meta.resolve("../server-assets/translations")}/{{lng}}/{{ns}}.json`
+        },
+        returnEmptyString: false,
+        debug: true
+    });
+}

apps/client-standalone/src/local-bridge.ts

@@ -0,0 +1,110 @@
+import LocalServerWorker from "./local-server-worker?worker";
+let localWorker: Worker | null = null;
+const pending = new Map();
+
+function showFatalErrorDialog(message: string) {
+    alert(message);
+}
+
+export function startLocalServerWorker() {
+    if (localWorker) return localWorker;
+    localWorker = new LocalServerWorker();
+    localWorker.postMessage({ type: "INIT", queryString: location.search });
+
+    // Handle worker errors during initialization
+    localWorker.onerror = (event) => {
+        console.error("[LocalBridge] Worker error:", event);
+        // Reject all pending requests
+        for (const [, resolver] of pending) {
+            resolver.reject(new Error(`Worker error: ${event.message}`));
+        }
+        pending.clear();
+    };
+
+    localWorker.onmessage = (event) => {
+        const msg = event.data;
+
+        // Handle fatal platform crashes (shown as a dialog to the user)
+        if (msg?.type === "FATAL_ERROR") {
+            console.error("[LocalBridge] Fatal error:", msg.message);
+            showFatalErrorDialog(msg.message);
+            return;
+        }
+
+        // Handle worker error reports
+        if (msg?.type === "WORKER_ERROR") {
+            console.error("[LocalBridge] Worker reported error:", msg.error);
+            // Reject all pending requests with the error
+            for (const [, resolver] of pending) {
+                resolver.reject(new Error(msg.error?.message || "Unknown worker error"));
+            }
+            pending.clear();
+            return;
+        }
+
+        // Handle WebSocket-like messages from the worker (for frontend updates)
+        if (msg?.type === "WS_MESSAGE" && msg.message) {
+            // Dispatch a custom event that ws.ts listens to in standalone mode
+            window.dispatchEvent(new CustomEvent("trilium:ws-message", {
+                detail: msg.message
+            }));
+            return;
+        }
+
+        if (!msg || msg.type !== "LOCAL_RESPONSE") return;
+
+        const { id, response, error } = msg;
+        const resolver = pending.get(id);
+        if (!resolver) return;
+        pending.delete(id);
+
+        if (error) resolver.reject(new Error(error));
+        else resolver.resolve(response);
+    };
+
+    return localWorker;
+}
+
+export function attachServiceWorkerBridge() {
+    navigator.serviceWorker.addEventListener("message", async (event) => {
+        const msg = event.data;
+        if (!msg || msg.type !== "LOCAL_FETCH") return;
+
+        const port = event.ports && event.ports[0];
+        if (!port) return;
+
+        try {
+            startLocalServerWorker();
+
+            const id = msg.id;
+            const req = msg.request;
+
+            const response = await new Promise<{ body?: ArrayBuffer }>((resolve, reject) => {
+                pending.set(id, { resolve, reject });
+                // Transfer body to worker for efficiency (if present)
+                localWorker!.postMessage({
+                    type: "LOCAL_REQUEST",
+                    id,
+                    request: req
+                }, req.body ? [req.body] : []);
+            });
+
+            port.postMessage({
+                type: "LOCAL_FETCH_RESPONSE",
+                id,
+                response
+            }, response.body ? [response.body] : []);
+        } catch (e: unknown) {
+            const errorMessage = e instanceof Error ? e.message : String(e);
+            port.postMessage({
+                type: "LOCAL_FETCH_RESPONSE",
+                id: msg.id,
+                response: {
+                    status: 500,
+                    headers: { "content-type": "text/plain; charset=utf-8" },
+                    body: new TextEncoder().encode(errorMessage).buffer
+                }
+            });
+        }
+    });
+}

apps/client-standalone/src/local-server-worker.ts

@@ -0,0 +1,273 @@
+// =============================================================================
+// ERROR HANDLERS FIRST - No static imports above this!
+// ES modules hoist static imports, so they execute BEFORE any code runs.
+// We use dynamic imports below to ensure error handlers are registered first.
+// =============================================================================
+
+self.onerror = (message, source, lineno, colno, error) => {
+    const errorMsg = `[Worker] Uncaught error: ${message}\n  at ${source}:${lineno}:${colno}`;
+    console.error(errorMsg, error);
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(message),
+                source,
+                lineno,
+                colno,
+                stack: error?.stack || new Error().stack
+            }
+        });
+    } catch (e) {
+        console.error("[Worker] Failed to report error:", e);
+    }
+    return false;
+};
+
+self.onunhandledrejection = (event) => {
+    const reason = event.reason;
+    const errorMsg = `[Worker] Unhandled rejection: ${reason?.message || reason}`;
+    console.error(errorMsg, reason);
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(reason?.message || reason),
+                stack: reason?.stack || new Error().stack
+            }
+        });
+    } catch (e) {
+        console.error("[Worker] Failed to report rejection:", e);
+    }
+};
+
+console.log("[Worker] Error handlers installed, loading modules...");
+
+// =============================================================================
+// TYPE-ONLY IMPORTS (erased at runtime, safe as static imports)
+// =============================================================================
+import type { BrowserRouter } from './lightweight/browser_router';
+
+// =============================================================================
+// MODULE STATE (populated by dynamic imports)
+// =============================================================================
+let BrowserSqlProvider: typeof import('./lightweight/sql_provider').default;
+let WorkerMessagingProvider: typeof import('./lightweight/messaging_provider').default;
+let BrowserExecutionContext: typeof import('./lightweight/cls_provider').default;
+let BrowserCryptoProvider: typeof import('./lightweight/crypto_provider').default;
+let FetchRequestProvider: typeof import('./lightweight/request_provider').default;
+let StandalonePlatformProvider: typeof import('./lightweight/platform_provider').default;
+let translationProvider: typeof import('./lightweight/translation_provider').default;
+let createConfiguredRouter: typeof import('./lightweight/browser_routes').createConfiguredRouter;
+
+// Instance state
+let sqlProvider: InstanceType<typeof BrowserSqlProvider> | null = null;
+let messagingProvider: InstanceType<typeof WorkerMessagingProvider> | null = null;
+
+// Core module, router, and initialization state
+let coreModule: typeof import("@triliumnext/core") | null = null;
+let router: BrowserRouter | null = null;
+let initPromise: Promise<void> | null = null;
+let initError: Error | null = null;
+let queryString = "";
+
+/**
+ * Load all required modules using dynamic imports.
+ * This allows errors to be caught by our error handlers.
+ */
+async function loadModules(): Promise<void> {
+    console.log("[Worker] Loading lightweight modules...");
+    const [
+        sqlModule,
+        messagingModule,
+        clsModule,
+        cryptoModule,
+        requestModule,
+        platformModule,
+        translationModule,
+        routesModule
+    ] = await Promise.all([
+        import('./lightweight/sql_provider.js'),
+        import('./lightweight/messaging_provider.js'),
+        import('./lightweight/cls_provider.js'),
+        import('./lightweight/crypto_provider.js'),
+        import('./lightweight/request_provider.js'),
+        import('./lightweight/platform_provider.js'),
+        import('./lightweight/translation_provider.js'),
+        import('./lightweight/browser_routes.js')
+    ]);
+
+    BrowserSqlProvider = sqlModule.default;
+    WorkerMessagingProvider = messagingModule.default;
+    BrowserExecutionContext = clsModule.default;
+    BrowserCryptoProvider = cryptoModule.default;
+    FetchRequestProvider = requestModule.default;
+    StandalonePlatformProvider = platformModule.default;
+    translationProvider = translationModule.default;
+    createConfiguredRouter = routesModule.createConfiguredRouter;
+
+    // Create instances
+    sqlProvider = new BrowserSqlProvider();
+    messagingProvider = new WorkerMessagingProvider();
+
+    console.log("[Worker] Lightweight modules loaded successfully");
+}
+
+/**
+ * Initialize SQLite WASM and load the core module.
+ * This happens once at worker startup.
+ */
+async function initialize(): Promise<void> {
+    if (initPromise) {
+        return initPromise; // Already initializing
+    }
+    if (initError) {
+        throw initError; // Failed before, don't retry
+    }
+
+    initPromise = (async () => {
+        try {
+            // First, load all modules dynamically
+            await loadModules();
+
+            console.log("[Worker] Initializing SQLite WASM...");
+            await sqlProvider!.initWasm();
+
+            // Try to use OPFS for persistent storage
+            if (sqlProvider!.isOpfsAvailable()) {
+                console.log("[Worker] OPFS available, loading persistent database...");
+                sqlProvider!.loadFromOpfs("/trilium.db");
+            } else {
+                // Fall back to in-memory database (non-persistent)
+                console.warn("[Worker] OPFS not available, using in-memory database (data will not persist)");
+                console.warn("[Worker] To enable persistence, ensure COOP/COEP headers are set by the server");
+                sqlProvider!.loadFromMemory();
+            }
+
+            console.log("[Worker] Database loaded");
+
+            console.log("[Worker] Loading @triliumnext/core...");
+            const schemaModule = await import("@triliumnext/core/src/assets/schema.sql?raw");
+            coreModule = await import("@triliumnext/core");
+            await coreModule.initializeCore({
+                executionContext: new BrowserExecutionContext(),
+                crypto: new BrowserCryptoProvider(),
+                messaging: messagingProvider!,
+                request: new FetchRequestProvider(),
+                platform: new StandalonePlatformProvider(queryString),
+                translations: translationProvider,
+                schema: schemaModule.default,
+                dbConfig: {
+                    provider: sqlProvider!,
+                    isReadOnly: false,
+                    onTransactionCommit: () => {
+                        coreModule?.ws.sendTransactionEntityChangesToAllClients();
+                    },
+                    onTransactionRollback: () => {
+                        // No-op for now
+                    }
+                }
+            });
+            coreModule.ws.init();
+
+            console.log("[Worker] Supported routes", Object.keys(coreModule.routes));
+
+            // Create and configure the router
+            router = createConfiguredRouter();
+            console.log("[Worker] Router configured");
+
+            // initializeDb runs initDbConnection inside an execution context,
+            // which resolves dbReady — required before beccaLoaded can settle.
+            coreModule.sql_init.initializeDb();
+
+            if (coreModule.sql_init.isDbInitialized()) {
+                console.log("[Worker] Database already initialized, loading becca...");
+                await coreModule.becca_loader.beccaLoaded;
+            } else {
+                console.log("[Worker] Database not initialized, skipping becca load (will be loaded during DB initialization)");
+            }
+
+            console.log("[Worker] Initialization complete");
+        } catch (error) {
+            initError = error instanceof Error ? error : new Error(String(error));
+            console.error("[Worker] Initialization failed:", initError);
+            throw initError;
+        }
+    })();
+
+    return initPromise;
+}
+
+/**
+ * Ensure the worker is initialized before processing requests.
+ * Returns the router if initialization was successful.
+ */
+async function ensureInitialized() {
+    await initialize();
+    if (!router) {
+        throw new Error("Router not initialized");
+    }
+    return router;
+}
+
+interface LocalRequest {
+    method: string;
+    url: string;
+    body?: unknown;
+    headers?: Record<string, string>;
+}
+
+// Main dispatch
+async function dispatch(request: LocalRequest) {
+    // Ensure initialization is complete and get the router
+    const appRouter = await ensureInitialized();
+
+    // Dispatch to the router
+    return appRouter.dispatch(request.method, request.url, request.body, request.headers);
+}
+
+// Start initialization immediately when the worker loads
+console.log("[Worker] Starting initialization...");
+initialize().catch(err => {
+    console.error("[Worker] Initialization failed:", err);
+    // Post error to main thread
+    self.postMessage({
+        type: "WORKER_ERROR",
+        error: {
+            message: String(err?.message || err),
+            stack: err?.stack
+        }
+    });
+});
+
+self.onmessage = async (event) => {
+    const msg = event.data;
+    if (!msg) return;
+
+    if (msg.type === "INIT") {
+        queryString = msg.queryString || "";
+        return;
+    }
+
+    if (msg.type !== "LOCAL_REQUEST") return;
+
+    const { id, request } = msg;
+
+    try {
+        const response = await dispatch(request);
+
+        // Transfer body back (if any) - use options object for proper typing
+        (self as unknown as Worker).postMessage({
+            type: "LOCAL_RESPONSE",
+            id,
+            response
+        }, { transfer: response.body ? [response.body] : [] });
+    } catch (e) {
+        console.error("[Worker] Dispatch error:", e);
+        (self as unknown as Worker).postMessage({
+            type: "LOCAL_RESPONSE",
+            id,
+            error: String((e as Error)?.message || e)
+        });
+    }
+};

apps/client-standalone/src/main.ts

@@ -0,0 +1,84 @@
+import { attachServiceWorkerBridge, startLocalServerWorker } from "./local-bridge.js";
+
+async function waitForServiceWorkerControl(): Promise<void> {
+    if (!("serviceWorker" in navigator)) {
+        throw new Error("Service Worker not supported in this browser");
+    }
+
+    // If already controlling, we're good
+    if (navigator.serviceWorker.controller) {
+        console.log("[Bootstrap] Service worker already controlling");
+        return;
+    }
+
+    console.log("[Bootstrap] Waiting for service worker to take control...");
+
+    // Register service worker
+    await navigator.serviceWorker.register("./sw.js", { scope: "/" });
+
+    // Wait for it to be ready (installed + activated)
+    await navigator.serviceWorker.ready;
+
+    // Check if we're now controlling
+    if (navigator.serviceWorker.controller) {
+        console.log("[Bootstrap] Service worker now controlling");
+        return;
+    }
+
+    // If not controlling yet, we need to reload the page for SW to take control
+    // This is standard PWA behavior on first install
+    console.log("[Bootstrap] Service worker installed but not controlling yet - reloading page");
+
+    // Wait a tiny bit for SW to fully activate
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Reload to let SW take control
+    window.location.reload();
+
+    // Throw to stop execution (page will reload)
+    throw new Error("Reloading for service worker activation");
+}
+
+async function bootstrap() {
+    /* fixes https://github.com/webpack/webpack/issues/10035 */
+    window.global = globalThis;
+
+    try {
+        // 1) Start local worker ASAP (so /bootstrap is fast)
+        startLocalServerWorker();
+
+        // 2) Bridge SW -> local worker
+        attachServiceWorkerBridge();
+
+        // 3) Wait for service worker to control the page (may reload on first install)
+        await waitForServiceWorkerControl();
+
+        await loadScripts();
+    } catch (err) {
+        // If error is from reload, it will stop here (page reloads)
+        // Otherwise, show error to user
+        if (err instanceof Error && err.message.includes("Reloading")) {
+            // Page is reloading, do nothing
+            return;
+        }
+
+        console.error("[Bootstrap] Fatal error:", err);
+        document.body.innerHTML = `
+            <div style="padding: 40px; max-width: 600px; margin: 0 auto; font-family: system-ui, sans-serif;">
+                <h1 style="color: #d32f2f;">Failed to Initialize</h1>
+                <p>The application failed to start. Please check the browser console for details.</p>
+                <pre style="background: #f5f5f5; padding: 16px; border-radius: 4px; overflow: auto;">${err instanceof Error ? err.message : String(err)}</pre>
+                <button onclick="location.reload()" style="padding: 12px 24px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">
+                    Reload Page
+                </button>
+            </div>
+        `;
+        document.body.style.display = "block";
+    }
+}
+
+async function loadScripts() {
+    await import("../../client/src/index.js");
+}
+
+bootstrap();

apps/client-standalone/src/sw.ts

@@ -0,0 +1,185 @@
+// public/sw.js
+const VERSION = "localserver-v1.4";
+const STATIC_CACHE = `static-${VERSION}`;
+
+// Check if running in dev mode (passed via URL parameter)
+const isDev = true;
+
+if (isDev) {
+    console.log('[Service Worker] Running in DEV mode - caching disabled');
+}
+
+// Adjust these to your routes:
+const LOCAL_FIRST_PREFIXES = [
+    "/bootstrap",
+    "/api/",
+    "/sync/",
+    "/search/"
+];
+
+// Optional: basic precache list (keep small; you can expand later)
+const PRECACHE_URLS = [
+    // "/",
+    // "/index.html",
+    // "/manifest.webmanifest",
+    // "/favicon.ico",
+];
+
+self.addEventListener("install", (event) => {
+    event.waitUntil((async () => {
+        // Skip precaching in dev mode
+        if (!isDev) {
+            const cache = await caches.open(STATIC_CACHE);
+            await cache.addAll(PRECACHE_URLS);
+        }
+        self.skipWaiting();
+    })());
+});
+
+self.addEventListener("activate", (event) => {
+    event.waitUntil((async () => {
+    // Cleanup old caches
+        const keys = await caches.keys();
+        await Promise.all(keys.map((k) => (k === STATIC_CACHE ? Promise.resolve() : caches.delete(k))));
+        await self.clients.claim();
+    })());
+});
+
+function isLocalFirst(url) {
+    return LOCAL_FIRST_PREFIXES.some((p) => url.pathname.startsWith(p));
+}
+
+async function cacheFirst(request) {
+    // In dev mode, always bypass cache
+    if (isDev) {
+        return fetch(request);
+    }
+
+    const cache = await caches.open(STATIC_CACHE);
+    const cached = await cache.match(request);
+    if (cached) return cached;
+
+    const fresh = await fetch(request);
+    // Cache only successful GETs
+    if (request.method === "GET" && fresh.ok) cache.put(request, fresh.clone());
+    return fresh;
+}
+
+async function networkFirst(request) {
+    // In dev mode, always bypass cache
+    if (isDev) {
+        return fetch(request);
+    }
+
+    const cache = await caches.open(STATIC_CACHE);
+    try {
+        const fresh = await fetch(request);
+        // Cache only successful GETs
+        if (request.method === "GET" && fresh.ok) cache.put(request, fresh.clone());
+        return fresh;
+    } catch (error) {
+        // Fallback to cache if network fails
+        const cached = await cache.match(request);
+        if (cached) return cached;
+        throw error;
+    }
+}
+
+async function forwardToClientLocalServer(request, clientId) {
+    // Find a client to handle the request (prefer the initiating client if available)
+    let client = clientId ? await self.clients.get(clientId) : null;
+
+    if (!client) {
+        const all = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+        client = all[0] || null;
+    }
+
+    // If no page is available, fall back to network
+    if (!client) return fetch(request);
+
+    const reqUrl = request.url;
+    const headersObj = {};
+    for (const [k, v] of request.headers.entries()) headersObj[k] = v;
+
+    const body = (request.method === "GET" || request.method === "HEAD")
+        ? null
+        : await request.arrayBuffer();
+
+    const id = crypto.randomUUID();
+    const channel = new MessageChannel();
+
+    const responsePromise = new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            reject(new Error("Local server timeout"));
+        }, 30_000);
+
+        channel.port1.onmessage = (event) => {
+            clearTimeout(timeout);
+            resolve(event.data);
+        };
+        channel.port1.onmessageerror = () => {
+            clearTimeout(timeout);
+            reject(new Error("Local server message error"));
+        };
+    });
+
+    // Send to the client with a reply port
+    client.postMessage({
+        type: "LOCAL_FETCH",
+        id,
+        request: {
+            url: reqUrl,
+            method: request.method,
+            headers: headersObj,
+            body // ArrayBuffer or null
+        }
+    }, [channel.port2]);
+
+    const localResp = await responsePromise;
+
+    if (!localResp || localResp.type !== "LOCAL_FETCH_RESPONSE" || localResp.id !== id) {
+    // Protocol mismatch; fall back
+        return fetch(request);
+    }
+
+    // localResp.response: { status, headers, body }
+    const { status, headers, body: respBody } = localResp.response;
+
+    const respHeaders = new Headers();
+    if (headers) {
+        for (const [k, v] of Object.entries(headers)) respHeaders.set(k, String(v));
+    }
+
+    return new Response(respBody ? respBody : null, {
+        status: status || 200,
+        headers: respHeaders
+    });
+}
+
+self.addEventListener("fetch", (event) => {
+    const url = new URL(event.request.url);
+
+    // Only handle same-origin
+    if (url.origin !== self.location.origin) return;
+
+    // HTML files: network-first to ensure updates are reflected immediately
+    if (event.request.mode === "navigate" || url.pathname.endsWith(".html")) {
+        event.respondWith(networkFirst(event.request));
+        return;
+    }
+
+    // Static assets: cache-first for performance
+    if (event.request.method === "GET" && !isLocalFirst(url)) {
+        event.respondWith(cacheFirst(event.request));
+        return;
+    }
+
+    // API-ish: local-first via bridge
+    if (isLocalFirst(url)) {
+        event.respondWith(forwardToClientLocalServer(event.request, event.clientId));
+        return;
+    }
+
+    // Default
+    event.respondWith(fetch(event.request));
+});

apps/client-standalone/src/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+interface Window {
+  glob: {
+    assetPath: string;
+    themeCssUrl?: string;
+    themeUseNextAsBase?: string;
+    iconPackCss: string;
+    device: string;
+    headingStyle: string;
+    layoutOrientation: string;
+    platform: string;
+    isElectron: boolean;
+    hasNativeTitleBar: boolean;
+    hasBackgroundEffects: boolean;
+    currentLocale: {
+      id: string;
+      rtl: boolean;
+    };
+    activeDialog: any;
+  };
+  global: typeof globalThis;
+}

apps/client-standalone/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "vite/client"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": [
+    "src/**/*",
+    "../client/src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "../client/src/**/*.spec.ts",
+    "../client/src/**/*.test.ts"
+  ]
+}

apps/client-standalone/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.spec.json" }
+  ]
+}

apps/client-standalone/tsconfig.spec.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "types": [
+      "vitest/globals",
+      "happy-dom"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ]
+}

apps/client-standalone/vite.config.mts

@@ -0,0 +1,188 @@
+import prefresh from '@prefresh/vite';
+import { join } from 'path';
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const clientAssets = ["assets", "stylesheets", "fonts", "translations"];
+
+const isDev = process.env.NODE_ENV === "development";
+
+// Watch client files and trigger reload in development
+const clientWatchPlugin = () => ({
+    name: 'client-watch',
+    configureServer(server: any) {
+        if (isDev) {
+            // Watch client source files (adjusted for new root)
+            server.watcher.add('../../client/src/**/*');
+            server.watcher.on('change', (file: string) => {
+                if (file.includes('../../client/src/')) {
+                    server.ws.send({
+                        type: 'full-reload'
+                    });
+                }
+            });
+        }
+    }
+});
+
+// Always copy SQLite WASM files so they're available to the module
+const sqliteWasmPlugin = viteStaticCopy({
+    targets: [
+        {
+            src: "../../../node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm",
+            dest: "assets"
+        },
+        {
+            src: "../../../node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3-opfs-async-proxy.js",
+            dest: "assets"
+        }
+    ]
+});
+
+let plugins: any = [
+    sqliteWasmPlugin,  // Always include SQLite WASM files
+    viteStaticCopy({
+        targets: clientAssets.map((asset) => ({
+            src: `../../client/src/${asset}/*`,
+            dest: asset
+        })),
+        // Enable watching in development
+        ...(isDev && {
+            watch: {
+                reloadPageOnChange: true
+            }
+        })
+    }),
+    viteStaticCopy({
+        targets: [
+            {
+                src: "../../server/src/assets/*",
+                dest: "server-assets"
+            }
+        ]
+    }),
+    // Watch client files for changes in development
+    ...(isDev ? [
+        prefresh(),
+        clientWatchPlugin()
+    ] : [])
+];
+
+if (!isDev) {
+    plugins = [
+        ...plugins,
+        viteStaticCopy({
+            structured: true,
+            targets: [
+                {
+                    src: "../../../node_modules/@excalidraw/excalidraw/dist/prod/fonts/*",
+                    dest: "",
+                }
+            ]
+        })
+    ]
+}
+
+export default defineConfig(() => ({
+    root: join(__dirname, 'src'),  // Set src as root so index.html is served from /
+    envDir: __dirname,  // Load .env files from client-standalone directory, not src/
+    cacheDir: '../../../node_modules/.vite/apps/client-standalone',
+    base: "",
+    plugins,
+    esbuild: {
+        jsx: 'automatic',
+        jsxImportSource: 'preact',
+        jsxDev: isDev
+    },
+    css: {
+        transformer: 'lightningcss',
+        devSourcemap: isDev
+    },
+    publicDir: join(__dirname, 'public'),
+    resolve: {
+        alias: [
+            {
+                find: "react",
+                replacement: "preact/compat"
+            },
+            {
+                find: "react-dom",
+                replacement: "preact/compat"
+            },
+            {
+                find: "@client",
+                replacement: join(__dirname, "../client/src")
+            }
+        ],
+        dedupe: [
+            "react",
+            "react-dom",
+            "preact",
+            "preact/compat",
+            "preact/hooks"
+        ]
+    },
+    server: {
+        watch: {
+            // Watch workspace packages
+            ignored: ['!**/node_modules/@triliumnext/**'],
+            // Also watch client assets for live reload
+            usePolling: false,
+            interval: 100,
+            binaryInterval: 300
+        },
+        // Watch additional directories for changes
+        fs: {
+            allow: [
+                // Allow access to workspace root
+                '../../../',
+                // Explicitly allow client directory
+                '../../client/src/'
+            ]
+        },
+        headers: {
+            // Required for SharedArrayBuffer which is needed by SQLite WASM OPFS VFS
+            // See: https://sqlite.org/wasm/doc/trunk/persistence.md#coop-coep
+            "Cross-Origin-Opener-Policy": "same-origin",
+            "Cross-Origin-Embedder-Policy": "require-corp"
+        }
+    },
+    optimizeDeps: {
+        exclude: ['@sqlite.org/sqlite-wasm', '@triliumnext/core']
+    },
+    worker: {
+        format: "es" as const
+    },
+    commonjsOptions: {
+        transformMixedEsModules: true,
+    },
+    build: {
+        target: "esnext",
+        outDir: join(__dirname, 'dist'),
+        emptyOutDir: true,
+        rollupOptions: {
+            input: {
+                main: join(__dirname, 'src', 'index.html'),
+                sw: join(__dirname, 'src', 'sw.ts'),
+                'local-bridge': join(__dirname, 'src', 'local-bridge.ts'),
+            },
+            output: {
+                entryFileNames: (chunkInfo) => {
+                    // Service worker and other workers should be at root level
+                    if (chunkInfo.name === 'sw') {
+                        return '[name].js';
+                    }
+                    return 'src/[name].js';
+                },
+                chunkFileNames: "src/[name].js",
+                assetFileNames: "src/[name].[ext]"
+            }
+        }
+    },
+    test: {
+        environment: "happy-dom"
+    },
+    define: {
+        "process.env.IS_PREACT": JSON.stringify("true"),
+    }
+}));

apps/client/package.json

@@ -28,7 +28,7 @@
     "@mermaid-js/layout-elk": "0.2.1",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.9.0",
+    "@preact/signals": "2.8.2",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
@@ -43,14 +43,13 @@
     "@univerjs/preset-sheets-note": "0.18.0",
     "@univerjs/preset-sheets-sort": "0.18.0",
     "@univerjs/presets": "0.18.0",
-    "@zumer/snapdom": "2.7.0",
+    "@zumer/snapdom": "2.6.0",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
     "clsx": "2.1.1",
     "color": "5.0.3",
     "debounce": "3.0.0",
-    "dompurify": "3.3.3",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.2",
     "globals": "17.4.0",
@@ -59,7 +58,7 @@
     "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.44",
+    "katex": "0.16.43",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
@@ -69,7 +68,7 @@
     "normalize.css": "8.0.1",
     "panzoom": "9.4.4",
     "preact": "10.29.0",
-    "react-i18next": "17.0.1",
+    "react-i18next": "16.6.6",
     "react-window": "2.2.7",
     "reveal.js": "6.0.0",
     "rrule": "2.8.1",
@@ -87,9 +86,9 @@
     "@types/mark.js": "8.11.12",
     "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "14.0.0",
-    "happy-dom": "20.8.9",
+    "happy-dom": "20.8.8",
     "lightningcss": "1.32.0",
     "script-loader": "0.7.2",
     "vite-plugin-static-copy": "3.4.0"
   }
-}
+}

apps/client/src/assets/icon-color.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 256 256" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+	<title>Trilium Notes</title>
+	<style type="text/css">
+		.st0{fill:#95C980;}
+		.st1{fill:#72B755;}
+		.st2{fill:#4FA52B;}
+		.st3{fill:#EE8C89;}
+		.st4{fill:#E96562;}
+		.st5{fill:#E33F3B;}
+		.st6{fill:#EFB075;}
+		.st7{fill:#E99547;}
+		.st8{fill:#E47B19;}
+	</style>
+	<g>
+		<path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
+		<path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
+		<path class="st2" d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z"/>
+	
+		<path class="st3" d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z"/>
+		<path class="st4" d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z"/>
+		<path class="st5" d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z"/>
+
+		<path class="st6" d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z"/>
+		<path class="st7" d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z"/>
+		<path class="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
+	</g>
+</svg>

apps/client/src/components/app_context.ts

@@ -508,7 +508,7 @@ type EventMappings = {
     contentSafeMarginChanged: {
         top: number;
         noteContext: NoteContext;
-    };
+    }
 };
 
 export type EventListener<T extends EventNames> = {

apps/client/src/entities/fnote.ts

@@ -18,7 +18,7 @@ const RELATION = "relation";
  * end user. Those types should be used only for checking against, they are
  * not for direct use.
  */
-export type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap" | "spreadsheet" | "llmChat";
+export type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap" | "spreadsheet";
 
 export interface NotePathRecord {
     isArchived: boolean;

apps/client/src/index.ts

@@ -36,10 +36,37 @@ async function setupGlob() {
     window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
     window.glob = {
         ...json,
-        activeDialog: null
+        activeDialog: null,
+        device: json.device || getDevice()
     };
 }
 
+function getDevice() {
+    // Respect user's manual override via URL.
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has("print")) {
+        return "print";
+    } else if (urlParams.has("desktop")) {
+        return "desktop";
+    } else if (urlParams.has("mobile")) {
+        return "mobile";
+    }
+
+    const deviceCookie = document.cookie.split("; ").find(row => row.startsWith("trilium-device="))?.split("=")[1];
+    if (deviceCookie === "desktop" || deviceCookie === "mobile") return deviceCookie;
+    return isMobile() ? "mobile" : "desktop";
+}
+
+// https://stackoverflow.com/a/73731646/944162
+function isMobile() {
+    const mQ = matchMedia?.("(pointer:coarse)");
+    if (mQ?.media === "(pointer:coarse)") return !!mQ.matches;
+
+    if ("orientation" in window) return true;
+    const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i;
+    return userAgentsRegEx.test(navigator.userAgent);
+}
+
 async function loadBootstrapCss() {
     // We have to selectively import Bootstrap CSS based on text direction.
     if (glob.isRtl) {
@@ -85,6 +112,8 @@ function loadIcons() {
 }
 
 function setBodyAttributes() {
+    if (!glob.dbInitialized) return;
+
     const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
     const classesToSet = [
         device,
@@ -105,6 +134,11 @@ function setBodyAttributes() {
 }
 
 async function loadScripts() {
+    if (!glob.dbInitialized) {
+        await import("./setup.js");
+        return;
+    }
+
     switch (glob.device) {
         case "mobile":
             await import("./mobile.js");

apps/client/src/layouts/desktop_layout.tsx

@@ -30,6 +30,7 @@ import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
 import InlineTitle from "../widgets/layout/InlineTitle.jsx";
 import NoteBadges from "../widgets/layout/NoteBadges.jsx";
 import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import StandaloneWarningBar from "../widgets/layout/StandaloneWarningBar.jsx";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
 import NoteIconWidget from "../widgets/note_icon.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
@@ -186,6 +187,7 @@ export default class DesktopLayout {
                     )
             )
             .optChild(launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
+            .optChild(glob.isStandalone, <StandaloneWarningBar />)
             .child(<CloseZenModeButton />)
 
             // Desktop-specific dialogs.

apps/client/src/layouts/mobile_layout.tsx

@@ -13,6 +13,7 @@ import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
 import InlineTitle from "../widgets/layout/InlineTitle.jsx";
 import NoteBadges from "../widgets/layout/NoteBadges.jsx";
 import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import StandaloneWarningBar from "../widgets/layout/StandaloneWarningBar";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
@@ -55,6 +56,7 @@ export default class MobileLayout {
                             .child(
                                 new SplitNoteContainer(() =>
                                     new NoteWrapperWidget()
+                                        .optChild(glob.isStandalone, <StandaloneWarningBar />)
                                         .child(
                                             new FlexContainer("row")
                                                 .class("title-row note-split-title")

apps/client/src/services/date_notes.ts

@@ -84,55 +84,6 @@ async function createSearchNote(opts = {}) {
     return await froca.getNote(note.noteId);
 }
 
-async function createLlmChat() {
-    const note = await server.post<FNoteRow>("special-notes/llm-chat");
-
-    await ws.waitForMaxKnownEntityChangeId();
-
-    return await froca.getNote(note.noteId);
-}
-
-/**
- * Gets the most recently modified LLM chat.
- * Returns null if no chat exists.
- */
-async function getMostRecentLlmChat() {
-    const note = await server.get<FNoteRow | null>("special-notes/most-recent-llm-chat");
-
-    if (!note) {
-        return null;
-    }
-
-    await ws.waitForMaxKnownEntityChangeId();
-
-    return await froca.getNote(note.noteId);
-}
-
-/**
- * Gets the most recent LLM chat, or creates a new one if none exists.
- * Used by sidebar chat for persistent conversations across page refreshes.
- */
-async function getOrCreateLlmChat() {
-    const note = await server.get<FNoteRow>("special-notes/get-or-create-llm-chat");
-
-    await ws.waitForMaxKnownEntityChangeId();
-
-    return await froca.getNote(note.noteId);
-}
-
-export interface RecentLlmChat {
-    noteId: string;
-    title: string;
-    dateModified: string;
-}
-
-/**
- * Gets a list of recent LLM chats for the history popup.
- */
-async function getRecentLlmChats(limit: number = 10): Promise<RecentLlmChat[]> {
-    return await server.get<RecentLlmChat[]>(`special-notes/recent-llm-chats?limit=${limit}`);
-}
-
 export default {
     getInboxNote,
     getTodayNote,
@@ -143,9 +94,5 @@ export default {
     getMonthNote,
     getYearNote,
     createSqlConsole,
-    createSearchNote,
-    createLlmChat,
-    getMostRecentLlmChat,
-    getOrCreateLlmChat,
-    getRecentLlmChats
+    createSearchNote
 };

apps/client/src/services/doc_renderer.ts

@@ -5,7 +5,7 @@ import { formatCodeBlocks } from "./syntax_highlight.js";
 
 export default function renderDoc(note: FNote) {
     return new Promise<JQuery<HTMLElement>>((resolve) => {
-        let docName = note.getLabelValue("docName");
+        const docName = note.getLabelValue("docName");
         const $content = $("<div>");
 
         if (docName) {
@@ -16,7 +16,7 @@ export default function renderDoc(note: FNote) {
                 if (status === "error") {
                     const fallbackUrl = getUrl(docName, "en");
                     $content.load(fallbackUrl, async () => {
-                        await processContent(fallbackUrl, $content)
+                        await processContent(fallbackUrl, $content);
                         resolve($content);
                     });
                     return;
@@ -37,9 +37,9 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
     const dir = url.substring(0, url.lastIndexOf("/"));
 
     // Images are relative to the docnote but that will not work when rendered in the application since the path breaks.
-    $content.find("img").each((i, el) => {
+    $content.find("img").each((_i, el) => {
         const $img = $(el);
-        $img.attr("src", dir + "/" + $img.attr("src"));
+        $img.attr("src", `${dir}/${$img.attr("src")}`);
     });
 
     formatCodeBlocks($content);
@@ -51,7 +51,17 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
 function getUrl(docNameValue: string, language: string) {
     // Cannot have spaces in the URL due to how JQuery.load works.
     docNameValue = docNameValue.replaceAll(" ", "%20");
-
-    const basePath = window.glob.isDev ? window.glob.assetPath + "/.." : window.glob.assetPath;
-    return `${basePath}/doc_notes/${language}/${docNameValue}.html`;
+    // The user guide is available only in English, so make sure we are requesting correctly since 404s in standalone client are treated differently.
+    if (docNameValue.includes("User%20Guide")) language = "en";
+    return `${getBasePath()}/doc_notes/${language}/${docNameValue}.html`;
+}
+
+function getBasePath() {
+    if (window.glob.isStandalone) {
+        return `server-assets`;
+    }
+    if (window.glob.isDev) {
+        return `${window.glob.assetPath  }/..`;
+    }
+    return window.glob.assetPath;
 }

apps/client/src/services/experimental_features.ts

@@ -13,11 +13,6 @@ export const experimentalFeatures = [
         id: "new-layout",
         name: t("experimental_features.new_layout_name"),
         description: t("experimental_features.new_layout_description"),
-    },
-    {
-        id: "llm",
-        name: t("experimental_features.llm_name"),
-        description: t("experimental_features.llm_description"),
     }
 ] as const satisfies ExperimentalFeature[];
 

apps/client/src/services/froca.ts

@@ -1,11 +1,11 @@
+import appContext from "../components/app_context.js";
+import FAttachment, { type FAttachmentRow } from "../entities/fattachment.js";
+import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
+import FBlob, { type FBlobRow } from "../entities/fblob.js";
 import FBranch, { type FBranchRow } from "../entities/fbranch.js";
 import FNote, { type FNoteRow } from "../entities/fnote.js";
-import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
-import server from "./server.js";
-import appContext from "../components/app_context.js";
-import FBlob, { type FBlobRow } from "../entities/fblob.js";
-import FAttachment, { type FAttachmentRow } from "../entities/fattachment.js";
 import type { Froca } from "./froca-interface.js";
+import server from "./server.js";
 
 interface SubtreeResponse {
     notes: FNoteRow[];
@@ -44,8 +44,9 @@ class FrocaImpl implements Froca {
     }
 
     async loadInitialTree() {
-        const resp = await server.get<SubtreeResponse>("tree");
+        if (!glob.dbInitialized) return;
 
+        const resp = await server.get<SubtreeResponse>("tree");
         // clear the cache only directly before adding new content which is important for e.g., switching to protected session
         this.#clear();
         this.addResp(resp);
@@ -77,7 +78,7 @@ class FrocaImpl implements Froca {
         for (const noteRow of noteRows) {
             const { noteId } = noteRow;
 
-            let note = this.notes[noteId];
+            const note = this.notes[noteId];
 
             if (note) {
                 note.update(noteRow);
@@ -240,9 +241,8 @@ class FrocaImpl implements Froca {
                     console.trace(`Can't find note '${noteId}'`);
 
                     return null;
-                } else {
-                    return this.notes[noteId];
                 }
+                return this.notes[noteId];
             })
             .filter((note) => !!note) as FNote[];
     }
@@ -263,9 +263,8 @@ class FrocaImpl implements Froca {
                     console.trace(`Can't find note '${noteId}'`);
 
                     return null;
-                } else {
-                    return this.notes[noteId];
                 }
+                return this.notes[noteId];
             })
             .filter((note) => !!note) as FNote[];
     }
@@ -338,11 +337,10 @@ class FrocaImpl implements Froca {
             attachmentRows = await server.getWithSilentNotFound<FAttachmentRow[]>(`attachments/${attachmentId}/all`);
         } catch (e: any) {
             if (silentNotFoundError) {
-                logInfo(`Attachment '${attachmentId}' not found, but silentNotFoundError is enabled: ` + e.message);
+                logInfo(`Attachment '${attachmentId}' not found, but silentNotFoundError is enabled: ${e.message}`);
                 return null;
-            } else {
-                throw e;
             }
+            throw e;
         }
 
         const attachments = this.processAttachmentRows(attachmentRows);

apps/client/src/services/frontend_script_api.ts

@@ -206,7 +206,7 @@ export interface Api {
      * Instance name identifies particular Trilium instance. It can be useful for scripts
      * if some action needs to happen on only one specific instance.
      */
-    getInstanceName(): string;
+    getInstanceName(): string | null;
 
     /**
      * @returns date in YYYY-MM-DD format

apps/client/src/services/i18n.ts

@@ -1,16 +1,17 @@
-import options from "./options.js";
+import { type Locale, LOCALE_IDS, setDayjsLocale } from "@triliumnext/commons";
 import i18next from "i18next";
 import i18nextHttpBackend from "i18next-http-backend";
-import server from "./server.js";
-import { LOCALE_IDS, setDayjsLocale, type Locale } from "@triliumnext/commons";
 import { initReactI18next } from "react-i18next";
 
+import options from "./options.js";
+import server from "./server.js";
+
 let locales: Locale[] | null;
 
 /**
  * A deferred promise that resolves when translations are initialized.
  */
-export let translationsInitializedPromise = $.Deferred();
+export const translationsInitializedPromise = $.Deferred();
 
 export async function initLocale() {
     const locale = ((options.get("locale") as string) || "en") as LOCALE_IDS;
@@ -34,7 +35,7 @@ export async function initLocale() {
 
 export function getAvailableLocales() {
     if (!locales) {
-        throw new Error("Tried to load list of locales, but localization is not yet initialized.")
+        throw new Error("Tried to load list of locales, but localization is not yet initialized.");
     }
 
     return locales;

apps/client/src/services/in_app_help.ts

@@ -19,8 +19,7 @@ export const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
     search: null,
     text: null,
     webView: null,
-    spreadsheet: null,
-    llmChat: null
+    spreadsheet: null
 };
 
 export const byBookType: Record<ViewTypeOptions, string | null> = {

apps/client/src/services/llm_chat.ts

@@ -1,110 +0,0 @@
-import type { LlmChatConfig, LlmCitation, LlmMessage, LlmModelInfo,LlmUsage } from "@triliumnext/commons";
-
-import server from "./server.js";
-
-/**
- * Fetch available models for a provider.
- */
-export async function getAvailableModels(provider: string = "anthropic"): Promise<LlmModelInfo[]> {
-    const response = await server.get<{ models?: LlmModelInfo[] }>(`llm-chat/models?provider=${encodeURIComponent(provider)}`);
-    return response.models ?? [];
-}
-
-export interface StreamCallbacks {
-    onChunk: (text: string) => void;
-    onThinking?: (text: string) => void;
-    onToolUse?: (toolName: string, input: Record<string, unknown>) => void;
-    onToolResult?: (toolName: string, result: string, isError?: boolean) => void;
-    onCitation?: (citation: LlmCitation) => void;
-    onUsage?: (usage: LlmUsage) => void;
-    onError: (error: string) => void;
-    onDone: () => void;
-}
-
-/**
- * Stream a chat completion from the LLM API using Server-Sent Events.
- */
-export async function streamChatCompletion(
-    messages: LlmMessage[],
-    config: LlmChatConfig,
-    callbacks: StreamCallbacks
-): Promise<void> {
-    const headers = await server.getHeaders();
-
-    const response = await fetch(`${window.glob.baseApiUrl}llm-chat/stream`, {
-        method: "POST",
-        headers: {
-            ...headers,
-            "Content-Type": "application/json"
-        } as HeadersInit,
-        body: JSON.stringify({ messages, config })
-    });
-
-    if (!response.ok) {
-        callbacks.onError(`HTTP ${response.status}: ${response.statusText}`);
-        return;
-    }
-
-    const reader = response.body?.getReader();
-    if (!reader) {
-        callbacks.onError("No response body");
-        return;
-    }
-
-    const decoder = new TextDecoder();
-    let buffer = "";
-
-    try {
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split("\n");
-            buffer = lines.pop() || "";
-
-            for (const line of lines) {
-                if (line.startsWith("data: ")) {
-                    try {
-                        const data = JSON.parse(line.slice(6));
-
-                        switch (data.type) {
-                            case "text":
-                                callbacks.onChunk(data.content);
-                                break;
-                            case "thinking":
-                                callbacks.onThinking?.(data.content);
-                                break;
-                            case "tool_use":
-                                callbacks.onToolUse?.(data.toolName, data.toolInput);
-                                break;
-                            case "tool_result":
-                                callbacks.onToolResult?.(data.toolName, data.result, data.isError);
-                                break;
-                            case "citation":
-                                if (data.citation) {
-                                    callbacks.onCitation?.(data.citation);
-                                }
-                                break;
-                            case "usage":
-                                if (data.usage) {
-                                    callbacks.onUsage?.(data.usage);
-                                }
-                                break;
-                            case "error":
-                                callbacks.onError(data.error);
-                                break;
-                            case "done":
-                                callbacks.onDone();
-                                break;
-                        }
-                    } catch (e) {
-                        console.error("Failed to parse SSE data line:", line, e);
-                    }
-                }
-            }
-        }
-    } finally {
-        reader.releaseLock();
-    }
-}

apps/client/src/services/note_types.ts

@@ -1,7 +1,6 @@
 import type { NoteType } from "../entities/fnote.js";
 import type { MenuCommandItem, MenuItem, MenuItemBadge, MenuSeparatorItem } from "../menus/context_menu.js";
 import type { TreeCommandNames } from "../menus/tree_context_menu.js";
-import { isExperimentalFeatureEnabled } from "./experimental_features.js";
 import froca from "./froca.js";
 import { t } from "./i18n.js";
 import server from "./server.js";
@@ -42,7 +41,6 @@ export const NOTE_TYPES: NoteTypeMapping[] = [
     { type: "relationMap", mime: "application/json", title: t("note_types.relation-map"), icon: "bxs-network-chart" },
 
     // Misc note types
-    { type: "llmChat", mime: "application/json", title: t("note_types.llm-chat"), icon: "bx-message-square-dots", isBeta: true },
     { type: "render", mime: "", title: t("note_types.render-note"), icon: "bx-extension" },
     { type: "search", title: t("note_types.saved-search"), icon: "bx-file-find", static: true },
     { type: "webView", mime: "", title: t("note_types.web-view"), icon: "bx-globe-alt" },
@@ -94,7 +92,6 @@ async function getNoteTypeItems(command?: TreeCommandNames) {
 function getBlankNoteTypes(command?: TreeCommandNames): MenuItem<TreeCommandNames>[] {
     return NOTE_TYPES
         .filter((nt) => !nt.reserved && nt.type !== "book")
-        .filter((nt) => nt.type !== "llmChat" || isExperimentalFeatureEnabled("llm"))
         .map((nt) => {
             const menuItem: MenuCommandItem<TreeCommandNames> = {
                 title: nt.title,

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,14 +1,4 @@
-export type LabelType = "text" | "textarea" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
-type Multiplicity = "single" | "multi";
-
-export interface DefinitionObject {
-    isPromoted?: boolean;
-    labelType?: LabelType;
-    multiplicity?: Multiplicity;
-    numberPrecision?: number;
-    promotedAlias?: string;
-    inverseRelation?: string;
-}
+import { DefinitionObject, LabelType, Multiplicity } from "@triliumnext/commons";
 
 function parse(value: string) {
     const tokens = value.split(",").map((t) => t.trim());

apps/client/src/services/utils.ts

@@ -135,6 +135,8 @@ export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
+export const isStandalone = window.glob.isStandalone;
+
 /**
  * Returns `true` if the client is running as a PWA, otherwise `false`.
  */
@@ -816,7 +818,7 @@ function compareVersions(v1: string, v2: string): number {
 /**
  * Compares two semantic version strings and returns `true` if the latest version is greater than the current version.
  */
-function isUpdateAvailable(latestVersion: string | null | undefined, currentVersion: string): boolean {
+export function isUpdateAvailable(latestVersion: string | null | undefined, currentVersion: string): boolean {
     if (!latestVersion) {
         return false;
     }
@@ -903,6 +905,10 @@ export function getErrorMessage(e: unknown) {
 
 }
 
+export function replaceHtmlEscapedSlashes(str: string) {
+    return str.replace(///g, "/");
+}
+
 /**
  * Handles left or right placement of e.g. tooltips in case of right-to-left languages. If the current language is a RTL one, then left and right are swapped. Other directions are unaffected.
  * @param placement a string optionally containing a "left" or "right" value.
@@ -922,7 +928,6 @@ export default {
     parseDate,
     formatDateISO,
     formatDateTime,
-    formatTime,
     formatTimeInterval,
     formatSize,
     localNowDateTime,

apps/client/src/services/ws.ts

@@ -1,21 +1,21 @@
-import utils from "./utils.js";
-import toastService from "./toast.js";
-import server from "./server.js";
-import options from "./options.js";
-import frocaUpdater from "./froca_updater.js";
-import appContext from "../components/app_context.js";
-import { t } from "./i18n.js";
-import type { EntityChange } from "../server_types.js";
 import { WebSocketMessage } from "@triliumnext/commons";
-import toast from "./toast.js";
+
+import appContext from "../components/app_context.js";
+import type { EntityChange } from "../server_types.js";
+import frocaUpdater from "./froca_updater.js";
+import { t } from "./i18n.js";
+import options from "./options.js";
+import server from "./server.js";
+import toastService from "./toast.js";
+import utils from "./utils.js";
 
 type MessageHandler = (message: WebSocketMessage) => void;
 let messageHandlers: MessageHandler[] = [];
 
 let ws: WebSocket;
-let lastAcceptedEntityChangeId = window.glob.maxEntityChangeIdAtLoad;
-let lastAcceptedEntityChangeSyncId = window.glob.maxEntityChangeSyncIdAtLoad;
-let lastProcessedEntityChangeId = window.glob.maxEntityChangeIdAtLoad;
+let lastAcceptedEntityChangeId = window.glob.maxEntityChangeIdAtLoad ?? 0;
+let lastAcceptedEntityChangeSyncId = window.glob.maxEntityChangeSyncIdAtLoad ?? 0;
+let lastProcessedEntityChangeId = window.glob.maxEntityChangeIdAtLoad ?? 0;
 let lastPingTs: number;
 let frontendUpdateDataQueue: EntityChange[] = [];
 
@@ -57,6 +57,49 @@ export function unsubscribeToMessage(messageHandler: MessageHandler) {
     messageHandlers = messageHandlers.filter(handler => handler !== messageHandler);
 }
 
+/**
+ * Dispatch a message to all handlers and process it.
+ * This is the main entry point for incoming messages from any provider
+ * (WebSocket, Worker, etc.)
+ */
+export async function dispatchMessage(message: WebSocketMessage) {
+    // Notify all subscribers
+    for (const messageHandler of messageHandlers) {
+        messageHandler(message);
+    }
+
+    // Use string type for flexibility - server sends more message types than are typed
+    const messageType = message.type as string;
+    const msg = message as any;
+
+    // Process the message
+    if (messageType === "ping") {
+        lastPingTs = Date.now();
+    } else if (messageType === "reload-frontend") {
+        utils.reloadFrontendApp("received request from backend to reload frontend");
+    } else if (messageType === "frontend-update") {
+        await executeFrontendUpdate(msg.data.entityChanges);
+    } else if (messageType === "sync-hash-check-failed") {
+        toastService.showError(t("ws.sync-check-failed"), 60000);
+    } else if (messageType === "consistency-checks-failed") {
+        toastService.showError(t("ws.consistency-checks-failed"), 50 * 60000);
+    } else if (messageType === "api-log-messages") {
+        appContext.triggerEvent("apiLogMessages", { noteId: msg.noteId, messages: msg.messages });
+    } else if (messageType === "toast") {
+        toastService.showMessage(msg.message);
+    } else if (messageType === "execute-script") {
+        // TODO: Remove after porting the file
+        // @ts-ignore
+        const bundleService = (await import("./bundle.js")).default as any;
+        // TODO: Remove after porting the file
+        // @ts-ignore
+        const froca = (await import("./froca.js")).default as any;
+        const originEntity = msg.originEntityId ? await froca.getNote(msg.originEntityId) : null;
+
+        bundleService.getAndExecuteBundle(msg.currentNoteId, originEntity, msg.script, msg.params);
+    }
+}
+
 // used to serialize frontend update operations
 let consumeQueuePromise: Promise<void> | null = null;
 
@@ -112,38 +155,13 @@ async function executeFrontendUpdate(entityChanges: EntityChange[]) {
     }
 }
 
-async function handleMessage(event: MessageEvent<any>) {
-    const message = JSON.parse(event.data);
-
-    for (const messageHandler of messageHandlers) {
-        messageHandler(message);
-    }
-
-    if (message.type === "ping") {
-        lastPingTs = Date.now();
-    } else if (message.type === "reload-frontend") {
-        utils.reloadFrontendApp("received request from backend to reload frontend");
-    } else if (message.type === "frontend-update") {
-        await executeFrontendUpdate(message.data.entityChanges);
-    } else if (message.type === "sync-hash-check-failed") {
-        toastService.showError(t("ws.sync-check-failed"), 60000);
-    } else if (message.type === "consistency-checks-failed") {
-        toastService.showError(t("ws.consistency-checks-failed"), 50 * 60000);
-    } else if (message.type === "api-log-messages") {
-        appContext.triggerEvent("apiLogMessages", { noteId: message.noteId, messages: message.messages });
-    } else if (message.type === "toast") {
-        toastService.showMessage(message.message);
-    } else if (message.type === "execute-script") {
-        // TODO: Remove after porting the file
-        // @ts-ignore
-        const bundleService = (await import("./bundle.js")).default as any;
-        // TODO: Remove after porting the file
-        // @ts-ignore
-        const froca = (await import("./froca.js")).default as any;
-        const originEntity = message.originEntityId ? await froca.getNote(message.originEntityId) : null;
-
-        bundleService.getAndExecuteBundle(message.currentNoteId, originEntity, message.script, message.params);
-    }
+/**
+ * WebSocket message handler - parses the event and dispatches to generic handler.
+ * This is only used in WebSocket mode (not standalone).
+ */
+async function handleWebSocketMessage(event: MessageEvent<string>) {
+    const message = JSON.parse(event.data) as WebSocketMessage;
+    await dispatchMessage(message);
 }
 
 let entityChangeIdReachedListeners: {
@@ -161,7 +179,7 @@ function waitForEntityChangeId(desiredEntityChangeId: number) {
 
     return new Promise<void>((res, rej) => {
         entityChangeIdReachedListeners.push({
-            desiredEntityChangeId: desiredEntityChangeId,
+            desiredEntityChangeId,
             resolvePromise: res,
             start: Date.now()
         });
@@ -228,16 +246,21 @@ function connectWebSocket() {
     // use wss for secure messaging
     const ws = new WebSocket(webSocketUri);
     ws.onopen = () => console.debug(utils.now(), `Connected to server ${webSocketUri} with WebSocket`);
-    ws.onmessage = handleMessage;
+    ws.onmessage = handleWebSocketMessage;
     // we're not handling ws.onclose here because reconnection is done in sendPing()
 
     return ws;
 }
 
 async function sendPing() {
+    if (!ws) {
+        // In standalone mode, there's no WebSocket — nothing to ping.
+        return;
+    }
+
     if (Date.now() - lastPingTs > 30000) {
         console.warn(utils.now(), "Lost websocket connection to the backend");
-        toast.showPersistent({
+        toastService.showPersistent({
             id: "lost-websocket-connection",
             title: t("ws.lost-websocket-connection-title"),
             message: t("ws.lost-websocket-connection-message"),
@@ -246,7 +269,7 @@ async function sendPing() {
     }
 
     if (ws.readyState === ws.OPEN) {
-        toast.closePersistent("lost-websocket-connection");
+        toastService.closePersistent("lost-websocket-connection");
         ws.send(
             JSON.stringify({
                 type: "ping",
@@ -262,7 +285,18 @@ async function sendPing() {
 
 setTimeout(() => {
     if (glob.device === "print") return;
+    if (!glob.dbInitialized) return;
 
+    if (glob.isStandalone) {
+        // In standalone mode, listen for messages from the local worker via custom event
+        window.addEventListener("trilium:ws-message", ((event: CustomEvent<WebSocketMessage>) => {
+            dispatchMessage(event.detail);
+        }) as EventListener);
+        console.debug(utils.now(), "Standalone mode: listening for worker messages");
+        return;
+    }
+
+    // Normal mode: use WebSocket
     ws = connectWebSocket();
 
     lastPingTs = Date.now();

apps/client/src/setup.css

@@ -0,0 +1,420 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+}
+
+body.setup {
+    margin: 0;
+    padding: 0;
+
+    &>.setup-outer-wrapper {
+        width: 100dvw;
+        height: 100dvh;
+
+        body:not(.electron) & {
+            @media (min-width: 700px) {
+                background:
+                    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
+                    radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.25) 0%, transparent 50%),
+                    radial-gradient(ellipse at 60% 80%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
+                    var(--left-pane-background-color);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 2em;
+            }
+        }
+
+        .setup-container {
+            background-color: var(--main-background-color);
+            border-radius: 16px;
+            padding: 2em;
+            flex-direction: column;
+            gap: 2rem;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            position: relative;
+            height: 100%;
+
+            @media (min-width: 700px) {
+                display: flex;
+                width: 750px;
+                height: 650px;
+                top: unset;
+                overflow: hidden;
+            }
+
+            .setup-options {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                gap: 1rem;
+
+                .setup-option-card {
+                    padding: 1.5em;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+
+                    &.disabled {
+                        cursor: not-allowed;
+                        opacity: 0.5;
+                        background-color: transparent;
+                        border-color: var(--main-border-color)
+                    }
+
+                    &:not(.disabled):hover {
+                        background-color: var(--card-background-hover-color);
+                        filter: contrast(105%);
+                        transition: background-color .2s ease-out;
+                    }
+
+                    .tn-icon {
+                        font-size: 2.5em;
+                        color: var(--muted-text-color);
+                    }
+
+                    h3 {
+                        font-size: 1.5em;
+                        font-weight: normal;
+                    }
+
+                    p:last-of-type {
+                        margin-bottom: 0;
+                        color: var(--muted-text-color);
+                    }
+                }
+            }
+        }
+
+        .page {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            padding: 2em;
+            overflow: auto;
+
+            >.back-button {
+                position: absolute;
+                top: 2em;
+                left: 2em;
+                color: var(--muted-text-color);
+
+                .tn-icon {
+                    margin-right: 0.4em;
+                }
+            }
+
+            >main {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                padding-top: 1em;
+                min-height: 0;
+            }
+
+            &.contentless {
+                justify-content: center;
+                align-items: center;
+            }
+
+            >footer {
+                display: flex;
+                justify-content: flex-end;
+                gap: 0.5rem;
+                border-top: 1px solid var(--main-border-color);
+                padding-top: 1rem;
+                margin-inline: -2em;
+                padding-inline: 2em;
+            }
+
+            >.page-error {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                background: var(--admonition-caution-accent-color);
+                z-index: 1;
+                margin: 0;
+                border-radius: 0;
+                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+                padding-right: 2.5em;
+
+                button {
+                    position: absolute;
+                    top: 0.5em;
+                    right: 0.5em;
+                }
+            }
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            width: 80%;
+            margin-inline: auto;
+
+            .form-group {
+                margin-bottom: 0;
+            }
+
+            .admonition {
+                margin: 0;
+            }
+        }
+
+        .form-item-with-icon {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            .tn-icon {
+                font-size: 1.5em;
+                color: var(--muted-text-color);
+            }
+        }
+    }
+
+    .sync-illustration {
+        display: flex;
+        justify-content: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5rem;
+
+        .tn-icon {
+            font-size: 3em;
+            color: var(--muted-text-color);
+        }
+
+        >div {
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+            gap: 0.5rem;
+            line-height: 1;
+            font-size: 0.85rem;
+        }
+
+        .sync-illustration-arrows {
+            width: 60px;
+            height: 3em;
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                border: 2px dashed var(--main-border-color);
+                top: 1.5em;
+                left: 0;
+                right: 0;
+            }
+        }
+    }
+
+    .illustration-icon {
+        font-size: 4em;
+        text-align: center;
+        color: var(--muted-text-color);
+        opacity: 0.6;
+        margin-block: 1rem;
+    }
+
+    .illustration-logo {
+        width: 96px;
+        height: 96px;
+        margin: auto;
+    }
+
+    h1 {
+        font-size: 1.4em;
+        text-align: center;
+    }
+
+    h1 + p {
+        text-align: center;
+        color: var(--muted-text-color);
+        margin-bottom: 0;
+    }
+
+    .tooltip {
+        z-index: 15 !important;
+    }
+}
+
+body.setup.background-effects,
+body.setup.background-effects .setup-container {
+    background: transparent;
+}
+
+/* macOS: draggable title bar region and traffic light buttons */
+body.setup.platform-darwin {
+    .drag-region {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 40px;
+        -webkit-app-region: drag;
+        z-index: 10;
+    }
+
+    .back-button {
+        -webkit-app-region: no-drag;
+        z-index: 11;
+    }
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Slide transitions */
+.slide-page {
+    position: absolute;
+    inset: 0;
+}
+
+.slide-out-forward,
+.slide-out-backward,
+.slide-in-forward,
+.slide-in-backward {
+    animation-duration: 0.35s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+.slide-out-forward {
+    animation-name: slide-out-left;
+}
+
+.slide-out-backward {
+    animation-name: slide-out-right;
+}
+
+.slide-in-forward {
+    animation-name: slide-in-right;
+}
+
+.slide-in-backward {
+    animation-name: slide-in-left;
+}
+
+.page.select-language {
+    .dropdownWrapper {
+        padding-bottom: 2em;
+        width: 80%;
+        margin: auto;
+    }
+
+    .dropdownWrapper,
+    .dropdown,
+    .dropdown-menu {
+        height: 100%;
+    }
+
+    .dropdown-menu {
+        box-sizing: border-box;
+        overflow: auto;
+    }
+}
+
+.page.sync-from-desktop {
+    .card-columns {
+        display: flex;
+        flex-direction: row;
+        gap: 1.5rem;
+    }
+
+    .sync-from-desktop-waiting {
+        margin-top: 2rem;
+        text-align: center;
+
+        .main {
+            font-size: 1.35em;
+        }
+
+        .subtle {
+            color: var(--muted-text-color);
+        }
+    }
+
+    .ip-addresses {
+        min-width: 250px;
+        user-select: text;
+        display: flex;
+        flex-direction: column;
+        font-family: var(--monospace-font-family);
+        font-size: 0.9em;
+
+        .tn-card-body {
+            overflow: auto;
+            padding-bottom: 0.5em;
+
+            > :first-child {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.page.sync-in-progress {
+    .sync-progress {
+        margin-top: 0.5rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        progress {
+            width: 100%;
+            height: 1rem;
+            border-radius: 0.5rem;
+            overflow: hidden;
+            appearance: none;
+
+            &::-webkit-progress-bar {
+                background-color: var(--main-border-color);
+            }
+
+            &::-webkit-progress-value {
+                background-color: var(--main-text-color);
+                transition: width 0.2s ease-out;
+            }
+        }
+
+        span {
+            font-size: 0.85rem;
+            color: var(--muted-text-color);
+            min-width: 2.5em;
+            text-align: right;
+        }
+    }
+}
+
+@keyframes slide-out-left {
+    from { transform: translateX(0); opacity: 1; }
+    to   { transform: translateX(-100%); opacity: 0; }
+}
+
+@keyframes slide-out-right {
+    from { transform: translateX(0); opacity: 1; }
+    to   { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes slide-in-right {
+    from { transform: translateX(100%); opacity: 0; }
+    to   { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slide-in-left {
+    from { transform: translateX(-100%); opacity: 0; }
+    to   { transform: translateX(0); opacity: 1; }
+}

apps/client/src/setup.ts

@@ -1,204 +0,0 @@
-import "jquery";
-
-import utils from "./services/utils.js";
-
-type SetupStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop" | "sync-from-server";
-type SetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
-
-class SetupController {
-    private step: SetupStep;
-    private setupType: SetupType = "";
-    private syncPollIntervalId: number | null = null;
-    private rootNode: HTMLElement;
-    private setupTypeForm: HTMLFormElement;
-    private syncFromServerForm: HTMLFormElement;
-    private setupTypeNextButton: HTMLButtonElement;
-    private setupTypeInputs: HTMLInputElement[];
-    private syncServerHostInput: HTMLInputElement;
-    private syncProxyInput: HTMLInputElement;
-    private passwordInput: HTMLInputElement;
-    private sections: Record<SetupStep, HTMLElement>;
-
-    constructor(rootNode: HTMLElement, syncInProgress: boolean) {
-        this.rootNode = rootNode;
-        this.step = syncInProgress ? "sync-in-progress" : "setup-type";
-        this.setupTypeForm = mustGetElement("setup-type-form", HTMLFormElement);
-        this.syncFromServerForm = mustGetElement("sync-from-server-form", HTMLFormElement);
-        this.setupTypeNextButton = mustGetElement("setup-type-next", HTMLButtonElement);
-        this.setupTypeInputs = Array.from(document.querySelectorAll<HTMLInputElement>("input[name='setup-type']"));
-        this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
-        this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
-        this.passwordInput = mustGetElement("password", HTMLInputElement);
-        this.sections = {
-            "setup-type": mustGetElement("setup-type-section", HTMLElement),
-            "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
-            "sync-from-desktop": mustGetElement("sync-from-desktop-section", HTMLElement),
-            "sync-from-server": mustGetElement("sync-from-server-section", HTMLElement),
-            "sync-in-progress": mustGetElement("sync-in-progress-section", HTMLElement)
-        };
-    }
-
-    init() {
-        this.setupTypeForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.selectSetupType();
-        });
-
-        this.syncFromServerForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.finish();
-        });
-
-        for (const input of this.setupTypeInputs) {
-            input.addEventListener("change", () => {
-                this.setupType = input.value as SetupType;
-                this.render();
-            });
-        }
-
-        for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
-            backButton.addEventListener("click", () => {
-                this.back();
-            });
-        }
-
-        const serverAddress = `${location.protocol}//${location.host}`;
-        $("#current-host").html(serverAddress);
-
-        if (this.step === "sync-in-progress") {
-            this.startSyncPolling();
-        }
-
-        this.render();
-        this.rootNode.style.display = "";
-    }
-
-    private async selectSetupType() {
-        if (this.setupType === "new-document") {
-            this.setStep("new-document-in-progress");
-
-            await $.post("api/setup/new-document");
-            window.location.replace("./setup");
-            return;
-        }
-
-        if (this.setupType) {
-            this.setStep(this.setupType);
-        }
-    }
-
-    private back() {
-        this.setStep("setup-type");
-        this.setupType = "";
-
-        for (const input of this.setupTypeInputs) {
-            input.checked = false;
-        }
-
-        this.render();
-    }
-
-    private async finish() {
-        const syncServerHost = this.syncServerHostInput.value.trim();
-        const syncProxy = this.syncProxyInput.value.trim();
-        const password = this.passwordInput.value;
-
-        if (!syncServerHost) {
-            showAlert("Trilium server address can't be empty");
-            return;
-        }
-
-        if (!password) {
-            showAlert("Password can't be empty");
-            return;
-        }
-
-        // not using server.js because it loads too many dependencies
-        const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost,
-            syncProxy,
-            password
-        });
-
-        if (resp.result === "success") {
-            hideAlert();
-            this.setStep("sync-in-progress");
-            this.startSyncPolling();
-        } else {
-            showAlert(`Sync setup failed: ${resp.error}`);
-        }
-    }
-
-    private setStep(step: SetupStep) {
-        this.step = step;
-        this.render();
-    }
-
-    private render() {
-        for (const [step, section] of Object.entries(this.sections) as [SetupStep, HTMLElement][]) {
-            section.style.display = step === this.step ? "" : "none";
-        }
-
-        this.setupTypeNextButton.disabled = !this.setupType;
-    }
-
-    private getSelectedSetupType(): SetupType {
-        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
-    }
-
-    private startSyncPolling() {
-        if (this.syncPollIntervalId !== null) {
-            return;
-        }
-
-        this.syncPollIntervalId = window.setInterval(checkOutstandingSyncs, 1000);
-    }
-}
-
-async function checkOutstandingSyncs() {
-    const { outstandingPullCount, initialized } = await $.get("api/sync/stats");
-
-    if (initialized) {
-        if (utils.isElectron()) {
-            const remote = utils.dynamicRequire("@electron/remote");
-            remote.app.relaunch();
-            remote.app.exit(0);
-        } else {
-            utils.reloadFrontendApp();
-        }
-    } else {
-        $("#outstanding-syncs").html(outstandingPullCount);
-    }
-}
-
-function showAlert(message: string) {
-    $("#alert").text(message);
-    $("#alert").show();
-}
-
-function hideAlert() {
-    $("#alert").hide();
-}
-
-function getSyncInProgress() {
-    const el = document.getElementById("syncInProgress");
-    if (!el || !(el instanceof HTMLMetaElement)) return false;
-    return !!parseInt(el.content);
-}
-
-function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): InstanceType<T> {
-    const element = document.getElementById(id);
-
-    if (!element || !(element instanceof ctor)) {
-        throw new Error(`Expected element #${id}`);
-    }
-
-    return element as InstanceType<T>;
-}
-
-addEventListener("DOMContentLoaded", (event) => {
-    const rootNode = document.getElementById("setup-dialog");
-    if (!rootNode || !(rootNode instanceof HTMLElement)) return;
-
-    new SetupController(rootNode, getSyncInProgress()).init();
-});

apps/client/src/setup.tsx

@@ -0,0 +1,524 @@
+import "./setup.css";
+
+import { LOCALES, SetupSyncFromServerResponse } from "@triliumnext/commons";
+import clsx from "clsx";
+import { ComponentChildren, render } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useTranslation } from "react-i18next";
+
+import logo from "./assets/icon-color.svg?url";
+import { initLocale, t } from "./services/i18n";
+import server from "./services/server";
+import { isElectron, replaceHtmlEscapedSlashes } from "./services/utils";
+import ActionButton from "./widgets/react/ActionButton";
+import Admonition from "./widgets/react/Admonition";
+import Button from "./widgets/react/Button";
+import { Card, CardFrame, CardSection } from "./widgets/react/Card";
+import FormGroup from "./widgets/react/FormGroup";
+import FormList, { FormListItem } from "./widgets/react/FormList";
+import FormTextBox from "./widgets/react/FormTextBox";
+import Icon from "./widgets/react/Icon";
+
+async function main() {
+    await initLocale();
+
+    const bodyWrapper = document.createElement("div");
+    bodyWrapper.classList.add("setup-outer-wrapper");
+    document.body.classList.add("setup");
+    if (isElectron()) {
+        document.body.classList.add("electron", `platform-${window.process.platform}`, "background-effects");
+    }
+    render(<App />, bodyWrapper);
+    document.body.replaceChildren(bodyWrapper);
+}
+
+type State = "selectLanguage" | "firstOptions" | "createNewDocumentOptions" | "createNewDocumentWithDemo" | "createNewDocumentEmpty" | "syncFromDesktop" | "syncFromServer" | "syncFromServerInProgress" | "syncFromDesktopInProgress" | "syncFailed";
+
+const STATE_ORDER: State[] = ["selectLanguage", "firstOptions", "createNewDocumentOptions", "createNewDocumentWithDemo", "createNewDocumentEmpty", "syncFromDesktop", "syncFromServer", "syncFromServerInProgress", "syncFromDesktopInProgress", "syncFailed"];
+
+function renderState(state: State, setState: (state: State) => void) {
+    switch (state) {
+        case "selectLanguage": return <SelectLanguage setState={setState} />;
+        case "firstOptions": return <SetupOptions setState={setState} />;
+        case "createNewDocumentOptions": return <CreateNewDocumentOptions setState={setState} />;
+        case "createNewDocumentWithDemo": return <CreateNewDocumentInProgress withDemo />;
+        case "createNewDocumentEmpty": return <CreateNewDocumentInProgress />;
+        case "syncFromServer": return <SyncFromServer setState={setState} />;
+        case "syncFromDesktop": return <SyncFromDesktop setState={setState} />;
+        case "syncFromServerInProgress": return <SyncInProgress device="server" />;
+        case "syncFromDesktopInProgress": return <SyncInProgress device="desktop" />;
+        default: return null;
+    }
+}
+
+function App() {
+    const [state, setState] = useState<State>("selectLanguage");
+    const [prevState, setPrevState] = useState<State | null>(null);
+    const [transitioning, setTransitioning] = useState(false);
+    const prevStateRef = useRef<State>(state);
+
+    function handleSetState(newState: State) {
+        setPrevState(prevStateRef.current);
+        prevStateRef.current = newState;
+        setTransitioning(true);
+        setState(newState);
+    }
+
+    const direction = prevState !== null
+        ? STATE_ORDER.indexOf(state) > STATE_ORDER.indexOf(prevState) ? "forward" : "backward"
+        : "forward";
+
+    return (
+        <div class="setup-container">
+            <div class="drag-region" />
+            {transitioning && prevState !== null && (
+                <div
+                    class={`slide-page slide-out-${direction}`}
+                    onAnimationEnd={() => {
+                        setTransitioning(false);
+                        setPrevState(null);
+                    }}
+                >
+                    {renderState(prevState, handleSetState)}
+                </div>
+            )}
+            <div class={`slide-page ${transitioning ? `slide-in-${direction}` : "slide-current"}`} key={state}>
+                {renderState(state, handleSetState)}
+            </div>
+        </div>
+    );
+}
+
+function SelectLanguage({ setState }: { setState: (state: State) => void }) {
+    const { t, i18n } = useTranslation();
+    const [ currentLocale, setCurrentLocale ] = useState(i18n.language);
+    const filteredLocales = useMemo(() => LOCALES.filter(l => !l.contentOnly), []);
+
+    return (
+        <SetupPage
+            title={t("setup.language")}
+            className="select-language"
+            illustration={<Icon icon="bx bx-globe" className="illustration-icon" />}
+            footer={<Button text={t("setup.continue")} kind="primary" onClick={() => setState("firstOptions")} />}
+        >
+            <FormList onSelect={async (id) => {
+                await i18n.changeLanguage(id);
+                setCurrentLocale(id);
+            }}>
+                {filteredLocales.map(locale => (
+                    <FormListItem key={locale.id} value={locale.id} active={locale.id === currentLocale}>{locale.name}</FormListItem>
+                ))}
+            </FormList>
+        </SetupPage>
+    );
+}
+
+function SetupOptions({ setState }: { setState: (state: State) => void }) {
+    return (
+        <SetupPage
+            title={t("setup.heading")}
+            className="setup-options-container"
+            illustration={<img src={logo} alt="Setup illustration" className="illustration-logo" />}
+            onBack={() => setState("selectLanguage")}
+        >
+            <div class="setup-options">
+                <SetupOptionCard
+                    icon="bx bx-file-blank"
+                    title={t("setup.new-document")}
+                    description={t("setup.new-document-description")}
+                    onClick={() => setState("createNewDocumentOptions")}
+                />
+
+                <SetupOptionCard
+                    icon="bx bx-server"
+                    title={t("setup.sync-from-server")}
+                    description={t("setup.sync-from-server-description")}
+                    onClick={() => setState("syncFromServer")}
+                />
+
+                <SetupOptionCard
+                    icon="bx bx-desktop"
+                    title={t("setup.sync-from-desktop")}
+                    description={t("setup.sync-from-desktop-description")}
+                    disabled={glob.isStandalone}
+                    onClick={() => setState("syncFromDesktop")}
+                />
+            </div>
+        </SetupPage>
+    );
+}
+
+type SyncStep = "connecting" | "syncing" | "finalizing";
+
+function getSyncStep(stats: { outstandingPullCount: number; totalPullCount: number | null; initialized: boolean }): SyncStep {
+    if (stats.initialized) {
+        return "finalizing"; // will reload momentarily
+    }
+    if (stats.totalPullCount !== null && stats.outstandingPullCount > 0) {
+        return "syncing";
+    }
+    if (stats.totalPullCount !== null && stats.outstandingPullCount === 0) {
+        return "finalizing";
+    }
+    return "connecting";
+}
+
+function SyncInProgress({ device }: { device: "server" | "desktop" }) {
+    const stats = useOutstandingSyncInfo();
+    const step = getSyncStep(stats);
+
+    useEffect(() => {
+        if (stats.initialized) {
+            onSetupFinished();
+        }
+    }, [stats.initialized]);
+
+    const steps: { key: SyncStep; label: string }[] = [
+        { key: "connecting", label: t("setup.sync-step-connecting") },
+        { key: "syncing", label: t("setup.sync-step-syncing") },
+        { key: "finalizing", label: t("setup.sync-step-finalizing") }
+    ];
+
+    const currentIndex = steps.findIndex((s) => s.key === step);
+
+    const syncingDone = currentIndex > steps.findIndex((s) => s.key === "syncing");
+    let progress = 0;
+    if (syncingDone) {
+        progress = 100;
+    } else if (stats.totalPullCount) {
+        progress = Math.round(((stats.totalPullCount - stats.outstandingPullCount) / stats.totalPullCount) * 100);
+    }
+
+    return (
+        <SetupPage
+            className="sync-in-progress"
+            illustration={<SyncIllustration targetDevice={device} />}
+            title={t("setup.sync-in-progress-title")}
+        >
+            <Card className="sync-steps">
+                {steps.map((s, i) => (
+                    <CardSection className={i < currentIndex ? "completed" : i === currentIndex ? "active" : ""} key={s.key}>
+                        <Icon icon={i < currentIndex ? "bx bx-check-circle" : i === currentIndex ? "bx bx-loader-circle bx-spin" : "bx bx-circle"} />{" "}
+                        {s.label}
+                        {s.key === "syncing" && (
+                            <div class="sync-progress">
+                                <progress value={syncingDone ? 1 : stats.totalPullCount! - stats.outstandingPullCount} max={syncingDone ? 1 : stats.totalPullCount!} />
+                                <span>{progress}%</span>
+                            </div>
+                        )}
+                    </CardSection>
+                ))}
+            </Card>
+        </SetupPage>
+    );
+}
+
+function useOutstandingSyncInfo() {
+    const [ outstandingPullCount, setOutstandingPullCount ] = useState(0);
+    const [ totalPullCount, setTotalPullCount ] = useState<number | null>(null);
+    const [ initialized, setInitialized ] = useState(false);
+
+    async function refresh() {
+        const resp = await server.get<{ outstandingPullCount: number; totalPullCount: number | null; initialized: boolean }>("sync/stats");
+        setOutstandingPullCount(resp.outstandingPullCount);
+        setTotalPullCount(resp.totalPullCount);
+        setInitialized(resp.initialized);
+    }
+
+    useEffect(() => {
+        const interval = setInterval(refresh, 1000);
+        refresh();
+
+        return () => clearInterval(interval);
+    }, []);
+    return { outstandingPullCount, totalPullCount, initialized };
+}
+
+function CreateNewDocumentOptions({ setState }: { setState: (state: State) => void }) {
+    return (
+        <SetupPage
+            className="create-new-document-options"
+            title={t("setup.create-new-document-options-title")}
+            illustration={<Icon icon="bx bx-star" className="illustration-icon" />}
+            onBack={() => setState("firstOptions")}
+        >
+            <div class="setup-options">
+                <SetupOptionCard icon="bx bx-book-open" title={t("setup.create-new-document-options-with-demo")} description={t("setup.create-new-document-options-with-demo-description")} onClick={() => setState("createNewDocumentWithDemo")} />
+                <SetupOptionCard icon="bx bx-file-blank" title={t("setup.create-new-document-options-empty")} description={t("setup.create-new-document-options-empty-description")} onClick={() => setState("createNewDocumentEmpty")} />
+            </div>
+        </SetupPage>
+    );
+}
+
+function CreateNewDocumentInProgress({ withDemo = false }: { withDemo?: boolean }) {
+    useEffect(() => {
+        server.post(`setup/new-document${withDemo ? "" : "?skipDemoDb"}`).then(onSetupFinished);
+    }, [ withDemo ]);
+
+    return (
+        <SetupPage
+            className="create-new-document"
+            title={t("setup.create-new-document-title")}
+            description={t("setup.create-new-document-description")}
+            illustration={<Icon icon="bx bx-loader-circle bx-spin" className="illustration-icon" />}
+        />
+    );
+}
+
+function SyncFromServer({ setState }: { setState: (state: State) => void }) {
+    const [ syncServerHost, setSyncServerHost ] = useState("");
+    const [ password, setPassword ] = useState("");
+    const [ syncProxy, setSyncProxy ] = useState("");
+    const [ error, setError ] = useState<string | null>(null);
+    const [ errorId, setErrorId ] = useState(0);
+    const [ isWrongPassword, setIsWrongPassword ] = useState(false);
+    const isValid = syncServerHost.trim() !== "" && password !== "";
+
+    function raiseError(message: string) {
+        setError(message);
+        setErrorId(id => id + 1);
+    }
+
+    async function handleFinishSetup() {
+        try {
+            const resp = await server.post<SetupSyncFromServerResponse>("setup/sync-from-server", {
+                syncServerHost: syncServerHost.trim(),
+                syncProxy: syncProxy.trim(),
+                password
+            });
+
+            if (resp.result === "success") {
+                setState("syncFromServerInProgress");
+            } else if (resp.error.includes("Incorrect password")) {
+                setIsWrongPassword(true);
+            } else {
+                raiseError(t("setup.sync-failed", { message: resp.error }));
+            }
+        } catch (e) {
+            raiseError(e instanceof Error ? e.message : String(e));
+        }
+    }
+
+    return (
+        <SetupPage
+            className="sync-from-server top-aligned"
+            title={t("setup.sync-from-server")}
+            description={t("setup.sync-from-server-page-description")}
+            illustration={<SyncIllustration targetDevice="server" />}
+            error={error}
+            errorId={errorId}
+            onBack={() => setState("firstOptions")}
+            footer={<Button text={t("setup.button-finish-setup")} kind="primary" onClick={handleFinishSetup} disabled={!isValid} />}
+        >
+            <form>
+                <Card>
+                    <CardSection>
+                        <FormGroup label={t("setup.server-host")} name="serverHost">
+                            <FormTextBox
+                                placeholder={t("setup.server-host-placeholder")}
+                                currentValue={syncServerHost} onChange={setSyncServerHost}
+                                autocomplete="trilium-sync-server-host"
+                                required
+                            />
+                        </FormGroup>
+                    </CardSection>
+
+                    <CardSection>
+                        <FormGroup
+                            label={t("setup.server-password")} name="serverPassword"
+                            error={isWrongPassword ? t("setup.wrong-password") : undefined}
+                        >
+                            <FormTextBox
+                                type="password"
+                                currentValue={password} onChange={setPassword}
+                                autocomplete="trilium-sync-server-password"
+                                required
+                            />
+                        </FormGroup>
+                    </CardSection>
+                </Card>
+
+                <Card heading={t("setup.advanced-options")}>
+                    <CardSection>
+                        <FormGroup
+                            name="proxyServer"
+                            label={t("setup.proxy-server")}
+                            description={isElectron() ? t("setup.proxy-instruction") : undefined}
+                        >
+                            <FormTextBox placeholder={t("setup.proxy-server-placeholder")} currentValue={syncProxy} onChange={setSyncProxy} />
+                        </FormGroup>
+                    </CardSection>
+                </Card>
+            </form>
+        </SetupPage>
+    );
+}
+
+function SyncFromDesktop({ setState }: { setState: (state: State) => void }) {
+    const networkAddresses = getNetworkAddresses();
+
+    useEffect(() => {
+        const interval = setInterval(async () => {
+            const status = await server.get<{ schemaExists: boolean }>("setup/status");
+            if (status.schemaExists) {
+                setState("syncFromDesktopInProgress");
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [setState]);
+
+    return (
+        <SetupPage
+            className="sync-from-desktop"
+            title={t("setup.sync-from-desktop")}
+            illustration={<SyncIllustration targetDevice="desktop" />}
+            onBack={() => setState("firstOptions")}
+        >
+            <div class="card-columns">
+                <Card heading="On the other device">
+                    <CardSection>1. {t("setup.sync-from-desktop-step1")}</CardSection>
+                    <CardSection>2. {t("setup.sync-from-desktop-step2")}</CardSection>
+                    <CardSection>3. {t("setup.sync-from-desktop-step3")}</CardSection>
+                    <CardSection>4. {t("setup.sync-from-desktop-step4")}</CardSection>
+                    <CardSection>5. {t("setup.sync-from-desktop-step5")}</CardSection>
+                </Card>
+
+                {networkAddresses.length > 0 && (
+                    <Card heading={t("setup.your-ip-addresses")} className="ip-addresses">
+                        {networkAddresses.map((addr) => (
+                            <CardSection key={addr}>{addr}</CardSection>
+                        ))}
+                    </Card>
+                )}
+            </div>
+
+            <div class="sync-from-desktop-waiting">
+                <div class="main"><Icon icon="bx bx-loader-circle bx-spin" />{" "} {t("setup.sync-from-desktop-waiting")}</div>
+                <div class="subtle">{t("setup.sync-from-desktop-warning")}</div>
+            </div>
+        </SetupPage>
+    );
+}
+
+function SyncIllustration({ targetDevice }: { targetDevice: "desktop" | "server" }) {
+    return (
+        <div class="sync-illustration">
+            <div>
+                <Icon icon={isElectron() ? "bx bx-desktop" : "bx bx-globe"} />
+                {t("setup.sync-illustration-this-device")}
+            </div>
+            <div class="sync-illustration-arrows" />
+            <div>
+                <Icon icon={targetDevice === "desktop" ? "bx bx-desktop" : "bx bx-server"} />
+                {targetDevice === "desktop" ? t("setup.sync-illustration-desktop-app") : t("setup.sync-illustration-server")}
+            </div>
+        </div>
+    );
+}
+
+function SetupOptionCard({ title, description, icon, onClick, disabled }: { title: string; description: string, icon: string, onClick?: () => void, disabled?: boolean }) {
+    return (
+        <CardFrame
+            className={clsx("setup-option-card", { disabled })}
+            onClick={disabled ? undefined : onClick}
+        >
+            <Icon icon={icon} />
+
+            <div>
+                <h3>{title}</h3>
+                <p>{description}</p>
+            </div>
+        </CardFrame>
+    );
+}
+
+function SetupPage({ title, description, className, illustration, children, footer, error, errorId, onBack }: {
+    title: string;
+    description?: string;
+    error?: string | null;
+    errorId?: number;
+    className?: string;
+    illustration?: ComponentChildren;
+    children?: ComponentChildren;
+    footer?: ComponentChildren;
+    onBack?: () => void;
+}) {
+    const [ showError, setShowError ] = useState(!!error);
+    useEffect(() => {
+        if (error) {
+            setShowError(true);
+        }
+    }, [ error, errorId ]);
+
+    return (
+        <div className={clsx("page", className, { "contentless": !children })}>
+            {onBack && (
+                <Button
+                    className="back-button"
+                    icon="bx bx-arrow-back"
+                    text={t("setup.button-back")}
+                    onClick={onBack}
+                    kind="lowProfile"
+                />
+            )}
+            {error && showError && (
+                <Admonition className="page-error" type="caution">
+                    <ActionButton icon="bx bx-x" text={t("setup.dismiss-error")} onClick={() => setShowError(false)}  />
+                    {replaceHtmlEscapedSlashes(error)}
+                </Admonition>
+            )}
+
+            {illustration}
+            <h1>{title}</h1>
+            {description && <p class="page-description">{description}</p>}
+            {children && <main>
+                {children}
+            </main>}
+            {footer && <footer>{footer}</footer>}
+        </div>
+    );
+}
+
+function getNetworkAddresses(): string[] {
+    if (!isElectron()) {
+        return [`${location.protocol}//${location.host}`];
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const os = require("os") as typeof import("os");
+    const interfaces = os.networkInterfaces();
+    const addresses: string[] = [];
+
+    for (const nets of Object.values(interfaces)) {
+        if (!nets) continue;
+        for (const net of nets) {
+            if (net.internal) continue;
+            if (net.family === "IPv6" && net.scopeid !== 0) continue;
+            addresses.push(net.address);
+        }
+    }
+
+    // Sort by likelihood of being the local network address.
+    addresses.sort((a, b) => networkScore(a) - networkScore(b));
+
+    return addresses.map((addr) => `${location.protocol}//${addr}:${location.port}`);
+}
+
+function networkScore(addr: string): number {
+    if (addr.startsWith("192.168.")) return 0;
+    if (addr.startsWith("10.")) return 1;
+    if (/^172\.(1[6-9]|2\d|3[01])\./.test(addr)) return 2;
+    if (addr.includes(":")) return 4; // IPv6
+    return 3;
+}
+
+function onSetupFinished() {
+    if (isElectron()) {
+        // On Electron we need to use the setup route because it handles the closing of the setup window and opening the main app window.
+        location.href = "setup";
+    } else {
+        location.reload();
+    }
+}
+
+main();

apps/client/src/stylesheets/style.css

@@ -1750,11 +1750,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     justify-content: space-between;
     align-items: baseline;
     font-weight: bold;
-    color: var(--muted-text-color) !important;
-}
-
-#right-pane .card-header-title {
     text-transform: uppercase;
+    color: var(--muted-text-color) !important;
 }
 
 #right-pane .card-header-buttons {

apps/client/src/translations/en/translation.json

@@ -1157,9 +1157,7 @@
     "title": "Experimental Options",
     "disclaimer": "These options are experimental and may cause instability. Use with caution.",
     "new_layout_name": "New Layout",
-    "new_layout_description": "Try out the new layout for a more modern look and improved usability. Subject to heavy change in the upcoming releases.",
-    "llm_name": "AI / LLM Chat",
-    "llm_description": "Enable the AI chat sidebar and LLM chat notes powered by large language models."
+    "new_layout_description": "Try out the new layout for a more modern look and improved usability. Subject to heavy change in the upcoming releases."
   },
   "fonts": {
     "theme_defined": "Theme defined",
@@ -1601,7 +1599,6 @@
     "geo-map": "Geo Map",
     "beta-feature": "Beta",
     "ai-chat": "AI Chat",
-    "llm-chat": "AI Chat",
     "task-list": "Task List",
     "new-feature": "New",
     "collections": "Collections",
@@ -1613,49 +1610,6 @@
     "toggle-on-hint": "Note is not protected, click to make it protected",
     "toggle-off-hint": "Note is protected, click to make it unprotected"
   },
-  "llm_chat": {
-    "placeholder": "Type a message...",
-    "send": "Send",
-    "sending": "Sending...",
-    "empty_state": "Start a conversation by typing a message below.",
-    "searching_web": "Searching the web...",
-    "web_search": "Web search",
-    "note_tools": "Note access",
-    "sources": "Sources",
-    "extended_thinking": "Extended thinking",
-    "legacy_models": "Legacy models",
-    "thinking": "Thinking...",
-    "thought_process": "Thought process",
-    "tool_calls": "{{count}} tool call(s)",
-    "input": "Input",
-    "result": "Result",
-    "error": "Error",
-    "tool_error": "failed",
-    "total_tokens": "{{total}} tokens",
-    "tokens_detail": "{{prompt}} prompt + {{completion}} completion",
-    "tokens_used": "{{prompt}} prompt + {{completion}} completion = {{total}} tokens",
-    "tokens_used_with_cost": "{{prompt}} prompt + {{completion}} completion = {{total}} tokens (~${{cost}})",
-    "tokens_used_with_model": "{{model}}: {{prompt}} prompt + {{completion}} completion = {{total}} tokens",
-    "tokens_used_with_model_and_cost": "{{model}}: {{prompt}} prompt + {{completion}} completion = {{total}} tokens (~${{cost}})",
-    "tokens": "tokens",
-    "context_used": "{{percentage}}% used",
-    "note_context_enabled": "Click to disable note context: {{title}}",
-    "note_context_disabled": "Click to include current note in context",
-    "no_provider_message": "No AI provider configured. Add one to start chatting.",
-    "add_provider": "Add AI Provider",
-    "role_user": "You",
-    "role_assistant": "Assistant"
-  },
-  "sidebar_chat": {
-    "title": "AI Chat",
-    "launcher_title": "Open AI Chat",
-    "new_chat": "Start new chat",
-    "save_chat": "Save chat to notes",
-    "empty_state": "Start a conversation",
-    "history": "Chat history",
-    "recent_chats": "Recent chats",
-    "no_chats": "No previous chats"
-  },
   "shared_switch": {
     "shared": "Shared",
     "toggle-on-title": "Share the note",
@@ -2277,20 +2231,55 @@
     "sample_venn": "Venn",
     "sample_ishikawa": "Ishikawa"
   },
-  "llm": {
-    "settings_title": "AI / LLM",
-    "settings_description": "Configure AI and Large Language Model integrations.",
-    "add_provider": "Add Provider",
-    "add_provider_title": "Add AI Provider",
-    "configured_providers": "Configured Providers",
-    "no_providers_configured": "No providers configured yet.",
-    "provider_name": "Name",
-    "provider_type": "Provider",
-    "actions": "Actions",
-    "delete_provider": "Delete",
-    "delete_provider_confirmation": "Are you sure you want to delete the provider \"{{name}}\"?",
-    "api_key": "API Key",
-    "api_key_placeholder": "Enter your API key",
-    "cancel": "Cancel"
+  "setup": {
+    "heading": "Get started with Trilium",
+    "new-document": "New knowledge base",
+    "new-document-description": "Start with a clean knowledge base and begin right away.",
+    "sync-from-desktop": "Connect a desktop app",
+    "sync-from-desktop-description": "You only have a Trilium desktop app running on another device. This device will sync its data from that desktop app.",
+    "sync-from-server": "Connect to an existing server",
+    "sync-from-server-description": "You have a Trilium server running elsewhere (either self-hosted or in the cloud). This device will sync its data from that server.",
+    "next": "Next",
+    "init-in-progress": "Document initialization in progress",
+    "redirecting": "You will be shortly redirected to the application.",
+    "title": "Setup",
+    "sync-from-server-page-description": "Enter your server details below to connect your existing workspace.",
+    "sync-in-progress-title": "Sync in progress",
+    "sync-in-progress-description": "Your device is now connected and items are being synchronized.",
+    "button-back": "Back",
+    "button-finish-setup": "Finish setup",
+    "sync-step-connecting": "Connecting to server",
+    "sync-step-syncing": "Syncing data",
+    "sync-step-finalizing": "Setting up options",
+    "create-new-document-options-title": "How would you like to start?",
+    "create-new-document-options-with-demo": "With demo content",
+    "create-new-document-options-with-demo-description": "Explore Trilium with example content.",
+    "create-new-document-options-empty": "Empty",
+    "create-new-document-options-empty-description": "Start with a blank knowledge base. You can import demo notes later.",
+    "create-new-document-title": "Preparing your knowledge base",
+    "create-new-document-description": "This will only take a moment.",
+    "sync-illustration-this-device": "This device",
+    "sync-illustration-desktop-app": "Your desktop app",
+    "sync-illustration-server": "Your server",
+    "sync-from-desktop-step1": "Open your desktop instance of Trilium Notes.",
+    "sync-from-desktop-step2": "From the Trilium Menu, click Options.",
+    "sync-from-desktop-step3": "Click on Sync category in the note tree.",
+    "sync-from-desktop-step4": "Change server instance address to point to one of the addresses on the right and click Save.",
+    "sync-from-desktop-step5": "Click the \"Test sync\" button to verify connection is successful.",
+    "sync-from-desktop-warning": "Make sure both devices are on the same network.",
+    "sync-from-desktop-waiting": "Waiting for connection...",
+    "advanced-options": "Advanced options",
+    "sync-failed": "Failed to sync: {{message}}",
+    "server-host": "Trilium server address",
+    "server-host-placeholder": "https://<hostname>:<port>",
+    "server-password": "Password",
+    "proxy-server": "Proxy server (optional)",
+    "proxy-server-placeholder": "https://<hostname>:<port>",
+    "proxy-instruction": "If you leave proxy setting blank, system proxy will be used.",
+    "dismiss-error": "Dismiss error",
+    "wrong-password": "Incorrect password. Please try again.",
+    "language": "Language",
+    "continue": "Continue",
+    "your-ip-addresses": "Addresses for this device"
   }
 }

apps/client/src/translations/fr/translation.json

@@ -28,10 +28,7 @@
     },
     "widget-render-error": {
       "title": "Rendu impossible d'un widget React custom"
-    },
-    "widget-missing-parent": "Le widget personnalisé ne possède pas la propriété obligatoire '{{property}}'.\n\nSi ce script est destiné à être exécuté sans élément d’interface utilisateur, utilisez plutôt '#run=frontendStartup'.",
-    "open-script-note": "Ouvrir la note du script",
-    "scripting-error": "Erreur de script personnalisée: {{title}}"
+    }
   },
   "add_link": {
     "add_link": "Ajouter un lien",
@@ -769,8 +766,7 @@
     "filter": "Filtre",
     "filter-none": "Toutes les icônes",
     "filter-default": "Icônes par défaut",
-    "icon_tooltip": "{{name}}\nPack d'icônes : {{iconPack}}",
-    "no_results": "Aucune icône trouvée."
+    "icon_tooltip": "{{name}}\nPack d'icônes : {{iconPack}}"
   },
   "basic_properties": {
     "note_type": "Type de note",
@@ -797,8 +793,7 @@
     "expand_tooltip": "Développe les éléments enfants directs de cette collection (à un niveau). Pour plus d'options, appuyez sur la flèche à droite.",
     "expand_first_level": "Développer les enfants directs",
     "expand_nth_level": "Développer sur {{depth}} niveaux",
-    "expand_all_levels": "Développer tous les niveaux",
-    "hide_child_notes": "Masquer les notes enfants dans l’arborescence"
+    "expand_all_levels": "Développer tous les niveaux"
   },
   "edited_notes": {
     "no_edited_notes_found": "Aucune note modifiée ce jour-là...",
@@ -811,7 +806,7 @@
     "file_type": "Type de fichier",
     "file_size": "Taille du fichier",
     "download": "Télécharger",
-    "open": "Ouvrir dans une nouvelle fenêtre",
+    "open": "Ouvrir",
     "upload_new_revision": "Téléverser une nouvelle version",
     "upload_success": "Une nouvelle version de fichier a été téléversée.",
     "upload_failed": "Le téléversement d'une nouvelle version de fichier a échoué.",
@@ -831,8 +826,7 @@
   },
   "inherited_attribute_list": {
     "title": "Attributs hérités",
-    "no_inherited_attributes": "Aucun attribut hérité.",
-    "none": "aucun"
+    "no_inherited_attributes": "Aucun attribut hérité."
   },
   "note_info_widget": {
     "note_id": "Identifiant de la note",
@@ -909,8 +903,7 @@
     "unknown_search_option": "Option de recherche inconnue {{searchOptionName}}",
     "search_note_saved": "La note de recherche a été enregistrée dans {{- notePathTitle}}",
     "actions_executed": "Les actions ont été exécutées.",
-    "view_options": "Afficher les options:",
-    "option": "option"
+    "view_options": "Afficher les options:"
   },
   "similar_notes": {
     "title": "Notes similaires",
@@ -1004,7 +997,7 @@
     "no_attachments": "Cette note ne contient aucune pièce jointe."
   },
   "book": {
-    "no_children_help": "Cette collection ne contient pas de notes enfants, il n'y a donc rien à afficher.",
+    "no_children_help": "Cette note de type Livre n'a aucune note enfant, donc il n'y a rien à afficher. Consultez le <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a> pour plus de détails.",
     "drag_locked_title": "Edition verrouillée",
     "drag_locked_message": "Le glisser-déposer n'est pas autorisé car l'édition de cette collection est verrouillé."
   },
@@ -1374,8 +1367,7 @@
     "description": "Description",
     "reload_app": "Recharger l'application pour appliquer les modifications",
     "set_all_to_default": "Réinitialiser aux valeurs par défaut",
-    "confirm_reset": "Voulez-vous vraiment réinitialiser tous les raccourcis clavier par défaut ?",
-    "no_results": "Aucun raccourci correspondant à '{{filter}}'"
+    "confirm_reset": "Voulez-vous vraiment réinitialiser tous les raccourcis clavier par défaut ?"
   },
   "spellcheck": {
     "title": "Vérification orthographique",
@@ -1410,7 +1402,7 @@
     "will_be_deleted_in": "Cette pièce jointe sera automatiquement supprimée dans {{time}}",
     "will_be_deleted_soon": "Cette pièce jointe sera bientôt supprimée automatiquement",
     "deletion_reason": ", car la pièce jointe n'est pas liée dans le contenu de la note. Pour empêcher la suppression, ajoutez à nouveau le lien de la pièce jointe dans le contenu d'une note ou convertissez la pièce jointe en note.",
-    "role_and_size": "Rôle : {{role}}, Taille : {{size}}, MIME: {{- mimeType}}",
+    "role_and_size": "Rôle : {{role}}, Taille : {{size}}",
     "link_copied": "Lien de pièce jointe copié dans le presse-papiers.",
     "unrecognized_role": "Rôle de pièce jointe « {{role}} » non reconnu."
   },
@@ -1464,8 +1456,7 @@
     "convert-to-attachment-confirm": "Êtes-vous sûr de vouloir convertir les notes sélectionnées en pièces jointes de leurs notes parentes ?",
     "archive": "Archive",
     "unarchive": "Désarchiver",
-    "open-in-popup": "Modification rapide",
-    "open-in-a-new-window": "Ouvrir dans une nouvelle fenêtre"
+    "open-in-popup": "Modification rapide"
   },
   "shared_info": {
     "shared_publicly": "Cette note est partagée publiquement sur {{- link}}.",
@@ -1843,7 +1834,7 @@
   "book_properties_config": {
     "hide-weekends": "Masquer les week-ends",
     "display-week-numbers": "Afficher les numéros de semaine",
-    "map-style": "Style de carte",
+    "map-style": "Style de carte :",
     "max-nesting-depth": "Profondeur d'imbrication maximale :",
     "raster": "Trame",
     "vector_light": "Vecteur (clair)",
@@ -1991,41 +1982,5 @@
   },
   "calendar_view": {
     "delete_note": "Effacer la note..."
-  },
-  "media": {
-    "play": "Lire (Espace)",
-    "pause": "Pause (Espace)",
-    "back-10s": "Retour arrière 10s (flèche gauche)",
-    "forward-30s": "Avance 30s",
-    "mute": "Silence (M)",
-    "unmute": "Réactiver le son (M)",
-    "playback-speed": "Vitesse de lecture",
-    "loop": "Boucle",
-    "disable-loop": "Désactiver la boucle",
-    "rotate": "Rotation",
-    "picture-in-picture": "Image dans l'image",
-    "exit-picture-in-picture": "Sortir de Image dans l'image",
-    "fullscreen": "Plein-écran (F)",
-    "exit-fullscreen": "Sortir du mode plein-écran",
-    "unsupported-format": "L'aperçu multimédia n'est pas disponible pour ce format de fichier:\n{{mime}}",
-    "zoom-to-fit": "Zoom pour remplir",
-    "zoom-reset": "Annuler zoom pour remplir"
-  },
-  "render": {
-    "setup_title": "Afficher du HTML personnalisé ou Preact JSX dans cette note",
-    "setup_create_sample_preact": "Créer un exemple de note avec Preact",
-    "setup_create_sample_html": "Créer un exemple de note avec HTML",
-    "setup_sample_created": "Un exemple de note a été créé en tant que note enfant.",
-    "disabled_description": "Ces notes de rendu proviennent d'une source externe. Pour vous protéger de contenu malveillant, elle n'est pas activée par défaut. Assurez-vous de faire confiance à la source avant de l’activer.",
-    "disabled_button_enable": "Activer la note de rendu"
-  },
-  "web_view_setup": {
-    "title": "Créez la vue de la page Web directement dans Trilium",
-    "url_placeholder": "Entrez ou collez l'adresse du site Web, par exemple https://triliumnotes.org",
-    "create_button": "Créer une vue Web",
-    "invalid_url_title": "Adresse invalide",
-    "invalid_url_message": "Insérer une adresse Web valide, par exemple https://triliumnotes.org.",
-    "disabled_description": "Cette vue Web a été importée à partir d'une source externe. Pour vous protéger du phishing ou du contenu malveillant, elle ne se charge pas automatiquement. Vous pouvez l'activer si vous faites confiance à la source.",
-    "disabled_button_enable": "Activer la vue Web"
   }
 }

apps/client/src/translations/ro/translation.json

@@ -2137,5 +2137,55 @@
     "title_few": "{{count}} taburi",
     "title_other": "{{count}} de taburi",
     "more_options": "Mai multe opțiuni"
+  },
+  "setup": {
+    "heading": "Începeți cu Trilium",
+    "new-document": "Nouă bază de cunoștințe",
+    "new-document-description": "Începeți cu o bază de cunoștințe curată și începeți imediat.",
+    "sync-from-desktop": "Conectează o aplicație desktop",
+    "sync-from-desktop-description": "Aveți doar o aplicație Trilium desktop rulând pe un alt dispozitiv. Acest dispozitiv va sincroniza datele de la acea aplicație desktop.",
+    "sync-from-server": "Conectează-te la un server existent",
+    "sync-from-server-description": "Aveți un server Trilium care rulează în altă parte (fie auto-găzduit, fie în cloud). Acest dispozitiv va sincroniza datele de la acel server.",
+    "next": "Următorul",
+    "init-in-progress": "Inițializarea documentului în curs",
+    "redirecting": "Veți fi redirecționat în scurt timp către aplicație.",
+    "title": "Configurare",
+    "sync-from-server-page-description": "Introduceți detaliile serverului dvs. mai jos pentru a vă conecta la spațiul de lucru existent.",
+    "sync-in-progress-title": "Sincronizare în curs",
+    "sync-in-progress-description": "Dispozitivul dvs. este acum conectat și elementele sunt sincronizate.",
+    "button-back": "Înapoi",
+    "button-finish-setup": "Finalizează configurarea",
+    "sync-step-connecting": "Conectare la server",
+    "sync-step-syncing": "Sincronizare date",
+    "sync-step-finalizing": "Setarea opțiunilor",
+    "create-new-document-options-title": "Cum doriți să începeți?",
+    "create-new-document-options-with-demo": "Cu conținut demonstrativ",
+    "create-new-document-options-with-demo-description": "Explorează Trilium cu conținut exemplu.",
+    "create-new-document-options-empty": "Gol",
+    "create-new-document-options-empty-description": "Începeți cu o bază de cunoștințe goală. Puteți importa notițe demo mai târziu.",
+    "create-new-document-title": "Pregătirea bazei de cunoștințe",
+    "create-new-document-description": "Acest proces va dura doar câteva momente.",
+    "sync-illustration-this-device": "Acest dispozitiv",
+    "sync-illustration-desktop-app": "Aplicație desktop",
+    "sync-illustration-server": "Server de sincronizare",
+    "sync-from-desktop-step1": "Deschideți aplicația Trilium Notes pentru desktop.",
+    "sync-from-desktop-step2": "Din meniul Trilium, dați clic pe Opțiuni.",
+    "sync-from-desktop-step3": "Clic pe categoria „Sincronizare”.",
+    "sync-from-desktop-step4": "Schimbați adresa server-ului către: {{- host}} și apăsați „Salvează”.",
+    "sync-from-desktop-step5": "Clic pe butonul „Testează sincronizarea” pentru a verifica dacă conexiunea a fost făcută cu succes.",
+    "sync-from-desktop-final": "După ce ați finalizat acești pași, puteți trece la pasul următor.",
+    "sync-from-desktop-waiting": "Așteptare pentru conexiune...",
+    "advanced-options": "Opțiuni avansate",
+    "sync-failed": "Sincronizare eșuată: {{message}}",
+    "server-host": "Adresa serverului Trilium",
+    "server-host-placeholder": "https://<hostname>:<port>",
+    "server-password": "Parolă",
+    "proxy-server": "Server proxy (opțional)",
+    "proxy-server-placeholder": "https://<hostname>:<port>",
+    "proxy-instruction": " Dacă lăsați setarea proxy necompletată, va fi utilizat proxy-ul sistemului.",
+    "dismiss-error": "Închide mesajul de eroare",
+    "wrong-password": "Parolă greșită. Vă rugăm să încercați din nou.",
+    "language": "Limbă",
+    "continue": "Continuă"
   }
 }

apps/client/src/types.d.ts

@@ -1,4 +1,4 @@
-import { IconRegistry, Locale } from "@triliumnext/commons";
+import { BootstrapDefinition } from "@triliumnext/commons";
 
 import appContext, { AppContext } from "./components/app_context";
 import type FNote from "./entities/fnote";
@@ -15,10 +15,9 @@ interface ElectronProcess {
     platform: string;
 }
 
-interface CustomGlobals {
+interface CustomGlobals extends BootstrapDefinition {
     isDesktop: typeof utils.isDesktop;
     isMobile: typeof utils.isMobile;
-    device: "mobile" | "desktop" | "print";
     getComponentByEl: typeof appContext.getComponentByEl;
     getHeaders: typeof server.getHeaders;
     getReferenceLinkTitle: (href: string) => Promise<string>;
@@ -31,32 +30,7 @@ interface CustomGlobals {
     SEARCH_HELP_TEXT: string;
     activeDialog: JQuery<HTMLElement> | null;
     componentId: string;
-    csrfToken: string;
-    baseApiUrl: string;
-    isProtectedSessionAvailable: boolean;
-    isDev: boolean;
-    isMainWindow: boolean;
-    maxEntityChangeIdAtLoad: number;
-    maxEntityChangeSyncIdAtLoad: number;
-    assetPath: string;
-    appPath: string;
-    instanceName: string;
-    appCssNoteIds: string[];
-    triliumVersion: string;
-    TRILIUM_SAFE_MODE: boolean;
-    platform?: typeof process.platform;
     linter: typeof lint;
-    hasNativeTitleBar: boolean;
-    hasBackgroundEffects: boolean;
-    isElectron: boolean;
-    isRtl: boolean;
-    iconRegistry: IconRegistry;
-    themeCssUrl: string;
-    themeUseNextAsBase?: "next" | "next-light" | "next-dark";
-    iconPackCss: string;
-    headingStyle: "plain" | "underline" | "markdown";
-    layoutOrientation: "vertical" | "horizontal";
-    currentLocale: Locale;
 }
 
 type RequireMethod = (moduleName: string) => any;

apps/client/src/widgets/PromotedAttributes.tsx

@@ -1,6 +1,6 @@
 import "./PromotedAttributes.css";
 
-import { UpdateAttributeResponse } from "@triliumnext/commons";
+import { DefinitionObject, LabelType, UpdateAttributeResponse } from "@triliumnext/commons";
 import clsx from "clsx";
 import { ComponentChild, createElement, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
 import { Dispatch, StateUpdater, useCallback, useEffect, useRef, useState } from "preact/hooks";
@@ -11,7 +11,7 @@ import FNote from "../entities/fnote";
 import { Attribute } from "../services/attribute_parser";
 import attributes from "../services/attributes";
 import { t } from "../services/i18n";
-import { DefinitionObject, extractAttributeDefinitionTypeAndName, LabelType } from "../services/promoted_attribute_definition_parser";
+import { extractAttributeDefinitionTypeAndName } from "../services/promoted_attribute_definition_parser";
 import server from "../services/server";
 import { randomString } from "../services/utils";
 import ws from "../services/ws";

apps/client/src/widgets/attribute_widgets/UserAttributesList.tsx

@@ -1,14 +1,16 @@
-import { useState } from "preact/hooks";
-import FNote from "../../entities/fnote";
 import "./UserAttributesList.css";
-import { useTriliumEvent } from "../react/hooks";
-import attributes from "../../services/attributes";
-import { DefinitionObject } from "../../services/promoted_attribute_definition_parser";
-import { formatDateTime } from "../../utils/formatters";
+
+import type { DefinitionObject } from "@triliumnext/commons";
 import { ComponentChildren, CSSProperties } from "preact";
+import { useState } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import { getReadableTextColor } from "../../services/css_class_manager";
+import { formatDateTime } from "../../utils/formatters";
+import { useTriliumEvent } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
-import { getReadableTextColor } from "../../services/css_class_manager";
 
 interface UserAttributesListProps {
     note: FNote;
@@ -29,7 +31,7 @@ export default function UserAttributesDisplay({ note, ignoredAttributes }: UserA
         <div className="user-attributes">
             {userAttributes?.map(attr => buildUserAttribute(attr))}
         </div>
-    )
+    );
 
 }
 
@@ -46,13 +48,13 @@ function useNoteAttributesWithDefinitions(note: FNote, attributesToIgnore:  stri
 }
 
 function UserAttribute({ attr, children, style }: { attr: AttributeWithDefinitions, children: ComponentChildren, style?: CSSProperties }) {
-    const className = `${attr.type === "label" ? "label" + " " + attr.def.labelType : "relation"}`;
+    const className = attr.type === "label" ? `label ${attr.def.labelType}` : "relation";
 
     return (
         <span key={attr.friendlyName} className={`user-attribute type-${className}`} style={style}>
             {children}
         </span>
-    )
+    );
 }
 
 function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
@@ -61,7 +63,7 @@ function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
     let style: CSSProperties | undefined;
 
     if (attr.type === "label") {
-        let value = attr.value;
+        const value = attr.value;
         switch (attr.def.labelType) {
             case "number":
                 let formattedValue = value;
@@ -102,7 +104,7 @@ function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
         content = <>{defaultLabel}<NoteLink notePath={attr.value} showNoteIcon /></>;
     }
 
-    return <UserAttribute attr={attr} style={style}>{content}</UserAttribute>
+    return <UserAttribute attr={attr} style={style}>{content}</UserAttribute>;
 }
 
 function getAttributesWithDefinitions(note: FNote, attributesToIgnore: string[] = []): AttributeWithDefinitions[] {

apps/client/src/widgets/buttons/global_menu.tsx

@@ -8,7 +8,7 @@ import { CommandNames } from "../../components/app_context";
 import Component from "../../components/component";
 import { ExperimentalFeature, ExperimentalFeatureId, experimentalFeatures, isExperimentalFeatureEnabled, toggleExperimentalFeature } from "../../services/experimental_features";
 import { t } from "../../services/i18n";
-import utils, { dynamicRequire, isElectron, isMobile, reloadFrontendApp } from "../../services/utils";
+import utils, { dynamicRequire, isElectron, isMobile, isStandalone, reloadFrontendApp } from "../../services/utils";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem } from "../react/FormList";
 import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks";
@@ -251,7 +251,7 @@ function ToggleWindowOnTop() {
 function useTriliumUpdateStatus() {
     const [ latestVersion, setLatestVersion ] = useState<string>();
     const [ checkForUpdates ] = useTriliumOptionBool("checkForUpdates");
-    const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, glob.triliumVersion);
+    const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, window.glob.triliumVersion);
 
     async function updateVersionStatus() {
         const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest";
@@ -269,7 +269,7 @@ function useTriliumUpdateStatus() {
     }
 
     useEffect(() => {
-        if (!checkForUpdates) {
+        if (!checkForUpdates || !isStandalone) {
             setLatestVersion(undefined);
             return;
         }

apps/client/src/widgets/collections/board/data.spec.ts

@@ -1,8 +1,9 @@
-import { it, describe, expect } from "vitest";
-import { buildNote } from "../../../test/easy-froca";
-import { getBoardData } from "./data";
+import { describe, expect, it } from "vitest";
+
 import FBranch from "../../../entities/fbranch";
 import froca from "../../../services/froca";
+import { buildNote } from "../../../test/easy-froca";
+import { getBoardData } from "./data";
 
 describe("Board data", () => {
     it("deduplicates cloned notes", async () => {

apps/client/src/widgets/collections/table/columns.tsx

@@ -1,11 +1,12 @@
-import type { CellComponent, ColumnDefinition, EmptyCallback, FormatterParams, ValueBooleanCallback, ValueVoidCallback } from "tabulator-tables";
-import { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
+import { LabelType } from "@triliumnext/commons";
 import { JSX } from "preact";
-import { renderReactWidget } from "../../react/react_utils.jsx";
-import Icon from "../../react/Icon.jsx";
 import { useEffect, useRef, useState } from "preact/hooks";
+import type { CellComponent, ColumnDefinition, EmptyCallback, FormatterParams, ValueBooleanCallback, ValueVoidCallback } from "tabulator-tables";
+
 import froca from "../../../services/froca.js";
+import Icon from "../../react/Icon.jsx";
 import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
+import { renderReactWidget } from "../../react/react_utils.jsx";
 
 type ColumnType = LabelType | "relation";
 
@@ -85,7 +86,7 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
             rowHandle: movableRows,
             width: calculateIndexColumnWidth(rowNumberHint, movableRows),
             formatter: wrapFormatter(({ cell, formatterParams }) => <div>
-                {(formatterParams as RowNumberFormatterParams).movableRows && <><span class="bx bx-dots-vertical-rounded"></span>{" "}</>}
+                {(formatterParams as RowNumberFormatterParams).movableRows && <><span class="bx bx-dots-vertical-rounded" />{" "}</>}
                 {cell.getRow().getPosition(true)}
             </div>),
             formatterParams: { movableRows } satisfies RowNumberFormatterParams
@@ -207,14 +208,14 @@ function wrapEditor(Component: (opts: EditorOpts) => JSX.Element): ((
     editorParams: {},
 ) => HTMLElement | false) {
     return (cell, _, success, cancel, editorParams) => {
-        const elWithParams = <Component cell={cell} success={success} cancel={cancel} editorParams={editorParams} />
+        const elWithParams = <Component cell={cell} success={success} cancel={cancel} editorParams={editorParams} />;
         return renderReactWidget(null, elWithParams)[0];
     };
 }
 
 function NoteFormatter({ cell }: FormatterOpts) {
     const noteId = cell.getValue();
-    const [ note, setNote ] = useState(noteId ? froca.getNoteFromCache(noteId) : null)
+    const [ note, setNote ] = useState(noteId ? froca.getNoteFromCache(noteId) : null);
 
     useEffect(() => {
         if (!noteId || note?.noteId === noteId) return;
@@ -238,5 +239,5 @@ function RelationEditor({ cell, success }: EditorOpts) {
             hideAllButtons: true
         }}
         noteIdChanged={success}
-    />
+    />;
 }

apps/client/src/widgets/collections/table/rows.ts

@@ -1,5 +1,7 @@
+import { LabelType } from "@triliumnext/commons";
+
 import FNote from "../../../entities/fnote.js";
-import { extractAttributeDefinitionTypeAndName, type LabelType } from "../../../services/promoted_attribute_definition_parser.js";
+import { extractAttributeDefinitionTypeAndName } from "../../../services/promoted_attribute_definition_parser.js";
 import type { AttributeDefinitionInformation } from "./columns.js";
 
 export type TableData = {
@@ -49,7 +51,7 @@ export async function buildRowDefinitions(parentNote: FNote, infos: AttributeDef
             isArchived: note.isArchived,
             branchId: branch.branchId,
             colorClass: note.getColorClass()
-        }
+        };
 
         if (note.hasChildren() && (maxDepth < 0 || currentDepth < maxDepth)) {
             const { definitions, rowNumber: subRowNumber } = (await buildRowDefinitions(note, infos, includeArchived, maxDepth, currentDepth + 1));

apps/client/src/widgets/dialogs/about.tsx

@@ -1,13 +1,14 @@
-import Modal from "../react/Modal.js";
+import type { AppInfo } from "@triliumnext/commons";
+import type { CSSProperties } from "preact/compat";
+import { useState } from "preact/hooks";
+
 import { t } from "../../services/i18n.js";
-import { formatDateTime } from "../../utils/formatters.js";
+import openService from "../../services/open.js";
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
-import openService from "../../services/open.js";
-import { useState } from "preact/hooks";
-import type { CSSProperties } from "preact/compat";
-import type { AppInfo } from "@triliumnext/commons";
+import { formatDateTime } from "../../utils/formatters.js";
 import { useTriliumEvent } from "../react/hooks.jsx";
+import Modal from "../react/Modal.js";
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
@@ -54,15 +55,15 @@ export default function AboutDialog() {
                     <tr>
                         <th>{t("about.build_revision")}</th>
                         <td className="selectable-text">
-                            {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak}>{appInfo.buildRevision}</a>}
+                            {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak} rel="noreferrer">{appInfo.buildRevision}</a>}
                         </td>
                     </tr>
-                    <tr>
+                    { appInfo?.dataDirectory && <tr>
                         <th>{t("about.data_directory")}</th>
                         <td className="data-directory">
                             {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} style={forceWordBreak} />)}
                         </td>
-                    </tr>
+                    </tr>}
                 </tbody>
             </table>
         </Modal>
@@ -76,8 +77,8 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
             openService.openDirectory(directory);
         };
 
-        return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>
-    } else {
-        return <span className="selectable-text" style={style}>{directory}</span>;
-    }
+        return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>;
+    } 
+    return <span className="selectable-text" style={style}>{directory}</span>;
+    
 }

apps/client/src/widgets/dialogs/recent_changes.tsx

@@ -27,6 +27,7 @@ export default function RecentChangesDialog() {
     });
 
     useEffect(() => {
+        if (!ancestorNoteId) return;
         server.get<RecentChangeRow[]>(`recent-changes/${ancestorNoteId}`)
             .then(async (recentChanges) => {
                 // preload all notes into cache

apps/client/src/widgets/dialogs/revisions.tsx

@@ -284,7 +284,7 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
     }
 }
 
-function RevisionContentText({ content }: { content: string | Buffer<ArrayBufferLike> | undefined }) {
+function RevisionContentText({ content }: { content: string | Uint8Array | undefined }) {
     const contentRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
         if (contentRef.current?.querySelector("span.math-tex")) {
@@ -296,7 +296,7 @@ function RevisionContentText({ content }: { content: string | Buffer<ArrayBuffer
 
 function RevisionContentDiff({ noteContent, itemContent, itemType }: {
     noteContent?: string,
-    itemContent: string | Buffer<ArrayBufferLike> | undefined,
+    itemContent: string | Uint8Array | undefined,
     itemType: string
 }) {
     const contentRef = useRef<HTMLDivElement>(null);

apps/client/src/widgets/launch_bar/LauncherContainer.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useLayoutEffect, useState } from "preact/hooks";
 
 import FNote from "../../entities/fnote";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import froca from "../../services/froca";
 import { isDesktop, isMobile } from "../../services/utils";
 import TabSwitcher from "../mobile_widgets/TabSwitcher";
@@ -13,7 +12,6 @@ import HistoryNavigationButton from "./HistoryNavigation";
 import { LaunchBarContext } from "./launch_bar_widgets";
 import { CommandButton, CustomWidget, NoteLauncher, QuickSearchLauncherWidget, ScriptLauncher, TodayLauncher } from "./LauncherDefinitions";
 import ProtectedSessionStatusWidget from "./ProtectedSessionStatusWidget";
-import SidebarChatButton from "./SidebarChatButton";
 import SpacerWidget from "./SpacerWidget";
 import SyncStatus from "./SyncStatus";
 
@@ -100,8 +98,6 @@ function initBuiltinWidget(note: FNote, isHorizontalLayout: boolean) {
             return <QuickSearchLauncherWidget />;
         case "mobileTabSwitcher":
             return <TabSwitcher />;
-        case "sidebarChat":
-            return isExperimentalFeatureEnabled("llm") ? <SidebarChatButton /> : undefined;
         default:
             console.warn(`Unrecognized builtin widget ${builtinWidget} for launcher ${note.noteId} "${note.title}"`);
     }

apps/client/src/widgets/launch_bar/SidebarChatButton.tsx

@@ -1,24 +0,0 @@
-import { useCallback } from "preact/hooks";
-
-import appContext from "../../components/app_context";
-import { t } from "../../services/i18n";
-import { LaunchBarActionButton } from "./launch_bar_widgets";
-
-/**
- * Launcher button to open the sidebar (which contains the chat).
- * The chat widget is always visible in the sidebar for non-chat notes.
- */
-export default function SidebarChatButton() {
-    const handleClick = useCallback(() => {
-        // Open right pane if hidden, or toggle it if visible
-        appContext.triggerEvent("toggleRightPane", {});
-    }, []);
-
-    return (
-        <LaunchBarActionButton
-            icon="bx bx-message-square-dots"
-            text={t("sidebar_chat.launcher_title")}
-            onClick={handleClick}
-        />
-    );
-}

apps/client/src/widgets/layout/NoteTypeSwitcher.tsx

@@ -5,7 +5,6 @@ import { useEffect, useMemo, useState } from "preact/hooks";
 
 import FNote from "../../entities/fnote";
 import attributes from "../../services/attributes";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import froca from "../../services/froca";
 import { t } from "../../services/i18n";
 import { NOTE_TYPES, NoteTypeMapping } from "../../services/note_types";
@@ -29,7 +28,6 @@ export default function NoteTypeSwitcher() {
         const restNoteTypes: NoteTypeMapping[] = [];
         for (const noteType of NOTE_TYPES) {
             if (noteType.reserved || noteType.static || noteType.type === "book") continue;
-            if (noteType.type === "llmChat" && !isExperimentalFeatureEnabled("llm")) continue;
             if (SWITCHER_PINNED_NOTE_TYPES.has(noteType.type)) {
                 pinnedNoteTypes.push(noteType);
             } else {

apps/client/src/widgets/layout/StandaloneWarningBar.tsx

@@ -0,0 +1,26 @@
+import { isMobile } from "../../services/utils";
+import Admonition from "../react/Admonition";
+
+export default function StandaloneWarningBar() {
+    return (
+        <div
+            className="standalone-warning-bar"
+            style={{
+                contain: "none"
+            }}
+        >
+            <Admonition
+                type="caution"
+                style={{
+                    margin: 0,
+                    fontSize: "0.8em"
+                }}
+            >
+                {isMobile()
+                    ? "Running Trilium standalone. Beware of data loss and other issues."
+                    : "You are running Trilium in standalone mode. Some features are not available, and you may experience issues or data loss. Use the desktop application or self-hosted server for the best experience."
+                }
+            </Admonition>
+        </div>
+    );
+}

apps/client/src/widgets/note_types.tsx

@@ -12,7 +12,7 @@ import { TypeWidgetProps } from "./type_widgets/type_widget";
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
  * for protected session or attachment information.
  */
-export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code" | "llmChat"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "sqlConsole" | "llmChat";
+export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "sqlConsole";
 
 export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element | undefined);
 type NoteTypeView = () => (Promise<{ default: TypeWidget } | TypeWidget> | TypeWidget);
@@ -147,11 +147,5 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         className: "note-detail-spreadsheet",
         printable: true,
         isFullHeight: true
-    },
-    llmChat: {
-        view: () => import("./type_widgets/llm_chat/LlmChat"),
-        className: "note-detail-llm-chat",
-        printable: true,
-        isFullHeight: true
     }
 };

apps/client/src/widgets/react/Admonition.tsx

@@ -1,15 +1,16 @@
-import { ComponentChildren } from "preact";
+import { HTML } from "mermaid/dist/diagram-api/types.js";
+import { ComponentChildren, HTMLAttributes } from "preact";
 
-interface AdmonitionProps {
+interface AdmonitionProps extends Pick<HTMLAttributes<HTMLDivElement>, "style"> {
     type: "warning" | "note" | "caution";
     children: ComponentChildren;
     className?: string;
 }
 
-export default function Admonition({ type, children, className }: AdmonitionProps) {
+export default function Admonition({ type, children, className, ...props }: AdmonitionProps) {
     return (
-        <div className={`admonition ${type} ${className}`} role="alert">
+        <div className={`admonition ${type} ${className}`} role="alert" {...props}>
             {children}
         </div>
-    )
+    );
 }

apps/client/src/widgets/react/Collapsible.tsx

@@ -43,13 +43,13 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
                     setFullyExpanded(true);
                 }, 250);
                 return () => clearTimeout(timeout);
-            } else {
-                setFullyExpanded(true);
-            }
+            } 
+            setFullyExpanded(true);
+            
         } else {
             setFullyExpanded(false);
         }
-    }, [expanded, transitionEnabled])
+    }, [expanded, transitionEnabled]);
 
     return (
         <div className={clsx("collapsible", className, {
@@ -58,7 +58,10 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
         })}>
             <button
                 className="collapsible-title tn-low-profile"
-                onClick={() => setExpanded(!expanded)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setExpanded(!expanded);
+                }}
                 aria-expanded={expanded}
                 aria-controls={contentId}
             >

apps/client/src/widgets/react/FormDropdownList.tsx

@@ -5,27 +5,16 @@ interface FormDropdownList<T> extends Omit<DropdownProps, "children"> {
     values: T[];
     keyProperty: keyof T;
     titleProperty: keyof T;
-    /** Property to show as a small suffix next to the title */
-    titleSuffixProperty?: keyof T;
     descriptionProperty?: keyof T;
     currentValue: string;
     onChange(newValue: string): void;
 }
 
-export default function FormDropdownList<T>({ values, keyProperty, titleProperty, titleSuffixProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList<T>) {
+export default function FormDropdownList<T>({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList<T>) {
     const currentValueData = values.find(value => value[keyProperty] === currentValue);
 
-    const renderTitle = (item: T) => {
-        const title = item[titleProperty] as string;
-        const suffix = titleSuffixProperty ? item[titleSuffixProperty] as string : null;
-        if (suffix) {
-            return <>{title} <small>{suffix}</small></>;
-        }
-        return title;
-    };
-
     return (
-        <Dropdown text={currentValueData ? renderTitle(currentValueData) : ""} {...restProps}>
+        <Dropdown text={currentValueData?.[titleProperty] ?? ""} {...restProps}>
             {values.map(item => (
                 <FormListItem
                     onClick={() => onChange(item[keyProperty] as string)}
@@ -33,9 +22,9 @@ export default function FormDropdownList<T>({ values, keyProperty, titleProperty
                     description={descriptionProperty && item[descriptionProperty] as string}
                     selected={currentValue === item[keyProperty]}
                 >
-                    {renderTitle(item)}
+                    {item[titleProperty] as string}
                 </FormListItem>
             ))}
         </Dropdown>
     )
-}
+}

apps/client/src/widgets/react/FormGroup.tsx

@@ -1,5 +1,6 @@
 import { cloneElement, ComponentChildren, RefObject, VNode } from "preact";
 import { CSSProperties } from "preact/compat";
+
 import { useUniqueName } from "./hooks";
 
 interface FormGroupProps {
@@ -8,6 +9,7 @@ interface FormGroupProps {
     label?: string;
     title?: string;
     className?: string;
+    error?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     children: VNode<any>;
     description?: string | ComponentChildren;
@@ -15,7 +17,7 @@ interface FormGroupProps {
     style?: CSSProperties;
 }
 
-export default function FormGroup({ name, label, title, className, children, description, labelRef, disabled, style }: FormGroupProps) {
+export default function FormGroup({ name, label, title, className, children, description, labelRef, disabled, style, error }: FormGroupProps) {
     const id = useUniqueName(name);
     const childWithId = cloneElement(children, { id });
 
@@ -26,6 +28,7 @@ export default function FormGroup({ name, label, title, className, children, des
 
             {childWithId}
 
+            {error && <div><small className="form-text text-danger">{error}</small></div>}
             {description && <div><small className="form-text">{description}</small></div>}
         </div>
     );
@@ -41,4 +44,4 @@ export function FormMultiGroup({ label, children }: { label: string, children: C
             {children}
         </div>
     );
-}
+}

apps/client/src/widgets/react/RawHtml.tsx

@@ -1,4 +1,3 @@
-import DOMPurify from "dompurify";
 import type { CSSProperties, HTMLProps, RefObject } from "preact/compat";
 
 type HTMLElementLike = string | HTMLElement | JQuery<HTMLElement>;
@@ -15,16 +14,16 @@ export default function RawHtml({containerRef, ...props}: RawHtmlProps & { conta
 }
 
 export function RawHtmlBlock({containerRef, ...props}: RawHtmlProps & { containerRef?: RefObject<HTMLDivElement>}) {
-    return <div ref={containerRef} {...getProps(props)} />;
+    return <div ref={containerRef} {...getProps(props)} />
 }
 
 function getProps({ className, html, style, onClick }: RawHtmlProps) {
     return {
-        className,
+        className: className,
         dangerouslySetInnerHTML: getHtml(html ?? ""),
         style,
         onClick
-    };
+    }
 }
 
 export function getHtml(html: string | HTMLElement | JQuery<HTMLElement>) {
@@ -40,19 +39,3 @@ export function getHtml(html: string | HTMLElement | JQuery<HTMLElement>) {
         __html: html as string
     };
 }
-
-/**
- * Renders HTML content sanitized via DOMPurify to prevent XSS.
- * Use this instead of {@link RawHtml} when the HTML originates from
- * untrusted sources (e.g. LLM responses, user-generated markdown).
- */
-export function SanitizedHtml({ className, html, style }: { className?: string; html: string; style?: CSSProperties }) {
-    return (
-        <div
-            className={className}
-            style={style}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}
-        />
-    );
-}

apps/client/src/widgets/react/hooks.tsx

@@ -104,7 +104,7 @@ export interface SavedData {
 
 export function useEditorSpacedUpdate({ note, noteType, noteContext, getData, onContentChange, dataSaved, updateInterval }: {
     noteType: NoteType;
-    note: FNote | null | undefined,
+    note: FNote,
     noteContext: NoteContext | null | undefined,
     getData: () => Promise<SavedData | undefined> | SavedData | undefined,
     onContentChange: (newContent: string) => void,
@@ -118,8 +118,8 @@ export function useEditorSpacedUpdate({ note, noteType, noteContext, getData, on
         return async () => {
             const data = await getData();
 
-            // for read only notes, or if note is not yet available (e.g. lazy creation)
-            if (data === undefined || !note || note.type !== noteType) return;
+            // for read only notes
+            if (data === undefined || note.type !== noteType) return;
 
             protected_session_holder.touchProtectedSessionIfNecessary(note);
 
@@ -138,7 +138,7 @@ export function useEditorSpacedUpdate({ note, noteType, noteContext, getData, on
 
     // React to note/blob changes.
     useEffect(() => {
-        if (!blob || !note) return;
+        if (!blob) return;
         noteSavedDataStore.set(note.noteId, blob.content);
         spacedUpdate.allowUpdateWithoutChange(() => onContentChange(blob.content));
     }, [ blob ]);

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -7,7 +7,6 @@ import branches from "../../services/branches";
 import dialog from "../../services/dialog";
 import { getAvailableLocales, t } from "../../services/i18n";
 import mime_types from "../../services/mime_types";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import { NOTE_TYPES } from "../../services/note_types";
 import protected_session from "../../services/protected_session";
 import server from "../../services/server";
@@ -73,7 +72,7 @@ export function NoteTypeDropdownContent({ currentNoteType, currentNoteMime, note
     noCodeNotes?: boolean;
 }) {
     const mimeTypes = useMimeTypes();
-    const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static && (nt.type !== "llmChat" || isExperimentalFeatureEnabled("llm"))), []);
+    const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []);
     const changeNoteType = useCallback(async (type: NoteType, mime?: string) => {
         if (!note || (type === currentNoteType && mime === currentNoteMime)) {
             return;

apps/client/src/widgets/ribbon/NoteActions.tsx

@@ -85,7 +85,7 @@ export function NoteContextMenu({ note, noteContext, itemsAtStart, itemsNearNote
     );
     const isElectron = getIsElectron();
     const isMac = getIsMac();
-    const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "spreadsheet", "llmChat"].includes(noteType);
+    const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "spreadsheet"].includes(noteType);
     const isSearchOrBook = ["search", "book"].includes(noteType);
     const isHelpPage = note.noteId.startsWith("_help");
     const [syncServerHost] = useTriliumOption("syncServerHost");

apps/client/src/widgets/sidebar/RightPanelContainer.tsx

@@ -7,7 +7,6 @@ import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import appContext from "../../components/app_context";
 import { WidgetsByParent } from "../../services/bundle";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import { t } from "../../services/i18n";
 import options from "../../services/options";
 import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
@@ -20,7 +19,6 @@ import PdfAttachments from "./pdf/PdfAttachments";
 import PdfLayers from "./pdf/PdfLayers";
 import PdfPages from "./pdf/PdfPages";
 import RightPanelWidget from "./RightPanelWidget";
-import SidebarChat from "./SidebarChat";
 import TableOfContents from "./TableOfContents";
 
 const MIN_WIDTH_PERCENT = 5;
@@ -93,11 +91,6 @@ function useItems(rightPaneVisible: boolean, widgetsByParent: WidgetsByParent) {
             el: <HighlightsList />,
             enabled: noteType === "text" && highlightsList.length > 0,
         },
-        {
-            el: <SidebarChat />,
-            enabled: noteType !== "llmChat" && isExperimentalFeatureEnabled("llm"),
-            position: 1000
-        },
         ...widgetsByParent.getLegacyWidgets("right-pane").map((widget) => ({
             el: <CustomLegacyWidget key={widget._noteId} originalWidget={widget as LegacyRightPanelWidget} />,
             enabled: true,

apps/client/src/widgets/sidebar/RightPanelWidget.tsx

@@ -51,7 +51,7 @@ export default function RightPanelWidget({ id, title, buttons, children, contain
             >
                 <ActionButton icon="bx bx-chevron-down" text="" />
                 <div class="card-header-title">{title}</div>
-                <div class="card-header-buttons" onClick={e => e.stopPropagation()}>
+                <div class="card-header-buttons">
                     {buttons}
                     {contextMenuItems && (
                         <ActionButton

apps/client/src/widgets/sidebar/SidebarChat.css

@@ -1,113 +0,0 @@
-/* Sidebar Chat Widget Styles */
-
-.sidebar-chat-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0; /* Allow shrinking in flex context */
-    overflow: hidden; /* Contain children within available space */
-}
-
-.sidebar-chat-container .llm-chat-input-form {
-    flex-shrink: 0; /* Keep input bar from shrinking */
-
-    .llm-chat-input {
-        font-size: 0.9em;
-        padding: 0.5em;
-    }
-}
-
-.sidebar-chat-messages {
-    flex: 1;
-    min-height: 0; /* Allow flex shrinking for scroll containment */
-    overflow-y: auto;
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-/* Reuse llm-chat-message styles but make them more compact */
-.sidebar-chat-messages .llm-chat-message-wrapper {
-    margin-top: 0;
-    max-width: 100%;
-}
-
-.sidebar-chat-messages .llm-chat-message {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.9rem;
-}
-
-.sidebar-chat-messages .llm-chat-message-role {
-    font-size: 0.75rem;
-}
-
-.sidebar-chat-messages .llm-chat-tool-activity {
-    font-size: 0.85rem;
-    padding: 0.375rem 0.75rem;
-    margin-bottom: 0;
-    max-width: 100%;
-}
-
-/* Make the sidebar chat widget grow to fill available space when expanded */
-#right-pane .widget.grow:not(.collapsed) {
-    flex: 1;
-    flex-shrink: 1; /* Override flex-shrink: 0 from main styles */
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-#right-pane .widget.grow:not(.collapsed) .body-wrapper {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden; /* Override overflow: auto from main styles */
-}
-
-#right-pane .widget.grow:not(.collapsed) .card-body {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden; /* Override overflow: auto - let child handle scrolling */
-    display: flex;
-    flex-direction: column;
-}
-
-/* Compact markdown in sidebar */
-.sidebar-chat-messages .llm-chat-markdown {
-    font-size: 0.9rem;
-    line-height: 1.5;
-}
-
-.sidebar-chat-messages .llm-chat-markdown p {
-    margin: 0 0 0.5em 0;
-}
-
-.sidebar-chat-messages .llm-chat-markdown pre {
-    padding: 0.5rem;
-    font-size: 0.8rem;
-}
-
-.sidebar-chat-messages .llm-chat-markdown code {
-    font-size: 0.85em;
-}
-
-.sidebar-chat-history-item-content {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-
-.sidebar-chat-history-item-content span,
-.sidebar-chat-history-item-content strong {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.sidebar-chat-history-date {
-    font-size: 0.75rem;
-    color: var(--muted-text-color);
-    margin-top: 0.125rem;
-}

apps/client/src/widgets/sidebar/SidebarChat.tsx

@@ -1,319 +0,0 @@
-import "./SidebarChat.css";
-
-import type { Dropdown as BootstrapDropdown } from "bootstrap";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-
-import dateNoteService, { type RecentLlmChat } from "../../services/date_notes.js";
-import { t } from "../../services/i18n.js";
-import server from "../../services/server.js";
-import { formatDateTime } from "../../utils/formatters";
-import ActionButton from "../react/ActionButton.js";
-import Dropdown from "../react/Dropdown.js";
-import { FormListItem } from "../react/FormList.js";
-import { useActiveNoteContext, useEditorSpacedUpdate, useNote, useNoteProperty } from "../react/hooks.js";
-import NoItems from "../react/NoItems.js";
-import ChatInputBar from "../type_widgets/llm_chat/ChatInputBar.js";
-import ChatMessage from "../type_widgets/llm_chat/ChatMessage.js";
-import type { LlmChatContent } from "../type_widgets/llm_chat/llm_chat_types.js";
-import { useLlmChat } from "../type_widgets/llm_chat/useLlmChat.js";
-import RightPanelWidget from "./RightPanelWidget.js";
-
-/**
- * Sidebar chat widget that appears in the right panel.
- * Uses a hidden LLM chat note for persistence across all notes.
- * The same chat persists when switching between notes.
- */
-export default function SidebarChat() {
-    const [chatNoteId, setChatNoteId] = useState<string | null>(null);
-    const [recentChats, setRecentChats] = useState<RecentLlmChat[]>([]);
-    const spacedUpdateRef = useRef<{ scheduleUpdate: () => void }>(null);
-    const historyDropdownRef = useRef<BootstrapDropdown | null>(null);
-
-    // Get the current active note context
-    const { noteId: activeNoteId, note: activeNote } = useActiveNoteContext();
-
-    // Reactively watch the chat note's title (updates via WebSocket sync after auto-rename)
-    const chatNote = useNote(chatNoteId);
-    const chatTitle = useNoteProperty(chatNote, "title") || t("sidebar_chat.title");
-
-    // Use shared chat hook with sidebar-specific options
-    const chat = useLlmChat(
-        // onMessagesChange - trigger save
-        () => spacedUpdateRef.current?.scheduleUpdate(),
-        { defaultEnableNoteTools: true, supportsExtendedThinking: true }
-    );
-
-    // Ref to access chat methods in callbacks without triggering re-runs
-    const chatRef = useRef(chat);
-    chatRef.current = chat;
-
-    // Persistence via useEditorSpacedUpdate (same mechanism as the LlmChat type widget).
-    // When chatNote is null (before lazy creation), saves are no-ops.
-    const spacedUpdate = useEditorSpacedUpdate({
-        note: chatNote,
-        noteType: "llmChat",
-        noteContext: null,
-        getData: () => {
-            const content = chatRef.current.getContent();
-            return { content: JSON.stringify(content) };
-        },
-        onContentChange: (content) => {
-            if (!content) {
-                chatRef.current.clearMessages();
-                return;
-            }
-            try {
-                const parsed: LlmChatContent = JSON.parse(content);
-                chatRef.current.loadFromContent(parsed);
-            } catch (e) {
-                console.error("Failed to parse LLM chat content:", e);
-                chatRef.current.clearMessages();
-            }
-        }
-    });
-    spacedUpdateRef.current = spacedUpdate;
-
-    // Update chat context when active note changes
-    useEffect(() => {
-        chat.setContextNoteId(activeNoteId ?? undefined);
-    }, [activeNoteId, chat.setContextNoteId]);
-
-    // Sync chatNoteId into the hook for auto-title generation
-    useEffect(() => {
-        chat.setChatNoteId(chatNoteId ?? undefined);
-    }, [chatNoteId, chat.setChatNoteId]);
-
-    // Load the most recent chat on mount (runs once)
-    useEffect(() => {
-        let cancelled = false;
-
-        const loadMostRecentChat = async () => {
-            try {
-                const existingChat = await dateNoteService.getMostRecentLlmChat();
-
-                if (cancelled) return;
-
-                if (existingChat) {
-                    setChatNoteId(existingChat.noteId);
-                } else {
-                    // No existing chat - will create on first message
-                    setChatNoteId(null);
-                    chatRef.current.clearMessages();
-                }
-            } catch (err) {
-                console.error("Failed to load sidebar chat:", err);
-            }
-        };
-
-        loadMostRecentChat();
-
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-
-    // Custom submit handler that ensures chat note exists first
-    const handleSubmit = useCallback(async (e: Event) => {
-        e.preventDefault();
-        if (!chat.input.trim() || chat.isStreaming) return;
-
-        // Ensure chat note exists before sending (lazy creation)
-        let noteId = chatNoteId;
-        if (!noteId) {
-            try {
-                const note = await dateNoteService.getOrCreateLlmChat();
-                if (note) {
-                    setChatNoteId(note.noteId);
-                    noteId = note.noteId;
-                }
-            } catch (err) {
-                console.error("Failed to create sidebar chat:", err);
-                return;
-            }
-        }
-
-        if (!noteId) {
-            console.error("Cannot send message: no chat note available");
-            return;
-        }
-
-        // Ensure the hook has the chatNoteId before submitting (state update from
-        // setChatNoteId above won't be visible until next render)
-        chat.setChatNoteId(noteId);
-
-        // Delegate to shared handler
-        await chat.handleSubmit(e);
-    }, [chatNoteId, chat]);
-
-    const handleKeyDown = useCallback((e: KeyboardEvent) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            handleSubmit(e);
-        }
-    }, [handleSubmit]);
-
-    const handleNewChat = useCallback(async () => {
-        // Save any pending changes before switching
-        await spacedUpdate.updateNowIfNecessary();
-
-        try {
-            const note = await dateNoteService.createLlmChat();
-            if (note) {
-                setChatNoteId(note.noteId);
-                chatRef.current.clearMessages();
-            }
-        } catch (err) {
-            console.error("Failed to create new chat:", err);
-        }
-    }, [spacedUpdate]);
-
-    const handleSaveChat = useCallback(async () => {
-        if (!chatNoteId) return;
-
-        // Save any pending changes before moving the chat
-        await spacedUpdate.updateNowIfNecessary();
-
-        try {
-            await server.post("special-notes/save-llm-chat", { llmChatNoteId: chatNoteId });
-            // Create a new empty chat after saving
-            const note = await dateNoteService.createLlmChat();
-            if (note) {
-                setChatNoteId(note.noteId);
-                chatRef.current.clearMessages();
-            }
-        } catch (err) {
-            console.error("Failed to save chat to permanent location:", err);
-        }
-    }, [chatNoteId, spacedUpdate]);
-
-    const loadRecentChats = useCallback(async () => {
-        try {
-            const chats = await dateNoteService.getRecentLlmChats(10);
-            setRecentChats(chats);
-        } catch (err) {
-            console.error("Failed to load recent chats:", err);
-        }
-    }, []);
-
-    const handleSelectChat = useCallback(async (noteId: string) => {
-        historyDropdownRef.current?.hide();
-
-        if (noteId === chatNoteId) return;
-
-        // Save any pending changes before switching
-        await spacedUpdate.updateNowIfNecessary();
-
-        setChatNoteId(noteId);
-    }, [chatNoteId, spacedUpdate]);
-
-    return (
-        <RightPanelWidget
-            id="sidebar-chat"
-            title={chatTitle}
-            grow
-            buttons={
-                <>
-                    <ActionButton
-                        icon="bx bx-plus"
-                        text={t("sidebar_chat.new_chat")}
-                        onClick={handleNewChat}
-                    />
-                    <Dropdown
-                        text=""
-                        buttonClassName="bx bx-history"
-                        title={t("sidebar_chat.history")}
-                        iconAction
-                        hideToggleArrow
-                        dropdownContainerClassName="tn-dropdown-menu-scrollable"
-                        dropdownOptions={{ popperConfig: { strategy: "fixed" } }}
-                        dropdownRef={historyDropdownRef}
-                        onShown={loadRecentChats}
-                    >
-                        {recentChats.length === 0 ? (
-                            <FormListItem disabled>
-                                {t("sidebar_chat.no_chats")}
-                            </FormListItem>
-                        ) : (
-                            recentChats.map(chatItem => (
-                                <FormListItem
-                                    key={chatItem.noteId}
-                                    icon="bx bx-message-square-dots"
-                                    className={chatItem.noteId === chatNoteId ? "active" : ""}
-                                    onClick={() => handleSelectChat(chatItem.noteId)}
-                                >
-                                    <div className="sidebar-chat-history-item-content">
-                                        {chatItem.noteId === chatNoteId
-                                            ? <strong>{chatItem.title}</strong>
-                                            : <span>{chatItem.title}</span>}
-                                        <span className="sidebar-chat-history-date">
-                                            {formatDateTime(new Date(chatItem.dateModified), "short", "short")}
-                                        </span>
-                                    </div>
-                                </FormListItem>
-                            ))
-                        )}
-                    </Dropdown>
-                    <ActionButton
-                        icon="bx bx-save"
-                        text={t("sidebar_chat.save_chat")}
-                        onClick={handleSaveChat}
-                        disabled={chat.messages.length === 0}
-                    />
-                </>
-            }
-        >
-            <div className="sidebar-chat-container">
-                <div className="sidebar-chat-messages">
-                    {chat.messages.length === 0 && !chat.isStreaming && (
-                        <NoItems
-                            icon="bx bx-conversation"
-                            text={t("sidebar_chat.empty_state")}
-                        />
-                    )}
-                    {chat.messages.map(msg => (
-                        <ChatMessage key={msg.id} message={msg} />
-                    ))}
-                    {chat.toolActivity && !chat.streamingThinking && (
-                        <div className="llm-chat-tool-activity">
-                            <span className="llm-chat-tool-spinner" />
-                            {chat.toolActivity}
-                        </div>
-                    )}
-                    {chat.isStreaming && chat.streamingThinking && (
-                        <ChatMessage
-                            message={{
-                                id: "streaming-thinking",
-                                role: "assistant",
-                                content: chat.streamingThinking,
-                                createdAt: new Date().toISOString(),
-                                type: "thinking"
-                            }}
-                            isStreaming
-                        />
-                    )}
-                    {chat.isStreaming && chat.streamingContent && (
-                        <ChatMessage
-                            message={{
-                                id: "streaming",
-                                role: "assistant",
-                                content: chat.streamingContent,
-                                createdAt: new Date().toISOString(),
-                                citations: chat.pendingCitations.length > 0 ? chat.pendingCitations : undefined
-                            }}
-                            isStreaming
-                        />
-                    )}
-                    <div ref={chat.messagesEndRef} />
-                </div>
-                <ChatInputBar
-                    chat={chat}
-                    rows={2}
-                    activeNoteId={activeNoteId ?? undefined}
-                    activeNoteTitle={activeNote?.title}
-                    onSubmit={handleSubmit}
-                    onKeyDown={handleKeyDown}
-                />
-            </div>
-        </RightPanelWidget>
-    );
-}

apps/client/src/widgets/type_widgets/ContentWidget.tsx

@@ -14,12 +14,11 @@ import SyncOptions from "./options/sync";
 import OtherSettings from "./options/other";
 import InternationalizationOptions from "./options/i18n";
 import AdvancedSettings from "./options/advanced";
-import LlmSettings from "./options/llm";
 import "./ContentWidget.css";
 import { t } from "../../services/i18n";
 import BackendLog from "./code/BackendLog";
 
-export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced" | "_optionsLlm";
+export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
 
 const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (props: TypeWidgetProps) => JSX.Element> = {
     _optionsAppearance: AppearanceSettings,
@@ -36,7 +35,6 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (props: TypeWidgetPro
     _optionsOther: OtherSettings,
     _optionsLocalization: InternationalizationOptions,
     _optionsAdvanced: AdvancedSettings,
-    _optionsLlm: LlmSettings,
     _backendLog: BackendLog
 }
 

apps/client/src/widgets/type_widgets/llm_chat/ChatInputBar.tsx

@@ -1,238 +0,0 @@
-import type { RefObject } from "preact";
-import { useState, useCallback } from "preact/hooks";
-
-import { t } from "../../../services/i18n.js";
-import ActionButton from "../../react/ActionButton.js";
-import Button from "../../react/Button.js";
-import Dropdown from "../../react/Dropdown.js";
-import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../../react/FormList.js";
-import type { UseLlmChatReturn } from "./useLlmChat.js";
-import AddProviderModal, { type LlmProviderConfig } from "../options/llm/AddProviderModal.js";
-import options from "../../../services/options.js";
-
-/** Format token count with thousands separators */
-function formatTokenCount(tokens: number): string {
-    return tokens.toLocaleString();
-}
-
-interface ChatInputBarProps {
-    /** The chat hook result */
-    chat: UseLlmChatReturn;
-    /** Number of rows for the textarea (default: 3) */
-    rows?: number;
-    /** Current active note ID (for note context toggle) */
-    activeNoteId?: string;
-    /** Current active note title (for note context toggle) */
-    activeNoteTitle?: string;
-    /** Custom submit handler (overrides chat.handleSubmit) */
-    onSubmit?: (e: Event) => void;
-    /** Custom key down handler (overrides chat.handleKeyDown) */
-    onKeyDown?: (e: KeyboardEvent) => void;
-    /** Callback when web search toggle changes */
-    onWebSearchChange?: () => void;
-    /** Callback when note tools toggle changes */
-    onNoteToolsChange?: () => void;
-    /** Callback when extended thinking toggle changes */
-    onExtendedThinkingChange?: () => void;
-    /** Callback when model changes */
-    onModelChange?: (model: string) => void;
-}
-
-export default function ChatInputBar({
-    chat,
-    rows = 3,
-    activeNoteId,
-    activeNoteTitle,
-    onSubmit,
-    onKeyDown,
-    onWebSearchChange,
-    onNoteToolsChange,
-    onExtendedThinkingChange,
-    onModelChange
-}: ChatInputBarProps) {
-    const [showAddProviderModal, setShowAddProviderModal] = useState(false);
-
-    const handleSubmit = onSubmit ?? chat.handleSubmit;
-    const handleKeyDown = onKeyDown ?? chat.handleKeyDown;
-
-    const handleWebSearchToggle = (newValue: boolean) => {
-        chat.setEnableWebSearch(newValue);
-        onWebSearchChange?.();
-    };
-
-    const handleNoteToolsToggle = (newValue: boolean) => {
-        chat.setEnableNoteTools(newValue);
-        onNoteToolsChange?.();
-    };
-
-    const handleExtendedThinkingToggle = (newValue: boolean) => {
-        chat.setEnableExtendedThinking(newValue);
-        onExtendedThinkingChange?.();
-    };
-
-    const handleModelSelect = (model: string) => {
-        chat.setSelectedModel(model);
-        onModelChange?.(model);
-    };
-
-    const handleNoteContextToggle = () => {
-        if (chat.contextNoteId) {
-            chat.setContextNoteId(undefined);
-        } else if (activeNoteId) {
-            chat.setContextNoteId(activeNoteId);
-        }
-    };
-
-    const handleAddProvider = useCallback(async (provider: LlmProviderConfig) => {
-        // Get current providers and add the new one
-        const currentProviders = options.getJson("llmProviders") || [];
-        const newProviders = [...currentProviders, provider];
-        await options.save("llmProviders", JSON.stringify(newProviders));
-        // Refresh models to pick up the new provider
-        chat.refreshModels();
-    }, [chat]);
-
-    const isNoteContextEnabled = !!chat.contextNoteId && !!activeNoteId;
-
-    const currentModel = chat.availableModels.find(m => m.id === chat.selectedModel);
-    const currentModels = chat.availableModels.filter(m => !m.isLegacy);
-    const legacyModels = chat.availableModels.filter(m => m.isLegacy);
-    const contextWindow = currentModel?.contextWindow || 200000;
-    const percentage = Math.min((chat.lastPromptTokens / contextWindow) * 100, 100);
-    const isWarning = percentage > 75;
-    const isCritical = percentage > 90;
-    const pieColor = isCritical ? "var(--danger-color, #d9534f)" : isWarning ? "var(--warning-color, #f0ad4e)" : "var(--main-selection-color, #007bff)";
-
-    // Show setup prompt if no provider is configured
-    if (!chat.isCheckingProvider && !chat.hasProvider) {
-        return (
-            <div className="llm-chat-no-provider">
-                <div className="llm-chat-no-provider-content">
-                    <span className="bx bx-bot llm-chat-no-provider-icon" />
-                    <p>{t("llm_chat.no_provider_message")}</p>
-                    <Button
-                        text={t("llm_chat.add_provider")}
-                        icon="bx bx-plus"
-                        onClick={() => setShowAddProviderModal(true)}
-                    />
-                </div>
-                <AddProviderModal
-                    show={showAddProviderModal}
-                    onHidden={() => setShowAddProviderModal(false)}
-                    onSave={handleAddProvider}
-                />
-            </div>
-        );
-    }
-
-    return (
-        <form className="llm-chat-input-form" onSubmit={handleSubmit}>
-            <textarea
-                ref={chat.textareaRef as RefObject<HTMLTextAreaElement>}
-                className="llm-chat-input"
-                value={chat.input}
-                onInput={(e) => chat.setInput((e.target as HTMLTextAreaElement).value)}
-                placeholder={t("llm_chat.placeholder")}
-                disabled={chat.isStreaming}
-                onKeyDown={handleKeyDown}
-                rows={rows}
-            />
-            <div className="llm-chat-options">
-                <div className="llm-chat-model-selector">
-                    <span className="bx bx-chip" />
-                    <Dropdown
-                        text={<>{currentModel?.name}</>}
-                        disabled={chat.isStreaming}
-                        buttonClassName="llm-chat-model-select"
-                    >
-                        {currentModels.map(model => (
-                            <FormListItem
-                                key={model.id}
-                                onClick={() => handleModelSelect(model.id)}
-                                checked={chat.selectedModel === model.id}
-                            >
-                                {model.name} <small>({model.costDescription})</small>
-                            </FormListItem>
-                        ))}
-                        {legacyModels.length > 0 && (
-                            <>
-                                <FormDropdownDivider />
-                                <FormDropdownSubmenu
-                                    icon="bx bx-history"
-                                    title={t("llm_chat.legacy_models")}
-                                >
-                                    {legacyModels.map(model => (
-                                        <FormListItem
-                                            key={model.id}
-                                            onClick={() => handleModelSelect(model.id)}
-                                            checked={chat.selectedModel === model.id}
-                                        >
-                                            {model.name} <small>({model.costDescription})</small>
-                                        </FormListItem>
-                                    ))}
-                                </FormDropdownSubmenu>
-                            </>
-                        )}
-                        <FormDropdownDivider />
-                        <FormListToggleableItem
-                            icon="bx bx-globe"
-                            title={t("llm_chat.web_search")}
-                            currentValue={chat.enableWebSearch}
-                            onChange={handleWebSearchToggle}
-                            disabled={chat.isStreaming}
-                        />
-                        <FormListToggleableItem
-                            icon="bx bx-note"
-                            title={t("llm_chat.note_tools")}
-                            currentValue={chat.enableNoteTools}
-                            onChange={handleNoteToolsToggle}
-                            disabled={chat.isStreaming}
-                        />
-                        <FormListToggleableItem
-                            icon="bx bx-brain"
-                            title={t("llm_chat.extended_thinking")}
-                            currentValue={chat.enableExtendedThinking}
-                            onChange={handleExtendedThinkingToggle}
-                            disabled={chat.isStreaming}
-                        />
-                    </Dropdown>
-                    {activeNoteId && activeNoteTitle && (
-                        <Button
-                            text={activeNoteTitle}
-                            icon={isNoteContextEnabled ? "bx-file" : "bx-hide"}
-                            kind="lowProfile"
-                            size="micro"
-                            className={`llm-chat-note-context ${isNoteContextEnabled ? "active" : ""}`}
-                            onClick={handleNoteContextToggle}
-                            disabled={chat.isStreaming}
-                            title={isNoteContextEnabled
-                                ? t("llm_chat.note_context_enabled", { title: activeNoteTitle })
-                                : t("llm_chat.note_context_disabled")}
-                        />
-                    )}
-                    {chat.lastPromptTokens > 0 && (
-                        <div
-                            className="llm-chat-context-indicator"
-                            title={`${formatTokenCount(chat.lastPromptTokens)} / ${formatTokenCount(contextWindow)} ${t("llm_chat.tokens")}`}
-                        >
-                            <div
-                                className="llm-chat-context-pie"
-                                style={{
-                                    background: `conic-gradient(${pieColor} ${percentage}%, var(--accented-background-color) ${percentage}%)`
-                                }}
-                            />
-                            <span className="llm-chat-context-text">{t("llm_chat.context_used", { percentage: percentage.toFixed(0) })}</span>
-                        </div>
-                    )}
-                </div>
-                <ActionButton
-                    icon={chat.isStreaming ? "bx bx-loader-alt bx-spin" : "bx bx-send"}
-                    text={chat.isStreaming ? t("llm_chat.sending") : t("llm_chat.send")}
-                    onClick={handleSubmit}
-                    disabled={chat.isStreaming || !chat.input.trim()}
-                    className="llm-chat-send-btn"
-                />
-            </div>
-        </form>
-    );
-}

apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx

@@ -1,244 +0,0 @@
-import "./LlmChat.css";
-
-import { Marked } from "marked";
-import { useMemo } from "preact/hooks";
-
-import { t } from "../../../services/i18n.js";
-import utils from "../../../services/utils.js";
-import { SanitizedHtml } from "../../react/RawHtml.js";
-import { type ContentBlock, getMessageText, type StoredMessage, type ToolCall } from "./llm_chat_types.js";
-
-function shortenNumber(n: number): string {
-    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-    if (n >= 1_000) return `${(n / 1_000).toFixed(n >= 10_000 ? 0 : 1)}k`;
-    return n.toString();
-}
-
-// Configure marked for safe rendering
-const markedInstance = new Marked({
-    breaks: true, // Convert \n to <br>
-    gfm: true // GitHub Flavored Markdown
-});
-
-/** Parse markdown to HTML. Sanitization is handled by SanitizedHtml. */
-function renderMarkdown(markdown: string): string {
-    return markedInstance.parse(markdown) as string;
-}
-
-interface Props {
-    message: StoredMessage;
-    isStreaming?: boolean;
-}
-
-function ToolCallCard({ toolCall }: { toolCall: ToolCall }) {
-    const classes = [
-        "llm-chat-tool-call-inline",
-        toolCall.isError && "llm-chat-tool-call-error"
-    ].filter(Boolean).join(" ");
-
-    return (
-        <details className={classes}>
-            <summary className="llm-chat-tool-call-inline-summary">
-                <span className={toolCall.isError ? "bx bx-error-circle" : "bx bx-wrench"} />
-                {toolCall.toolName}
-                {toolCall.isError && <span className="llm-chat-tool-call-error-badge">{t("llm_chat.tool_error")}</span>}
-            </summary>
-            <div className="llm-chat-tool-call-inline-body">
-                <div className="llm-chat-tool-call-input">
-                    <strong>{t("llm_chat.input")}:</strong>
-                    <pre>{JSON.stringify(toolCall.input, null, 2)}</pre>
-                </div>
-                {toolCall.result && (
-                    <div className={`llm-chat-tool-call-result ${toolCall.isError ? "llm-chat-tool-call-result-error" : ""}`}>
-                        <strong>{toolCall.isError ? t("llm_chat.error") : t("llm_chat.result")}:</strong>
-                        <pre>{(() => {
-                            if (typeof toolCall.result === "string" && (toolCall.result.startsWith("{") || toolCall.result.startsWith("["))) {
-                                try {
-                                    return JSON.stringify(JSON.parse(toolCall.result), null, 2);
-                                } catch {
-                                    return toolCall.result;
-                                }
-                            }
-                            return toolCall.result;
-                        })()}</pre>
-                    </div>
-                )}
-            </div>
-        </details>
-    );
-}
-
-function renderContentBlocks(blocks: ContentBlock[], isStreaming?: boolean) {
-    return blocks.map((block, idx) => {
-        if (block.type === "text") {
-            const html = renderMarkdown(block.content);
-            return (
-                <div key={idx}>
-                    <SanitizedHtml className="llm-chat-markdown" html={html} />
-                    {isStreaming && idx === blocks.length - 1 && <span className="llm-chat-cursor" />}
-                </div>
-            );
-        }
-        if (block.type === "tool_call") {
-            return <ToolCallCard key={idx} toolCall={block.toolCall} />;
-        }
-        return null;
-    });
-}
-
-export default function ChatMessage({ message, isStreaming }: Props) {
-    const roleLabel = message.role === "user" ? t("llm_chat.role_user") : t("llm_chat.role_assistant");
-    const isError = message.type === "error";
-    const isThinking = message.type === "thinking";
-    const textContent = typeof message.content === "string" ? message.content : getMessageText(message.content);
-
-    // Render markdown for assistant messages with legacy string content
-    const renderedContent = useMemo(() => {
-        if (message.role === "assistant" && !isError && !isThinking && typeof message.content === "string") {
-            return renderMarkdown(message.content);
-        }
-        return null;
-    }, [message.content, message.role, isError, isThinking]);
-
-    const messageClasses = [
-        "llm-chat-message",
-        `llm-chat-message-${message.role}`,
-        isError && "llm-chat-message-error",
-        isThinking && "llm-chat-message-thinking"
-    ].filter(Boolean).join(" ");
-
-    // Render thinking messages in a collapsible details element
-    if (isThinking) {
-        return (
-            <details className={messageClasses}>
-                <summary className="llm-chat-thinking-summary">
-                    <span className="bx bx-brain" />
-                    {t("llm_chat.thought_process")}
-                </summary>
-                <div className="llm-chat-message-content llm-chat-thinking-content">
-                    {textContent}
-                    {isStreaming && <span className="llm-chat-cursor" />}
-                </div>
-            </details>
-        );
-    }
-
-    // Legacy tool calls (from old format stored as separate field)
-    const legacyToolCalls = message.toolCalls;
-    const hasBlockContent = Array.isArray(message.content);
-
-    return (
-        <div className={`llm-chat-message-wrapper llm-chat-message-wrapper-${message.role}`}>
-            <div className={messageClasses}>
-                <div className="llm-chat-message-role">
-                    {isError ? "Error" : roleLabel}
-                </div>
-                <div className="llm-chat-message-content">
-                    {message.role === "assistant" && !isError ? (
-                        hasBlockContent ? (
-                            renderContentBlocks(message.content as ContentBlock[], isStreaming)
-                        ) : (
-                            <>
-                                <SanitizedHtml className="llm-chat-markdown" html={renderedContent || ""} />
-                                {isStreaming && <span className="llm-chat-cursor" />}
-                            </>
-                        )
-                    ) : (
-                        textContent
-                    )}
-                </div>
-                {legacyToolCalls && legacyToolCalls.length > 0 && (
-                    <details className="llm-chat-tool-calls">
-                        <summary className="llm-chat-tool-calls-summary">
-                            <span className="bx bx-wrench" />
-                            {t("llm_chat.tool_calls", { count: legacyToolCalls.length })}
-                        </summary>
-                        <div className="llm-chat-tool-calls-list">
-                            {legacyToolCalls.map((tool) => (
-                                <ToolCallCard key={tool.id} toolCall={tool} />
-                            ))}
-                        </div>
-                    </details>
-                )}
-                {message.citations && message.citations.length > 0 && (
-                    <div className="llm-chat-citations">
-                        <div className="llm-chat-citations-label">
-                            <span className="bx bx-link" />
-                            {t("llm_chat.sources")}
-                        </div>
-                        <ul className="llm-chat-citations-list">
-                            {message.citations.map((citation, idx) => {
-                                // Determine display text: title, URL hostname, or cited text
-                                let displayText = citation.title;
-                                if (!displayText && citation.url) {
-                                    try {
-                                        displayText = new URL(citation.url).hostname;
-                                    } catch {
-                                        displayText = citation.url;
-                                    }
-                                }
-                                if (!displayText) {
-                                    displayText = citation.citedText?.slice(0, 50) || `Source ${idx + 1}`;
-                                }
-
-                                return (
-                                    <li key={idx}>
-                                        {citation.url ? (
-                                            <a
-                                                href={citation.url}
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                title={citation.citedText || citation.url}
-                                            >
-                                                {displayText}
-                                            </a>
-                                        ) : (
-                                            <span title={citation.citedText}>
-                                                {displayText}
-                                            </span>
-                                        )}
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    </div>
-                )}
-            </div>
-            <div className={`llm-chat-footer llm-chat-footer-${message.role}`}>
-                <span
-                    className="llm-chat-footer-time"
-                    title={utils.formatDateTime(new Date(message.createdAt))}
-                >
-                    {utils.formatTime(new Date(message.createdAt))}
-                </span>
-                {message.usage && typeof message.usage.promptTokens === "number" && (
-                    <>
-                        {message.usage.model && (
-                            <>
-                                <span className="llm-chat-usage-separator">·</span>
-                                <span className="llm-chat-usage-model">{message.usage.model}</span>
-                            </>
-                        )}
-                        <span className="llm-chat-usage-separator">·</span>
-                        <span
-                            className="llm-chat-usage-tokens"
-                            title={t("llm_chat.tokens_detail", {
-                                prompt: message.usage.promptTokens.toLocaleString(),
-                                completion: message.usage.completionTokens.toLocaleString()
-                            })}
-                        >
-                            <span className="bx bx-chip" />{" "}
-                            {t("llm_chat.total_tokens", { total: shortenNumber(message.usage.totalTokens) })}
-                        </span>
-                        {message.usage.cost != null && (
-                            <>
-                                <span className="llm-chat-usage-separator">·</span>
-                                <span className="llm-chat-usage-cost">~${message.usage.cost.toFixed(4)}</span>
-                            </>
-                        )}
-                    </>
-                )}
-            </div>
-        </div>
-    );
-}

apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css

@@ -1,725 +0,0 @@
-.llm-chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 1rem;
-    box-sizing: border-box;
-}
-
-.llm-chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding-bottom: 1rem;
-}
-
-.llm-chat-message-wrapper {
-    position: relative;
-    margin-top: 1rem;
-    padding-bottom: 1.25rem;
-    max-width: 85%;
-}
-
-.llm-chat-message-wrapper:first-child {
-    margin-top: 0;
-}
-
-.llm-chat-message-wrapper-user {
-    margin-left: auto;
-}
-
-.llm-chat-message-wrapper-assistant {
-    margin-right: auto;
-}
-
-/* Show footer only on hover */
-.llm-chat-message-wrapper:hover .llm-chat-footer {
-    opacity: 1;
-}
-
-.llm-chat-message {
-    padding: 0.75rem 1rem;
-    border-radius: 8px;
-    user-select: text;
-}
-
-.llm-chat-message-user {
-    background: var(--accented-background-color);
-}
-
-.llm-chat-message-assistant {
-    background: var(--main-background-color);
-    border: 1px solid var(--main-border-color);
-}
-
-.llm-chat-message-role {
-    font-weight: 600;
-    margin-bottom: 0.25rem;
-    font-size: 0.8rem;
-    color: var(--muted-text-color);
-}
-
-.llm-chat-message-content {
-    word-wrap: break-word;
-    line-height: 1.5;
-}
-
-/* Preserve whitespace only for user messages (plain text) */
-.llm-chat-message-user .llm-chat-message-content {
-    white-space: pre-wrap;
-}
-
-.llm-chat-cursor {
-    display: inline-block;
-    width: 8px;
-    height: 1.1em;
-    background: currentColor;
-    margin-left: 2px;
-    vertical-align: text-bottom;
-    animation: llm-chat-blink 1s infinite;
-}
-
-@keyframes llm-chat-blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-}
-
-/* Tool activity indicator */
-.llm-chat-tool-activity {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    margin-bottom: 1rem;
-    border-radius: 8px;
-    background: var(--accented-background-color);
-    color: var(--muted-text-color);
-    font-size: 0.9rem;
-    max-width: 85%;
-}
-
-.llm-chat-tool-spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid var(--muted-text-color);
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: llm-chat-spin 0.8s linear infinite;
-}
-
-@keyframes llm-chat-spin {
-    to { transform: rotate(360deg); }
-}
-
-/* Citations */
-.llm-chat-citations {
-    margin-top: 0.75rem;
-    padding-top: 0.75rem;
-    border-top: 1px solid var(--main-border-color);
-}
-
-.llm-chat-citations-label {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--muted-text-color);
-    margin-bottom: 0.25rem;
-}
-
-.llm-chat-citations-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.llm-chat-citations-list li {
-    font-size: 0.8rem;
-}
-
-.llm-chat-citations-list a {
-    color: var(--link-color, #007bff);
-    text-decoration: none;
-    padding: 0.125rem 0.5rem;
-    background: var(--accented-background-color);
-    border-radius: 4px;
-    display: inline-block;
-}
-
-.llm-chat-citations-list a:hover {
-    text-decoration: underline;
-}
-
-/* Error */
-.llm-chat-error {
-    padding: 0.75rem 1rem;
-    margin-bottom: 1rem;
-    border-radius: 8px;
-    background: var(--danger-background-color, #fee);
-    border: 1px solid var(--danger-border-color, #fcc);
-    color: var(--danger-text-color, #c00);
-    user-select: text;
-}
-
-/* Error message (persisted in conversation) */
-.llm-chat-message-error {
-    background: var(--danger-background-color, #fee);
-    border: 1px solid var(--danger-border-color, #fcc);
-    color: var(--danger-text-color, #c00);
-}
-
-.llm-chat-message-error .llm-chat-message-role {
-    color: var(--danger-text-color, #c00);
-}
-
-/* Thinking message (collapsible) */
-.llm-chat-message-thinking {
-    background: var(--accented-background-color);
-    border: 1px dashed var(--main-border-color);
-    cursor: pointer;
-}
-
-.llm-chat-thinking-summary {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--muted-text-color);
-    padding: 0.25rem 0;
-    list-style: none;
-}
-
-.llm-chat-thinking-summary::-webkit-details-marker {
-    display: none;
-}
-
-.llm-chat-thinking-summary::before {
-    content: "▶";
-    font-size: 0.7em;
-    transition: transform 0.2s ease;
-}
-
-.llm-chat-message-thinking[open] .llm-chat-thinking-summary::before {
-    transform: rotate(90deg);
-}
-
-.llm-chat-thinking-summary .bx {
-    font-size: 1rem;
-}
-
-.llm-chat-thinking-content {
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: 1px solid var(--main-border-color);
-    font-size: 0.9rem;
-    color: var(--muted-text-color);
-    white-space: pre-wrap;
-}
-
-/* Input form */
-.llm-chat-input-form {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--main-border-color);
-}
-
-.llm-chat-input {
-    flex: 1;
-    min-height: 60px;
-    max-height: 200px;
-    resize: vertical;
-    padding: 0.75rem;
-    border: 1px solid var(--main-border-color);
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: inherit;
-    background: var(--main-background-color);
-    color: var(--main-text-color);
-}
-
-.llm-chat-input:focus {
-    outline: none;
-    border-color: var(--main-selection-color);
-    box-shadow: 0 0 0 2px var(--main-selection-color-soft, rgba(0, 123, 255, 0.25));
-}
-
-.llm-chat-input:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-/* Options row */
-.llm-chat-options {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.llm-chat-send-btn {
-    margin-left: auto;
-    font-size: 1.25rem;
-}
-
-.llm-chat-send-btn.disabled {
-    opacity: 0.4;
-}
-
-/* Model selector */
-.llm-chat-model-selector {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-size: 0.85rem;
-    color: var(--muted-text-color);
-}
-
-.llm-chat-model-selector .bx {
-    font-size: 1rem;
-}
-
-.llm-chat-model-selector .dropdown {
-    display: flex;
-
-    small {
-        margin-left: 0.5em;
-        color: var(--muted-text-color);
-    }
-
-    /* Position legacy models submenu to open upward */
-    .dropdown-submenu .dropdown-menu {
-        bottom: 0;
-        top: auto;
-    }
-}
-
-.llm-chat-model-select.select-button {
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--main-border-color);
-    border-radius: 4px;
-    background: var(--main-background-color);
-    color: var(--main-text-color);
-    font-family: inherit;
-    font-size: 0.85rem;
-    cursor: pointer;
-    min-width: 140px;
-    text-align: left;
-}
-
-.llm-chat-model-select.select-button:focus {
-    outline: none;
-    border-color: var(--main-selection-color);
-}
-
-.llm-chat-model-select.select-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-/* Note context toggle */
-.llm-chat-note-context.tn-low-profile {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    opacity: 0.5;
-    background: none;
-    border: none;
-}
-
-.llm-chat-note-context.tn-low-profile:hover:not(:disabled) {
-    opacity: 0.8;
-    background: none;
-}
-
-.llm-chat-note-context.tn-low-profile.active {
-    opacity: 1;
-}
-
-/* Markdown styles */
-.llm-chat-markdown {
-    line-height: 1.6;
-}
-
-.llm-chat-markdown p {
-    margin: 0 0 0.75em 0;
-}
-
-.llm-chat-markdown p:last-child {
-    margin-bottom: 0;
-}
-
-.llm-chat-markdown h1,
-.llm-chat-markdown h2,
-.llm-chat-markdown h3,
-.llm-chat-markdown h4,
-.llm-chat-markdown h5,
-.llm-chat-markdown h6 {
-    margin: 1em 0 0.5em 0;
-    font-weight: 600;
-    line-height: 1.3;
-}
-
-.llm-chat-markdown h1:first-child,
-.llm-chat-markdown h2:first-child,
-.llm-chat-markdown h3:first-child {
-    margin-top: 0;
-}
-
-.llm-chat-markdown h1 { font-size: 1.4em; }
-.llm-chat-markdown h2 { font-size: 1.25em; }
-.llm-chat-markdown h3 { font-size: 1.1em; }
-
-.llm-chat-markdown ul,
-.llm-chat-markdown ol {
-    margin: 0.5em 0;
-    padding-left: 1.5em;
-}
-
-.llm-chat-markdown li {
-    margin: 0.25em 0;
-}
-
-.llm-chat-markdown code {
-    background: var(--accented-background-color);
-    padding: 0.15em 0.4em;
-    border-radius: 4px;
-    font-family: var(--monospace-font-family, monospace);
-    font-size: 0.9em;
-}
-
-.llm-chat-markdown pre {
-    background: var(--accented-background-color);
-    padding: 0.75em 1em;
-    border-radius: 6px;
-    overflow-x: auto;
-    margin: 0.75em 0;
-}
-
-.llm-chat-markdown pre code {
-    background: none;
-    padding: 0;
-    font-size: 0.85em;
-}
-
-.llm-chat-markdown blockquote {
-    margin: 0.75em 0;
-    padding: 0.5em 1em;
-    border-left: 3px solid var(--main-border-color);
-    background: var(--accented-background-color);
-}
-
-.llm-chat-markdown blockquote p {
-    margin: 0;
-}
-
-.llm-chat-markdown a {
-    color: var(--link-color, #007bff);
-    text-decoration: none;
-}
-
-.llm-chat-markdown a:hover {
-    text-decoration: underline;
-}
-
-.llm-chat-markdown hr {
-    border: none;
-    border-top: 1px solid var(--main-border-color);
-    margin: 1em 0;
-}
-
-.llm-chat-markdown table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 0.75em 0;
-}
-
-.llm-chat-markdown th,
-.llm-chat-markdown td {
-    border: 1px solid var(--main-border-color);
-    padding: 0.5em 0.75em;
-    text-align: left;
-}
-
-.llm-chat-markdown th {
-    background: var(--accented-background-color);
-    font-weight: 600;
-}
-
-.llm-chat-markdown strong {
-    font-weight: 600;
-}
-
-.llm-chat-markdown em {
-    font-style: italic;
-}
-
-/* Tool calls display */
-.llm-chat-tool-calls {
-    margin-top: 0.75rem;
-    padding-top: 0.75rem;
-    border-top: 1px solid var(--main-border-color);
-}
-
-.llm-chat-tool-calls-summary {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--muted-text-color);
-    padding: 0.25rem 0;
-    cursor: pointer;
-    list-style: none;
-}
-
-.llm-chat-tool-calls-summary::-webkit-details-marker {
-    display: none;
-}
-
-.llm-chat-tool-calls-summary::before {
-    content: "▶";
-    font-size: 0.7em;
-    transition: transform 0.2s ease;
-}
-
-.llm-chat-tool-calls[open] .llm-chat-tool-calls-summary::before {
-    transform: rotate(90deg);
-}
-
-.llm-chat-tool-calls-summary .bx {
-    font-size: 1rem;
-}
-
-.llm-chat-tool-calls-list {
-    margin-top: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.llm-chat-tool-call {
-    background: var(--accented-background-color);
-    border-radius: 6px;
-    padding: 0.75rem;
-    font-size: 0.85rem;
-}
-
-.llm-chat-tool-call-name {
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    color: var(--main-text-color);
-    font-family: var(--monospace-font-family, monospace);
-}
-
-.llm-chat-tool-call-input,
-.llm-chat-tool-call-result {
-    margin-top: 0.5rem;
-}
-
-.llm-chat-tool-call-input strong,
-.llm-chat-tool-call-result strong {
-    display: block;
-    font-size: 0.75rem;
-    color: var(--muted-text-color);
-    margin-bottom: 0.25rem;
-}
-
-.llm-chat-tool-call pre {
-    margin: 0;
-    padding: 0.5rem;
-    background: var(--main-background-color);
-    border-radius: 4px;
-    overflow-x: auto;
-    font-size: 0.8rem;
-    font-family: var(--monospace-font-family, monospace);
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-/* Inline tool call cards (timeline style) */
-.llm-chat-tool-call-inline {
-    margin: 0.5rem 0;
-    background: var(--accented-background-color);
-    border-radius: 6px;
-    border-left: 3px solid var(--muted-text-color);
-    font-size: 0.85rem;
-}
-
-.llm-chat-tool-call-inline-summary {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    cursor: pointer;
-    list-style: none;
-    font-weight: 500;
-    color: var(--muted-text-color);
-    font-family: var(--monospace-font-family, monospace);
-}
-
-.llm-chat-tool-call-inline-summary::-webkit-details-marker {
-    display: none;
-}
-
-.llm-chat-tool-call-inline-summary::before {
-    content: "▶";
-    font-size: 0.7em;
-    transition: transform 0.2s ease;
-}
-
-.llm-chat-tool-call-inline[open] .llm-chat-tool-call-inline-summary::before {
-    transform: rotate(90deg);
-}
-
-.llm-chat-tool-call-inline-summary .bx {
-    font-size: 1rem;
-}
-
-.llm-chat-tool-call-inline-body {
-    padding: 0 0.75rem 0.75rem;
-}
-
-.llm-chat-tool-call-inline-body pre {
-    margin: 0;
-    padding: 0.5rem;
-    background: var(--main-background-color);
-    border-radius: 4px;
-    overflow-x: auto;
-    font-size: 0.8rem;
-    font-family: var(--monospace-font-family, monospace);
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.llm-chat-tool-call-inline-body strong {
-    display: block;
-    font-size: 0.75rem;
-    color: var(--muted-text-color);
-    margin-bottom: 0.25rem;
-}
-
-.llm-chat-tool-call-inline-body .llm-chat-tool-call-result {
-    margin-top: 0.5rem;
-}
-
-/* Tool call error styling */
-.llm-chat-tool-call-error {
-    border-left-color: var(--danger-color, #dc3545);
-}
-
-.llm-chat-tool-call-error .llm-chat-tool-call-inline-summary {
-    color: var(--danger-color, #dc3545);
-}
-
-.llm-chat-tool-call-error-badge {
-    font-size: 0.75rem;
-    font-weight: 400;
-    font-family: var(--main-font-family);
-    color: var(--danger-color, #dc3545);
-    opacity: 0.8;
-}
-
-.llm-chat-tool-call-result-error pre {
-    color: var(--danger-color, #dc3545);
-}
-
-/* Message footer (timestamp + token usage, sits below the bubble) */
-.llm-chat-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.125rem 0.5rem;
-    font-size: 0.7rem;
-    color: var(--muted-text-color);
-    cursor: default;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-}
-
-.llm-chat-footer-user {
-    justify-content: flex-end;
-}
-
-.llm-chat-footer .bx {
-    font-size: 0.875rem;
-}
-
-.llm-chat-footer-time {
-    cursor: help;
-}
-
-.llm-chat-usage-model {
-    font-weight: 500;
-}
-
-.llm-chat-usage-separator {
-    opacity: 0.5;
-}
-
-.llm-chat-usage-tokens {
-    cursor: help;
-    font-family: var(--monospace-font-family, monospace);
-}
-
-.llm-chat-usage-cost {
-    font-family: var(--monospace-font-family, monospace);
-}
-
-/* Context window indicator */
-.llm-chat-context-indicator {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    margin-left: 0.5rem;
-    cursor: help;
-}
-
-.llm-chat-context-pie {
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    flex-shrink: 0;
-}
-
-.llm-chat-context-text {
-    font-size: 0.75rem;
-    color: var(--muted-text-color);
-}
-
-/* No provider state */
-.llm-chat-no-provider {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    border-top: 1px solid var(--main-border-color);
-}
-
-.llm-chat-no-provider-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
-    text-align: center;
-    color: var(--muted-text-color);
-}
-
-.llm-chat-no-provider-icon {
-    font-size: 2rem;
-    opacity: 0.5;
-}
-
-.llm-chat-no-provider-content p {
-    margin: 0;
-    font-size: 0.9rem;
-}

apps/client/src/widgets/type_widgets/llm_chat/LlmChat.tsx

@@ -1,109 +0,0 @@
-import "./LlmChat.css";
-
-import { useCallback, useEffect, useRef } from "preact/hooks";
-
-import { t } from "../../../services/i18n.js";
-import { useEditorSpacedUpdate } from "../../react/hooks.js";
-import NoItems from "../../react/NoItems.js";
-import { TypeWidgetProps } from "../type_widget.js";
-import ChatInputBar from "./ChatInputBar.js";
-import ChatMessage from "./ChatMessage.js";
-import type { LlmChatContent } from "./llm_chat_types.js";
-import { useLlmChat } from "./useLlmChat.js";
-
-export default function LlmChat({ note, ntxId, noteContext }: TypeWidgetProps) {
-    const spacedUpdateRef = useRef<{ scheduleUpdate: () => void }>(null);
-
-    const chat = useLlmChat(
-        // onMessagesChange - trigger save
-        () => spacedUpdateRef.current?.scheduleUpdate(),
-        { defaultEnableNoteTools: false, supportsExtendedThinking: true, chatNoteId: note?.noteId }
-    );
-
-    // Keep chatNoteId in sync when the note changes
-    useEffect(() => {
-        chat.setChatNoteId(note?.noteId);
-    }, [note?.noteId, chat.setChatNoteId]);
-
-    const spacedUpdate = useEditorSpacedUpdate({
-        note,
-        noteType: "llmChat",
-        noteContext,
-        getData: () => {
-            const content = chat.getContent();
-            return { content: JSON.stringify(content) };
-        },
-        onContentChange: (content) => {
-            if (!content) {
-                chat.clearMessages();
-                return;
-            }
-            try {
-                const parsed: LlmChatContent = JSON.parse(content);
-                chat.loadFromContent(parsed);
-            } catch (e) {
-                console.error("Failed to parse LLM chat content:", e);
-                chat.clearMessages();
-            }
-        }
-    });
-    spacedUpdateRef.current = spacedUpdate;
-
-    const triggerSave = useCallback(() => {
-        spacedUpdateRef.current?.scheduleUpdate();
-    }, []);
-
-    return (
-        <div className="llm-chat-container">
-            <div className="llm-chat-messages">
-                {chat.messages.length === 0 && !chat.isStreaming && (
-                    <NoItems
-                        icon="bx bx-conversation"
-                        text={t("llm_chat.empty_state")}
-                    />
-                )}
-                {chat.messages.map(msg => (
-                    <ChatMessage key={msg.id} message={msg} />
-                ))}
-                {chat.toolActivity && !chat.streamingThinking && (
-                    <div className="llm-chat-tool-activity">
-                        <span className="llm-chat-tool-spinner" />
-                        {chat.toolActivity}
-                    </div>
-                )}
-                {chat.isStreaming && chat.streamingThinking && (
-                    <ChatMessage
-                        message={{
-                            id: "streaming-thinking",
-                            role: "assistant",
-                            content: chat.streamingThinking,
-                            createdAt: new Date().toISOString(),
-                            type: "thinking"
-                        }}
-                        isStreaming
-                    />
-                )}
-                {chat.isStreaming && chat.streamingContent && (
-                    <ChatMessage
-                        message={{
-                            id: "streaming",
-                            role: "assistant",
-                            content: chat.streamingContent,
-                            createdAt: new Date().toISOString(),
-                            citations: chat.pendingCitations.length > 0 ? chat.pendingCitations : undefined
-                        }}
-                        isStreaming
-                    />
-                )}
-                <div ref={chat.messagesEndRef} />
-            </div>
-            <ChatInputBar
-                chat={chat}
-                onWebSearchChange={triggerSave}
-                onNoteToolsChange={triggerSave}
-                onExtendedThinkingChange={triggerSave}
-                onModelChange={triggerSave}
-            />
-        </div>
-    );
-}

apps/client/src/widgets/type_widgets/llm_chat/llm_chat_types.ts

@@ -1,80 +0,0 @@
-import type { LlmCitation, LlmUsage } from "@triliumnext/commons";
-
-export type MessageType = "message" | "error" | "thinking";
-
-export interface ToolCall {
-    id: string;
-    toolName: string;
-    input: Record<string, unknown>;
-    result?: string;
-    isError?: boolean;
-}
-
-/** A block of text content (rendered as Markdown for assistant messages). */
-export interface TextBlock {
-    type: "text";
-    content: string;
-}
-
-/** A tool invocation block shown inline in the message timeline. */
-export interface ToolCallBlock {
-    type: "tool_call";
-    toolCall: ToolCall;
-}
-
-/** An ordered content block in an assistant message. */
-export type ContentBlock = TextBlock | ToolCallBlock;
-
-/**
- * Extract the plain text from message content (works for both legacy string and block formats).
- */
-export function getMessageText(content: string | ContentBlock[]): string {
-    if (typeof content === "string") {
-        return content;
-    }
-    return content
-        .filter((b): b is TextBlock => b.type === "text")
-        .map(b => b.content)
-        .join("");
-}
-
-/**
- * Extract tool calls from message content blocks.
- */
-export function getMessageToolCalls(message: StoredMessage): ToolCall[] {
-    // Legacy format: tool calls stored in separate field
-    if (message.toolCalls) {
-        return message.toolCalls;
-    }
-    // Block format: extract from content blocks
-    if (Array.isArray(message.content)) {
-        return message.content
-            .filter((b): b is ToolCallBlock => b.type === "tool_call")
-            .map(b => b.toolCall);
-    }
-    return [];
-}
-
-export interface StoredMessage {
-    id: string;
-    role: "user" | "assistant" | "system";
-    /** Message content: plain string (user messages, legacy) or ordered content blocks (assistant). */
-    content: string | ContentBlock[];
-    createdAt: string;
-    citations?: LlmCitation[];
-    /** Message type for special rendering. Defaults to "message" if omitted. */
-    type?: MessageType;
-    /** @deprecated Tool calls are now inline in content blocks. Kept for backward compatibility. */
-    toolCalls?: ToolCall[];
-    /** Token usage for this response */
-    usage?: LlmUsage;
-}
-
-export interface LlmChatContent {
-    version: 1;
-    messages: StoredMessage[];
-    selectedModel?: string;
-    enableWebSearch?: boolean;
-    enableNoteTools?: boolean;
-    enableExtendedThinking?: boolean;
-}

apps/client/src/widgets/type_widgets/llm_chat/useLlmChat.ts

@@ -1,404 +0,0 @@
-import type { LlmCitation, LlmMessage, LlmModelInfo, LlmUsage } from "@triliumnext/commons";
-import { RefObject } from "preact";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-
-import { t } from "../../../services/i18n.js";
-import { getAvailableModels, streamChatCompletion } from "../../../services/llm_chat.js";
-import { randomString } from "../../../services/utils.js";
-import type { ContentBlock, LlmChatContent, StoredMessage } from "./llm_chat_types.js";
-
-export interface ModelOption extends LlmModelInfo {
-    costDescription?: string;
-}
-
-export interface LlmChatOptions {
-    /** Default value for enableNoteTools */
-    defaultEnableNoteTools?: boolean;
-    /** Whether extended thinking is supported */
-    supportsExtendedThinking?: boolean;
-    /** Initial context note ID (the note the user is viewing) */
-    contextNoteId?: string;
-    /** The chat note ID (used for auto-renaming on first message) */
-    chatNoteId?: string;
-}
-
-export interface UseLlmChatReturn {
-    // State
-    messages: StoredMessage[];
-    input: string;
-    isStreaming: boolean;
-    streamingContent: string;
-    streamingThinking: string;
-    toolActivity: string | null;
-    pendingCitations: LlmCitation[];
-    availableModels: ModelOption[];
-    selectedModel: string;
-    enableWebSearch: boolean;
-    enableNoteTools: boolean;
-    enableExtendedThinking: boolean;
-    contextNoteId: string | undefined;
-    lastPromptTokens: number;
-    messagesEndRef: RefObject<HTMLDivElement>;
-    textareaRef: RefObject<HTMLTextAreaElement>;
-    /** Whether a provider is configured and available */
-    hasProvider: boolean;
-    /** Whether we're still checking for providers */
-    isCheckingProvider: boolean;
-
-    // Setters
-    setInput: (value: string) => void;
-    setMessages: (messages: StoredMessage[]) => void;
-    setSelectedModel: (model: string) => void;
-    setEnableWebSearch: (value: boolean) => void;
-    setEnableNoteTools: (value: boolean) => void;
-    setEnableExtendedThinking: (value: boolean) => void;
-    setContextNoteId: (noteId: string | undefined) => void;
-    setChatNoteId: (noteId: string | undefined) => void;
-
-    // Actions
-    handleSubmit: (e: Event) => Promise<void>;
-    handleKeyDown: (e: KeyboardEvent) => void;
-    loadFromContent: (content: LlmChatContent) => void;
-    getContent: () => LlmChatContent;
-    clearMessages: () => void;
-    /** Refresh the provider/models list */
-    refreshModels: () => void;
-}
-
-export function useLlmChat(
-    onMessagesChange?: (messages: StoredMessage[]) => void,
-    options: LlmChatOptions = {}
-): UseLlmChatReturn {
-    const { defaultEnableNoteTools = false, supportsExtendedThinking = false, contextNoteId: initialContextNoteId, chatNoteId: initialChatNoteId } = options;
-
-    const [messages, setMessagesInternal] = useState<StoredMessage[]>([]);
-    const [input, setInput] = useState("");
-    const [isStreaming, setIsStreaming] = useState(false);
-    const [streamingContent, setStreamingContent] = useState("");
-    const [streamingThinking, setStreamingThinking] = useState("");
-    const [toolActivity, setToolActivity] = useState<string | null>(null);
-    const [pendingCitations, setPendingCitations] = useState<LlmCitation[]>([]);
-    const [availableModels, setAvailableModels] = useState<ModelOption[]>([]);
-    const [selectedModel, setSelectedModel] = useState<string>("");
-    const [enableWebSearch, setEnableWebSearch] = useState(true);
-    const [enableNoteTools, setEnableNoteTools] = useState(defaultEnableNoteTools);
-    const [enableExtendedThinking, setEnableExtendedThinking] = useState(false);
-    const [contextNoteId, setContextNoteId] = useState<string | undefined>(initialContextNoteId);
-    const [chatNoteId, setChatNoteIdState] = useState<string | undefined>(initialChatNoteId);
-    const [lastPromptTokens, setLastPromptTokens] = useState<number>(0);
-    const [hasProvider, setHasProvider] = useState<boolean>(true); // Assume true initially
-    const [isCheckingProvider, setIsCheckingProvider] = useState<boolean>(true);
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-    // Refs to get fresh values in getContent (avoids stale closures)
-    const messagesRef = useRef(messages);
-    messagesRef.current = messages;
-    const selectedModelRef = useRef(selectedModel);
-    selectedModelRef.current = selectedModel;
-    const enableWebSearchRef = useRef(enableWebSearch);
-    enableWebSearchRef.current = enableWebSearch;
-    const enableNoteToolsRef = useRef(enableNoteTools);
-    enableNoteToolsRef.current = enableNoteTools;
-    const enableExtendedThinkingRef = useRef(enableExtendedThinking);
-    enableExtendedThinkingRef.current = enableExtendedThinking;
-    const chatNoteIdRef = useRef(chatNoteId);
-    chatNoteIdRef.current = chatNoteId;
-    const setChatNoteId = useCallback((noteId: string | undefined) => {
-        chatNoteIdRef.current = noteId;
-        setChatNoteIdState(noteId);
-    }, []);
-    const contextNoteIdRef = useRef(contextNoteId);
-    contextNoteIdRef.current = contextNoteId;
-
-    // Wrapper to call onMessagesChange when messages update
-    const setMessages = useCallback((newMessages: StoredMessage[]) => {
-        setMessagesInternal(newMessages);
-        onMessagesChange?.(newMessages);
-    }, [onMessagesChange]);
-
-    // Fetch available models on mount
-    const refreshModels = useCallback(() => {
-        setIsCheckingProvider(true);
-        getAvailableModels().then(models => {
-            const modelsWithDescription = models.map(m => ({
-                ...m,
-                costDescription: m.costMultiplier ? `${m.costMultiplier}x` : undefined
-            }));
-            setAvailableModels(modelsWithDescription);
-            setHasProvider(models.length > 0);
-            setIsCheckingProvider(false);
-            if (!selectedModel) {
-                const defaultModel = models.find(m => m.isDefault) || models[0];
-                if (defaultModel) {
-                    setSelectedModel(defaultModel.id);
-                }
-            }
-        }).catch(err => {
-            console.error("Failed to fetch available models:", err);
-            setHasProvider(false);
-            setIsCheckingProvider(false);
-        });
-    }, [selectedModel]);
-
-    useEffect(() => {
-        refreshModels();
-    }, []);
-
-    // Scroll to bottom when content changes
-    const scrollToBottom = useCallback(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, []);
-
-    useEffect(() => {
-        scrollToBottom();
-    }, [messages, streamingContent, streamingThinking, toolActivity, scrollToBottom]);
-
-    // Load state from content object
-    const loadFromContent = useCallback((content: LlmChatContent) => {
-        setMessagesInternal(content.messages || []);
-        if (content.selectedModel) {
-            setSelectedModel(content.selectedModel);
-        }
-        if (typeof content.enableWebSearch === "boolean") {
-            setEnableWebSearch(content.enableWebSearch);
-        }
-        if (typeof content.enableNoteTools === "boolean") {
-            setEnableNoteTools(content.enableNoteTools);
-        }
-        if (supportsExtendedThinking && typeof content.enableExtendedThinking === "boolean") {
-            setEnableExtendedThinking(content.enableExtendedThinking);
-        }
-        // Restore last prompt tokens from the most recent message with usage
-        const lastUsage = [...(content.messages || [])].reverse().find(m => m.usage)?.usage;
-        setLastPromptTokens(lastUsage?.promptTokens ?? 0);
-    }, [supportsExtendedThinking]);
-
-    // Get current state as content object (uses refs to avoid stale closures)
-    const getContent = useCallback((): LlmChatContent => {
-        const content: LlmChatContent = {
-            version: 1,
-            messages: messagesRef.current,
-            selectedModel: selectedModelRef.current || undefined,
-            enableWebSearch: enableWebSearchRef.current,
-            enableNoteTools: enableNoteToolsRef.current
-        };
-        if (supportsExtendedThinking) {
-            content.enableExtendedThinking = enableExtendedThinkingRef.current;
-        }
-        return content;
-    }, [supportsExtendedThinking]);
-
-    const clearMessages = useCallback(() => {
-        setMessages([]);
-        setLastPromptTokens(0);
-    }, [setMessages]);
-
-    const handleSubmit = useCallback(async (e: Event) => {
-        e.preventDefault();
-        if (!input.trim() || isStreaming) return;
-
-        setToolActivity(null);
-        setPendingCitations([]);
-
-        const userMessage: StoredMessage = {
-            id: randomString(),
-            role: "user",
-            content: input.trim(),
-            createdAt: new Date().toISOString()
-        };
-
-        const newMessages = [...messages, userMessage];
-        setMessagesInternal(newMessages);
-        setInput("");
-        setIsStreaming(true);
-        setStreamingContent("");
-        setStreamingThinking("");
-
-        let thinkingContent = "";
-        const contentBlocks: ContentBlock[] = [];
-        const citations: LlmCitation[] = [];
-        let usage: LlmUsage | undefined;
-
-        /** Get or create the last text block to append streaming text to. */
-        function lastTextBlock(): ContentBlock & { type: "text" } {
-            const last = contentBlocks[contentBlocks.length - 1];
-            if (last?.type === "text") {
-                return last;
-            }
-            const block: ContentBlock = { type: "text", content: "" };
-            contentBlocks.push(block);
-            return block as ContentBlock & { type: "text" };
-        }
-
-        const apiMessages: LlmMessage[] = newMessages.map(m => ({
-            role: m.role,
-            content: typeof m.content === "string" ? m.content : m.content
-                .filter((b): b is ContentBlock & { type: "text" } => b.type === "text")
-                .map(b => b.content)
-                .join("")
-        }));
-
-        const streamOptions: Parameters<typeof streamChatCompletion>[1] = {
-            model: selectedModel || undefined,
-            enableWebSearch,
-            enableNoteTools,
-            contextNoteId,
-            chatNoteId: chatNoteIdRef.current
-        };
-        if (supportsExtendedThinking) {
-            streamOptions.enableExtendedThinking = enableExtendedThinking;
-        }
-
-        await streamChatCompletion(
-            apiMessages,
-            streamOptions,
-            {
-                onChunk: (text) => {
-                    lastTextBlock().content += text;
-                    setStreamingContent(contentBlocks
-                        .filter((b): b is ContentBlock & { type: "text" } => b.type === "text")
-                        .map(b => b.content)
-                        .join(""));
-                    setToolActivity(null);
-                },
-                onThinking: (text) => {
-                    thinkingContent += text;
-                    setStreamingThinking(thinkingContent);
-                    setToolActivity(t("llm_chat.thinking"));
-                },
-                onToolUse: (toolName, toolInput) => {
-                    const toolLabel = toolName === "web_search"
-                        ? t("llm_chat.searching_web")
-                        : `Using ${toolName}...`;
-                    setToolActivity(toolLabel);
-                    contentBlocks.push({
-                        type: "tool_call",
-                        toolCall: {
-                            id: randomString(),
-                            toolName,
-                            input: toolInput
-                        }
-                    });
-                },
-                onToolResult: (toolName, result, isError) => {
-                    // Find the most recent tool_call block for this tool without a result
-                    for (let i = contentBlocks.length - 1; i >= 0; i--) {
-                        const block = contentBlocks[i];
-                        if (block.type === "tool_call" && block.toolCall.toolName === toolName && !block.toolCall.result) {
-                            block.toolCall.result = result;
-                            block.toolCall.isError = isError;
-                            break;
-                        }
-                    }
-                },
-                onCitation: (citation) => {
-                    citations.push(citation);
-                    setPendingCitations([...citations]);
-                },
-                onUsage: (u) => {
-                    usage = u;
-                    setLastPromptTokens(u.promptTokens);
-                },
-                onError: (errorMsg) => {
-                    console.error("Chat error:", errorMsg);
-                    const errorMessage: StoredMessage = {
-                        id: randomString(),
-                        role: "assistant",
-                        content: errorMsg,
-                        createdAt: new Date().toISOString(),
-                        type: "error"
-                    };
-                    const finalMessages = [...newMessages, errorMessage];
-                    setMessages(finalMessages);
-                    setStreamingContent("");
-                    setStreamingThinking("");
-                    setIsStreaming(false);
-                    setToolActivity(null);
-                },
-                onDone: () => {
-                    const finalNewMessages: StoredMessage[] = [];
-
-                    if (thinkingContent) {
-                        finalNewMessages.push({
-                            id: randomString(),
-                            role: "assistant",
-                            content: thinkingContent,
-                            createdAt: new Date().toISOString(),
-                            type: "thinking"
-                        });
-                    }
-
-                    if (contentBlocks.length > 0) {
-                        finalNewMessages.push({
-                            id: randomString(),
-                            role: "assistant",
-                            content: contentBlocks,
-                            createdAt: new Date().toISOString(),
-                            citations: citations.length > 0 ? citations : undefined,
-                            usage
-                        });
-                    }
-
-                    if (finalNewMessages.length > 0) {
-                        const allMessages = [...newMessages, ...finalNewMessages];
-                        setMessages(allMessages);
-                    }
-
-                    setStreamingContent("");
-                    setStreamingThinking("");
-                    setPendingCitations([]);
-                    setIsStreaming(false);
-                    setToolActivity(null);
-                }
-            }
-        );
-    }, [input, isStreaming, messages, selectedModel, enableWebSearch, enableNoteTools, enableExtendedThinking, contextNoteId, supportsExtendedThinking, setMessages]);
-
-    const handleKeyDown = useCallback((e: KeyboardEvent) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            handleSubmit(e);
-        }
-    }, [handleSubmit]);
-
-    return {
-        // State
-        messages,
-        input,
-        isStreaming,
-        streamingContent,
-        streamingThinking,
-        toolActivity,
-        pendingCitations,
-        availableModels,
-        selectedModel,
-        enableWebSearch,
-        enableNoteTools,
-        enableExtendedThinking,
-        contextNoteId,
-        lastPromptTokens,
-        messagesEndRef,
-        textareaRef,
-        hasProvider,
-        isCheckingProvider,
-
-        // Setters
-        setInput,
-        setMessages,
-        setSelectedModel,
-        setEnableWebSearch,
-        setEnableNoteTools,
-        setEnableExtendedThinking,
-        setContextNoteId,
-        setChatNoteId,
-
-        // Actions
-        handleSubmit,
-        handleKeyDown,
-        loadFromContent,
-        getContent,
-        clearMessages,
-        refreshModels
-    };
-}

apps/client/src/widgets/type_widgets/options/llm.tsx

@@ -1,104 +0,0 @@
-import { useCallback, useMemo, useState } from "preact/hooks";
-import { t } from "../../../services/i18n";
-import Button from "../../react/Button";
-import OptionsSection from "./components/OptionsSection";
-import AddProviderModal, { type LlmProviderConfig, PROVIDER_TYPES } from "./llm/AddProviderModal";
-import ActionButton from "../../react/ActionButton";
-import dialog from "../../../services/dialog";
-import { useTriliumOption } from "../../react/hooks";
-
-export default function LlmSettings() {
-    const [providersJson, setProvidersJson] = useTriliumOption("llmProviders");
-    const providers = useMemo<LlmProviderConfig[]>(() => {
-        try {
-            return providersJson ? JSON.parse(providersJson) : [];
-        } catch {
-            return [];
-        }
-    }, [providersJson]);
-    const setProviders = useCallback((newProviders: LlmProviderConfig[]) => {
-        setProvidersJson(JSON.stringify(newProviders));
-    }, [setProvidersJson]);
-    const [showAddModal, setShowAddModal] = useState(false);
-
-    const handleAddProvider = useCallback((newProvider: LlmProviderConfig) => {
-        setProviders([...providers, newProvider]);
-    }, [providers, setProviders]);
-
-    const handleDeleteProvider = useCallback(async (providerId: string, providerName: string) => {
-        if (!(await dialog.confirm(t("llm.delete_provider_confirmation", { name: providerName })))) {
-            return;
-        }
-        setProviders(providers.filter(p => p.id !== providerId));
-    }, [providers, setProviders]);
-
-    return (
-        <OptionsSection title={t("llm.settings_title")}>
-            <p>{t("llm.settings_description")}</p>
-
-            <Button
-                size="small"
-                icon="bx bx-plus"
-                text={t("llm.add_provider")}
-                onClick={() => setShowAddModal(true)}
-            />
-
-            <hr />
-
-            <h5>{t("llm.configured_providers")}</h5>
-            <ProviderList
-                providers={providers}
-                onDelete={handleDeleteProvider}
-            />
-
-            <AddProviderModal
-                show={showAddModal}
-                onHidden={() => setShowAddModal(false)}
-                onSave={handleAddProvider}
-            />
-        </OptionsSection>
-    );
-}
-
-interface ProviderListProps {
-    providers: LlmProviderConfig[];
-    onDelete: (providerId: string, providerName: string) => Promise<void>;
-}
-
-function ProviderList({ providers, onDelete }: ProviderListProps) {
-    if (!providers.length) {
-        return <div>{t("llm.no_providers_configured")}</div>;
-    }
-
-    return (
-        <div style={{ overflow: "auto" }}>
-            <table className="table table-stripped">
-                <thead>
-                    <tr>
-                        <th>{t("llm.provider_name")}</th>
-                        <th>{t("llm.provider_type")}</th>
-                        <th>{t("llm.actions")}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {providers.map((provider) => {
-                        const providerType = PROVIDER_TYPES.find(p => p.id === provider.provider);
-                        return (
-                            <tr key={provider.id}>
-                                <td>{provider.name}</td>
-                                <td>{providerType?.name || provider.provider}</td>
-                                <td>
-                                    <ActionButton
-                                        icon="bx bx-trash"
-                                        text={t("llm.delete_provider")}
-                                        onClick={() => onDelete(provider.id, provider.name)}
-                                    />
-                                </td>
-                            </tr>
-                        );
-                    })}
-                </tbody>
-            </table>
-        </div>
-    );
-}

apps/client/src/widgets/type_widgets/options/llm/AddProviderModal.tsx

@@ -1,106 +0,0 @@
-import { createPortal } from "preact/compat";
-import { useState, useRef } from "preact/hooks";
-import Modal from "../../../react/Modal";
-import FormGroup from "../../../react/FormGroup";
-import FormSelect from "../../../react/FormSelect";
-import FormTextBox from "../../../react/FormTextBox";
-import { t } from "../../../../services/i18n";
-
-export interface LlmProviderConfig {
-    id: string;
-    name: string;
-    provider: string;
-    apiKey: string;
-}
-
-export interface ProviderType {
-    id: string;
-    name: string;
-}
-
-export const PROVIDER_TYPES: ProviderType[] = [
-    { id: "anthropic", name: "Anthropic" }
-];
-
-interface AddProviderModalProps {
-    show: boolean;
-    onHidden: () => void;
-    onSave: (provider: LlmProviderConfig) => void;
-}
-
-export default function AddProviderModal({ show, onHidden, onSave }: AddProviderModalProps) {
-    const [selectedProvider, setSelectedProvider] = useState(PROVIDER_TYPES[0].id);
-    const [apiKey, setApiKey] = useState("");
-    const formRef = useRef<HTMLFormElement>(null);
-
-    function handleSubmit() {
-        if (!apiKey.trim()) {
-            return;
-        }
-
-        const providerType = PROVIDER_TYPES.find(p => p.id === selectedProvider);
-        const newProvider: LlmProviderConfig = {
-            id: `${selectedProvider}_${Date.now()}`,
-            name: providerType?.name || selectedProvider,
-            provider: selectedProvider,
-            apiKey: apiKey.trim()
-        };
-
-        onSave(newProvider);
-        resetForm();
-        onHidden();
-    }
-
-    function resetForm() {
-        setSelectedProvider(PROVIDER_TYPES[0].id);
-        setApiKey("");
-    }
-
-    function handleCancel() {
-        resetForm();
-        onHidden();
-    }
-
-    return createPortal(
-        <Modal
-            show={show}
-            onHidden={handleCancel}
-            onSubmit={handleSubmit}
-            formRef={formRef}
-            title={t("llm.add_provider_title")}
-            className="add-provider-modal"
-            size="md"
-            footer={
-                <>
-                    <button type="button" className="btn btn-secondary" onClick={handleCancel}>
-                        {t("llm.cancel")}
-                    </button>
-                    <button type="submit" className="btn btn-primary" disabled={!apiKey.trim()}>
-                        {t("llm.add_provider")}
-                    </button>
-                </>
-            }
-        >
-            <FormGroup name="provider-type" label={t("llm.provider_type")}>
-                <FormSelect
-                    values={PROVIDER_TYPES}
-                    keyProperty="id"
-                    titleProperty="name"
-                    currentValue={selectedProvider}
-                    onChange={setSelectedProvider}
-                />
-            </FormGroup>
-
-            <FormGroup name="api-key" label={t("llm.api_key")}>
-                <FormTextBox
-                    type="password"
-                    currentValue={apiKey}
-                    onChange={setApiKey}
-                    placeholder={t("llm.api_key_placeholder")}
-                    autoFocus
-                />
-            </FormGroup>
-        </Modal>,
-        document.body
-    );
-}

apps/client/src/widgets/type_widgets/text/snippets.ts

@@ -3,7 +3,6 @@ import froca from "../../../services/froca.js";
 import type LoadResults from "../../../services/load_results.js";
 import search from "../../../services/search.js";
 import type { TemplateDefinition } from "@triliumnext/ckeditor5";
-import appContext from "../../../components/app_context.js";
 import type FNote from "../../../entities/fnote.js";
 
 interface TemplateData {
@@ -21,20 +20,25 @@ const debouncedHandleContentUpdate = debounce(handleContentUpdate, 1000);
  * @returns the list of templates.
  */
 export default async function getTemplates() {
-    // Build the definitions and populate the cache.
-    const snippets = await search.searchForNotes("#textSnippet");
-    const definitions: TemplateDefinition[] = [];
-    for (const snippet of snippets) {
-        const { description } = await invalidateCacheFor(snippet);
+    try {
+        // Build the definitions and populate the cache.
+        const snippets = await search.searchForNotes("#textSnippet");
+        const definitions: TemplateDefinition[] = [];
+        for (const snippet of snippets) {
+            const { description } = await invalidateCacheFor(snippet);
 
-        definitions.push({
-            title: snippet.title,
-            data: () => templateCache.get(snippet.noteId)?.content ?? "",
-            icon: buildIcon(snippet),
-            description
-        });
+            definitions.push({
+                title: snippet.title,
+                data: () => templateCache.get(snippet.noteId)?.content ?? "",
+                icon: buildIcon(snippet),
+                description
+            });
+        }
+        return definitions;
+    } catch (e) {
+        logError("Error while building text snippet templates: ", e);
+        return [];
     }
-    return definitions;
 }
 
 async function invalidateCacheFor(snippet: FNote) {

apps/client/vite.config.mts

@@ -87,7 +87,6 @@ export default defineConfig(() => ({
             input: {
                 index: join(__dirname, "index.html"),
                 login: join(__dirname, "src", "login.ts"),
-                setup: join(__dirname, "src", "setup.ts"),
                 set_password: join(__dirname, "src", "set_password.ts"),
                 runtime: join(__dirname, "src", "runtime.ts"),
                 print: join(__dirname, "src", "print.tsx")

apps/desktop-standalone/.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: shalithasuranga
+patreon: shalithasuranga
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

apps/desktop-standalone/.gitignore

@@ -0,0 +1,18 @@
+# Developer tools' files
+.lite_workspace.lua
+
+# Neutralinojs binaries and builds
+/bin
+/dist
+
+# Neutralinojs client (minified)
+neutralino.js
+
+# Neutralinojs related files
+.storage
+*.log
+.tmp
+
+# Files managed by the build script
+resources
+neutralino.config.json

apps/desktop-standalone/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Neutralinojs and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/desktop-standalone/README.md

@@ -0,0 +1,15 @@
+# neutralinojs-minimal
+
+The default template for a Neutralinojs app. It's possible to use your favorite frontend framework by using [these steps](https://neutralino.js.org/docs/getting-started/using-frontend-libraries).
+
+## Contributors
+
+[![Contributors](https://contrib.rocks/image?repo=neutralinojs/neutralinojs-minimal)](https://github.com/neutralinojs/neutralinojs-minimal/graphs/contributors)
+
+## License
+
+[MIT](LICENSE)
+
+## Icon credits
+
+- `trayIcon.png` - Made by [Freepik](https://www.freepik.com) and downloaded from [Flaticon](https://www.flaticon.com)

apps/desktop-standalone/neutralino.template.config.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://raw.githubusercontent.com/neutralinojs/neutralinojs/main/schemas/neutralino.config.schema.json",
+  "applicationId": "js.neutralino.sample",
+  "version": "1.0.0",
+  "defaultMode": "window",
+  "port": 0,
+  "documentRoot": "/resources/",
+  "url": "/",
+  "enableServer": true,
+  "enableNativeAPI": true,
+  "tokenSecurity": "one-time",
+  "logging": {
+    "enabled": true,
+    "writeToLogFile": true
+  },
+  "nativeAllowList": [
+    "app.*",
+    "os.*",
+    "debug.log"
+  ],
+  "globalVariables": {
+    "TEST1": "Hello",
+    "TEST2": [
+      2,
+      4,
+      5
+    ],
+    "TEST3": {
+      "value1": 10,
+      "value2": {}
+    }
+  },
+  "modes": {
+    "window": {
+      "title": "Trilium Notes Lite",
+      "width": 800,
+      "height": 500,
+      "minWidth": 400,
+      "minHeight": 200,
+      "center": true,
+      "fullScreen": false,
+      "alwaysOnTop": false,
+      "icon": "/resources/assets/icon.png",
+      "enableInspector": true,
+      "borderless": false,
+      "maximize": false,
+      "hidden": false,
+      "resizable": true,
+      "exitProcessOnClose": true
+    },
+    "browser": {
+      "globalVariables": {
+        "TEST": "Test value browser"
+      },
+      "nativeBlockList": [
+        "filesystem.*"
+      ]
+    },
+    "cloud": {
+      "url": "/resources/#cloud",
+      "nativeAllowList": [
+        "app.*"
+      ]
+    },
+    "chrome": {
+      "width": 800,
+      "height": 500,
+      "args": "--user-agent=\"Neutralinojs chrome mode\"",
+      "nativeBlockList": [
+        "filesystem.*",
+        "os.*"
+      ]
+    }
+  },
+  "cli": {
+    "binaryName": "standalone-desktop",
+    "resourcesPath": "/resources/",
+    "extensionsPath": "/extensions/",
+    "clientLibrary": "/resources/js/neutralino.js",
+    "binaryVersion": "6.4.0",
+    "clientVersion": "6.4.0"
+  }
+}