split: deterministic-tests, obsidian-plugin, local-cli, test-client, frontend root

New deterministic-tests workspace: scripted multi-client harness against
a real server (~110 scenario tests, server-control, managed-websocket,
test-runner). Updates to existing workspaces: obsidian-plugin (settings,
cursors, plugin entrypoint), local-client-cli (args, cli, file-watcher,
node-filesystem, path-utils + tests), test-client (mock-agent/client,
cli, error tracker). Bumps frontend root package.json/lock and adds
eslint config tweaks.

.github/dependabot.yml

@@ -0,0 +1,27 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directories: ["/frontend", "/docs"]
+    schedule:
+      interval: "daily"
+
+  - package-ecosystem: "docker"
+    directories: ["**"]
+    schedule:
+      interval: "daily"
+
+  - package-ecosystem: "cargo"
+    directories: ["**"]
+    schedule:
+      interval: "daily"
+
+  # Disable this for security reasons
+  # - package-ecosystem: "github-actions"
+  #   directories: ["**"]
+  #   schedule:
+  #     interval: "daily"

.github/workflows/check.yml

@@ -0,0 +1,36 @@
+name: Check
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+  workflow_dispatch:
+
+env:
+  CARGO_TERM_COLOR: always
+  RUSTFLAGS: "-Dwarnings"
+
+jobs:
+  build:
+    runs-on: self-hosted
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4.2.0
+        with:
+          node-version: "25.x"
+          check-latest: true
+
+      - name: Setup Rust toolchain
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          toolchain: "1.92.0"
+          components: clippy, rustfmt
+
+      - name: Lint & test
+        run: scripts/check.sh

.github/workflows/deploy-docs.yml

@@ -0,0 +1,58 @@
+name: Deploy Documentation
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "docs/**"
+      - ".github/workflows/deploy-docs.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: self-hosted
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4.2.0
+        with:
+          node-version: "25.x"
+          check-latest: true
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Build docs
+        run: scripts/build-docs.sh
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: self-hosted
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/e2e.yml

@@ -0,0 +1,72 @@
+name: E2E tests
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+  schedule:
+    - cron: "0 * * * *"
+  workflow_dispatch:
+
+concurrency:
+  group: e2e-tests
+  cancel-in-progress: false
+
+env:
+  RUSTFLAGS: "-Dwarnings"
+
+jobs:
+  build:
+    runs-on: self-hosted
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4.2.0
+        with:
+          node-version: "25.x"
+          check-latest: true
+
+      - name: Setup Rust toolchain
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          toolchain: "1.92.0"
+          components: clippy, rustfmt
+
+      - name: Setup rust
+        run: |
+          which sqlx || cargo install sqlx-cli
+          cd sync-server
+          sqlx database create --database-url sqlite://db.sqlite3
+          sqlx migrate run --source src/app_state/database/migrations --database-url sqlite://db.sqlite3
+
+      - name: E2E tests
+        run: |
+          cd sync-server
+          cargo run config-e2e.yml --color never &
+          SERVER_PID=$!
+          cd ..
+
+          scripts/e2e.sh 8
+          EXIT_CODE=$?
+
+          kill $SERVER_PID 2>/dev/null || true
+          wait $SERVER_PID 2>/dev/null || true
+
+          exit $EXIT_CODE
+
+      - name: Upload e2e logs
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: e2e-logs
+          path: logs/
+          retention-days: 30
+
+      - name: Cleanup
+        if: always()
+        run: scripts/clean-up.sh

.github/workflows/publish-cli-docker.yml

@@ -0,0 +1,67 @@
+name: Publish CLI
+
+on:
+  push:
+    branches: ["main"]
+    tags: ["*"]
+  pull_request:
+    branches: ["main"]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}-cli
+
+jobs:
+  publish-docker:
+    runs-on: self-hosted
+
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install cosign
+        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0
+        with:
+          cosign-release: "v2.2.4"
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+
+      - name: Log into registry ${{ env.REGISTRY }}
+        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        with:
+          context: frontend
+          file: frontend/local-client-cli/Dockerfile
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Sign the published Docker image
+        env:
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

.github/workflows/publish-plugin.yml

@@ -0,0 +1,59 @@
+name: Publish Obsidian plugin
+
+on:
+  push:
+    tags: ["*"]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  publish-plugin:
+    runs-on: self-hosted
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4.2.0
+        with:
+          node-version: "25.x"
+          check-latest: true
+
+      - name: Build plugin
+        run: |
+          cd frontend
+          npm ci
+          npm run build
+
+      - name: Setup Rust toolchain
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          toolchain: "1.92.0"
+          components: clippy, rustfmt
+
+      - name: Install cross-compilation tools
+        run: |
+          apt update
+          apt install -y gcc-aarch64-linux-gnu musl-tools gcc-mingw-w64-x86-64
+
+      - name: Build Linux and Windows binaries
+        run: ./scripts/build-sync-server-binaries.sh
+
+      - name: Create release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          tag="${GITHUB_REF#refs/tags/}"
+
+          mkdir -p release
+          cp frontend/obsidian-plugin/dist/* release/
+          cp sync-server/artifacts/sync-server-* release/
+          cd release
+
+          gh release create "$tag" \
+            --title="$tag" \
+            --draft \
+            *

.github/workflows/publish-server-docker.yml

@@ -0,0 +1,92 @@
+name: Publish server Docker image
+
+on:
+  push:
+    branches: ["main"]
+    tags: ["*"]
+  pull_request:
+    branches: ["main"]
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  publish-docker:
+    runs-on: self-hosted
+
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # Install the cosign tool
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.ref_type == 'tag'
+        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0
+        with:
+          cosign-release: "v2.2.4"
+
+      # Set up BuildKit Docker container builder to be able to build
+      # multi-platform images and export cache
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+
+      # Login against a Docker registry
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.ref_type == 'tag'
+        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        with:
+          context: sync-server
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.ref_type == 'tag' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      # Sign the resulting Docker image digest.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data. If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.ref_type == 'tag' }}
+        env:
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

frontend/deterministic-tests/README.md

@@ -10,7 +10,7 @@ Each test is a `TestDefinition`: a client count and an ordered list of steps. Th
 
 Tests that don't pause the server share a single server process (vault-name isolation). Tests that use `pause-server`/`resume-server` (SIGSTOP/SIGCONT) each get a dedicated server, since SIGSTOP freezes the entire process.
 
-The runner executes two sequential phases: regular tests on the shared server, then pause-server tests on dedicated servers. Within each phase tests run in parallel up to a concurrency limit.
+All tests run in parallel up to a concurrency limit.
 
 ## Step types
 
@@ -19,15 +19,12 @@ Clients always start with syncing disabled.
 **File operations** (per-client, fire-and-forget — sync is enqueued but not awaited):
 
 - `create`, `update`, `rename`, `delete`
-- `rename-next-write` — arm a deferred rename that fires the next time the given path is written. Lets a test race a user-rename against an in-flight remote create that's about to land at the same path.
 
 **Sync control:**
 
 - `sync` — wait for a specific client or all clients to finish pending operations
 - `barrier` — retry until all clients converge to identical file state (60s timeout)
 - `enable-sync` / `disable-sync` — simulate going online/offline
-- `reset` — reset a client's tracked sync state (keeps disk files); equivalent to a forced re-handshake on next enable
-- `sleep` — wall-clock pause; use sparingly, prefer `barrier` / `sync`
 
 **WebSocket control** (per-client):
 
@@ -36,12 +33,6 @@ Clients always start with syncing disabled.
 **Server control:**
 
 - `pause-server` / `resume-server` — SIGSTOP/SIGCONT the server process
-- `resume-server-until-history-then-pause` — resume the server, wait until a specific client observes a matching history entry (`CREATE`/`UPDATE`/`DELETE` for a path), then re-pause. Used to land exactly one operation across the wire.
-
-**Fault injection** (per-client):
-
-- `drop-next-create-response` — arm a one-shot interceptor that lets the next `POST /documents` reach the server (commit happens) but throws `SyncResetError` before the client sees the response, simulating connection loss after server commit.
-- `wait-for-dropped-create-response` — wait until the armed drop has fired.
 
 **Assertions:**
 
@@ -81,9 +72,7 @@ export const myScenarioTest: TestDefinition = {
     { type: "barrier" },
     {
       type: "assert-consistent",
-      verify: (s) => {
-        s.assertFileCount(1).assertContent("A.md", "hello");
-      }
+      verify: (s) => s.assertFileCount(1).assertContent("A.md", "hello")
     }
   ]
 };
@@ -92,18 +81,14 @@ export const myScenarioTest: TestDefinition = {
 The `verify` callback receives an `AssertableState` object with chainable assertion methods:
 
 ```typescript
-s.assertFileCount(n);                       // exact file count
-s.assertFileExists("path");                 // file must exist
-s.assertFileNotExists("path");              // file must not exist
-s.assertContent("path", "expected");        // exact content match
-s.assertContains("path", "a", "b");         // all substrings present in file
-s.assertContainsAny("path", "a", "b");      // at least one substring present
-s.assertAnyFileContains("text");            // substring present in some file
-s.assertNoFileContains("text");             // substring absent from every file
-s.assertSubstringCount("path", "x", 3);     // substring appears exactly N times
-s.assertContentInAtMostOneFile("text");     // no duplicate content
-s.ifFileExists("path", (s) => { /* … */ }); // conditional block
-s.getContent("path");                       // raw content (or "" if missing)
+s.assertFileCount(n)                   // exact file count
+s.assertFileExists("path")             // file must exist
+s.assertFileNotExists("path")          // file must not exist
+s.assertContent("path", "expected")    // exact content match
+s.assertContains("path", "a", "b")    // all substrings present
+s.assertAnyFileContains("text")        // substring in any file
+s.assertContentInAtMostOneFile("text") // no duplicate content
+s.ifFileExists("path", (s) => ...)    // conditional assertion
 ```
 
 2. Register it in `src/test-registry.ts`:

frontend/deterministic-tests/package.json

@@ -11,7 +11,6 @@
         "test": "npm run build && node dist/cli.js"
     },
     "devDependencies": {
-        "commander": "^14.0.2",
         "@types/node": "^25.0.2",
         "sync-client": "file:../sync-client",
         "ts-loader": "^9.5.4",

frontend/deterministic-tests/src/cli.ts

@@ -4,7 +4,7 @@ import { ServerManager } from "./server-manager";
 import { PrefixedLogger } from "./prefixed-logger";
 import { TESTS } from "./test-registry";
 import type { TestDefinition, TestResult } from "./test-definition";
-import { parseArgs } from "./parse-args";
+import { parseConcurrency } from "./parse-concurrency";
 import { runWithConcurrency } from "./run-with-concurrency";
 import { TOKEN, SERVER_BINARY_PATH, CONFIG_PATH } from "./consts";
 import * as path from "node:path";
@@ -29,31 +29,7 @@ serverManager.installSignalHandlers();
 
 function testUsesPauseServer(test: TestDefinition): boolean {
     return test.steps.some(
-        (step) =>
-            step.type === "pause-server" ||
-            step.type === "resume-server" ||
-            step.type === "resume-server-until-history-then-pause"
-    );
-}
-
-/**
- * Walk up from the CLI binary's location until we find a directory
- * containing `sync-server/` and `frontend/`.
- */
-function findProjectRoot(): string {
-    let dir = path.dirname(__filename);
-    const root = path.parse(dir).root;
-    while (dir !== root) {
-        if (
-            fs.existsSync(path.join(dir, "sync-server")) &&
-            fs.existsSync(path.join(dir, "frontend"))
-        ) {
-            return dir;
-        }
-        dir = path.dirname(dir);
-    }
-    throw new Error(
-        `Could not locate project root (no ancestor of ${__filename} contains both 'sync-server' and 'frontend')`
+        (step) => step.type === "pause-server" || step.type === "resume-server"
     );
 }
 
@@ -124,7 +100,15 @@ async function runDedicatedServerTest(
 }
 
 async function main(): Promise<void> {
-    const projectRoot = findProjectRoot();
+    const cwd = process.cwd();
+    let projectRoot = cwd;
+
+    if (cwd.endsWith("frontend/deterministic-tests")) {
+        projectRoot = path.resolve(cwd, "../..");
+    } else if (cwd.endsWith("frontend")) {
+        projectRoot = path.resolve(cwd, "..");
+    }
+
     const serverPath = path.join(projectRoot, SERVER_BINARY_PATH);
     if (!fs.existsSync(serverPath)) {
         logger.error(`Server binary not found at: ${serverPath}`);
@@ -137,7 +121,8 @@ async function main(): Promise<void> {
         process.exit(1);
     }
 
-    const { filter, concurrency } = parseArgs(process.argv);
+    const filterArg = process.argv.find((a) => a.startsWith("--filter="));
+    const filter = filterArg?.slice("--filter=".length);
 
     const testsToRun: [string, TestDefinition][] = [];
     for (const [key, test] of Object.entries(TESTS)) {
@@ -162,6 +147,7 @@ async function main(): Promise<void> {
         process.exit(1);
     }
 
+    const concurrency = parseConcurrency();
     const regularTests = testsToRun.filter(([, t]) => !testUsesPauseServer(t));
     const pauseTests = testsToRun.filter(([, t]) => testUsesPauseServer(t));
 

frontend/deterministic-tests/src/consts.ts

@@ -11,7 +11,3 @@ export const IS_SYNC_ENABLED_BY_DEFAULT = false;
 export const WAIT_TIMEOUT_MS = 60_000;
 export const WEBSOCKET_CONNECT_TIMEOUT_MS = 10_000;
 export const WEBSOCKET_POLL_INTERVAL_MS = 50;
-
-export const SERVER_READY_POLL_INTERVAL_MS = 100;
-export const SERVER_READY_MAX_ATTEMPTS = 50;
-export const SERVER_START_MAX_ATTEMPTS = 5;

frontend/deterministic-tests/src/deterministic-agent.ts

@@ -37,15 +37,15 @@ export class DeterministicAgent extends debugging.InMemoryFileSystem {
     private readonly wsFactory = new ManagedWebSocketFactory();
     private nextWriteRename:
         | {
-            oldPath: RelativePath;
-            newPath: RelativePath;
-        }
+              oldPath: RelativePath;
+              newPath: RelativePath;
+          }
         | undefined;
     private nextCreateResponseDrop:
         | {
-            dropped: Promise<void>;
-            resolveDropped: () => void;
-        }
+              dropped: Promise<void>;
+              resolveDropped: () => void;
+          }
         | undefined;
 
     public constructor(
@@ -82,10 +82,10 @@ export class DeterministicAgent extends debugging.InMemoryFileSystem {
                     this.logger(`${prefix} WARN: ${line.message}`);
                     break;
                 case LogLevel.INFO:
-                    this.logger(`${prefix} INFO: ${line.message}`);
+                    this.logger(`${prefix} ${line.message}`);
                     break;
                 case LogLevel.DEBUG:
-                    this.logger(`${prefix} DEBUG: ${line.message}`);
+                    // Skip debug logs to reduce noise
                     break;
             }
         });
@@ -271,18 +271,8 @@ export class DeterministicAgent extends debugging.InMemoryFileSystem {
                 this.log(`Cleanup waitUntilFinished failed: ${error}`);
             }
         }
-        // Surface any background sync errors that arrived after the last
-        // waitForSync (e.g. between the final assert-consistent and here).
-        // Without this, regressions that fault the engine during the very
-        // last step of a test would be silently swallowed.
-        const pendingErrors = this.syncErrors.splice(0);
         await this.client.destroy();
         this.log("Cleanup complete");
-        if (pendingErrors.length > 0) {
-            throw new Error(
-                `Client ${this.clientId} had ${pendingErrors.length} background sync error(s) during cleanup:\n${pendingErrors.map((e) => e.message).join("\n")}`
-            );
-        }
     }
 
     public override async read(path: RelativePath): Promise<Uint8Array> {
@@ -322,10 +312,6 @@ export class DeterministicAgent extends debugging.InMemoryFileSystem {
                     });
                 });
             }
-            // The rename consumed `path`. Skip the post-update enqueue below
-            // — it would send a syncLocallyUpdatedFile for a path that no
-            // longer exists.
-            return;
         }
 
         if (!this.isSyncEnabled) {
@@ -449,11 +435,6 @@ export class DeterministicAgent extends debugging.InMemoryFileSystem {
                 DeterministicAgent.isCreateDocumentRequest(input, init)
             ) {
                 this.nextCreateResponseDrop = undefined;
-                try {
-                    await response.body?.cancel();
-                } catch {
-                    // Best-effort — body may already be consumed/closed.
-                }
                 drop.resolveDropped();
                 throw new SyncResetError();
             }

frontend/deterministic-tests/src/managed-websocket.ts

@@ -139,21 +139,11 @@ class ManagedWebSocket implements WebSocket {
     }
 
     public resume(): void {
-        // Drain buffered messages BEFORE flipping `paused` to false.
-        // If `externalOnMessage` is async (its return type is `unknown`),
-        // dispatch yields control between buffered messages, and a fresh
-        // live `ws.onmessage` event firing during that yield would jump
-        // ahead of unprocessed buffered messages — silently reordering
-        // events relative to the wire. Keeping `paused = true` during the
-        // drain forces the live handler to keep buffering, so we splice
-        // those late arrivals onto the tail and dispatch them in order.
-        while (this.bufferedMessages.length > 0) {
-            const messages = this.bufferedMessages.splice(0);
-            for (const msg of messages) {
-                this.externalOnMessage?.(msg);
-            }
-        }
         this.paused = false;
+        const messages = this.bufferedMessages.splice(0);
+        for (const msg of messages) {
+            this.externalOnMessage?.(msg);
+        }
     }
 
     public send(data: string | ArrayBufferLike | Blob | ArrayBufferView): void {
@@ -167,17 +157,6 @@ class ManagedWebSocket implements WebSocket {
     public addEventListener(
         ...args: Parameters<WebSocket["addEventListener"]>
     ): void {
-        // Only the `.onmessage` setter routes through the pause buffer.
-        // If sync-client ever attaches "message" listeners via
-        // addEventListener instead, those messages would bypass pause/resume
-        // and deterministic tests would silently lose their fault injection.
-        if (args[0] === "message") {
-            throw new Error(
-                "ManagedWebSocket: addEventListener('message') bypasses the " +
-                    "pause buffer. Use the .onmessage setter instead, or " +
-                    "extend ManagedWebSocket to route message listeners."
-            );
-        }
         this.ws.addEventListener(...args);
     }
 
@@ -197,11 +176,6 @@ class ManagedWebSocket implements WebSocket {
  * for pause/resume control from the test harness
  */
 export class ManagedWebSocketFactory {
-    // Append-only: closed sockets stay tracked. Bounded per test (one
-    // factory per agent, each test discards its agents on cleanup), so
-    // not a real leak — but iterating over closed instances on
-    // pause/resume is a deliberate no-op since their `.onmessage` is
-    // already detached.
     private readonly instances: ManagedWebSocket[] = [];
     // Sticky pause state: applied to current instances on `pause()` AND
     // to any new instance created later (e.g. WS reconnect after a

frontend/deterministic-tests/src/parse-args.ts

@@ -1,43 +0,0 @@
-import * as os from "node:os";
-import { Command, InvalidArgumentError } from "commander";
-
-export interface CliArgs {
-    filter: string | undefined;
-    concurrency: number;
-}
-
-function parsePositiveInt(value: string): number {
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n <= 0) {
-        throw new InvalidArgumentError("must be a positive integer");
-    }
-    return n;
-}
-
-export function parseArgs(argv: string[]): CliArgs {
-    const program = new Command();
-
-    program
-        .name("deterministic-tests")
-        .description("Scripted multi-client sync tests against a real server")
-        .option(
-            "-f, --filter <substring>",
-            "Run only tests whose name contains this substring"
-        )
-        .option(
-            "-j, --concurrency <number>",
-            "Number of tests to run in parallel",
-            parsePositiveInt,
-            os.cpus().length
-        );
-
-    program.parse(argv);
-
-    /* eslint-disable @typescript-eslint/no-unsafe-type-assertion */
-    const opts = program.opts();
-    const filter = opts.filter as string | undefined;
-    const concurrency = opts.concurrency as number;
-    /* eslint-enable @typescript-eslint/no-unsafe-type-assertion */
-
-    return { filter, concurrency };
-}

frontend/deterministic-tests/src/parse-concurrency.ts

@@ -0,0 +1,17 @@
+import * as os from "node:os";
+
+export function parseConcurrency(): number {
+    const args = process.argv.slice(2);
+    for (let i = 0; i < args.length; i++) {
+        if (
+            (args[i] === "--concurrency" || args[i] === "-j") &&
+            i + 1 < args.length
+        ) {
+            const n = parseInt(args[i + 1], 10);
+            if (!isNaN(n) && n > 0) {
+                return n;
+            }
+        }
+    }
+    return os.cpus().length;
+}

frontend/deterministic-tests/src/server-control.ts

@@ -5,12 +5,7 @@ import * as path from "node:path";
 import { sleep } from "./utils/sleep";
 import { findFreePort } from "./utils/find-free-port";
 import type { Logger } from "sync-client";
-import {
-    STOP_TIMEOUT_MS,
-    SERVER_READY_POLL_INTERVAL_MS,
-    SERVER_READY_MAX_ATTEMPTS,
-    SERVER_START_MAX_ATTEMPTS
-} from "./consts";
+import { STOP_TIMEOUT_MS } from "./consts";
 
 export class ServerControl {
     private process: ChildProcess | null = null;
@@ -43,32 +38,10 @@ export class ServerControl {
             throw new Error("Server is already running");
         }
 
-        // Retry on bind failure: findFreePort closes its probe before we
-        // spawn, so under heavy parallelism another process can grab the
-        // same port. Each attempt picks a fresh port.
-        let lastError: unknown;
-        for (let attempt = 1; attempt <= SERVER_START_MAX_ATTEMPTS; attempt++) {
-            try {
-                await this.startOnce();
-                return;
-            } catch (error) {
-                lastError = error;
-                this.logger.warn(
-                    `Server start attempt ${attempt}/${SERVER_START_MAX_ATTEMPTS} failed: ${error instanceof Error ? error.message : String(error)}`
-                );
-                // startOnce already cleaned up its child + tempdir on failure.
-            }
-        }
-        throw new Error(
-            `Server failed to start after ${SERVER_START_MAX_ATTEMPTS} attempts: ${lastError instanceof Error ? lastError.message : String(lastError)}`,
-            { cause: lastError instanceof Error ? lastError : undefined }
-        );
-    }
-
-    private async startOnce(): Promise<void> {
         const reservation = await findFreePort();
         this._port = reservation.port;
-        const tmpBase = os.tmpdir();
+        // Prefer tmpfs (/host/tmp) over disk-backed /tmp for faster SQLite I/O
+        const tmpBase = fs.existsSync("/host/tmp") ? "/host/tmp" : os.tmpdir();
         this.tempDir = fs.mkdtempSync(path.join(tmpBase, "vault-link-test-"));
         const tempConfigPath = path.join(this.tempDir, "config.yml");
         const dbDir = path.join(this.tempDir, "databases");
@@ -128,9 +101,7 @@ export class ServerControl {
         }
     }
 
-    public async waitForReady(
-        maxAttempts: number = SERVER_READY_MAX_ATTEMPTS
-    ): Promise<void> {
+    public async waitForReady(maxAttempts = 50): Promise<void> {
         const pingUrl = `${this.remoteUri}/vaults/test/ping`;
         for (let i = 0; i < maxAttempts; i++) {
             if (this.process?.exitCode !== null) {
@@ -147,7 +118,7 @@ export class ServerControl {
             } catch {
                 // Server not ready yet, continue polling
             }
-            await sleep(SERVER_READY_POLL_INTERVAL_MS);
+            await sleep(100);
         }
         throw new Error("Server failed to start within timeout");
     }
@@ -237,42 +208,10 @@ export class ServerControl {
     }
 
     public isRunning(): boolean {
-        const proc = this.process;
-        return (
-            proc !== null &&
-            proc.pid !== undefined &&
-            proc.exitCode === null &&
-            proc.signalCode === null
-        );
-    }
-
-    /**
-     * Synchronously SIGCONT-then-SIGKILL the child process. Safe to call
-     * from a `process.on("exit", ...)` handler, where async work cannot
-     * run. Used as a last-resort cleanup so a SIGSTOP'd server doesn't
-     * outlive the test runner and wedge the next CI invocation.
-     */
-    public forceKillSync(): void {
-        const proc = this.process;
-        if (proc?.pid === undefined) {
-            return;
-        }
-        try {
-            process.kill(proc.pid, "SIGCONT");
-        } catch {
-            // Process may already be gone or never paused.
-        }
-        try {
-            process.kill(proc.pid, "SIGKILL");
-        } catch {
-            // Process already gone.
-        }
+        return this.process?.pid !== undefined;
     }
 
     private writeConfigFile(destPath: string, dbDir: string): void {
-        // Assumes config-e2e.yml has exactly one 2-space-indented `port:` and
-        // one `databases_directory_path:` (under `server:` and `database:`
-        // respectively)
         const baseConfig = fs.readFileSync(this.baseConfigPath, "utf-8");
         const config = baseConfig
             .replace(/^\s*port:\s*\d+/m, `  port: ${this._port}`)

frontend/deterministic-tests/src/server-manager.ts

@@ -55,17 +55,5 @@ export class ServerManager {
                 })
                 .then(() => process.exit(143));
         });
-
-        // Last-resort synchronous cleanup. Runs even when the process is
-        // exiting via process.exit() from unhandledRejection /
-        // uncaughtException — paths where async stopAll() cannot complete.
-        // SIGSTOP'd servers MUST receive SIGCONT before SIGKILL or the
-        // kernel keeps them as zombies holding the test's tmpdir, and the
-        // next CI run can't reuse the port.
-        process.on("exit", () => {
-            for (const server of this.activeServers) {
-                server.forceKillSync();
-            }
-        });
     }
 }

frontend/deterministic-tests/src/test-registry.ts

@@ -33,9 +33,10 @@ import { offlineDeleteVsRemoteUpdateTest } from "./tests/offline-delete-vs-remot
 import { doubleOfflineCycleTest } from "./tests/double-offline-cycle.test";
 import { serverPauseRenameEditResumeTest } from "./tests/server-pause-rename-edit-resume.test";
 import { offlineUpdateBothThenDeleteOneTest } from "./tests/offline-update-both-then-delete-one.test";
-import { offlineCreateSamePathMergeableTest } from "./tests/offline-create-same-path-mergeable.test";
+import { offlineCreateSamePathMergeableTest } from "./tests/offline-create-same-path-binary-conflict.test";
 import { deleteDuringPendingCreateTest } from "./tests/delete-during-pending-create.test";
 import { threeClientRenameCreateDeleteTest } from "./tests/three-client-rename-create-delete.test";
+import { keyMigrationEventDropTest } from "./tests/key-migration-event-drop.test";
 import { renameToPathOfUnconfirmedDeleteTest } from "./tests/rename-to-path-of-unconfirmed-delete.test";
 import { offlineEditThenMoveSameContentTest } from "./tests/offline-edit-then-move-same-content.test";
 import { rapidCreateUpdateDeleteCycleTest } from "./tests/rapid-create-update-delete-cycle.test";
@@ -46,9 +47,10 @@ import { offlineMoveThenRemoteDeleteTest } from "./tests/offline-move-then-remot
 import { resetClearsRecentlyDeletedResurrectionTest } from "./tests/reset-clears-recently-deleted-resurrection.test";
 import { moveThenDeleteStalePathTest } from "./tests/move-then-delete-stale-path.test";
 import { interruptedDeleteRetryTest } from "./tests/interrupted-delete-retry.test";
-import { updateDoesNotSurviveRemoteDeleteTest } from "./tests/update-does-not-survive-remote-delete.test";
+import { updateDoesNotSurvivesRemoteDeleteTest } from "./tests/update-survives-remote-delete.test";
 import { movePreservesRemoteUpdateTest } from "./tests/move-preserves-remote-update.test";
 import { recentlyDeletedClearedOnReconnectTest } from "./tests/recently-deleted-cleared-on-reconnect.test";
+import { migrateKeyPreservesExistingTest } from "./tests/migrate-key-preserves-existing.test";
 import { watermarkAdvancesOnSkipTest } from "./tests/watermark-advances-on-skip.test";
 import { watermarkGapRemoteUpdateNotRecordedTest } from "./tests/watermark-gap-remote-update-not-recorded.test";
 import { queueResetLosesCoalescedLocalEditTest } from "./tests/queue-reset-loses-coalesced-local-edit.test";
@@ -60,25 +62,25 @@ import { createRenameResponseSkipsFileTest } from "./tests/create-rename-respons
 import { onlineCreateRenameConcurrentCreateOrphanTest } from "./tests/online-create-rename-concurrent-create-orphan.test";
 import { concurrentRenameFirstWinsTest } from "./tests/concurrent-rename-first-wins.test";
 import { binaryToTextTransitionTest } from "./tests/binary-to-text-transition.test";
-import { textPendingCreateNotDisplacedTest } from "./tests/text-pending-create-not-displaced.test";
-import { binaryPendingCreateNotDisplacedTest } from "./tests/binary-pending-create-not-displaced.test";
-import { coalesceUpdateRemoteUpdateDataLossTest } from "./tests/coalesce-update-remote-update-data-loss.test";
-import { coalescedRemoteUpdateWatermarkLossTest } from "./tests/coalesced-remote-update-watermark-loss.test";
-import { concurrentDeleteDuringRemoteUpdateTest } from "./tests/concurrent-delete-during-remote-update.test";
-import { concurrentEditExactSamePositionTest } from "./tests/concurrent-edit-exact-same-position.test";
-import { concurrentRenameAndCreateAtTargetRenameFirstTest } from "./tests/concurrent-rename-and-create-at-target-rename-first.test";
-import { concurrentRenameAndCreateAtTargetCreateFirstTest } from "./tests/concurrent-rename-and-create-at-target-create-first.test";
-import { concurrentRenameSameTargetTest } from "./tests/concurrent-rename-same-target.test";
-import { concurrentUpdateDiffConsistencyTest } from "./tests/concurrent-update-diff-consistency.test";
-import { userParenthesizedFileNotDeletedTest } from "./tests/user-parenthesized-file-not-deleted.test";
-import { createDeleteNoopTest } from "./tests/create-delete-noop.test";
-import { createMergeDeleteTest } from "./tests/create-merge-delete.test";
-import { moveIdenticalContentAmbiguityTest } from "./tests/move-identical-content-ambiguity.test";
-import { createUpdateCoalesceServerPauseTest } from "./tests/create-update-coalesce-server-pause.test";
-import { createDuringReconciliationTest } from "./tests/create-during-reconciliation.test";
-import { createMergePreservesRenamedUpdateTest } from "./tests/create-merge-preserves-renamed-update.test";
-import { createRenameCreateSamePathTest } from "./tests/create-rename-create-same-path.test";
-import { moveChainThreeFilesTest } from "./tests/move-chain-three-files.test";
+import { textPendingCreateNotDisplacedTest } from "./tests/1-text-pending-create-not-displaced.test";
+import { binaryPendingCreateNotDisplacedTest } from "./tests/2-binary-pending-create-not-displaced.test";
+import { coalesceUpdateRemoteUpdateDataLossTest } from "./tests/3-coalesce-update-remote-update-data-loss.test";
+import { coalescedRemoteUpdateWatermarkLossTest } from "./tests/4-coalesced-remote-update-watermark-loss.test";
+import { concurrentDeleteDuringRemoteUpdateTest } from "./tests/5-concurrent-delete-during-remote-update.test";
+import { concurrentEditExactSamePositionTest } from "./tests/6-concurrent-edit-exact-same-position.test";
+import { concurrentRenameAndCreateAtTargetTest as concurrentRenameAndCreateAtTargetRenameFirstTest } from "./tests/7-concurrent-rename-and-create-at-target.test";
+import { concurrentRenameAndCreateAtTargetTest as concurrentRenameAndCreateAtTargetCreateFirstTest } from "./tests/8-concurrent-rename-and-create-at-target.test";
+import { concurrentRenameSameTargetTest } from "./tests/9-concurrent-rename-same-target.test";
+import { concurrentUpdateDiffConsistencyTest } from "./tests/10-concurrent-update-diff-consistency.test";
+import { userParenthesizedFileNotDeletedTest } from "./tests/10-user-parenthesized-file-not-deleted.test";
+import { createDeleteNoopTest } from "./tests/11-create-delete-noop.test";
+import { createMergeDeleteTest } from "./tests/12-create-merge-delete.test";
+import { moveIdenticalContentAmbiguityTest } from "./tests/13-move-identical-content-ambiguity.test";
+import { createUpdateCoalesceServerPauseTest } from "./tests/15-create-update-coalesce-server-pause.test";
+import { createDuringReconciliationTest } from "./tests/16-create-during-reconciliation.test";
+import { createMergePreservesRenamedUpdateTest } from "./tests/17-create-merge-preserves-renamed-update.test";
+import { createRenameCreateSamePathTest } from "./tests/18-create-rename-create-same-path.test";
+import { moveChainThreeFilesTest } from "./tests/19-move-chain-three-files.test";
 import { deleteByOtherClientThenRecreateTest } from "./tests/delete-by-other-client-then-recreate.test";
 import { onlineDeleteRecreateRapidCycleTest } from "./tests/online-delete-recreate-rapid-cycle.test";
 import { onlineEditVsDeleteConvergenceTest } from "./tests/online-edit-vs-delete-convergence.test";
@@ -145,6 +147,7 @@ export const TESTS: Partial<Record<string, TestDefinition>> = {
     "offline-create-same-path-mergeable": offlineCreateSamePathMergeableTest,
     "delete-during-pending-create": deleteDuringPendingCreateTest,
     "three-client-rename-create-delete": threeClientRenameCreateDeleteTest,
+    "key-migration-event-drop": keyMigrationEventDropTest,
     "rename-to-path-of-unconfirmed-delete": renameToPathOfUnconfirmedDeleteTest,
     "offline-edit-then-move-same-content": offlineEditThenMoveSameContentTest,
     "rapid-create-update-delete-cycle": rapidCreateUpdateDeleteCycleTest,
@@ -157,10 +160,11 @@ export const TESTS: Partial<Record<string, TestDefinition>> = {
     "move-then-delete-stale-path": moveThenDeleteStalePathTest,
     "offline-delete-vs-remote-update": offlineDeleteVsRemoteUpdateTest,
     "interrupted-delete-retry": interruptedDeleteRetryTest,
-    "update-does-not-survive-remote-delete": updateDoesNotSurviveRemoteDeleteTest,
+    "update-survives-remote-delete": updateDoesNotSurvivesRemoteDeleteTest,
     "move-preserves-remote-update": movePreservesRemoteUpdateTest,
     "recently-deleted-cleared-on-reconnect":
         recentlyDeletedClearedOnReconnectTest,
+    "migrate-key-preserves-existing": migrateKeyPreservesExistingTest,
     "watermark-advances-on-skip": watermarkAdvancesOnSkipTest,
     "watermark-gap-remote-update-not-recorded":
         watermarkGapRemoteUpdateNotRecordedTest,

frontend/deterministic-tests/src/test-runner.ts

@@ -266,10 +266,18 @@ export class TestRunner {
             }
         }
 
-        throw new Error(
-            `Convergence timed out after ${CONVERGENCE_TIMEOUT_MS}ms: ${lastError?.message ?? "no consistency check ran"}`,
-            { cause: lastError }
-        );
+        // Final attempt — let the error propagate
+        await this.waitAllAgentsSettled();
+
+        try {
+            await this.assertConsistent();
+            this.logger.info("Barrier complete: all clients converged");
+        } catch (error) {
+            throw new Error(
+                `Convergence timed out after ${CONVERGENCE_TIMEOUT_MS}ms: ${error instanceof Error ? error.message : String(error)}`,
+                { cause: lastError }
+            );
+        }
     }
 
     /**

frontend/deterministic-tests/src/tests/3-coalesce-update-remote-update-data-loss.test.ts

@@ -3,14 +3,8 @@ import type { TestDefinition } from "../test-definition";
 
 export const coalesceUpdateRemoteUpdateDataLossTest: TestDefinition = {
     description:
-        "Divergent offline edits with text-merge expectation. Client 0's " +
-        "remote update fully lands before Client 1 reconnects (`sync`-after " +
-        "the c0 update enforces this), so Client 1's offline edit merges " +
-        "against a server-known version, not a coalesced batch. Both " +
-        "additions must survive in the final merged content. (Filename's " +
-        "'coalesce' framing is aspirational — a true update-coalesce test " +
-        "would skip the c0 sync and queue overlapping local + remote " +
-        "updates against the same parent version.)",
+        "Client 0 edits a file while client 1 is offline. Client 1 reconnects " +
+        "and immediately edits the same file. Both edits should be preserved.",
     clients: 2,
     steps: [
         {

frontend/deterministic-tests/src/tests/7-concurrent-rename-and-create-at-target.test.ts

@@ -1,7 +1,7 @@
 import type { AssertableState } from "../utils/assertable-state";
 import type { TestDefinition } from "../test-definition";
 
-export const concurrentRenameAndCreateAtTargetRenameFirstTest: TestDefinition = {
+export const concurrentRenameAndCreateAtTargetTest: TestDefinition = {
     description:
         "One client renames X to Y while another creates a new file at Y, " +
         "both offline. We can't merge the create because it would result in a cycle",

frontend/deterministic-tests/src/tests/8-concurrent-rename-and-create-at-target.test.ts

@@ -1,7 +1,7 @@
 import type { AssertableState } from "../utils/assertable-state";
 import type { TestDefinition } from "../test-definition";
 
-export const concurrentRenameAndCreateAtTargetCreateFirstTest: TestDefinition = {
+export const concurrentRenameAndCreateAtTargetTest: TestDefinition = {
     description:
         "One client renames X to Y while another creates a new file at Y, " +
         "both offline. After syncing, Y should contain merged content from " +

frontend/deterministic-tests/src/tests/key-migration-event-drop.test.ts

@@ -0,0 +1,39 @@
+import type { AssertableState } from "../utils/assertable-state";
+import type { TestDefinition } from "../test-definition";
+
+export const keyMigrationEventDropTest: TestDefinition = {
+    description:
+        "Client 0 creates a file and immediately updates it while the server is paused. " +
+        "After resume, both clients should have the updated content.",
+    clients: 2,
+    steps: [
+        { type: "enable-sync", client: 0 },
+        { type: "enable-sync", client: 1 },
+        { type: "barrier" },
+
+        { type: "pause-server" },
+
+        {
+            type: "create",
+            client: 0,
+            path: "A.md",
+            content: "initial content"
+        },
+        {
+            type: "update",
+            client: 0,
+            path: "A.md",
+            content: "updated content"
+        },
+
+        { type: "resume-server" },
+        { type: "barrier" },
+
+        {
+            type: "assert-consistent",
+            verify: (s: AssertableState): void => {
+                s.assertFileCount(1).assertContent("A.md", "updated content");
+            }
+        }
+    ]
+};

frontend/deterministic-tests/src/tests/migrate-key-preserves-existing.test.ts

@@ -0,0 +1,37 @@
+import type { AssertableState } from "../utils/assertable-state";
+import type { TestDefinition } from "../test-definition";
+
+export const migrateKeyPreservesExistingTest: TestDefinition = {
+    description:
+        "Client 0 creates a file and immediately updates it while the server is paused. " +
+        "After resume, the update must not be lost.",
+    clients: 2,
+    steps: [
+        { type: "enable-sync", client: 0 },
+        { type: "enable-sync", client: 1 },
+        { type: "barrier" },
+
+        { type: "pause-server" },
+
+        { type: "create", client: 0, path: "A.md", content: "initial" },
+        {
+            type: "update",
+            client: 0,
+            path: "A.md",
+            content: "updated by client 0"
+        },
+
+        { type: "resume-server" },
+        { type: "barrier" },
+
+        {
+            type: "assert-consistent",
+            verify: (s: AssertableState): void => {
+                s.assertFileCount(1).assertContains(
+                    "A.md",
+                    "updated by client 0"
+                );
+            }
+        }
+    ]
+};

frontend/eslint.config.mjs

@@ -8,7 +8,7 @@ export default [
             "sync-client/src/services/types.ts",
             "**/dist/",
             "**/*.mjs",
-            "**/*.js"
+            "**/*.js",
         ]
     },
     ...tseslint.config({
@@ -17,7 +17,9 @@ export default [
         },
         extends: [eslint.configs.recommended, tseslint.configs.all],
         rules: {
+            "no-console": "error",
             "no-unused-vars": "off",
+            "curly": ["error", "all"],
             "@typescript-eslint/restrict-template-expressions": "off",
             "@typescript-eslint/no-unused-vars": "off",
             "@typescript-eslint/no-floating-promises": [

frontend/history-ui/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>VaultLink2</title>
+        <link rel="icon" href="data:," />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

frontend/history-ui/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "history-ui",
+    "version": "0.14.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite dev --host 0.0.0.0",
+        "build": "vite build",
+        "test": "echo 'no tests yet'"
+    },
+    "devDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "svelte": "^5.0.0",
+        "vite": "^6.0.0"
+    }
+}

frontend/history-ui/src/App.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { auth, nav, toasts } from "./lib/stores.svelte";
+    import { listVaults } from "./lib/api";
+    import Login from "./components/Login.svelte";
+    import VaultPicker from "./components/VaultPicker.svelte";
+    import Dashboard from "./components/Dashboard.svelte";
+    import ToastContainer from "./components/ToastContainer.svelte";
+
+    let restoring = $state(true);
+
+    $effect(() => {
+        const saved = auth.tryRestore();
+        if (!saved) {
+            restoring = false;
+            return;
+        }
+        listVaults(saved.token)
+            .then((response) => {
+                auth.authenticate(
+                    saved.token,
+                    response.userName,
+                    response.vaults
+                );
+                if (
+                    saved.vaultId &&
+                    response.vaults.some(
+                        (v) => v.name === saved.vaultId
+                    )
+                ) {
+                    auth.selectVault(saved.vaultId);
+                }
+                restoring = false;
+            })
+            .catch(() => {
+                restoring = false;
+            });
+    });
+</script>
+
+{#if restoring}
+    <div class="loading-screen">
+        <div class="spinner"></div>
+    </div>
+{:else if !auth.token}
+    <Login />
+{:else if !auth.isAuthenticated}
+    <VaultPicker />
+{:else}
+    <Dashboard
+        selectedDocumentId={nav.current.kind === "document" ? nav.current.documentId : undefined}
+    />
+{/if}
+
+<ToastContainer />
+
+<style>
+    .loading-screen {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+    }
+
+    .spinner {
+        width: 32px;
+        height: 32px;
+        border: 3px solid var(--bg-tertiary);
+        border-top-color: var(--accent);
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>

frontend/history-ui/src/app.css

@@ -0,0 +1,101 @@
+:root {
+    --bg: #0d1117;
+    --bg-secondary: #161b22;
+    --bg-tertiary: #21262d;
+    --bg-hover: #30363d;
+    --border: #30363d;
+    --border-light: #21262d;
+    --text: #e6edf3;
+    --text-muted: #8b949e;
+    --text-subtle: #6e7681;
+    --accent: #58a6ff;
+    --accent-hover: #79c0ff;
+    --green: #3fb950;
+    --green-bg: rgba(63, 185, 80, 0.15);
+    --red: #f85149;
+    --red-bg: rgba(248, 81, 73, 0.15);
+    --orange: #d29922;
+    --orange-bg: rgba(210, 153, 34, 0.15);
+    --purple: #bc8cff;
+    --purple-bg: rgba(188, 140, 255, 0.15);
+    --blue: #58a6ff;
+    --blue-bg: rgba(88, 166, 255, 0.15);
+    --mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
+    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Noto Sans, Helvetica, Arial, sans-serif;
+    --radius: 6px;
+    --radius-sm: 4px;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body, #app {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: var(--sans);
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text);
+    background: var(--bg);
+    -webkit-font-smoothing: antialiased;
+}
+
+button {
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    border: none;
+    background: none;
+    color: inherit;
+}
+
+input {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 8px 12px;
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+input:focus {
+    border-color: var(--accent);
+}
+
+a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--bg-hover);
+}

frontend/history-ui/src/components/ActivityFeed.svelte

@@ -0,0 +1,346 @@
+<script lang="ts">
+    import type { VersionEvent } from "../lib/view-types";
+    import {
+        absoluteTime,
+        formatBytes
+    } from "../lib/stores.svelte";
+
+    interface Props {
+        versions: VersionEvent[];
+        loading: boolean;
+        hasMore: boolean;
+        onLoadMore: () => void;
+        onSelectDocument: (documentId: string) => void;
+        onTimeTravel: (vaultUpdateId: number) => void;
+    }
+
+    let {
+        versions,
+        loading,
+        hasMore,
+        onLoadMore,
+        onSelectDocument,
+        onTimeTravel
+    }: Props = $props();
+
+    function timeOfDay(dateStr: string): string {
+        return new Date(dateStr).toLocaleTimeString("en-US", {
+            hour: "numeric",
+            minute: "2-digit"
+        });
+    }
+
+    // Group by day
+    let grouped = $derived.by(() => {
+        const groups: { date: string; items: VersionEvent[] }[] = [];
+        const sortedDesc = [...versions].sort(
+            (a, b) => b.vaultUpdateId - a.vaultUpdateId
+        );
+
+        for (const v of sortedDesc) {
+            const date = new Date(v.updatedDate).toLocaleDateString(
+                "en-US",
+                { month: "long", day: "numeric", year: "numeric" }
+            );
+            const last = groups.at(-1);
+            if (last && last.date === date) {
+                last.items.push(v);
+            } else {
+                groups.push({ date, items: [v] });
+            }
+        }
+        return groups;
+    });
+
+    const actionColors: Record<string, string> = {
+        created: "var(--green)",
+        updated: "var(--blue)",
+        renamed: "var(--orange)",
+        deleted: "var(--red)",
+        restored: "var(--purple)"
+    };
+
+    const actionBgColors: Record<string, string> = {
+        created: "var(--green-bg)",
+        updated: "var(--blue-bg)",
+        renamed: "var(--orange-bg)",
+        deleted: "var(--red-bg)",
+        restored: "var(--purple-bg)"
+    };
+</script>
+
+<div class="feed">
+    {#if loading && versions.length === 0}
+        <div class="feed-loading">Loading activity...</div>
+    {:else if versions.length === 0}
+        <div class="feed-empty">
+            No activity yet. Documents will appear here as sync clients
+            make changes.
+        </div>
+    {:else}
+        {#each grouped as group}
+            <div class="day-group">
+                <div class="day-header">{group.date}</div>
+                <div class="items-list">
+                {#each group.items as event}
+                    <div class="feed-item">
+                        <button
+                            class="feed-item-main"
+                            onclick={() =>
+                                onSelectDocument(event.documentId)}
+                        >
+                            <div class="feed-timeline">
+                                <div
+                                    class="timeline-dot"
+                                    style="background: {actionColors[
+                                        event.action
+                                    ]}"
+                                ></div>
+                            </div>
+                            <div class="feed-content">
+                                <div class="feed-header">
+                                    <span
+                                        class="action-pill"
+                                        style="color: {actionColors[
+                                            event.action
+                                        ]}; background: {actionBgColors[
+                                            event.action
+                                        ]}"
+                                    >
+                                        {event.action}
+                                    </span>
+                                    <span class="feed-path">
+                                        {#if event.action === "renamed" && event.previousPath}
+                                            <span class="prev-path"
+                                                >{event.previousPath}</span
+                                            >
+                                            <span class="arrow"
+                                                >&rarr;</span
+                                            >
+                                        {/if}
+                                        <span
+                                            class:deleted={event.action ===
+                                                "deleted"}
+                                        >
+                                            {event.relativePath}
+                                        </span>
+                                    </span>
+                                </div>
+                                <div class="feed-meta">
+                                    <span class="feed-user"
+                                        >{event.userId}</span
+                                    >
+                                    <span class="feed-dot"
+                                        >&middot;</span
+                                    >
+                                    <span class="feed-size"
+                                        >{formatBytes(
+                                            event.contentSize
+                                        )}</span
+                                    >
+                                </div>
+                            </div>
+                        </button>
+                        <button
+                            class="feed-time-btn"
+                            title="Time travel to {absoluteTime(event.updatedDate)}"
+                            onclick={(e) => {
+                                e.stopPropagation();
+                                onTimeTravel(event.vaultUpdateId);
+                            }}
+                        >
+                            {timeOfDay(event.updatedDate)}
+                        </button>
+                    </div>
+                {/each}
+                </div>
+            </div>
+        {/each}
+
+        {#if hasMore}
+            <div class="load-more">
+                <button class="load-more-btn" onclick={onLoadMore}>
+                    Load older activity
+                </button>
+            </div>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    .feed {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0 0 16px;
+    }
+
+    .feed-loading,
+    .feed-empty {
+        padding: 48px 16px;
+        text-align: center;
+        color: var(--text-muted);
+    }
+
+    .day-group {
+        margin-bottom: 8px;
+    }
+
+    .day-header {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        padding: 8px 16px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-muted);
+        background: var(--bg);
+        border-bottom: 1px solid var(--border-light);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .feed-item {
+        display: flex;
+        align-items: stretch;
+        width: 100%;
+        transition: background 0.1s;
+    }
+
+    .feed-item:hover {
+        background: var(--bg-hover);
+    }
+
+    .feed-item-main {
+        display: flex;
+        gap: 12px;
+        flex: 1;
+        min-width: 0;
+        padding: 10px 0 10px 16px;
+        text-align: left;
+    }
+
+    .items-list {
+        position: relative;
+    }
+
+    .items-list::before {
+        content: "";
+        position: absolute;
+        left: 21px;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: var(--border);
+    }
+
+    .feed-timeline {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 12px;
+        flex-shrink: 0;
+        padding-top: 6px;
+        position: relative;
+    }
+
+    .timeline-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .feed-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .feed-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+    }
+
+    .action-pill {
+        font-size: 11px;
+        font-weight: 600;
+        padding: 1px 8px;
+        border-radius: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+        flex-shrink: 0;
+    }
+
+    .feed-path {
+        font-family: var(--mono);
+        font-size: 13px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .prev-path {
+        color: var(--text-muted);
+        text-decoration: line-through;
+    }
+
+    .arrow {
+        color: var(--text-subtle);
+        margin: 0 4px;
+    }
+
+    .deleted {
+        text-decoration: line-through;
+        opacity: 0.6;
+    }
+
+    .feed-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 4px;
+        font-size: 12px;
+        color: var(--text-muted);
+    }
+
+    .feed-dot {
+        color: var(--text-subtle);
+    }
+
+    .feed-time-btn {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        font-size: 12px;
+        font-family: var(--mono);
+        color: var(--text-muted);
+        white-space: nowrap;
+        flex-shrink: 0;
+        border-left: 1px solid transparent;
+        transition: color 0.15s, border-color 0.15s;
+    }
+
+    .feed-time-btn:hover {
+        color: var(--accent);
+        border-left-color: var(--border-light);
+    }
+
+    .load-more {
+        padding: 16px;
+        text-align: center;
+    }
+
+    .load-more-btn {
+        padding: 8px 20px;
+        font-size: 13px;
+        color: var(--accent);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        transition: background 0.15s;
+    }
+
+    .load-more-btn:hover {
+        background: var(--bg-hover);
+    }
+</style>

frontend/history-ui/src/components/ConfirmDialog.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+    interface Props {
+        title: string;
+        message: string;
+        confirmLabel: string;
+        destructive?: boolean;
+        loading?: boolean;
+        onConfirm: () => void;
+        onCancel: () => void;
+    }
+
+    let {
+        title,
+        message,
+        confirmLabel,
+        destructive = false,
+        loading = false,
+        onConfirm,
+        onCancel
+    }: Props = $props();
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === "Escape") onCancel();
+    }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div class="backdrop" onclick={onCancel} role="presentation">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_interactive_supports_focus -->
+    <div
+        class="dialog"
+        onclick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-label={title}
+    >
+        <h3 class="dialog-title">{title}</h3>
+        <p class="dialog-message">{message}</p>
+        <div class="dialog-actions">
+            <button class="btn-cancel" onclick={onCancel} disabled={loading}>
+                Cancel
+            </button>
+            <button
+                class="btn-confirm"
+                class:destructive
+                onclick={onConfirm}
+                disabled={loading}
+            >
+                {#if loading}
+                    <span class="btn-spinner"></span>
+                {/if}
+                {confirmLabel}
+            </button>
+        </div>
+    </div>
+</div>
+
+<style>
+    .backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 1000;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: fade-in 0.15s ease-out;
+    }
+
+    .dialog {
+        background: var(--bg-secondary);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 24px;
+        max-width: 480px;
+        width: calc(100% - 32px);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        animation: scale-in 0.2s ease-out;
+    }
+
+    .dialog-title {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 12px;
+    }
+
+    .dialog-message {
+        font-size: 14px;
+        color: var(--text-muted);
+        line-height: 1.5;
+        margin-bottom: 24px;
+    }
+
+    .dialog-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
+    .btn-cancel {
+        padding: 8px 16px;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        color: var(--text-muted);
+        transition: background 0.15s;
+    }
+
+    .btn-cancel:hover:not(:disabled) {
+        background: var(--bg-hover);
+        color: var(--text);
+    }
+
+    .btn-confirm {
+        padding: 8px 16px;
+        background: var(--accent);
+        color: #fff;
+        font-weight: 600;
+        border-radius: var(--radius);
+        transition: background 0.15s;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .btn-confirm:hover:not(:disabled) {
+        background: var(--accent-hover);
+    }
+
+    .btn-confirm.destructive {
+        background: var(--red);
+    }
+
+    .btn-confirm.destructive:hover:not(:disabled) {
+        background: #f97583;
+    }
+
+    .btn-confirm:disabled,
+    .btn-cancel:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .btn-spinner {
+        width: 14px;
+        height: 14px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+    }
+
+    @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+
+    @keyframes scale-in {
+        from { transform: scale(0.95); opacity: 0; }
+        to { transform: scale(1); opacity: 1; }
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+</style>

frontend/history-ui/src/components/Dashboard.svelte

@@ -0,0 +1,508 @@
+<script lang="ts">
+    import {
+        auth,
+        nav,
+        toasts,
+        buildTree,
+        enrichVersions,
+        relativeTime,
+        formatBytes,
+        type View
+    } from "../lib/stores.svelte";
+    import type { DocumentVersionWithoutContent } from "../lib/types/DocumentVersionWithoutContent";
+    import type { VaultHistoryResponse } from "../lib/types/VaultHistoryResponse";
+    import type { VersionEvent, TreeNode } from "../lib/view-types";
+    import FileTree from "./FileTree.svelte";
+    import ActivityFeed from "./ActivityFeed.svelte";
+    import DocumentDetail from "./DocumentDetail.svelte";
+    import TimeSlider from "./TimeSlider.svelte";
+    import Header from "./Header.svelte";
+
+    interface Props {
+        selectedDocumentId?: string;
+    }
+
+    let { selectedDocumentId }: Props = $props();
+
+    // Data
+    let latestDocuments = $state<DocumentVersionWithoutContent[]>([]);
+    let historyVersions = $state<DocumentVersionWithoutContent[]>([]);
+    let historyHasMore = $state(false);
+    let loadingDocs = $state(true);
+    let loadingHistory = $state(true);
+    let showDeleted = $state(false);
+    let searchQuery = $state("");
+    let activeTab = $state<"activity" | "files">("activity");
+
+    // Time travel
+    let maxUpdateId = $state(0);
+    let minUpdateId = $state(0);
+    let timeSliderValue = $state<number | null>(null);
+
+    // Derived
+    let tree = $derived(buildTree(latestDocuments, showDeleted));
+    let enrichedHistory = $derived(enrichVersions(historyVersions));
+    let stats = $derived({
+        totalDocs: latestDocuments.filter((d) => !d.isDeleted).length,
+        deletedDocs: latestDocuments.filter((d) => d.isDeleted).length,
+        totalSize: latestDocuments
+            .filter((d) => !d.isDeleted)
+            .reduce((sum, d) => sum + d.contentSize, 0),
+        users: [...new Set(latestDocuments.map((d) => d.userId))]
+    });
+
+    let filteredTree = $derived.by(() => {
+        if (!searchQuery) return tree;
+        return filterTree(tree, searchQuery.toLowerCase());
+    });
+
+    function filterTree(node: TreeNode, query: string): TreeNode {
+        if (!node.isFolder) {
+            return node.name.toLowerCase().includes(query) ? node : { ...node, children: [] };
+        }
+        const filteredChildren = node.children
+            .map((c) => filterTree(c, query))
+            .filter((c) => c.isFolder ? c.children.length > 0 : true)
+            .filter((c) => !c.isFolder || c.children.length > 0);
+        return { ...node, children: filteredChildren };
+    }
+
+    // Time travel: compute vault state at a given updateId
+    let timeFilteredDocs = $derived.by(() => {
+        if (timeSliderValue === null || timeSliderValue >= maxUpdateId) {
+            return latestDocuments;
+        }
+        // From all history, find the latest version per documentId at or before timeSliderValue
+        const byDoc = new Map<string, DocumentVersionWithoutContent>();
+        for (const v of historyVersions) {
+            if (v.vaultUpdateId <= timeSliderValue) {
+                const existing = byDoc.get(v.documentId);
+                if (
+                    !existing ||
+                    v.vaultUpdateId > existing.vaultUpdateId
+                ) {
+                    byDoc.set(v.documentId, v);
+                }
+            }
+        }
+        return [...byDoc.values()];
+    });
+
+    let timeFilteredTree = $derived(
+        buildTree(
+            timeSliderValue !== null && timeSliderValue < maxUpdateId
+                ? timeFilteredDocs
+                : latestDocuments,
+            showDeleted
+        )
+    );
+
+    let displayTree = $derived(
+        searchQuery ? filteredTree : timeFilteredTree
+    );
+
+    // Load data
+    async function loadData() {
+        const api = auth.api;
+        if (!api) return;
+
+        loadingDocs = true;
+        loadingHistory = true;
+
+        api.ping().then((ping) => {
+            auth.serverVersion = ping.serverVersion;
+        });
+
+        try {
+            const response = await api.fetchLatestDocuments();
+            latestDocuments = response.latestDocuments;
+            maxUpdateId = Number(response.lastUpdateId);
+        } catch (e) {
+            toasts.add("Failed to load documents", "error");
+        } finally {
+            loadingDocs = false;
+        }
+
+        try {
+            const response = await api.fetchVaultHistory(500);
+            historyVersions = response.versions;
+            historyHasMore = response.hasMore;
+            if (historyVersions.length > 0) {
+                minUpdateId = Math.min(
+                    ...historyVersions.map((v) => v.vaultUpdateId)
+                );
+                maxUpdateId = Math.max(
+                    maxUpdateId,
+                    Math.max(
+                        ...historyVersions.map((v) => v.vaultUpdateId)
+                    )
+                );
+            }
+        } catch (e) {
+            toasts.add("Failed to load history", "error");
+        } finally {
+            loadingHistory = false;
+        }
+    }
+
+    async function loadMoreHistory() {
+        const api = auth.api;
+        if (!api || !historyHasMore) return;
+
+        const oldest = Math.min(
+            ...historyVersions.map((v) => v.vaultUpdateId)
+        );
+        try {
+            const response = await api.fetchVaultHistory(500, oldest);
+            historyVersions = [...historyVersions, ...response.versions];
+            historyHasMore = response.hasMore;
+            minUpdateId = Math.min(
+                minUpdateId,
+                ...response.versions.map((v) => v.vaultUpdateId)
+            );
+        } catch {
+            toasts.add("Failed to load more history", "error");
+        }
+    }
+
+    function selectDocument(documentId: string) {
+        nav.goto({ kind: "document", documentId });
+    }
+
+    function handleRefresh() {
+        loadData();
+    }
+
+    $effect(() => {
+        if (auth.isAuthenticated) {
+            loadData();
+        }
+    });
+</script>
+
+<div class="dashboard">
+    <Header
+        vaultId={auth.vaultId}
+        serverVersion={auth.serverVersion}
+        onRefresh={handleRefresh}
+    />
+
+    <div class="main-layout">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            {#if !loadingDocs}
+                <div class="sidebar-stats">
+                    <div class="stat">
+                        <span class="stat-value">{stats.totalDocs}</span>
+                        <span class="stat-label">files</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-value"
+                            >{formatBytes(stats.totalSize)}</span
+                        >
+                        <span class="stat-label">total</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-value">{stats.users.length}</span>
+                        <span class="stat-label"
+                            >user{stats.users.length !== 1 ? "s" : ""}</span
+                        >
+                    </div>
+                </div>
+            {/if}
+
+            <div class="sidebar-search">
+                <input
+                    type="text"
+                    placeholder="Filter files..."
+                    bind:value={searchQuery}
+                />
+            </div>
+
+            <div class="sidebar-controls">
+                <label class="toggle-label">
+                    <input
+                        type="checkbox"
+                        bind:checked={showDeleted}
+                    />
+                    Show deleted
+                </label>
+            </div>
+
+            <div class="sidebar-tree">
+                {#if loadingDocs}
+                    <div class="loading-placeholder">Loading...</div>
+                {:else}
+                    <FileTree
+                        node={displayTree}
+                        selectedId={selectedDocumentId ?? null}
+                        onSelect={selectDocument}
+                    />
+                {/if}
+            </div>
+        </aside>
+
+        <!-- Main content -->
+        <main class="content">
+            {#if maxUpdateId > 0}
+                <div class="time-slider-container">
+                    <TimeSlider
+                        min={minUpdateId}
+                        max={maxUpdateId}
+                        value={timeSliderValue}
+                        versions={historyVersions}
+                        onchange={(v) => {
+                            timeSliderValue = v;
+                        }}
+                    />
+                </div>
+            {/if}
+
+            {#if selectedDocumentId}
+                <DocumentDetail
+                    documentId={selectedDocumentId}
+                    onClose={() => nav.goHome()}
+                    onRestore={handleRefresh}
+                />
+            {:else}
+                <div class="tabs">
+                    <button
+                        class="tab"
+                        class:active={activeTab === "activity"}
+                        onclick={() => (activeTab = "activity")}
+                    >
+                        Activity
+                    </button>
+                    <button
+                        class="tab"
+                        class:active={activeTab === "files"}
+                        onclick={() => (activeTab = "files")}
+                    >
+                        Files
+                    </button>
+                </div>
+
+                {#if activeTab === "activity"}
+                    <ActivityFeed
+                        versions={enrichedHistory}
+                        loading={loadingHistory}
+                        hasMore={historyHasMore}
+                        onLoadMore={loadMoreHistory}
+                        onSelectDocument={selectDocument}
+                        onTimeTravel={(id) => {
+                            timeSliderValue = id >= maxUpdateId ? null : id;
+                        }}
+                    />
+                {:else}
+                    <div class="file-list">
+                        {#each latestDocuments
+                            .filter((d) => showDeleted || !d.isDeleted)
+                            .sort((a, b) => b.vaultUpdateId - a.vaultUpdateId) as doc}
+                            <button
+                                class="file-row"
+                                class:deleted={doc.isDeleted}
+                                onclick={() =>
+                                    selectDocument(doc.documentId)}
+                            >
+                                <span class="file-icon"
+                                    >{doc.isDeleted
+                                        ? "🗑"
+                                        : "📄"}</span
+                                >
+                                <span class="file-path"
+                                    >{doc.relativePath}</span
+                                >
+                                <span class="file-meta">
+                                    {formatBytes(doc.contentSize)}
+                                    &middot;
+                                    {doc.userId}
+                                    &middot;
+                                    {relativeTime(doc.updatedDate)}
+                                </span>
+                            </button>
+                        {/each}
+                    </div>
+                {/if}
+            {/if}
+        </main>
+    </div>
+</div>
+
+<style>
+    .dashboard {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .main-layout {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .sidebar {
+        width: 280px;
+        min-width: 280px;
+        border-right: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+        background: var(--bg-secondary);
+        overflow: hidden;
+    }
+
+    .sidebar-stats {
+        display: flex;
+        gap: 12px;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .stat {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+    }
+
+    .stat-value {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .stat-label {
+        font-size: 11px;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .sidebar-search {
+        padding: 8px 12px;
+    }
+
+    .sidebar-search input {
+        width: 100%;
+        font-size: 13px;
+        padding: 6px 10px;
+    }
+
+    .sidebar-controls {
+        padding: 4px 16px 8px;
+    }
+
+    .toggle-label {
+        font-size: 12px;
+        color: var(--text-muted);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+    }
+
+    .toggle-label input[type="checkbox"] {
+        width: auto;
+        accent-color: var(--accent);
+    }
+
+    .sidebar-tree {
+        flex: 1;
+        overflow-y: auto;
+        padding: 4px 0;
+    }
+
+    .loading-placeholder {
+        padding: 16px;
+        color: var(--text-muted);
+        text-align: center;
+        font-size: 13px;
+    }
+
+    .content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .time-slider-container {
+        padding: 8px 16px;
+        border-bottom: 1px solid var(--border);
+        background: var(--bg-secondary);
+    }
+
+    .tabs {
+        display: flex;
+        border-bottom: 1px solid var(--border);
+        background: var(--bg-secondary);
+        padding: 0 16px;
+    }
+
+    .tab {
+        padding: 10px 16px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--text-muted);
+        border-bottom: 2px solid transparent;
+        transition: color 0.15s, border-color 0.15s;
+    }
+
+    .tab:hover {
+        color: var(--text);
+    }
+
+    .tab.active {
+        color: var(--text);
+        border-bottom-color: var(--accent);
+    }
+
+    .file-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 4px 0;
+    }
+
+    .file-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 8px 16px;
+        text-align: left;
+        transition: background 0.1s;
+    }
+
+    .file-row:hover {
+        background: var(--bg-hover);
+    }
+
+    .file-row.deleted {
+        opacity: 0.5;
+    }
+
+    .file-row.deleted .file-path {
+        text-decoration: line-through;
+    }
+
+    .file-icon {
+        font-size: 16px;
+        flex-shrink: 0;
+    }
+
+    .file-path {
+        font-family: var(--mono);
+        font-size: 13px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .file-meta {
+        font-size: 12px;
+        color: var(--text-muted);
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+</style>

frontend/history-ui/src/components/DiffView.svelte

@@ -0,0 +1,288 @@
+<script lang="ts">
+    interface Props {
+        oldContent: string;
+        newContent: string;
+        oldLabel: string;
+        newLabel: string;
+    }
+
+    let { oldContent, newContent, oldLabel, newLabel }: Props = $props();
+
+    interface DiffLine {
+        type: "add" | "remove" | "context";
+        content: string;
+        oldLineNo: number | null;
+        newLineNo: number | null;
+    }
+
+    let diffLines = $derived.by((): DiffLine[] => {
+        const oldLines = oldContent.split("\n");
+        const newLines = newContent.split("\n");
+
+        // Simple line-by-line diff using LCS
+        const lines: DiffLine[] = [];
+        const lcs = computeLCS(oldLines, newLines);
+
+        let oi = 0;
+        let ni = 0;
+        let oldLineNo = 1;
+        let newLineNo = 1;
+
+        for (const match of lcs) {
+            // Remove lines before match
+            while (oi < match.oldIndex) {
+                lines.push({
+                    type: "remove",
+                    content: oldLines[oi],
+                    oldLineNo: oldLineNo++,
+                    newLineNo: null
+                });
+                oi++;
+            }
+            // Add lines before match
+            while (ni < match.newIndex) {
+                lines.push({
+                    type: "add",
+                    content: newLines[ni],
+                    oldLineNo: null,
+                    newLineNo: newLineNo++
+                });
+                ni++;
+            }
+            // Context line
+            lines.push({
+                type: "context",
+                content: oldLines[oi],
+                oldLineNo: oldLineNo++,
+                newLineNo: newLineNo++
+            });
+            oi++;
+            ni++;
+        }
+
+        // Remaining removes
+        while (oi < oldLines.length) {
+            lines.push({
+                type: "remove",
+                content: oldLines[oi],
+                oldLineNo: oldLineNo++,
+                newLineNo: null
+            });
+            oi++;
+        }
+        // Remaining adds
+        while (ni < newLines.length) {
+            lines.push({
+                type: "add",
+                content: newLines[ni],
+                oldLineNo: null,
+                newLineNo: newLineNo++
+            });
+            ni++;
+        }
+
+        return lines;
+    });
+
+    let stats = $derived({
+        added: diffLines.filter((l) => l.type === "add").length,
+        removed: diffLines.filter((l) => l.type === "remove").length
+    });
+
+    interface LCSMatch {
+        oldIndex: number;
+        newIndex: number;
+    }
+
+    function computeLCS(a: string[], b: string[]): LCSMatch[] {
+        const m = a.length;
+        const n = b.length;
+
+        // For large files, use a simpler approach
+        if (m * n > 1_000_000) {
+            return simpleDiff(a, b);
+        }
+
+        const dp: number[][] = Array.from({ length: m + 1 }, () =>
+            new Array(n + 1).fill(0)
+        );
+
+        for (let i = 1; i <= m; i++) {
+            for (let j = 1; j <= n; j++) {
+                if (a[i - 1] === b[j - 1]) {
+                    dp[i][j] = dp[i - 1][j - 1] + 1;
+                } else {
+                    dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+                }
+            }
+        }
+
+        // Backtrack
+        const matches: LCSMatch[] = [];
+        let i = m;
+        let j = n;
+        while (i > 0 && j > 0) {
+            if (a[i - 1] === b[j - 1]) {
+                matches.unshift({ oldIndex: i - 1, newIndex: j - 1 });
+                i--;
+                j--;
+            } else if (dp[i - 1][j] > dp[i][j - 1]) {
+                i--;
+            } else {
+                j--;
+            }
+        }
+
+        return matches;
+    }
+
+    function simpleDiff(a: string[], b: string[]): LCSMatch[] {
+        // Hash-based matching for large files
+        const bMap = new Map<string, number[]>();
+        for (let j = 0; j < b.length; j++) {
+            const arr = bMap.get(b[j]);
+            if (arr) arr.push(j);
+            else bMap.set(b[j], [j]);
+        }
+
+        const matches: LCSMatch[] = [];
+        let lastJ = -1;
+        for (let i = 0; i < a.length; i++) {
+            const candidates = bMap.get(a[i]);
+            if (!candidates) continue;
+            for (const j of candidates) {
+                if (j > lastJ) {
+                    matches.push({ oldIndex: i, newIndex: j });
+                    lastJ = j;
+                    break;
+                }
+            }
+        }
+        return matches;
+    }
+</script>
+
+<div class="diff-view">
+    <div class="diff-header">
+        <span class="diff-label">{oldLabel}</span>
+        <span class="diff-arrow">&rarr;</span>
+        <span class="diff-label">{newLabel}</span>
+        <span class="diff-stats">
+            <span class="diff-added">+{stats.added}</span>
+            <span class="diff-removed">-{stats.removed}</span>
+        </span>
+    </div>
+    <div class="diff-content">
+        {#each diffLines as line}
+            <div class="diff-line {line.type}">
+                <span class="line-no old-no">
+                    {line.oldLineNo ?? ""}
+                </span>
+                <span class="line-no new-no">
+                    {line.newLineNo ?? ""}
+                </span>
+                <span class="line-marker">
+                    {#if line.type === "add"}+{:else if line.type === "remove"}-{:else}&nbsp;{/if}
+                </span>
+                <span class="line-content">{line.content}</span>
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .diff-view {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .diff-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border);
+        flex-shrink: 0;
+    }
+
+    .diff-label {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--text-muted);
+    }
+
+    .diff-arrow {
+        color: var(--text-subtle);
+    }
+
+    .diff-stats {
+        margin-left: auto;
+        display: flex;
+        gap: 8px;
+        font-family: var(--mono);
+        font-size: 12px;
+    }
+
+    .diff-added {
+        color: var(--green);
+    }
+
+    .diff-removed {
+        color: var(--red);
+    }
+
+    .diff-content {
+        flex: 1;
+        overflow: auto;
+        font-family: var(--mono);
+        font-size: 13px;
+        line-height: 1.5;
+    }
+
+    .diff-line {
+        display: flex;
+        white-space: pre;
+        min-height: 20px;
+    }
+
+    .diff-line.add {
+        background: var(--green-bg);
+    }
+
+    .diff-line.remove {
+        background: var(--red-bg);
+    }
+
+    .line-no {
+        display: inline-block;
+        width: 48px;
+        text-align: right;
+        padding-right: 8px;
+        color: var(--text-subtle);
+        user-select: none;
+        flex-shrink: 0;
+    }
+
+    .line-marker {
+        display: inline-block;
+        width: 20px;
+        text-align: center;
+        flex-shrink: 0;
+        user-select: none;
+    }
+
+    .diff-line.add .line-marker {
+        color: var(--green);
+    }
+
+    .diff-line.remove .line-marker {
+        color: var(--red);
+    }
+
+    .line-content {
+        flex: 1;
+        padding-right: 16px;
+    }
+</style>

frontend/history-ui/src/components/DocumentDetail.svelte

@@ -0,0 +1,729 @@
+<script lang="ts">
+    import {
+        auth,
+        toasts,
+        relativeTime,
+        absoluteTime,
+        formatBytes,
+        inferAction,
+        isTextFile,
+        isImageFile,
+        fileExtension
+    } from "../lib/stores.svelte";
+    import type { DocumentVersionWithoutContent } from "../lib/types/DocumentVersionWithoutContent";
+    import type { DocumentVersion } from "../lib/types/DocumentVersion";
+    import type { ActionType } from "../lib/view-types";
+    import DiffView from "./DiffView.svelte";
+    import ConfirmDialog from "./ConfirmDialog.svelte";
+
+    interface Props {
+        documentId: string;
+        onClose: () => void;
+        onRestore: () => void;
+    }
+
+    let { documentId, onClose, onRestore }: Props = $props();
+
+    let versions = $state<DocumentVersionWithoutContent[]>([]);
+    let loading = $state(true);
+    let selectedVersion = $state<DocumentVersionWithoutContent | null>(null);
+    let loadedContent = $state<string | null>(null);
+    let loadedContentBytes = $state<ArrayBuffer | null>(null);
+    let loadingContent = $state(false);
+    let activeTab = $state<"preview" | "diff">("preview");
+
+    // Diff state
+    let diffOldContent = $state<string | null>(null);
+    let diffNewContent = $state<string | null>(null);
+    let diffOldLabel = $state("");
+    let diffNewLabel = $state("");
+
+    // Restore state
+    let showRestoreDialog = $state(false);
+    let restoreTarget = $state<DocumentVersionWithoutContent | null>(null);
+    let restoring = $state(false);
+
+    let latest = $derived(versions.at(-1) ?? null);
+    let isDeleted = $derived(latest?.isDeleted ?? false);
+    let currentPath = $derived(latest?.relativePath ?? "");
+
+    // Derive action types
+    let versionEvents = $derived(
+        versions.map((v, i) => ({
+            version: v,
+            action: inferAction(v, i > 0 ? versions[i - 1] : undefined) as ActionType,
+            previousPath: i > 0 && versions[i - 1].relativePath !== v.relativePath
+                ? versions[i - 1].relativePath
+                : undefined
+        }))
+    );
+
+    async function loadVersions() {
+        const api = auth.api;
+        if (!api) return;
+        loading = true;
+        try {
+            versions = await api.fetchDocumentVersions(documentId);
+            // Auto-select latest
+            if (versions.length > 0) {
+                await selectVersion(versions.at(-1)!);
+            }
+        } catch {
+            toasts.add("Failed to load document versions", "error");
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function selectVersion(v: DocumentVersionWithoutContent) {
+        selectedVersion = v;
+        activeTab = "preview";
+        diffOldContent = null;
+        diffNewContent = null;
+        loadingContent = true;
+        loadedContent = null;
+        loadedContentBytes = null;
+
+        const api = auth.api;
+        if (!api) return;
+
+        try {
+            if (isTextFile(v.relativePath) || fileExtension(v.relativePath) === "") {
+                const fullVersion = await api.fetchDocumentVersion(
+                    documentId,
+                    v.vaultUpdateId
+                );
+                const bytes = Uint8Array.from(atob(fullVersion.contentBase64), c => c.charCodeAt(0));
+                const decoder = new TextDecoder("utf-8", { fatal: false });
+                loadedContent = decoder.decode(bytes);
+                loadedContentBytes = bytes.buffer;
+            } else if (isImageFile(v.relativePath)) {
+                loadedContentBytes = await api.fetchDocumentVersionContent(
+                    documentId,
+                    v.vaultUpdateId
+                );
+            } else {
+                loadedContentBytes = await api.fetchDocumentVersionContent(
+                    documentId,
+                    v.vaultUpdateId
+                );
+            }
+        } catch {
+            toasts.add("Failed to load content", "error");
+        } finally {
+            loadingContent = false;
+        }
+    }
+
+    async function showDiff(v: DocumentVersionWithoutContent, idx: number) {
+        const api = auth.api;
+        if (!api || idx === 0) return;
+
+        activeTab = "diff";
+        loadingContent = true;
+
+        const prev = versions[idx - 1];
+        try {
+            const [oldVer, newVer] = await Promise.all([
+                api.fetchDocumentVersion(documentId, prev.vaultUpdateId),
+                api.fetchDocumentVersion(documentId, v.vaultUpdateId)
+            ]);
+            const decode = (b64: string) => {
+                const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
+                return new TextDecoder("utf-8", { fatal: false }).decode(bytes);
+            };
+            diffOldContent = decode(oldVer.contentBase64);
+            diffNewContent = decode(newVer.contentBase64);
+            diffOldLabel = `v${prev.vaultUpdateId}`;
+            diffNewLabel = `v${v.vaultUpdateId}`;
+        } catch {
+            toasts.add("Failed to load diff", "error");
+        } finally {
+            loadingContent = false;
+        }
+    }
+
+    function confirmRestore(v: DocumentVersionWithoutContent) {
+        restoreTarget = v;
+        showRestoreDialog = true;
+    }
+
+    async function executeRestore() {
+        const api = auth.api;
+        if (!api || !restoreTarget || !latest) return;
+        restoring = true;
+        try {
+            // Restore = re-submit the target version's bytes at its path
+            // as if it were a fresh edit. `update_document` short-circuits
+            // on `is_deleted`, so resurrecting a deleted doc has to go
+            // through `create_document`; a live doc takes the normal
+            // update path with the current latest as its parent.
+            const bytes = await api.fetchDocumentVersionContent(
+                documentId,
+                restoreTarget.vaultUpdateId
+            );
+            if (latest.isDeleted) {
+                await api.createDocument(
+                    latest.vaultUpdateId,
+                    restoreTarget.relativePath,
+                    bytes
+                );
+            } else {
+                await api.updateBinaryDocument(
+                    documentId,
+                    latest.vaultUpdateId,
+                    restoreTarget.relativePath,
+                    bytes
+                );
+            }
+            toasts.add(
+                `Restored to version #${restoreTarget.vaultUpdateId}`,
+                "success"
+            );
+            showRestoreDialog = false;
+            restoreTarget = null;
+            onRestore();
+            await loadVersions();
+        } catch (e) {
+            toasts.add(`Restore failed: ${e}`, "error");
+        } finally {
+            restoring = false;
+        }
+    }
+
+    function getImageUrl(buffer: ArrayBuffer, path: string): string {
+        const ext = fileExtension(path);
+        const mimeMap: Record<string, string> = {
+            png: "image/png",
+            jpg: "image/jpeg",
+            jpeg: "image/jpeg",
+            gif: "image/gif",
+            webp: "image/webp",
+            svg: "image/svg+xml",
+            ico: "image/x-icon",
+            bmp: "image/bmp"
+        };
+        const mime = mimeMap[ext] ?? "application/octet-stream";
+        const blob = new Blob([buffer], { type: mime });
+        return URL.createObjectURL(blob);
+    }
+
+    $effect(() => {
+        loadVersions();
+    });
+
+    const actionColors: Record<string, string> = {
+        created: "var(--green)",
+        updated: "var(--blue)",
+        renamed: "var(--orange)",
+        deleted: "var(--red)",
+        restored: "var(--purple)"
+    };
+
+    const actionBgColors: Record<string, string> = {
+        created: "var(--green-bg)",
+        updated: "var(--blue-bg)",
+        renamed: "var(--orange-bg)",
+        deleted: "var(--red-bg)",
+        restored: "var(--purple-bg)"
+    };
+</script>
+
+<div class="detail">
+    <!-- Header -->
+    <div class="detail-header">
+        <button class="back-btn" onclick={onClose} title="Back">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5M12 19l-7-7 7-7" />
+            </svg>
+        </button>
+        <div class="header-info">
+            <div class="header-path">
+                <span class="path-text" class:deleted-path={isDeleted}>
+                    {currentPath}
+                </span>
+                {#if isDeleted}
+                    <span class="status-badge deleted-badge">Deleted</span>
+                {:else}
+                    <span class="status-badge active-badge">Active</span>
+                {/if}
+            </div>
+            <div class="header-meta">
+                <span class="doc-id" title={documentId}>
+                    {documentId.substring(0, 8)}...
+                </span>
+                {#if latest}
+                    <span>&middot;</span>
+                    <span>{versions.length} version{versions.length !== 1 ? "s" : ""}</span>
+                    <span>&middot;</span>
+                    <span>Last by {latest.userId}</span>
+                {/if}
+            </div>
+        </div>
+    </div>
+
+    {#if loading}
+        <div class="detail-loading">Loading versions...</div>
+    {:else}
+        <!-- Content area -->
+        <div class="detail-body">
+            <div class="content-panel">
+                {#if selectedVersion}
+                    <div class="content-tabs">
+                        <button
+                            class="content-tab"
+                            class:active={activeTab === "preview"}
+                            onclick={() => (activeTab = "preview")}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            class="content-tab"
+                            class:active={activeTab === "diff"}
+                            onclick={() => {
+                                if (selectedVersion) {
+                                    const idx = versions.indexOf(selectedVersion);
+                                    if (idx > 0) showDiff(selectedVersion, idx);
+                                }
+                            }}
+                            disabled={versions.indexOf(selectedVersion) === 0}
+                        >
+                            Diff
+                        </button>
+                        <div class="content-tab-spacer"></div>
+                        <span class="viewing-label">
+                            Viewing v#{selectedVersion.vaultUpdateId}
+                            &middot;
+                            {relativeTime(selectedVersion.updatedDate)}
+                        </span>
+                    </div>
+
+                    <div class="content-view">
+                        {#if loadingContent}
+                            <div class="content-loading">Loading content...</div>
+                        {:else if activeTab === "diff" && diffOldContent !== null && diffNewContent !== null}
+                            <DiffView
+                                oldContent={diffOldContent}
+                                newContent={diffNewContent}
+                                oldLabel={diffOldLabel}
+                                newLabel={diffNewLabel}
+                            />
+                        {:else if activeTab === "preview"}
+                            {#if isTextFile(selectedVersion.relativePath) || fileExtension(selectedVersion.relativePath) === ""}
+                                <pre class="text-content">{loadedContent ?? ""}</pre>
+                            {:else if isImageFile(selectedVersion.relativePath) && loadedContentBytes}
+                                <div class="image-preview">
+                                    <img
+                                        src={getImageUrl(loadedContentBytes, selectedVersion.relativePath)}
+                                        alt={selectedVersion.relativePath}
+                                    />
+                                </div>
+                            {:else}
+                                <div class="binary-placeholder">
+                                    <div class="binary-icon">📦</div>
+                                    <div class="binary-label">Binary file</div>
+                                    <div class="binary-size">
+                                        {formatBytes(selectedVersion.contentSize)}
+                                    </div>
+                                </div>
+                            {/if}
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+
+            <!-- Version timeline -->
+            <div class="version-panel">
+                <div class="version-panel-header">Version History</div>
+                <div class="version-list">
+                    {#each [...versionEvents].reverse() as event, i}
+                        {@const v = event.version}
+                        {@const isSelected = selectedVersion?.vaultUpdateId === v.vaultUpdateId}
+                        <div class="version-item" class:selected={isSelected}>
+                            <button
+                                class="version-main"
+                                onclick={() => selectVersion(v)}
+                            >
+                                <div class="version-left">
+                                    <span class="version-id">#{v.vaultUpdateId}</span>
+                                    <span
+                                        class="version-action"
+                                        style="color: {actionColors[event.action]}; background: {actionBgColors[event.action]}"
+                                    >
+                                        {event.action}
+                                    </span>
+                                </div>
+                                <div class="version-right">
+                                    <span class="version-user">{v.userId}</span>
+                                    <span
+                                        class="version-time"
+                                        title={absoluteTime(v.updatedDate)}
+                                    >
+                                        {relativeTime(v.updatedDate)}
+                                    </span>
+                                    <span class="version-size">{formatBytes(v.contentSize)}</span>
+                                </div>
+                            </button>
+                            {#if event.previousPath}
+                                <div class="version-rename">
+                                    {event.previousPath} &rarr; {v.relativePath}
+                                </div>
+                            {/if}
+                            <div class="version-actions">
+                                {#if i < versionEvents.length - 1}
+                                    <button
+                                        class="version-btn"
+                                        onclick={() => {
+                                            const realIdx = versions.indexOf(v);
+                                            showDiff(v, realIdx);
+                                        }}
+                                    >
+                                        Diff
+                                    </button>
+                                {/if}
+                                {#if v !== latest}
+                                    <button
+                                        class="version-btn restore-btn"
+                                        onclick={() => confirmRestore(v)}
+                                    >
+                                        Restore
+                                    </button>
+                                {/if}
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        </div>
+    {/if}
+</div>
+
+{#if showRestoreDialog && restoreTarget}
+    <ConfirmDialog
+        title="Restore Version"
+        message={`Restore "${currentPath}" to version #${restoreTarget.vaultUpdateId} from ${absoluteTime(restoreTarget.updatedDate)}? This creates a new version with the old content. Current content is preserved in history.`}
+        confirmLabel="Restore"
+        destructive={false}
+        loading={restoring}
+        onConfirm={executeRestore}
+        onCancel={() => {
+            showRestoreDialog = false;
+            restoreTarget = null;
+        }}
+    />
+{/if}
+
+<style>
+    .detail {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .detail-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--border);
+        background: var(--bg-secondary);
+        flex-shrink: 0;
+    }
+
+    .back-btn {
+        padding: 6px;
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        transition: color 0.15s, background 0.15s;
+        flex-shrink: 0;
+    }
+
+    .back-btn:hover {
+        color: var(--text);
+        background: var(--bg-hover);
+    }
+
+    .header-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .header-path {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .path-text {
+        font-family: var(--mono);
+        font-size: 15px;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .deleted-path {
+        text-decoration: line-through;
+        opacity: 0.6;
+    }
+
+    .status-badge {
+        font-size: 10px;
+        font-weight: 600;
+        padding: 1px 8px;
+        border-radius: 10px;
+        text-transform: uppercase;
+        flex-shrink: 0;
+    }
+
+    .active-badge {
+        color: var(--green);
+        background: var(--green-bg);
+    }
+
+    .deleted-badge {
+        color: var(--red);
+        background: var(--red-bg);
+    }
+
+    .header-meta {
+        font-size: 12px;
+        color: var(--text-muted);
+        margin-top: 2px;
+        display: flex;
+        gap: 6px;
+    }
+
+    .doc-id {
+        font-family: var(--mono);
+        cursor: help;
+    }
+
+    .detail-loading {
+        padding: 48px;
+        text-align: center;
+        color: var(--text-muted);
+    }
+
+    .detail-body {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .content-panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .content-tabs {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        border-bottom: 1px solid var(--border);
+        background: var(--bg);
+        flex-shrink: 0;
+    }
+
+    .content-tab {
+        padding: 8px 12px;
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--text-muted);
+        border-bottom: 2px solid transparent;
+        transition: color 0.15s, border-color 0.15s;
+    }
+
+    .content-tab:hover:not(:disabled) {
+        color: var(--text);
+    }
+
+    .content-tab.active {
+        color: var(--text);
+        border-bottom-color: var(--accent);
+    }
+
+    .content-tab:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+    }
+
+    .content-tab-spacer {
+        flex: 1;
+    }
+
+    .viewing-label {
+        font-size: 12px;
+        color: var(--text-subtle);
+        font-family: var(--mono);
+    }
+
+    .content-view {
+        flex: 1;
+        overflow: auto;
+    }
+
+    .content-loading {
+        padding: 48px;
+        text-align: center;
+        color: var(--text-muted);
+    }
+
+    .text-content {
+        padding: 16px;
+        font-family: var(--mono);
+        font-size: 13px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-word;
+        tab-size: 4;
+    }
+
+    .image-preview {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .image-preview img {
+        max-width: 100%;
+        max-height: 60vh;
+        border-radius: var(--radius);
+        border: 1px solid var(--border);
+    }
+
+    .binary-placeholder {
+        padding: 64px;
+        text-align: center;
+        color: var(--text-muted);
+    }
+
+    .binary-icon {
+        font-size: 48px;
+        margin-bottom: 12px;
+    }
+
+    .binary-label {
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .binary-size {
+        font-size: 14px;
+        margin-top: 4px;
+    }
+
+    /* Version panel */
+    .version-panel {
+        width: 320px;
+        min-width: 320px;
+        border-left: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: var(--bg-secondary);
+    }
+
+    .version-panel-header {
+        padding: 10px 16px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        border-bottom: 1px solid var(--border);
+        flex-shrink: 0;
+    }
+
+    .version-list {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    .version-item {
+        border-bottom: 1px solid var(--border-light);
+        padding: 8px 12px;
+        transition: background 0.1s;
+    }
+
+    .version-item:hover {
+        background: var(--bg-hover);
+    }
+
+    .version-item.selected {
+        background: var(--blue-bg);
+    }
+
+    .version-main {
+        width: 100%;
+        text-align: left;
+    }
+
+    .version-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 4px;
+    }
+
+    .version-id {
+        font-family: var(--mono);
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .version-action {
+        font-size: 10px;
+        font-weight: 600;
+        padding: 0 6px;
+        border-radius: 8px;
+        text-transform: uppercase;
+    }
+
+    .version-right {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        color: var(--text-muted);
+    }
+
+    .version-rename {
+        font-size: 11px;
+        color: var(--orange);
+        font-family: var(--mono);
+        margin: 4px 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .version-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 6px;
+    }
+
+    .version-btn {
+        font-size: 11px;
+        color: var(--accent);
+        padding: 2px 8px;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        transition: background 0.15s;
+    }
+
+    .version-btn:hover {
+        background: var(--bg-hover);
+    }
+
+    .restore-btn {
+        color: var(--orange);
+    }
+</style>

frontend/history-ui/src/components/FileTree.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+    import type { TreeNode } from "../lib/view-types";
+    import FileTree from "./FileTree.svelte";
+
+    interface Props {
+        node: TreeNode;
+        selectedId: string | null;
+        onSelect: (documentId: string) => void;
+        depth?: number;
+    }
+
+    let { node, selectedId, onSelect, depth = 0 }: Props = $props();
+
+    let expanded = $state<Record<string, boolean>>({});
+
+    function toggle(path: string) {
+        expanded[path] = !expanded[path];
+    }
+
+    function isExpanded(path: string): boolean {
+        return expanded[path] ?? true;
+    }
+</script>
+
+{#if node.isFolder && depth === 0}
+    {#each node.children as child}
+        <FileTree
+            node={child}
+            {selectedId}
+            {onSelect}
+            depth={depth + 1}
+        />
+    {/each}
+{:else if node.isFolder}
+    <div class="tree-folder">
+        <button
+            class="tree-item folder"
+            style="padding-left: {depth * 16}px"
+            onclick={() => toggle(node.path)}
+        >
+            <span class="expand-icon"
+                >{isExpanded(node.path) ? "▾" : "▸"}</span
+            >
+            <span class="folder-icon">📁</span>
+            <span class="node-name">{node.name}</span>
+        </button>
+        {#if isExpanded(node.path)}
+            {#each node.children as child}
+                <FileTree
+                    node={child}
+                    {selectedId}
+                    {onSelect}
+                    depth={depth + 1}
+                />
+            {/each}
+        {/if}
+    </div>
+{:else}
+    <button
+        class="tree-item file"
+        class:selected={node.document?.documentId === selectedId}
+        class:deleted={node.isDeleted}
+        style="padding-left: {depth * 16 + 8}px"
+        onclick={() =>
+            node.document && onSelect(node.document.documentId)}
+    >
+        <span class="file-icon">{node.isDeleted ? "○" : "●"}</span>
+        <span class="node-name">{node.name}</span>
+    </button>
+{/if}
+
+<style>
+    .tree-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        padding: 3px 12px;
+        font-size: 13px;
+        text-align: left;
+        transition: background 0.1s;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .tree-item:hover {
+        background: var(--bg-hover);
+    }
+
+    .tree-item.selected {
+        background: var(--blue-bg);
+    }
+
+    .tree-item.deleted {
+        opacity: 0.4;
+    }
+
+    .tree-item.deleted .node-name {
+        text-decoration: line-through;
+    }
+
+    .expand-icon {
+        font-size: 10px;
+        width: 12px;
+        flex-shrink: 0;
+        color: var(--text-muted);
+    }
+
+    .folder-icon {
+        font-size: 14px;
+        flex-shrink: 0;
+    }
+
+    .file-icon {
+        font-size: 8px;
+        flex-shrink: 0;
+        color: var(--text-subtle);
+    }
+
+    .node-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

frontend/history-ui/src/components/Header.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+    import { auth } from "../lib/stores.svelte";
+
+    interface Props {
+        vaultId: string;
+        serverVersion: string;
+        onRefresh: () => void;
+    }
+
+    let { vaultId, serverVersion, onRefresh }: Props = $props();
+</script>
+
+<header class="header">
+    <div class="header-left">
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
+            <path d="M12 2L2 7l10 5 10-5-10-5z" />
+            <path d="M2 17l10 5 10-5" />
+            <path d="M2 12l10 5 10-5" />
+        </svg>
+        <span class="header-title">VaultLink</span>
+        <span class="header-sep">/</span>
+        <span class="header-vault">{vaultId}</span>
+    </div>
+
+    <div class="header-right">
+        <span class="server-version">v{serverVersion}</span>
+        <button class="header-btn" onclick={onRefresh} title="Refresh">
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"
+                />
+            </svg>
+        </button>
+        {#if auth.availableVaults.length > 1}
+            <button
+                class="header-btn"
+                onclick={() => auth.deselectVault()}
+                title="Switch vault"
+            >
+                <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+                </svg>
+            </button>
+        {/if}
+        <button
+            class="header-btn"
+            onclick={() => auth.logout()}
+            title="Sign out"
+        >
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                <polyline points="16 17 21 12 16 7" />
+                <line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+        </button>
+    </div>
+</header>
+
+<style>
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 48px;
+        padding: 0 16px;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border);
+        flex-shrink: 0;
+    }
+
+    .header-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--text);
+    }
+
+    .header-title {
+        font-weight: 600;
+        font-size: 15px;
+    }
+
+    .header-sep {
+        color: var(--text-subtle);
+    }
+
+    .header-vault {
+        font-family: var(--mono);
+        font-size: 14px;
+        color: var(--accent);
+    }
+
+    .header-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .server-version {
+        font-size: 12px;
+        color: var(--text-subtle);
+        font-family: var(--mono);
+    }
+
+    .header-btn {
+        padding: 6px;
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        transition: color 0.15s, background 0.15s;
+    }
+
+    .header-btn:hover {
+        color: var(--text);
+        background: var(--bg-hover);
+    }
+</style>

frontend/history-ui/src/components/Login.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+    import { auth } from "../lib/stores.svelte";
+    import { listVaults } from "../lib/api";
+
+    let token = $state("");
+    let error = $state("");
+    let loading = $state(false);
+
+    async function handleSubmit(e: Event) {
+        e.preventDefault();
+        if (!token.trim()) {
+            error = "Token is required.";
+            return;
+        }
+        error = "";
+        loading = true;
+        try {
+            const response = await listVaults(token.trim());
+            auth.authenticate(
+                token.trim(),
+                response.userName,
+                response.vaults
+            );
+        } catch {
+            error = "Authentication failed. Check your token.";
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="login-page">
+    <div class="login-card">
+        <div class="logo">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                <path d="M2 17l10 5 10-5"/>
+                <path d="M2 12l10 5 10-5"/>
+            </svg>
+            <h1>VaultLink</h1>
+        </div>
+        <p class="subtitle">Vault History Browser</p>
+
+        <form onsubmit={handleSubmit}>
+            <label>
+                <span>Token</span>
+                <input
+                    type="password"
+                    bind:value={token}
+                    placeholder="Enter your access token"
+                    disabled={loading}
+                />
+            </label>
+
+            {#if error}
+                <div class="error">{error}</div>
+            {/if}
+
+            <button type="submit" class="btn-primary" disabled={loading}>
+                {#if loading}
+                    <span class="btn-spinner"></span>
+                    Connecting...
+                {:else}
+                    Connect
+                {/if}
+            </button>
+        </form>
+    </div>
+</div>
+
+<style>
+    .login-page {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        background: var(--bg);
+    }
+
+    .login-card {
+        width: 100%;
+        max-width: 400px;
+        padding: 40px;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        box-shadow: var(--shadow);
+    }
+
+    .logo {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 4px;
+        color: var(--text);
+    }
+
+    .logo h1 {
+        font-size: 24px;
+        font-weight: 600;
+    }
+
+    .subtitle {
+        color: var(--text-muted);
+        margin-bottom: 32px;
+        font-size: 14px;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    label {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    label span {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--text-muted);
+    }
+
+    input {
+        width: 100%;
+    }
+
+    .error {
+        color: var(--red);
+        font-size: 13px;
+        padding: 8px 12px;
+        background: var(--red-bg);
+        border-radius: var(--radius-sm);
+    }
+
+    .btn-primary {
+        width: 100%;
+        padding: 10px 16px;
+        background: var(--accent);
+        color: #fff;
+        font-weight: 600;
+        border-radius: var(--radius);
+        transition: background 0.15s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+        background: var(--accent-hover);
+    }
+
+    .btn-primary:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .btn-spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>

frontend/history-ui/src/components/TimeSlider.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+    import type { DocumentVersionWithoutContent } from "../lib/types/DocumentVersionWithoutContent";
+    import { relativeTime, absoluteTime } from "../lib/stores.svelte";
+
+    interface Props {
+        min: number;
+        max: number;
+        value: number | null;
+        versions: DocumentVersionWithoutContent[];
+        onchange: (value: number | null) => void;
+    }
+
+    let { min, max, value, versions, onchange }: Props = $props();
+
+    let isNow = $derived(value === null || value >= max);
+
+    function handleInput(e: Event) {
+        const target = e.target as HTMLInputElement;
+        const v = parseInt(target.value, 10);
+        if (v >= max) {
+            onchange(null);
+        } else {
+            onchange(v);
+        }
+    }
+
+    function snapToNow() {
+        onchange(null);
+    }
+
+    let currentVersion = $derived(
+        value !== null
+            ? versions.find((v) => v.vaultUpdateId === value) ??
+              versions.reduce(
+                  (closest, v) =>
+                      Math.abs(v.vaultUpdateId - (value ?? max)) <
+                      Math.abs(
+                          closest.vaultUpdateId - (value ?? max)
+                      )
+                          ? v
+                          : closest,
+                  versions[0]
+              )
+            : null
+    );
+</script>
+
+<div class="time-slider">
+    <div class="slider-label">
+        <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+        >
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12 6 12 12 16 14" />
+        </svg>
+        <span class="label-text">Time Travel</span>
+    </div>
+
+    <div class="slider-track">
+        <input
+            type="range"
+            min={min}
+            max={max}
+            value={value ?? max}
+            oninput={handleInput}
+        />
+    </div>
+
+    <div class="slider-info">
+        {#if isNow}
+            <span class="now-badge">Now</span>
+        {:else if currentVersion}
+            <span
+                class="time-info"
+                title={absoluteTime(currentVersion.updatedDate)}
+            >
+                #{value}
+                &middot;
+                {relativeTime(currentVersion.updatedDate)}
+            </span>
+        {:else}
+            <span class="time-info">#{value}</span>
+        {/if}
+    </div>
+
+    {#if !isNow}
+        <button class="snap-btn" onclick={snapToNow} title="Back to now">
+            <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
+        </button>
+    {/if}
+</div>
+
+<style>
+    .time-slider {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .slider-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--text-muted);
+        flex-shrink: 0;
+    }
+
+    .label-text {
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .slider-track {
+        flex: 1;
+        min-width: 120px;
+    }
+
+    .slider-track input[type="range"] {
+        width: 100%;
+        height: 4px;
+        appearance: none;
+        background: var(--bg-tertiary);
+        border-radius: 2px;
+        outline: none;
+        border: none;
+        padding: 0;
+    }
+
+    .slider-track input[type="range"]::-webkit-slider-thumb {
+        appearance: none;
+        width: 14px;
+        height: 14px;
+        background: var(--accent);
+        border-radius: 50%;
+        cursor: pointer;
+        transition: transform 0.1s;
+    }
+
+    .slider-track input[type="range"]::-webkit-slider-thumb:hover {
+        transform: scale(1.2);
+    }
+
+    .slider-info {
+        flex-shrink: 0;
+        min-width: 100px;
+    }
+
+    .now-badge {
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--green);
+        background: var(--green-bg);
+        padding: 2px 10px;
+        border-radius: 10px;
+        text-transform: uppercase;
+    }
+
+    .time-info {
+        font-size: 12px;
+        color: var(--text-muted);
+        font-family: var(--mono);
+    }
+
+    .snap-btn {
+        padding: 4px;
+        color: var(--accent);
+        border-radius: var(--radius-sm);
+        transition: background 0.15s;
+        flex-shrink: 0;
+    }
+
+    .snap-btn:hover {
+        background: var(--bg-hover);
+    }
+</style>

frontend/history-ui/src/components/ToastContainer.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { toasts } from "../lib/stores.svelte";
+
+    const typeColors: Record<string, string> = {
+        success: "var(--green)",
+        error: "var(--red)",
+        info: "var(--accent)"
+    };
+</script>
+
+{#if toasts.items.length > 0}
+    <div class="toast-container">
+        {#each toasts.items as toast (toast.id)}
+            <div
+                class="toast"
+                style="border-left-color: {typeColors[toast.type]}"
+            >
+                <span class="toast-message">{toast.message}</span>
+                <button
+                    class="toast-dismiss"
+                    onclick={() => toasts.dismiss(toast.id)}
+                >
+                    &times;
+                </button>
+            </div>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    .toast-container {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        max-width: 400px;
+    }
+
+    .toast {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border);
+        border-left-width: 3px;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        animation: slide-in 0.2s ease-out;
+    }
+
+    .toast-message {
+        flex: 1;
+        font-size: 13px;
+    }
+
+    .toast-dismiss {
+        font-size: 18px;
+        color: var(--text-muted);
+        padding: 0 4px;
+    }
+
+    .toast-dismiss:hover {
+        color: var(--text);
+    }
+
+    @keyframes slide-in {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+</style>

frontend/history-ui/src/components/VaultPicker.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+    import { auth } from "../lib/stores.svelte";
+    import { relativeTime } from "../lib/stores.svelte";
+    import type { VaultInfo } from "../lib/types/VaultInfo";
+
+    function select(vault: VaultInfo) {
+        auth.selectVault(vault.name);
+    }
+
+    function formatStats(vault: VaultInfo): string {
+        const docs = vault.documentCount === 1
+            ? "1 document"
+            : `${vault.documentCount} documents`;
+        if (!vault.createdAt) return docs;
+        return `${docs} · created ${relativeTime(vault.createdAt)}`;
+    }
+</script>
+
+<div class="picker-page">
+    <div class="picker-card">
+        <div class="picker-header">
+            <div class="logo">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                    <path d="M2 17l10 5 10-5"/>
+                    <path d="M2 12l10 5 10-5"/>
+                </svg>
+                <div>
+                    <h1>Select a vault</h1>
+                    <p class="user-info">
+                        Signed in as <strong>{auth.userName}</strong>
+                        <button class="logout-link" onclick={() => auth.logout()}>Sign out</button>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {#if auth.availableVaults.length === 0}
+            <div class="empty">
+                <p>No vaults found</p>
+                <p class="empty-hint">
+                    Vaults are created when a sync client first connects.
+                </p>
+            </div>
+        {:else}
+            <ul class="vault-list">
+                {#each auth.availableVaults as vault}
+                    <li>
+                        <button class="vault-item" onclick={() => select(vault)}>
+                            <svg class="vault-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+                            </svg>
+                            <div class="vault-details">
+                                <span class="vault-name">{vault.name}</span>
+                                <span class="vault-stats">{formatStats(vault)}</span>
+                            </div>
+                            <svg class="vault-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="9 18 15 12 9 6"/>
+                            </svg>
+                        </button>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .picker-page {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        background: var(--bg);
+    }
+
+    .picker-card {
+        width: 100%;
+        max-width: 480px;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        box-shadow: var(--shadow);
+        overflow: hidden;
+    }
+
+    .picker-header {
+        padding: 32px 32px 24px;
+    }
+
+    .logo {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        color: var(--text);
+    }
+
+    .logo svg {
+        margin-top: 2px;
+        flex-shrink: 0;
+    }
+
+    .logo h1 {
+        font-size: 20px;
+        font-weight: 600;
+    }
+
+    .user-info {
+        font-size: 13px;
+        color: var(--text-muted);
+        margin-top: 4px;
+    }
+
+    .user-info strong {
+        color: var(--text);
+        font-weight: 500;
+    }
+
+    .logout-link {
+        color: var(--text-subtle);
+        font-size: 13px;
+        text-decoration: underline;
+        margin-left: 8px;
+        padding: 0;
+    }
+
+    .logout-link:hover {
+        color: var(--text-muted);
+    }
+
+    .vault-list {
+        list-style: none;
+        border-top: 1px solid var(--border);
+    }
+
+    .vault-list li + li {
+        border-top: 1px solid var(--border-light);
+    }
+
+    .vault-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        width: 100%;
+        padding: 14px 24px;
+        text-align: left;
+        color: var(--text);
+        transition: background 0.12s;
+    }
+
+    .vault-item:hover {
+        background: var(--bg-hover);
+    }
+
+    .vault-icon {
+        color: var(--text-muted);
+        flex-shrink: 0;
+    }
+
+    .vault-details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+    }
+
+    .vault-name {
+        font-family: var(--mono);
+        font-size: 14px;
+    }
+
+    .vault-stats {
+        font-size: 12px;
+        color: var(--text-subtle);
+    }
+
+    .vault-arrow {
+        color: var(--text-subtle);
+        flex-shrink: 0;
+    }
+
+    .empty {
+        padding: 32px;
+        text-align: center;
+        border-top: 1px solid var(--border);
+    }
+
+    .empty p {
+        color: var(--text-muted);
+    }
+
+    .empty-hint {
+        font-size: 13px;
+        color: var(--text-subtle);
+        margin-top: 8px;
+    }
+</style>

frontend/history-ui/src/lib/api.ts

@@ -0,0 +1,146 @@
+import type { DocumentUpdateResponse } from "./types/DocumentUpdateResponse";
+import type { DocumentVersion } from "./types/DocumentVersion";
+import type { DocumentVersionWithoutContent } from "./types/DocumentVersionWithoutContent";
+import type { FetchLatestDocumentsResponse } from "./types/FetchLatestDocumentsResponse";
+import type { ListVaultsResponse } from "./types/ListVaultsResponse";
+import type { PingResponse } from "./types/PingResponse";
+import type { VaultHistoryResponse } from "./types/VaultHistoryResponse";
+
+async function fetchJsonWithToken<T>(
+    path: string,
+    token: string,
+    init?: RequestInit
+): Promise<T> {
+    const response = await fetch(path, {
+        ...init,
+        headers: {
+            Authorization: `Bearer ${token}`,
+            "device-id": "history-ui",
+            ...init?.headers
+        }
+    });
+    if (!response.ok) {
+        const body = await response.text();
+        throw new Error(`HTTP ${response.status}: ${body}`);
+    }
+    return response.json() as Promise<T>;
+}
+
+export async function listVaults(token: string): Promise<ListVaultsResponse> {
+    return fetchJsonWithToken("/vaults", token);
+}
+
+export class ApiClient {
+    constructor(
+        private vaultId: string,
+        private token: string
+    ) {}
+
+    private get baseUrl(): string {
+        return `/vaults/${encodeURIComponent(this.vaultId)}`;
+    }
+
+    private async fetchJson<T>(path: string, init?: RequestInit): Promise<T> {
+        return fetchJsonWithToken(path, this.token, init);
+    }
+
+    async ping(): Promise<PingResponse> {
+        return this.fetchJson(`${this.baseUrl}/ping`);
+    }
+
+    async fetchLatestDocuments(): Promise<FetchLatestDocumentsResponse> {
+        return this.fetchJson(`${this.baseUrl}/documents`);
+    }
+
+    async fetchDocumentVersions(
+        documentId: string
+    ): Promise<DocumentVersionWithoutContent[]> {
+        return this.fetchJson(
+            `${this.baseUrl}/documents/${documentId}/versions`
+        );
+    }
+
+    async fetchDocumentVersion(
+        documentId: string,
+        vaultUpdateId: number
+    ): Promise<DocumentVersion> {
+        return this.fetchJson(
+            `${this.baseUrl}/documents/${documentId}/versions/${vaultUpdateId}`
+        );
+    }
+
+    async fetchDocumentVersionContent(
+        documentId: string,
+        vaultUpdateId: number
+    ): Promise<ArrayBuffer> {
+        const response = await fetch(
+            `${this.baseUrl}/documents/${documentId}/versions/${vaultUpdateId}/content`,
+            {
+                headers: {
+                    Authorization: `Bearer ${this.token}`,
+                    "device-id": "history-ui"
+                }
+            }
+        );
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        return response.arrayBuffer();
+    }
+
+    async fetchVaultHistory(
+        limit?: number,
+        beforeUpdateId?: number
+    ): Promise<VaultHistoryResponse> {
+        const params = new URLSearchParams();
+        if (limit !== undefined) params.set("limit", String(limit));
+        if (beforeUpdateId !== undefined)
+            params.set("before_update_id", String(beforeUpdateId));
+        const qs = params.toString();
+        return this.fetchJson(`${this.baseUrl}/history${qs ? `?${qs}` : ""}`);
+    }
+
+    /**
+     * Upload a new version of an existing (non-deleted) document. The
+     * server treats this like any other edit — server-side merging,
+     * path dedupe, and broadcast still apply. Used by the UI to restore
+     * an old version by re-submitting its bytes on top of the latest.
+     */
+    async updateBinaryDocument(
+        documentId: string,
+        parentVersionId: number,
+        relativePath: string,
+        content: ArrayBuffer
+    ): Promise<DocumentUpdateResponse> {
+        const form = new FormData();
+        form.append("parent_version_id", String(parentVersionId));
+        form.append("relative_path", relativePath);
+        form.append("content", new Blob([content]));
+        return this.fetchJson(
+            `${this.baseUrl}/documents/${documentId}/binary`,
+            { method: "PUT", body: form }
+        );
+    }
+
+    /**
+     * Create a new document. Used by the UI to restore a deleted
+     * document: `update_document` short-circuits on `is_deleted`, so
+     * resurrection has to go through `create_document` — which detects
+     * an existing doc at the same path, merges or dedupes as needed,
+     * and returns the resulting version.
+     */
+    async createDocument(
+        lastSeenVaultUpdateId: number,
+        relativePath: string,
+        content: ArrayBuffer
+    ): Promise<DocumentUpdateResponse> {
+        const form = new FormData();
+        form.append("last_seen_vault_update_id", String(lastSeenVaultUpdateId));
+        form.append("relative_path", relativePath);
+        form.append("content", new Blob([content]));
+        return this.fetchJson(`${this.baseUrl}/documents`, {
+            method: "POST",
+            body: form
+        });
+    }
+}

frontend/history-ui/src/lib/stores.svelte.ts

@@ -0,0 +1,290 @@
+import { ApiClient } from "./api";
+import type { DocumentVersionWithoutContent } from "./types/DocumentVersionWithoutContent";
+import type { VaultInfo } from "./types/VaultInfo";
+import type { VersionEvent, ActionType, TreeNode } from "./view-types";
+
+class AuthStore {
+    token = $state("");
+    userName = $state("");
+    vaultId = $state("");
+    serverVersion = $state("");
+    availableVaults = $state<VaultInfo[]>([]);
+    isAuthenticated = $state(false);
+    api = $state<ApiClient | null>(null);
+
+    authenticate(token: string, userName: string, vaults: VaultInfo[]) {
+        this.token = token;
+        this.userName = userName;
+        this.availableVaults = vaults;
+        sessionStorage.setItem("vaultlink_token", token);
+    }
+
+    selectVault(vaultId: string) {
+        this.vaultId = vaultId;
+        this.isAuthenticated = true;
+        this.api = new ApiClient(vaultId, this.token);
+        sessionStorage.setItem("vaultlink_vault", vaultId);
+    }
+
+    deselectVault() {
+        this.vaultId = "";
+        this.isAuthenticated = false;
+        this.api = null;
+        sessionStorage.removeItem("vaultlink_vault");
+    }
+
+    logout() {
+        this.token = "";
+        this.userName = "";
+        this.vaultId = "";
+        this.serverVersion = "";
+        this.availableVaults = [];
+        this.isAuthenticated = false;
+        this.api = null;
+        sessionStorage.removeItem("vaultlink_token");
+        sessionStorage.removeItem("vaultlink_vault");
+    }
+
+    tryRestore(): { token: string; vaultId?: string } | null {
+        const token = sessionStorage.getItem("vaultlink_token");
+        if (!token) return null;
+        const vaultId = sessionStorage.getItem("vaultlink_vault") ?? undefined;
+        return { token, vaultId };
+    }
+}
+
+export const auth = new AuthStore();
+
+// Navigation
+export type View =
+    | { kind: "dashboard" }
+    | { kind: "document"; documentId: string };
+
+class NavStore {
+    current = $state<View>({ kind: "dashboard" });
+
+    goto(view: View) {
+        this.current = view;
+    }
+
+    goHome() {
+        this.current = { kind: "dashboard" };
+    }
+}
+
+export const nav = new NavStore();
+
+// Toasts
+interface Toast {
+    id: number;
+    message: string;
+    type: "success" | "error" | "info";
+}
+
+class ToastStore {
+    items = $state<Toast[]>([]);
+    private nextId = 0;
+
+    add(message: string, type: Toast["type"] = "info") {
+        const id = this.nextId++;
+        this.items.push({ id, message, type });
+        setTimeout(() => this.dismiss(id), 5000);
+    }
+
+    dismiss(id: number) {
+        this.items = this.items.filter((t) => t.id !== id);
+    }
+}
+
+export const toasts = new ToastStore();
+
+// Utilities
+
+export function inferAction(
+    version: DocumentVersionWithoutContent,
+    previousVersion?: DocumentVersionWithoutContent
+): ActionType {
+    if (version.isDeleted) return "deleted";
+    if (!previousVersion) return "created";
+    if (previousVersion.isDeleted && !version.isDeleted) return "restored";
+    if (previousVersion.relativePath !== version.relativePath) return "renamed";
+    return "updated";
+}
+
+export function enrichVersions(
+    versions: DocumentVersionWithoutContent[]
+): VersionEvent[] {
+    // versions should be sorted by vaultUpdateId ascending
+    const sorted = [...versions].sort(
+        (a, b) => a.vaultUpdateId - b.vaultUpdateId
+    );
+    const byDoc = new Map<string, DocumentVersionWithoutContent[]>();
+    for (const v of sorted) {
+        let arr = byDoc.get(v.documentId);
+        if (!arr) {
+            arr = [];
+            byDoc.set(v.documentId, arr);
+        }
+        arr.push(v);
+    }
+
+    return sorted.map((v) => {
+        const docVersions = byDoc.get(v.documentId)!;
+        const idx = docVersions.indexOf(v);
+        const prev = idx > 0 ? docVersions[idx - 1] : undefined;
+        const action = inferAction(v, prev);
+        return {
+            ...v,
+            action,
+            previousPath: action === "renamed" ? prev?.relativePath : undefined
+        };
+    });
+}
+
+export function buildTree(
+    documents: DocumentVersionWithoutContent[],
+    showDeleted: boolean
+): TreeNode {
+    const root: TreeNode = {
+        name: "",
+        path: "",
+        isFolder: true,
+        children: []
+    };
+
+    const filtered = showDeleted
+        ? documents
+        : documents.filter((d) => !d.isDeleted);
+
+    for (const doc of filtered) {
+        const parts = doc.relativePath.split("/");
+        let current = root;
+
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            const isFile = i === parts.length - 1;
+            const path = parts.slice(0, i + 1).join("/");
+
+            if (isFile) {
+                current.children.push({
+                    name: part,
+                    path,
+                    isFolder: false,
+                    children: [],
+                    document: doc,
+                    isDeleted: doc.isDeleted
+                });
+            } else {
+                let folder = current.children.find(
+                    (c) => c.isFolder && c.name === part
+                );
+                if (!folder) {
+                    folder = {
+                        name: part,
+                        path,
+                        isFolder: true,
+                        children: []
+                    };
+                    current.children.push(folder);
+                }
+                current = folder;
+            }
+        }
+    }
+
+    sortTree(root);
+    return root;
+}
+
+function sortTree(node: TreeNode) {
+    node.children.sort((a, b) => {
+        if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1;
+        return a.name.localeCompare(b.name);
+    });
+    for (const child of node.children) {
+        if (child.isFolder) sortTree(child);
+    }
+}
+
+export function relativeTime(dateStr: string): string {
+    const date = new Date(dateStr);
+    const now = Date.now();
+    const diff = now - date.getTime();
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (seconds < 60) return "just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    if (days < 7) return `${days}d ago`;
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: days > 365 ? "numeric" : undefined
+    });
+}
+
+export function absoluteTime(dateStr: string): string {
+    return new Date(dateStr).toLocaleString();
+}
+
+export function formatBytes(bytes: number): string {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+export function fileExtension(path: string): string {
+    const dot = path.lastIndexOf(".");
+    return dot > -1 ? path.substring(dot + 1).toLowerCase() : "";
+}
+
+export function isTextFile(path: string): boolean {
+    const textExts = new Set([
+        "md",
+        "txt",
+        "json",
+        "yaml",
+        "yml",
+        "toml",
+        "xml",
+        "html",
+        "css",
+        "js",
+        "ts",
+        "svelte",
+        "rs",
+        "py",
+        "sh",
+        "bash",
+        "zsh",
+        "csv",
+        "svg",
+        "log",
+        "conf",
+        "cfg",
+        "ini",
+        "env",
+        "gitignore",
+        "editorconfig"
+    ]);
+    return textExts.has(fileExtension(path));
+}
+
+export function isImageFile(path: string): boolean {
+    const imageExts = new Set([
+        "png",
+        "jpg",
+        "jpeg",
+        "gif",
+        "webp",
+        "svg",
+        "ico",
+        "bmp"
+    ]);
+    return imageExts.has(fileExtension(path));
+}

frontend/history-ui/src/lib/types/ClientCursors.ts

@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DocumentWithCursors } from "./DocumentWithCursors";
+
+export type ClientCursors = {
+    userName: string;
+    deviceId: string;
+    documentsWithCursors: Array<DocumentWithCursors>;
+};

frontend/history-ui/src/lib/types/CreateDocumentVersion.ts

@@ -1,7 +1,7 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export interface UpdateDocumentVersion {
-    parent_version_id: bigint;
+export type CreateDocumentVersion = {
     relative_path: string;
-    content: number[];
-}
+    last_seen_vault_update_id: number;
+    content: Array<number>;
+};

frontend/history-ui/src/lib/types/CursorPositionFromClient.ts

@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DocumentWithCursors } from "./DocumentWithCursors";
+
+export type CursorPositionFromClient = {
+    documentsWithCursors: Array<DocumentWithCursors>;
+};

frontend/history-ui/src/lib/types/CursorPositionFromServer.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { ClientCursors } from "./ClientCursors";
+
+export type CursorPositionFromServer = { clients: Array<ClientCursors> };

frontend/history-ui/src/lib/types/CursorSpan.ts

@@ -1,5 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export interface DeleteDocumentVersion {
-    relativePath: string;
-}
+export type CursorSpan = { start: number; end: number };

frontend/history-ui/src/lib/types/DocumentUpdateResponse.ts

@@ -0,0 +1,10 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DocumentVersion } from "./DocumentVersion";
+import type { DocumentVersionWithoutContent } from "./DocumentVersionWithoutContent";
+
+/**
+ * Response to a create/update document request.
+ */
+export type DocumentUpdateResponse =
+    | ({ type: "FastForwardUpdate" } & DocumentVersionWithoutContent)
+    | ({ type: "MergingUpdate" } & DocumentVersion);

frontend/history-ui/src/lib/types/DocumentVersion.ts

@@ -0,0 +1,12 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type DocumentVersion = {
+    vaultUpdateId: number;
+    documentId: string;
+    relativePath: string;
+    updatedDate: string;
+    contentBase64: string;
+    isDeleted: boolean;
+    userId: string;
+    deviceId: string;
+};

frontend/history-ui/src/lib/types/DocumentVersionWithoutContent.ts

@@ -0,0 +1,16 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type DocumentVersionWithoutContent = {
+    vaultUpdateId: number;
+    documentId: string;
+    relativePath: string;
+    updatedDate: string;
+    isDeleted: boolean;
+    userId: string;
+    deviceId: string;
+    contentSize: number;
+    /**
+     * True iff this is the first version of the document
+     */
+    isNewFile: boolean;
+};

frontend/history-ui/src/lib/types/DocumentWithCursors.ts

@@ -0,0 +1,9 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { CursorSpan } from "./CursorSpan";
+
+export type DocumentWithCursors = {
+    vaultUpdateId: number | null;
+    documentId: string;
+    relativePath: string;
+    cursors: Array<CursorSpan>;
+};

frontend/history-ui/src/lib/types/FetchLatestDocumentsResponse.ts

@@ -0,0 +1,13 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DocumentVersionWithoutContent } from "./DocumentVersionWithoutContent";
+
+/**
+ * Response to a fetch latest documents request.
+ */
+export type FetchLatestDocumentsResponse = {
+    latestDocuments: Array<DocumentVersionWithoutContent>;
+    /**
+     * The update ID of the latest document in the response.
+     */
+    lastUpdateId: bigint;
+};

frontend/history-ui/src/lib/types/ListVaultsResponse.ts

@@ -0,0 +1,11 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { VaultInfo } from "./VaultInfo";
+
+/**
+ * Response to listing vaults accessible to the authenticated user.
+ */
+export type ListVaultsResponse = {
+    vaults: Array<VaultInfo>;
+    hasMore: boolean;
+    userName: string;
+};

frontend/history-ui/src/lib/types/PingResponse.ts

@@ -0,0 +1,25 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Response to a ping request.
+ */
+export type PingResponse = {
+    /**
+     * Semantic version of the server.
+     */
+    serverVersion: string;
+    /**
+     * Whether the client is authenticated based on the sent Authorization
+     * header.
+     */
+    isAuthenticated: boolean;
+    /**
+     * List of file extensions that are allowed to be merged.
+     */
+    mergeableFileExtensions: Array<string>;
+    /**
+     * API version ensuring backwards & forwards compatibility between the client
+     * and server.
+     */
+    supportedApiVersion: number;
+};

frontend/history-ui/src/lib/types/SerializedError.ts

@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type SerializedError = {
+    errorType: string;
+    message: string;
+    causes: Array<string>;
+};

frontend/history-ui/src/lib/types/UpdateTextDocumentVersion.ts

@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type UpdateTextDocumentVersion = {
+    parentVersionId: number;
+    relativePath: string | null;
+    content: Array<number | string>;
+};

frontend/history-ui/src/lib/types/VaultHistoryResponse.ts

@@ -0,0 +1,10 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DocumentVersionWithoutContent } from "./DocumentVersionWithoutContent";
+
+/**
+ * Response to a vault history request (paginated).
+ */
+export type VaultHistoryResponse = {
+    versions: Array<DocumentVersionWithoutContent>;
+    hasMore: boolean;
+};

frontend/history-ui/src/lib/types/VaultInfo.ts

@@ -0,0 +1,10 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Summary of a single vault returned by the list-vaults endpoint.
+ */
+export type VaultInfo = {
+    name: string;
+    documentCount: number;
+    createdAt: string | null;
+};

frontend/history-ui/src/lib/types/WebSocketClientMessage.ts

@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { CursorPositionFromClient } from "./CursorPositionFromClient";
+import type { WebSocketHandshake } from "./WebSocketHandshake";
+
+export type WebSocketClientMessage =
+    | ({ type: "handshake" } & WebSocketHandshake)
+    | ({ type: "cursorPositions" } & CursorPositionFromClient);

frontend/history-ui/src/lib/types/WebSocketHandshake.ts

@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type WebSocketHandshake = {
+    token: string;
+    deviceId: string;
+    lastSeenVaultUpdateId: number | null;
+};

frontend/history-ui/src/lib/types/WebSocketServerMessage.ts

@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { CursorPositionFromServer } from "./CursorPositionFromServer";
+import type { WebSocketVaultUpdate } from "./WebSocketVaultUpdate";
+
+export type WebSocketServerMessage =
+    | ({ type: "vaultUpdate" } & WebSocketVaultUpdate)
+    | ({ type: "cursorPositions" } & CursorPositionFromServer);

frontend/history-ui/src/lib/types/WebSocketVaultUpdate.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DocumentVersionWithoutContent } from "./DocumentVersionWithoutContent";
+
+export type WebSocketVaultUpdate = { document: DocumentVersionWithoutContent };

frontend/history-ui/src/lib/view-types.ts

@@ -0,0 +1,22 @@
+import type { DocumentVersionWithoutContent } from "./types/DocumentVersionWithoutContent";
+
+export type ActionType =
+    | "created"
+    | "updated"
+    | "renamed"
+    | "deleted"
+    | "restored";
+
+export interface VersionEvent extends DocumentVersionWithoutContent {
+    action: ActionType;
+    previousPath?: string;
+}
+
+export interface TreeNode {
+    name: string;
+    path: string;
+    isFolder: boolean;
+    children: TreeNode[];
+    document?: DocumentVersionWithoutContent;
+    isDeleted?: boolean;
+}

frontend/history-ui/src/main.ts

@@ -0,0 +1,7 @@
+import { mount } from "svelte";
+import App from "./App.svelte";
+import "./app.css";
+
+const app = mount(App, { target: document.getElementById("app")! });
+
+export default app;

frontend/history-ui/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+    preprocess: vitePreprocess()
+};

frontend/history-ui/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "verbatimModuleSyntax": true,
+        "types": ["svelte"]
+    },
+    "include": ["src/**/*", "src/**/*.svelte"]
+}

frontend/history-ui/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+export default defineConfig({
+    plugins: [svelte()],
+    build: {
+        outDir: "dist",
+        emptyOutDir: true
+    },
+    server: {
+        proxy: {
+            "/vaults": "http://localhost:3010"
+        }
+    }
+});

frontend/local-client-cli/src/args.test.ts

@@ -150,6 +150,25 @@ test("parseArgs - default log level is INFO", () => {
     assert.equal(args.logLevel, LogLevel.INFO);
 });
 
+test("parseArgs - parse DEBUG log level", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default",
+        "--log-level",
+        "DEBUG"
+    ]);
+
+    assert.equal(args.logLevel, LogLevel.DEBUG);
+});
+
 test("parseArgs - parse ERROR log level", () => {
     const args = parseArgs([
         "node",
@@ -169,6 +188,43 @@ test("parseArgs - parse ERROR log level", () => {
     assert.equal(args.logLevel, LogLevel.ERROR);
 });
 
+test("parseArgs - log level is case insensitive", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default",
+        "--log-level",
+        "debug"
+    ]);
+
+    assert.equal(args.logLevel, LogLevel.DEBUG);
+});
+
+test("parseArgs - throws on invalid log level", () => {
+    assert.throws(() => {
+        parseArgs([
+            "node",
+            "cli.js",
+            "-l",
+            "/path/to/vault",
+            "-r",
+            "https://sync.example.com",
+            "-t",
+            "mytoken",
+            "-v",
+            "default",
+            "--log-level",
+            "INVALID"
+        ]);
+    }, /Invalid log level/);
+});
 
 test("parseArgs - reads required options from environment variables", () => {
     process.env.VAULTLINK_LOCAL_PATH = "/env/path";
@@ -211,3 +267,184 @@ test("parseArgs - CLI arguments take precedence over environment variables", ()
         delete process.env.VAULTLINK_TOKEN;
     }
 });
+
+test("parseArgs - reads log level from environment variable", () => {
+    process.env.VAULTLINK_LOG_LEVEL = "DEBUG";
+
+    try {
+        const args = parseArgs([
+            "node",
+            "cli.js",
+            "-l",
+            "/path/to/vault",
+            "-r",
+            "https://sync.example.com",
+            "-t",
+            "mytoken",
+            "-v",
+            "default"
+        ]);
+        assert.equal(args.logLevel, LogLevel.DEBUG);
+    } finally {
+        delete process.env.VAULTLINK_LOG_LEVEL;
+    }
+});
+
+test("parseArgs - quiet defaults to false", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default"
+    ]);
+
+    assert.equal(args.quiet, false);
+});
+
+test("parseArgs - parse --quiet flag", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default",
+        "--quiet"
+    ]);
+
+    assert.equal(args.quiet, true);
+});
+
+test("parseArgs - parse -q short flag", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default",
+        "-q"
+    ]);
+
+    assert.equal(args.quiet, true);
+});
+
+test("parseArgs - line-endings defaults to auto", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default"
+    ]);
+
+    assert.equal(args.lineEndings, "auto");
+});
+
+test("parseArgs - parse --line-endings lf", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default",
+        "--line-endings",
+        "lf"
+    ]);
+
+    assert.equal(args.lineEndings, "lf");
+});
+
+test("parseArgs - parse --line-endings crlf", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "https://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default",
+        "--line-endings",
+        "crlf"
+    ]);
+
+    assert.equal(args.lineEndings, "crlf");
+});
+
+test("parseArgs - throws on invalid remote URI protocol", () => {
+    assert.throws(() => {
+        parseArgs([
+            "node",
+            "cli.js",
+            "-l",
+            "/path/to/vault",
+            "-r",
+            "ftp://sync.example.com",
+            "-t",
+            "mytoken",
+            "-v",
+            "default"
+        ]);
+    }, /Invalid remote URI/);
+});
+
+test("parseArgs - accepts http:// remote URI", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "http://localhost:3000",
+        "-t",
+        "mytoken",
+        "-v",
+        "default"
+    ]);
+
+    assert.equal(args.remoteUri, "http://localhost:3000");
+});
+
+test("parseArgs - accepts wss:// remote URI", () => {
+    const args = parseArgs([
+        "node",
+        "cli.js",
+        "-l",
+        "/path/to/vault",
+        "-r",
+        "wss://sync.example.com",
+        "-t",
+        "mytoken",
+        "-v",
+        "default"
+    ]);
+
+    assert.equal(args.remoteUri, "wss://sync.example.com");
+});

frontend/local-client-cli/src/args.ts

@@ -2,8 +2,7 @@ import { Command, Option } from "commander";
 import packageJson from "../package.json";
 import { LogLevel } from "sync-client";
 
-export const LINE_ENDING_MODES = ["auto", "lf", "crlf"] as const;
-export type LineEndingMode = (typeof LINE_ENDING_MODES)[number];
+type LineEndingMode = "auto" | "lf" | "crlf";
 
 interface CliArgs {
     remoteUri: string;
@@ -22,35 +21,6 @@ interface CliArgs {
 
 const VALID_PROTOCOLS = ["http://", "https://", "ws://", "wss://"];
 
-const REQUIRED_OPTIONS = {
-    localPath: {
-        flags: "-l, --local-path <path>",
-        env: "VAULTLINK_LOCAL_PATH"
-    },
-    remoteUri: {
-        flags: "-r, --remote-uri <uri>",
-        env: "VAULTLINK_REMOTE_URI"
-    },
-    token: { flags: "-t, --token <token>", env: "VAULTLINK_TOKEN" },
-    vaultName: {
-        flags: "-v, --vault-name <name>",
-        env: "VAULTLINK_VAULT_NAME"
-    }
-} as const;
-
-function requireOption<T>(
-    value: T | undefined,
-    name: keyof typeof REQUIRED_OPTIONS
-): T {
-    if (value === undefined) {
-        const { flags, env } = REQUIRED_OPTIONS[name];
-        throw new Error(
-            `required option '${flags}' not specified (or set ${env})`
-        );
-    }
-    return value;
-}
-
 export function parseArgs(argv: string[]): CliArgs {
     const program = new Command();
 
@@ -62,25 +32,23 @@ export function parseArgs(argv: string[]): CliArgs {
         .version(packageJson.version)
         .addOption(
             new Option(
-                REQUIRED_OPTIONS.localPath.flags,
+                "-l, --local-path <path>",
                 "Local directory path to sync"
-            ).env(REQUIRED_OPTIONS.localPath.env)
+            ).env("VAULTLINK_LOCAL_PATH")
         )
         .addOption(
-            new Option(
-                REQUIRED_OPTIONS.remoteUri.flags,
-                "Remote server URI"
-            ).env(REQUIRED_OPTIONS.remoteUri.env)
+            new Option("-r, --remote-uri <uri>", "Remote server URI").env(
+                "VAULTLINK_REMOTE_URI"
+            )
         )
         .addOption(
-            new Option(
-                REQUIRED_OPTIONS.token.flags,
-                "Authentication token"
-            ).env(REQUIRED_OPTIONS.token.env)
+            new Option("-t, --token <token>", "Authentication token").env(
+                "VAULTLINK_TOKEN"
+            )
         )
         .addOption(
-            new Option(REQUIRED_OPTIONS.vaultName.flags, "Vault name").env(
-                REQUIRED_OPTIONS.vaultName.env
+            new Option("-v, --vault-name <name>", "Vault name").env(
+                "VAULTLINK_VAULT_NAME"
             )
         )
         .addOption(
@@ -137,7 +105,7 @@ export function parseArgs(argv: string[]): CliArgs {
                 "[OPTIONAL] Line ending style: auto (platform default), lf, crlf"
             )
                 .default("auto")
-                .choices([...LINE_ENDING_MODES])
+                .choices(["auto", "lf", "crlf"])
                 .env("VAULTLINK_LINE_ENDINGS")
         )
         .addHelpText(
@@ -176,6 +144,22 @@ Environment variables:
     const lineEndingsStr = (opts.lineEndings as string | undefined) ?? "auto";
     /* eslint-enable @typescript-eslint/no-unsafe-type-assertion */
 
+    const requireOption = <T>(value: T | undefined, name: string): T => {
+        if (value === undefined) {
+            const option = program.options.find(
+                (o) => o.attributeName() === name
+            );
+            const envHint =
+                option?.envVar !== undefined
+                    ? ` (or set ${option.envVar})`
+                    : "";
+            throw new Error(
+                `required option '${option?.flags ?? name}' not specified${envHint}`
+            );
+        }
+        return value;
+    };
+
     const requiredLocalPath = requireOption(localPath, "localPath");
     const requiredRemoteUri = requireOption(remoteUri, "remoteUri");
     const requiredToken = requireOption(token, "token");
@@ -203,11 +187,13 @@ Environment variables:
     }
     const logLevel = logLevelUpper;
 
-    const isLineEndingMode = (value: string): value is LineEndingMode =>
-        (LINE_ENDING_MODES as readonly string[]).includes(value);
+    const validLineEndings: readonly string[] = ["auto", "lf", "crlf"];
+    const isLineEndingMode = (value: string): value is LineEndingMode => {
+        return validLineEndings.includes(value);
+    };
     if (!isLineEndingMode(lineEndingsStr)) {
         throw new Error(
-            `Invalid line endings mode '${lineEndingsStr}'. Valid values are: ${LINE_ENDING_MODES.join(", ")}`
+            `Invalid line endings mode '${lineEndingsStr}'. Valid values are: ${validLineEndings.join(", ")}`
         );
     }
     const lineEndings = lineEndingsStr;

frontend/local-client-cli/src/cli.ts

@@ -7,12 +7,12 @@ import {
     DEFAULT_SETTINGS,
     Logger,
     LogLevel,
-    LogLine,
+    type LogLine,
     type SyncSettings,
     type StoredDatabase
 } from "sync-client";
-import { parseArgs, type LineEndingMode } from "./args";
-import { NodeFileSystemOperations, VAULTLINK_DIR } from "./node-filesystem";
+import { parseArgs } from "./args";
+import { NodeFileSystemOperations } from "./node-filesystem";
 import { FileWatcher } from "./file-watcher";
 import { formatLogLine } from "./logger-formatter";
 import packageJson from "../package.json";
@@ -50,7 +50,7 @@ function createLogHandler(minLevel: LogLevel): (logLine: LogLine) => void {
 const HEALTH_CHECK_INTERVAL_MS = 30 * 1000;
 const PROGRESS_LOG_INTERVAL_MS = 2000;
 
-function resolveLineEndings(mode: LineEndingMode): string {
+function resolveLineEndings(mode: "auto" | "lf" | "crlf"): string {
     switch (mode) {
         case "lf":
             return "\n";
@@ -65,13 +65,9 @@ async function main(): Promise<void> {
     const args = parseArgs(process.argv);
     const absolutePath = path.resolve(args.localPath);
 
+    const logger = new Logger();
     const logHandler = createLogHandler(args.logLevel);
-    // Boot-time messages are emitted directly through logHandler before the
-    // SyncClient (and its Logger) exist; afterwards every log line flows
-    // through client.logger.
-    const emitBoot = (level: LogLevel, message: string): void => {
-        logHandler(new LogLine(level, message));
-    };
+    logger.onLogEmitted.add(logHandler);
 
     if (!fsSync.existsSync(absolutePath)) {
         fsSync.mkdirSync(absolutePath, { recursive: true });
@@ -80,31 +76,27 @@ async function main(): Promise<void> {
     try {
         const stats = await fs.stat(absolutePath);
         if (!stats.isDirectory()) {
-            emitBoot(LogLevel.ERROR, `${absolutePath} is not a directory`);
+            logger.error(`${absolutePath} is not a directory`);
             process.exit(1);
         }
     } catch (error) {
-        emitBoot(
-            LogLevel.ERROR,
+        logger.error(
             `Cannot access directory ${absolutePath}: ${error instanceof Error ? error.message : String(error)}`
         );
         process.exit(1);
     }
 
     if (!args.quiet) {
-        emitBoot(LogLevel.INFO, `VaultLink Local CLI v${packageJson.version}`);
-        emitBoot(LogLevel.INFO, `Local path: ${absolutePath}`);
-        emitBoot(LogLevel.INFO, `Remote URI: ${args.remoteUri}`);
-        emitBoot(LogLevel.INFO, `Vault name: ${args.vaultName}`);
+        logger.info(`VaultLink Local CLI v${packageJson.version}`);
+        logger.info(`Local path: ${absolutePath}`);
+        logger.info(`Remote URI: ${args.remoteUri}`);
+        logger.info(`Vault name: ${args.vaultName}`);
         if (args.lineEndings !== "auto") {
-            emitBoot(
-                LogLevel.INFO,
-                `Line endings: ${args.lineEndings.toUpperCase()}`
-            );
+            logger.info(`Line endings: ${args.lineEndings.toUpperCase()}`);
         }
     }
 
-    const dataDir = path.join(absolutePath, VAULTLINK_DIR);
+    const dataDir = path.join(absolutePath, ".vaultlink");
     const dataFile = path.join(dataDir, "sync-data.json");
 
     await fs.mkdir(dataDir, { recursive: true });
@@ -113,7 +105,8 @@ async function main(): Promise<void> {
 
     const ignorePatterns = [
         ...(args.ignorePatterns ?? []),
-        `${VAULTLINK_DIR}/**`
+        ".vaultlink/**",
+        ".git/**"
     ];
 
     const settings: SyncSettings = {
@@ -141,10 +134,7 @@ async function main(): Promise<void> {
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
                     database = JSON.parse(content) as Partial<StoredDatabase>;
                 } catch {
-                    emitBoot(
-                        LogLevel.WARNING,
-                        `Cannot read data file at ${dataFile}`
-                    );
+                    logger.warn(`Cannot read data file at ${dataFile}`);
                 }
 
                 return {
@@ -279,6 +269,7 @@ async function main(): Promise<void> {
 }
 
 main().catch((error: unknown) => {
+    // Last-resort handler before the logger exists
     // eslint-disable-next-line no-console
     console.error(
         `Unexpected error: ${error instanceof Error ? error.message : String(error)}`

frontend/local-client-cli/src/node-filesystem.ts

@@ -1,7 +1,6 @@
 import * as fs from "fs/promises";
 import type { Dirent } from "fs";
 import * as path from "path";
-import { randomUUID } from "crypto";
 import type {
     FileSystemOperations,
     RelativePath,
@@ -9,13 +8,8 @@ import type {
 } from "sync-client";
 import { toUnixPath } from "./path-utils";
 
-// VaultLink's per-vault metadata directory. Holds the persisted sync database
-// and the tmp files atomicWrite renames into place; the matching `${VAULTLINK_DIR}/**`
-// ignore pattern keeps everything in here invisible to the file watcher.
-export const VAULTLINK_DIR = ".vaultlink";
-
 export class NodeFileSystemOperations implements FileSystemOperations {
-    public constructor(private readonly basePath: string) { }
+    public constructor(private readonly basePath: string) {}
 
     public async listFilesRecursively(
         directory: RelativePath | undefined
@@ -138,37 +132,12 @@ export class NodeFileSystemOperations implements FileSystemOperations {
         content: Uint8Array | string,
         encoding?: BufferEncoding
     ): Promise<void> {
-        const tmpDir = path.join(this.basePath, VAULTLINK_DIR);
-        await fs.mkdir(tmpDir, { recursive: true });
-        const tmpPath = path.join(tmpDir, `atomic-write-${randomUUID()}.tmp`);
-        try {
-            await fs.writeFile(tmpPath, content, encoding);
-            const fd = await fs.open(tmpPath, "r");
-            try {
-                await fd.datasync();
-            } finally {
-                await fd.close();
-            }
-            await fs.rename(tmpPath, fullPath);
-            await this.syncDirectory(path.dirname(fullPath));
-        } catch (error) {
-            await fs.unlink(tmpPath).catch(() => undefined);
-            throw error;
-        }
-    }
-
-    // Make the rename durable by fsync'ing the destination's parent directory.
-    // Skipped on Windows: fsync on a directory handle isn't supported there
-    private async syncDirectory(dir: string): Promise<void> {
-        if (process.platform === "win32") {
-            return;
-        }
-        const fd = await fs.open(dir, "r");
-        try {
-            await fd.sync();
-        } finally {
-            await fd.close();
-        }
+        const tmpPath = fullPath + ".tmp";
+        await fs.writeFile(tmpPath, content, encoding);
+        const fd = await fs.open(tmpPath, "r");
+        await fd.datasync();
+        await fd.close();
+        await fs.rename(tmpPath, fullPath);
     }
 
     private async walkDirectory(

frontend/local-client-cli/src/path-utils.ts

@@ -5,14 +5,8 @@ export function toUnixPath(nativePath: string): string {
     return nativePath.split(path.sep).join(path.posix.sep);
 }
 
-// Match a file path against a glob pattern.
-//
-// Behaves like Node's path.matchesGlob with one extension: `dir/**` matches
-// the directory `dir` itself, not only its descendants. The watcher feeds us
-// a directory's relative path (e.g. ".git") at the same time it's about to
-// recurse into it, and the natural way for users to write the ignore pattern
-// is `.git/**` — under stdlib semantics that pattern would let the directory
-// through and only block its children, defeating the prune.
+// Match a file path against a glob pattern
+// Extends path.matchesGlob so that "dir/**" also matches the directory itself
 export function matchesGlob(filePath: string, pattern: string): boolean {
     if (pattern.endsWith("/**") && filePath === pattern.slice(0, -3)) {
         return true;

frontend/obsidian-plugin/webpack.config.js

@@ -47,6 +47,7 @@ module.exports = (env, argv) => ({
                     const destinations = [
                         "/volumes/syncthing/Desktop/test/test/.obsidian/plugins/vault-link",
                         "/volumes/syncthing/Desktop/test/test2/.obsidian/plugins/vault-link"
+                        // "/home/andras/obsidian-test/.obsidian/plugins/vault-link"
                     ];
                     destinations.forEach((destination) => {
                         fs.copy(source, destination)

frontend/package.json

@@ -6,28 +6,40 @@
         "obsidian-plugin",
         "test-client",
         "deterministic-tests",
-        "local-client-cli"
+        "local-client-cli",
+        "history-ui"
     ],
     "prettier": {
         "trailingComma": "none",
         "tabWidth": 4,
         "useTabs": false,
-        "endOfLine": "lf"
+        "endOfLine": "lf",
+        "overrides": [
+            {
+                "files": [
+                    "*.yml",
+                    "*.yaml",
+                    "*.md"
+                ],
+                "options": {
+                    "tabWidth": 2
+                }
+            }
+        ]
     },
     "scripts": {
         "build": "npm run build --workspaces",
         "dev": "concurrently --kill-others \"npm run dev -w sync-client\" \"npm run dev -w obsidian-plugin\"",
         "test": "npm run test --workspaces",
         "lint": "eslint --fix sync-client obsidian-plugin test-client deterministic-tests local-client-cli && prettier --write \"**/*.ts\"",
-        "update": "ncu -u -ws"
+        "update": "ncu -u"
     },
     "devDependencies": {
         "concurrently": "^9.2.1",
-        "eclint": "^2.8.1",
-        "eslint": "9.38.0",
-        "eslint-plugin-unused-imports": "^4.1.4",
-        "npm-check-updates": "^19.1.1",
-        "prettier": "^3.6.2",
-        "typescript-eslint": "8.41.0"
+        "eslint": "9.39.2",
+        "eslint-plugin-unused-imports": "^4.3.0",
+        "npm-check-updates": "^19.2.0",
+        "prettier": "^3.7.4",
+        "typescript-eslint": "8.49.0"
     }
 }

frontend/sync-client/package.json

@@ -14,19 +14,17 @@
     },
     "devDependencies": {
         "byte-base64": "^1.1.0",
-        "minimatch": "^10.0.1",
-        "p-queue": "^8.1.0",
+        "minimatch": "^10.1.1",
+        "p-queue": "^9.0.1",
         "reconcile-text": "^0.8.0",
-        "uuid": "^13.0.0",
-        "@types/node": "^24.8.1",
-        "ts-loader": "^9.5.2",
+        "@types/node": "^25.0.2",
+        "ts-loader": "^9.5.4",
         "tslib": "2.8.1",
-        "tsx": "^4.20.6",
-        "typescript": "5.8.3",
-        "webpack": "^5.99.9",
+        "tsx": "^4.21.0",
+        "typescript": "5.9.3",
+        "webpack": "^5.103.0",
         "webpack-cli": "^6.0.1",
         "webpack-merge": "^6.0.1",
-        "@sentry/browser": "^10.8.0",
-        "ws": "^8.18.3"
+        "@sentry/browser": "^10.30.0"
     }
 }

frontend/sync-client/src/consts.ts

@@ -1,6 +1,6 @@
 export const TIMEOUT_FOR_MERGING_HISTORY_ENTRIES_IN_SECONDS = 60;
-export const DIFF_CACHE_SIZE_MB = 2;
 export const MAX_LOG_MESSAGE_COUNT = 100000;
 export const MAX_HISTORY_ENTRY_COUNT = 5000;
-export const SUPPORTED_API_VERSION = 2;
-export const WEBSOCKET_DISCONNECT_TIMEOUT_IN_S = 10;
+export const SUPPORTED_API_VERSION = 3;
+export const WEBSOCKET_DISCONNECT_TIMEOUT_IN_SECONDS = 10;
+export const WEBSOCKET_CONNECTION_TIMEOUT_IN_SECONDS = 10;

frontend/sync-client/src/errors/file-already-exists-error.ts

@@ -0,0 +1,9 @@
+export class FileAlreadyExistsError extends Error {
+    public constructor(
+        message: string,
+        public readonly filePath: string
+    ) {
+        super(message);
+        this.name = "FileAlreadyExistsError";
+    }
+}

frontend/sync-client/src/errors/http-client-error.ts

@@ -0,0 +1,9 @@
+export class HttpClientError extends Error {
+    public constructor(
+        public readonly statusCode: number,
+        message: string
+    ) {
+        super(message);
+        this.name = "HttpClientError";
+    }
+}