Fix PDF preview worker initialization (#704)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.dockerignore

@@ -0,0 +1,11 @@
+node_modules
+**/node_modules
+dist
+**/dist
+target
+**/target
+.claude
+vendored
+**/vendored
+*.log
+.git

.github/dependabot.yml

@@ -0,0 +1,55 @@
+version: 2
+
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    ignore:
+      # Build tooling majors are opted into, not queued. These never reach a
+      # user, so the cost of being a release behind is low and the cost of a
+      # surprise is a broken build. Note this also suppresses security PRs for
+      # these, so Dependabot alerts are the backstop.
+      - dependency-name: typescript
+        update-types: ["version-update:semver-major"]
+      - dependency-name: vitest
+        update-types: ["version-update:semver-major"]
+      - dependency-name: "@types/*"
+        update-types: ["version-update:semver-major"]
+      - dependency-name: "vite-plugin-*"
+        update-types: ["version-update:semver-major"]
+      # 0.8 dropped stateExtensions and updateSchema from the package root and
+      # exposes no subpath to reach them, which GrpcEditor needs. Unpin once
+      # that editor moves to the jsonSchema helper.
+      - dependency-name: codemirror-json-schema
+    groups:
+      npm-production:
+        dependency-type: production
+        update-types:
+          - minor
+          - patch
+      npm-development:
+        dependency-type: development
+        update-types:
+          - minor
+          - patch
+
+  - package-ecosystem: cargo
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    ignore:
+      # Held at 11.10.0 to pin what rolldown_resolver ("^11") resolves to; it
+      # does not build against 11.11. See crates-cli/yaak-cli/Cargo.toml.
+      - dependency-name: oxc_resolver
+    groups:
+      cargo:
+        patterns:
+          - "*"
+        update-types:
+          - minor
+          - patch

.github/scripts/preserve-release-artifacts.mjs

@@ -0,0 +1,79 @@
+// Retain only distributable bundle files, never the target tree or signing material.
+import { createHash } from "node:crypto";
+import {
+  copyFileSync,
+  createReadStream,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  writeFileSync,
+} from "node:fs";
+import { join, relative } from "node:path";
+
+const env = process.env;
+const bundle = join("target", env.RELEASE_TARGET || "", "release", "bundle");
+const destination = join(env.RUNNER_TEMP, "yaak-release-artifacts");
+const extensions =
+  /\.(dmg|deb|rpm|AppImage|exe|msi|app\.tar\.gz|AppImage\.tar\.gz|nsis\.zip|msi\.zip)(\.sig)?$/;
+const files = [];
+
+function snapshot(directory) {
+  if (!existsSync(directory)) return;
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const source = join(directory, entry.name);
+    // Only descend through the bundler's immediate output folders. This excludes
+    // .app trees and the extracted CEF deb contents (which contain executables).
+    if (entry.isDirectory() && directory === bundle) {
+      snapshot(source);
+    } else if (
+      entry.isFile() &&
+      (extensions.test(entry.name) || /^yaak-cef_.*_linux_.*\.tar\.gz$/.test(entry.name))
+    ) {
+      // Match tauri-action's default macOS updater asset naming exactly.
+      const arch = env.RELEASE_ARCH === "arm64" ? "aarch64" : "x64";
+      const assetName = entry.name.replace(/\.app\.tar\.gz(\.sig)?$/, `_${arch}.app.tar.gz$1`);
+      mkdirSync(destination, { recursive: true });
+      const retained = join(destination, assetName);
+      // The second snapshot must not overwrite the original user installer/signature.
+      if (!existsSync(retained)) copyFileSync(source, retained);
+      files.push({ source: relative(".", source), assetName });
+    }
+  }
+}
+
+snapshot(bundle);
+if (existsSync(destination)) {
+  const assets = readdirSync(destination)
+    .filter((name) => name !== "provenance.json")
+    .sort();
+  const checksums = [];
+  for (const assetName of assets) {
+    const hash = createHash("sha256");
+    for await (const chunk of createReadStream(join(destination, assetName))) hash.update(chunk);
+    checksums.push({ assetName, sha256: hash.digest("hex") });
+  }
+  writeFileSync(
+    join(destination, "provenance.json"),
+    JSON.stringify(
+      {
+        repository: env.GITHUB_REPOSITORY,
+        tag: env.GITHUB_REF_NAME,
+        sha: env.GITHUB_SHA,
+        runId: env.GITHUB_RUN_ID,
+        runAttempt: env.GITHUB_RUN_ATTEMPT,
+        workflowRef: env.GITHUB_WORKFLOW_REF,
+        workflowSha: env.GITHUB_WORKFLOW_SHA,
+        tauriAction: "tauri-apps/tauri-action@v0",
+        platform: env.RELEASE_PLATFORM,
+        runtime: env.RELEASE_RUNTIME,
+        arch: env.RELEASE_ARCH,
+        target: env.RELEASE_TARGET,
+        args: env.RELEASE_ARGS,
+        assets: checksums,
+      },
+      null,
+      2,
+    ) + "\n",
+  );
+}
+console.log(`Found ${files.length} distributable bundle files in ${bundle}`);

.github/workflows/ci.yml

@@ -31,3 +31,7 @@ jobs:
         run: vp test
       - name: Run Rust Tests
         run: cargo test --all --features yaak-app-client/wry
+      - name: OpenAPI import round-trip
+        run: |
+          cargo build -p yaak-cli
+          node plugins/importer-openapi/tests/roundtrip.mjs

.github/workflows/flathub.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
+          node-version: "24"
 
       - name: Install source generators
         run: |

.github/workflows/release-app.yml

@@ -70,7 +70,7 @@ jobs:
             runtime: "wry"
             targets: "aarch64-pc-windows-msvc"
     runs-on: ${{ matrix.platform }}
-    timeout-minutes: 40
+    timeout-minutes: 360
     steps:
       - name: Checkout yaakapp/app
         uses: actions/checkout@v4
@@ -103,6 +103,18 @@ jobs:
         run: |
           sudo apt-get update
           sudo apt-get install -y cmake ninja-build libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libnss3 patchelf xdg-utils
+          # crates/yaak-wasm compiles SQLite to wasm via sqlite-wasm-rs, whose C shim
+          # uses C23 [[noreturn]] and expects a freestanding wasm32 target. Ubuntu
+          # 22.04 ships only clang <=15: 14 rejects the attribute, and 15 falls
+          # through to host glibc headers ("bits/libc-header-start.h" not found).
+          # clang-18 handles it (it is what ubuntu-24.04 uses). Install it from
+          # apt.llvm.org since 22.04's repos stop at 15. Only the wasm build uses
+          # this compiler, so the shipped binary keeps 22.04's glibc floor.
+          wget -qO /tmp/llvm.sh https://apt.llvm.org/llvm.sh
+          chmod +x /tmp/llvm.sh
+          sudo /tmp/llvm.sh 18
+          echo "CC_wasm32_unknown_unknown=/usr/bin/clang-18" >> "$GITHUB_ENV"
+          echo "AR_wasm32_unknown_unknown=/usr/bin/llvm-ar-18" >> "$GITHUB_ENV"
 
       - name: Install Protoc for plugin-runtime
         uses: arduino/setup-protoc@v3
@@ -160,7 +172,8 @@ jobs:
           codesign --force --options runtime --entitlements crates-tauri/yaak-app-client/macos/entitlements.yaakprotoc.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app-client/vendored/protoc/yaakprotoc || true
           codesign --force --options runtime --entitlements crates-tauri/yaak-app-client/macos/entitlements.yaaknode.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app-client/vendored/node/yaaknode || true
 
-      - uses: tauri-apps/tauri-action@v0
+      - name: Build and upload Tauri bundles
+        uses: tauri-apps/tauri-action@v0
         env:
           YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
 
@@ -182,6 +195,8 @@ jobs:
           AZURE_CLIENT_SECRET: ${{ matrix.os == 'windows' && secrets.AZURE_CLIENT_SECRET }}
           AZURE_TENANT_ID: ${{ matrix.os == 'windows' && secrets.AZURE_TENANT_ID }}
         with:
+          # Also retries builds; upload retries alone cannot clean up starter assets.
+          retryAttempts: 3
           tauriScript: "node ../../node_modules/@tauri-apps/cli/tauri.js"
           tagName: "v__VERSION__"
           releaseName: "Release __VERSION__"
@@ -191,6 +206,17 @@ jobs:
           projectPath: ./crates-tauri/yaak-app-client
           args: "${{ matrix.args }}"
 
+      # Snapshot before the per-machine build overwrites the regular NSIS bundle/signature.
+      - name: Snapshot Tauri bundles
+        if: ${{ !cancelled() }}
+        run: node .github/scripts/preserve-release-artifacts.mjs
+        env:
+          RELEASE_TARGET: ${{ matrix.targets }}
+          RELEASE_PLATFORM: ${{ matrix.platform }}
+          RELEASE_RUNTIME: ${{ matrix.runtime }}
+          RELEASE_ARCH: ${{ matrix.yaak_arch }}
+          RELEASE_ARGS: ${{ matrix.args }}
+
       - name: Build and upload CEF tarball from deb (Linux only)
         if: matrix.os == 'ubuntu' && matrix.runtime == 'cef'
         env:
@@ -205,7 +231,13 @@ jobs:
           mkdir -p "$extract_dir"
           dpkg-deb -x "$deb" "$extract_dir"
           tar -C "$extract_dir" -czf "$tarball" .
-          gh release upload "${{ github.ref_name }}" "$tarball" --clobber
+          for attempt in 1 2 3 4; do
+            if gh release upload "$GITHUB_REF_NAME" "$tarball" --clobber; then
+              break
+            fi
+            if [ "$attempt" -eq 4 ]; then exit 1; fi
+            sleep 10
+          done
 
       # Build a per-machine NSIS installer for enterprise deployment (PDQ, SCCM, Intune)
       - name: Build and upload machine-wide installer (Windows only)
@@ -223,6 +255,7 @@ jobs:
           Get-ChildItem -Recurse -Path target -File -Filter "*.exe.sig" | Remove-Item -Force
           Push-Location crates-tauri/yaak-app-client
           npx tauri bundle ${{ matrix.args }} --bundles nsis --config '{"bundle":{"createUpdaterArtifacts":true,"windows":{"nsis":{"installMode":"perMachine"}}}}'
+          if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
           Pop-Location
           $setup = Get-ChildItem -Recurse -Path target -Filter "*setup*.exe" | Select-Object -First 1
           $setupSig = "$($setup.FullName).sig"
@@ -230,5 +263,30 @@ jobs:
           $destSig = "$dest.sig"
           Copy-Item $setup.FullName $dest
           Copy-Item $setupSig $destSig
-          gh release upload "${{ github.ref_name }}" "$dest" --clobber
-          gh release upload "${{ github.ref_name }}" "$destSig" --clobber
+          foreach ($asset in @($dest, $destSig)) {
+            for ($attempt = 1; $attempt -le 4; $attempt++) {
+              gh release upload "$env:GITHUB_REF_NAME" "$asset" --clobber
+              if ($LASTEXITCODE -eq 0) { break }
+              if ($attempt -eq 4) { exit $LASTEXITCODE }
+              Start-Sleep -Seconds 10
+            }
+          }
+
+      - name: Snapshot additional release bundles
+        if: ${{ !cancelled() }}
+        run: node .github/scripts/preserve-release-artifacts.mjs
+        env:
+          RELEASE_TARGET: ${{ matrix.targets }}
+          RELEASE_PLATFORM: ${{ matrix.platform }}
+          RELEASE_RUNTIME: ${{ matrix.runtime }}
+          RELEASE_ARCH: ${{ matrix.yaak_arch }}
+          RELEASE_ARGS: ${{ matrix.args }}
+
+      - name: Retain release bundles for recovery
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: release-${{ github.ref_name }}-${{ matrix.platform }}-${{ matrix.runtime }}-${{ matrix.yaak_arch }}-${{ github.run_id }}-attempt-${{ github.run_attempt }}
+          path: ${{ runner.temp }}/yaak-release-artifacts/
+          retention-days: 7
+          if-no-files-found: warn

.github/workflows/release-web-image.yml

@@ -0,0 +1,123 @@
+name: Release web image
+
+# Builds ghcr.io/mountain-loop/yaak-web: the browser client and the server that serves it.
+# One image per architecture on its own native runner (emulating a Rust release build is hours),
+# joined into one multi-arch tag at the end.
+
+on:
+  push:
+    tags: [v*]
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version to publish, without the v (e.g. 2026.2.0). Empty publishes main and sha tags only.
+        required: false
+        type: string
+
+permissions:
+  contents: read
+  packages: write
+
+env:
+  IMAGE: ghcr.io/mountain-loop/yaak-web
+
+jobs:
+  build:
+    if: github.repository == 'mountain-loop/yaak'
+    name: Build ${{ matrix.platform }}
+    runs-on: ${{ matrix.runner }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-22.04
+            arch: amd64
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+            arch: arm64
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: Dockerfile.web
+          platforms: ${{ matrix.platform }}
+          outputs: type=image,name=${{ env.IMAGE }},push-by-digest=true,name-canonical=true,push=true
+
+      - name: Export digest
+        run: |
+          mkdir -p "${{ runner.temp }}/digests"
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digest-${{ matrix.arch }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  publish:
+    name: Publish manifest
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digest-*
+          merge-multiple: true
+
+      - name: Set up Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # `latest` follows a release tag, and a manual run that names a version — the way to
+      # publish before the first release. A prerelease (v2026.2.1-beta.1) never takes it.
+      - name: Tags
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE }}
+          flavor: latest=false
+          tags: |
+            type=semver,pattern={{version}}
+            type=raw,value=${{ inputs.version }},enable=${{ inputs.version != '' }}
+            type=raw,value=latest,enable=${{ inputs.version != '' || (github.event_name == 'push' && !contains(github.ref_name, '-')) }}
+            type=ref,event=branch
+            type=sha,format=short
+
+      - name: Create and push the manifest
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create \
+            $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect
+        run: docker buildx imagetools inspect ${{ env.IMAGE }}:${{ steps.meta.outputs.version }}

.gitignore

@@ -58,3 +58,4 @@ flatpak/node-sources.json
 
 # Claude Code local settings
 .claude/settings.local.json
+.claude/worktrees/

.oxfmtignore

@@ -1,3 +0,0 @@
-**/bindings/**
-**/routeTree.gen.ts
-crates/yaak-templates/pkg/**

Cargo.toml

@@ -2,9 +2,11 @@
 resolver = "2"
 members = [
   "crates/yaak",
+  "crates/yaak-commands",
   # Common/foundation crates
   "crates/common/yaak-database",
   "crates/common/yaak-rpc",
+  "crates/common/yaak-rpc-schema",
   # Shared crates (no Tauri dependency)
   "crates/yaak-core",
   "crates/yaak-common",
@@ -12,6 +14,7 @@ members = [
   "crates/yaak-git",
   "crates/yaak-grpc",
   "crates/yaak-http",
+  "crates/yaak-lifecycle",
   "crates/yaak-models",
   "crates/yaak-plugins",
   "crates/yaak-sse",
@@ -19,10 +22,14 @@ members = [
   "crates/yaak-templates",
   "crates/yaak-tls",
   "crates/yaak-ws",
+  "crates/yaak-wasm",
   "crates/yaak-api",
   "crates/yaak-proxy",
   # Proxy-specific crates
   "crates-proxy/yaak-proxy-lib",
+  # Server crates (the browser tier's hosted send executor)
+  "crates-server/yaak-web",
+  "crates-server/yaak-playground",
   # CLI crates
   "crates-cli/yaak-cli",
   # Tauri-specific crates
@@ -41,7 +48,14 @@ chrono = "0.4.42"
 hex = "0.4.3"
 keyring = "3.6.3"
 log = "0.4.29"
-reqwest = "0.12.20"
+reqwest = { version = "0.13.5", default-features = false, features = [
+  # reqwest 0.13 switched `default-tls` from native-tls to rustls; keep the
+  # rest of the old default set and stay on native-tls.
+  "charset",
+  "http2",
+  "system-proxy",
+  "native-tls",
+] }
 rustls = { version = "0.23.34", default-features = false }
 rustls-platform-verifier = "0.6.2"
 schemars = { version = "0.8.22", features = ["chrono"] }
@@ -63,15 +77,18 @@ ts-rs = "11.1.0"
 # Internal crates - common/foundation
 yaak-database = { path = "crates/common/yaak-database" }
 yaak-rpc = { path = "crates/common/yaak-rpc" }
+yaak-rpc-schema = { path = "crates/common/yaak-rpc-schema" }
 
 # Internal crates - shared
 yaak-core = { path = "crates/yaak-core" }
 yaak = { path = "crates/yaak" }
+yaak-commands = { path = "crates/yaak-commands" }
 yaak-common = { path = "crates/yaak-common" }
 yaak-crypto = { path = "crates/yaak-crypto" }
 yaak-git = { path = "crates/yaak-git" }
 yaak-grpc = { path = "crates/yaak-grpc" }
 yaak-http = { path = "crates/yaak-http" }
+yaak-lifecycle = { path = "crates/yaak-lifecycle" }
 yaak-models = { path = "crates/yaak-models" }
 yaak-plugins = { path = "crates/yaak-plugins" }
 yaak-sse = { path = "crates/yaak-sse" }

DEVELOPMENT.md

@@ -44,6 +44,25 @@ After bootstrapping, start the app in development mode:
 npm start
 ```
 
+## Run the App in a Browser
+
+The client can also run as a plain web page, with no Tauri and no local process
+behind it. Set `YAAK_TARGET=web` and start the frontend on its own:
+
+```shell
+YAAK_TARGET=web npm run dev --workspace @yaakapp/yaak-client
+```
+
+That flag picks the browser host in `packages/platform/src/web/`, which answers
+commands from an IndexedDB database the page owns instead of from the Rust
+engine. Data persists across reloads and is shared between tabs on the same
+origin. Sending HTTP is not available yet — the Send button reports that and
+everything else about the request is still saved. `packages/platform/src/web/README.md`
+lists which commands the browser host implements and which it declines.
+
+Desktop builds are unaffected: without the flag the platform package installs
+the Tauri host exactly as before.
+
 ## SQLite Migrations
 
 New migrations can be created from the `src-tauri/` directory:

Dockerfile.playground

@@ -0,0 +1,15 @@
+# syntax=docker/dockerfile:1
+# The playground API behind yaak.run. See crates-server/yaak-playground/README.md.
+
+FROM rust:1-bookworm AS build
+WORKDIR /app
+COPY . .
+RUN cargo build --release -p yaak-playground
+
+FROM debian:bookworm-slim
+COPY --from=build /app/target/release/yaak-playground /usr/local/bin/yaak-playground
+ENV HOST=0.0.0.0
+ENV PORT=8080
+EXPOSE 8080
+USER nobody
+CMD ["yaak-playground"]

Dockerfile.web

@@ -0,0 +1,49 @@
+# syntax=docker/dockerfile:1
+# Yaak in a browser, whole: the web client and the server that executes its sends, in one
+# image serving both from one origin.
+#
+#   docker run -p 8080:8080 ghcr.io/mountain-loop/yaak-web
+#
+# See crates-server/yaak-web/README.md for the knobs.
+
+FROM node:22-slim AS web
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git python3 make g++ ca-certificates && rm -rf /var/lib/apt/lists/*
+COPY . .
+# `npm ci` runs a prepare hook (`vp config`) that shells out to git, and there is no .git in
+# the build context — it is ignored, and in a worktree it is a pointer file anyway.
+RUN git init -q && git add -A \
+    && git -c user.email=build@yaak.app -c user.name=build commit -qm build
+# Empty means the tab posts sends to its own origin, which is what this image serves. Set it
+# only to build a bundle for a deployment whose server lives somewhere else.
+ARG VITE_YAAK_WEB_URL=""
+ENV VITE_YAAK_WEB_URL=$VITE_YAAK_WEB_URL
+ENV YAAK_TARGET=web
+# crates/yaak-wasm's wasm package is committed; rebuilding it needs a clang with a WebAssembly
+# backend, which this image has no reason to carry.
+ENV SKIP_WASM_BUILD=1
+RUN npm ci
+RUN node_modules/.bin/vp -C apps/yaak-client build
+
+FROM rust:1-bookworm AS server
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    pkg-config libssl-dev protobuf-compiler && rm -rf /var/lib/apt/lists/*
+COPY . .
+RUN cargo build --release -p yaak-web
+
+FROM debian:bookworm-slim
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates libssl3 && rm -rf /var/lib/apt/lists/*
+COPY --from=server /app/target/release/yaak-web /usr/local/bin/yaak-web
+COPY --from=web /app/dist/apps/yaak-client /srv
+# 0.0.0.0 so the port is reachable from outside the container. PORT is the variable a
+# platform-as-a-service assigns, so a deploy that sets it needs nothing else changed.
+ENV HOST=0.0.0.0
+ENV PORT=8080
+EXPOSE 8080
+USER nobody
+# Overriding the command (dropping --serve) leaves the stateless send executor:
+#   docker run ghcr.io/mountain-loop/yaak-web yaak-web
+CMD ["yaak-web", "--serve", "/srv"]

README.md

@@ -17,7 +17,7 @@
 <br>
 
 <p align="center">
-  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/bytebase"><img src="https:&#x2F;&#x2F;github.com&#x2F;bytebase.png" width="80px" alt="User avatar: bytebase" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
+  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/bytebase"><img src="https:&#x2F;&#x2F;github.com&#x2F;bytebase.png" width="80px" alt="User avatar: bytebase" /></a>&nbsp;&nbsp;<a href="https://github.com/rauchg"><img src="https:&#x2F;&#x2F;github.com&#x2F;rauchg.png" width="80px" alt="User avatar: rauchg" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
 </p>
 <p align="center">
   <!-- sponsors-base --><a href="https://github.com/seanwash"><img src="https:&#x2F;&#x2F;github.com&#x2F;seanwash.png" width="50px" alt="User avatar: seanwash" /></a>&nbsp;&nbsp;<a href="https://github.com/jerath"><img src="https:&#x2F;&#x2F;github.com&#x2F;jerath.png" width="50px" alt="User avatar: jerath" /></a>&nbsp;&nbsp;<a href="https://github.com/itsa-sh"><img src="https:&#x2F;&#x2F;github.com&#x2F;itsa-sh.png" width="50px" alt="User avatar: itsa-sh" /></a>&nbsp;&nbsp;<a href="https://github.com/dmmulroy"><img src="https:&#x2F;&#x2F;github.com&#x2F;dmmulroy.png" width="50px" alt="User avatar: dmmulroy" /></a>&nbsp;&nbsp;<a href="https://github.com/timcole"><img src="https:&#x2F;&#x2F;github.com&#x2F;timcole.png" width="50px" alt="User avatar: timcole" /></a>&nbsp;&nbsp;<a href="https://github.com/VLZH"><img src="https:&#x2F;&#x2F;github.com&#x2F;VLZH.png" width="50px" alt="User avatar: VLZH" /></a>&nbsp;&nbsp;<a href="https://github.com/terasaka2k"><img src="https:&#x2F;&#x2F;github.com&#x2F;terasaka2k.png" width="50px" alt="User avatar: terasaka2k" /></a>&nbsp;&nbsp;<a href="https://github.com/andriyor"><img src="https:&#x2F;&#x2F;github.com&#x2F;andriyor.png" width="50px" alt="User avatar: andriyor" /></a>&nbsp;&nbsp;<a href="https://github.com/majudhu"><img src="https:&#x2F;&#x2F;github.com&#x2F;majudhu.png" width="50px" alt="User avatar: majudhu" /></a>&nbsp;&nbsp;<a href="https://github.com/axelrindle"><img src="https:&#x2F;&#x2F;github.com&#x2F;axelrindle.png" width="50px" alt="User avatar: axelrindle" /></a>&nbsp;&nbsp;<a href="https://github.com/jirizverina"><img src="https:&#x2F;&#x2F;github.com&#x2F;jirizverina.png" width="50px" alt="User avatar: jirizverina" /></a>&nbsp;&nbsp;<a href="https://github.com/chip-well"><img src="https:&#x2F;&#x2F;github.com&#x2F;chip-well.png" width="50px" alt="User avatar: chip-well" /></a>&nbsp;&nbsp;<a href="https://github.com/GRAYAH"><img src="https:&#x2F;&#x2F;github.com&#x2F;GRAYAH.png" width="50px" alt="User avatar: GRAYAH" /></a>&nbsp;&nbsp;<a href="https://github.com/flashblaze"><img src="https:&#x2F;&#x2F;github.com&#x2F;flashblaze.png" width="50px" alt="User avatar: flashblaze" /></a>&nbsp;&nbsp;<a href="https://github.com/Frostist"><img src="https:&#x2F;&#x2F;github.com&#x2F;Frostist.png" width="50px" alt="User avatar: Frostist" /></a>&nbsp;&nbsp;<a href="https://github.com/PurplProto"><img src="https:&#x2F;&#x2F;github.com&#x2F;PurplProto.png" width="50px" alt="User avatar: PurplProto" /></a>&nbsp;&nbsp;<!-- sponsors-base -->
@@ -25,6 +25,10 @@
 
 ![Yaak API Client](https://yaak.app/static/screenshot.png)
 
+## Install
+
+Download Yaak for macOS, Windows, or Linux from [yaak.app/download](https://yaak.app/download). Package managers and other install methods are in the [installation docs](https://yaak.app/docs/getting-started/installation).
+
 ## Features
 
 Yaak is an offline-first API client designed to stay out of your way while giving you everything you need when you need it.
@@ -68,3 +72,9 @@ Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight
 - [Yaak vs Postman](https://yaak.app/alternatives/postman)
 - [Yaak vs Bruno](https://yaak.app/alternatives/bruno)
 - [Yaak vs Insomnia](https://yaak.app/alternatives/insomnia)
+
+## License
+
+The source is [MIT licensed](LICENSE) and can be built and run for free, for both personal and commercial use.
+
+The prebuilt binaries follow Yaak's [pricing terms](https://yaak.app/pricing): free for personal use, license required for commercial use.

apps/yaak-client/commands/importCurl.ts

@@ -0,0 +1,52 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { patchModelById } from "@yaakapp-internal/models";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { wasUpdatedExternally } from "../hooks/useRequestUpdateKey";
+import { createRequestAndNavigate } from "../lib/createRequestAndNavigate";
+import { jotaiStore } from "../lib/jotai";
+import { rpc } from "../lib/rpc";
+import { showToast } from "../lib/toast";
+
+export function looksLikeCurl(text: string) {
+  return text.trim().startsWith("curl ");
+}
+
+export const importCurl = createFastMutation<
+  void,
+  string,
+  { overwriteRequestId?: string; command: string }
+>({
+  mutationKey: ["import_curl"],
+  mutationFn: async ({ overwriteRequestId, command }) => {
+    const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+    const importedRequest: HttpRequest = await rpc("cmd_curl_to_request", {
+      command,
+      workspaceId,
+    });
+
+    let verb: string;
+    if (overwriteRequestId == null) {
+      verb = "Created";
+      await createRequestAndNavigate(importedRequest);
+    } else {
+      verb = "Updated";
+      await patchModelById(importedRequest.model, overwriteRequestId, (r: HttpRequest) => ({
+        ...importedRequest,
+        id: r.id,
+        createdAt: r.createdAt,
+        workspaceId: r.workspaceId,
+        folderId: r.folderId,
+        name: r.name,
+        sortPriority: r.sortPriority,
+      }));
+
+      setTimeout(() => wasUpdatedExternally(overwriteRequestId), 100);
+    }
+
+    showToast({
+      color: "success",
+      message: `${verb} request from Curl`,
+    });
+  },
+});

apps/yaak-client/commands/openSettings.tsx

@@ -1,26 +1,44 @@
-import type { SettingsTab } from "../components/Settings/Settings";
+import { platform } from "@yaakapp-internal/platform";
+import type { SettingsTab, SettingsTabWithSubtab } from "../components/Settings/Settings";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
+import { showDialog } from "../lib/dialog";
 import { jotaiStore } from "../lib/jotai";
 import { router } from "../lib/router";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 
-// Allow tab with optional subtab (e.g., "plugins:installed")
-type SettingsTabWithSubtab = SettingsTab | `${SettingsTab}:${string}` | null;
-
-export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab>({
+export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab | null>({
   mutationKey: ["open_settings"],
   mutationFn: async (tab) => {
     const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
     if (workspaceId == null) return;
 
+    // Settings is its own window where the host has windows to give. Where it
+    // doesn't — a browser tab — it's a dialog like any other, so opening it
+    // doesn't take you away from the request you were working on.
+    if (!platform.capabilities.multiWindow) {
+      // Imported here so Settings stays out of the startup bundle, the way the
+      // route that renders it on desktop already keeps it
+      const { default: Settings } = await import("../components/Settings/Settings");
+      showDialog({
+        id: "settings",
+        size: "md",
+        className: "h-[calc(100vh-5rem)] max-h-150! overflow-hidden",
+        noPadding: true,
+        noScroll: true,
+        // Keyed so opening a specific tab while the dialog is already up moves to it
+        render: ({ hide }) => <Settings key={tab ?? "general"} tab={tab} hide={hide} />,
+      });
+      return;
+    }
+
     const location = router.buildLocation({
       to: "/workspaces/$workspaceId/settings",
       params: { workspaceId },
       search: { tab: (tab ?? undefined) as SettingsTab | undefined },
     });
 
-    await invokeCmd("cmd_new_child_window", {
+    await rpc("cmd_new_child_window", {
       url: location.href,
       label: "settings",
       title: "Yaak Settings",

apps/yaak-client/commands/switchWorkspace.tsx

@@ -1,9 +1,10 @@
+import { platform } from "@yaakapp-internal/platform";
 import { createFastMutation } from "../hooks/useFastMutation";
 import { getRecentCookieJars } from "../hooks/useRecentCookieJars";
 import { getRecentEnvironments } from "../hooks/useRecentEnvironments";
 import { getRecentRequests } from "../hooks/useRecentRequests";
 import { router } from "../lib/router";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 
 export const switchWorkspace = createFastMutation<
   void,
@@ -24,13 +25,15 @@ export const switchWorkspace = createFastMutation<
       request_id: requestId,
     };
 
-    if (inNewWindow) {
+    // A host without windows opens the workspace here instead. Refusing would
+    // strand the user on the workspace they were trying to leave.
+    if (inNewWindow && platform.capabilities.multiWindow) {
       const location = router.buildLocation({
         to: "/workspaces/$workspaceId",
         params: { workspaceId },
         search,
       });
-      await invokeCmd<void>("cmd_new_main_window", { url: location.href });
+      await rpc<void>("cmd_new_main_window", { url: location.href });
       return;
     }
 

apps/yaak-client/components/CloneGitRepositoryDialog.tsx

@@ -1,4 +1,3 @@
-import { open } from "@tauri-apps/plugin-dialog";
 import { gitClone } from "@yaakapp-internal/git";
 import { Banner, VStack } from "@yaakapp-internal/ui";
 import { useState } from "react";
@@ -11,6 +10,7 @@ import { Checkbox } from "./core/Checkbox";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
 import { promptCredentials } from "./git/credentials";
+import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
   hide: () => void;
@@ -38,7 +38,7 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
     hasSubdirectory && subdirectory ? `${directory}${sep}${subdirectory}` : directory;
 
   const handleSelectDirectory = async () => {
-    const dir = await open({
+    const dir = await platform.dialog.open({
       title: "Select Directory",
       directory: true,
       multiple: false,

apps/yaak-client/components/CommercialUseBanner.tsx

@@ -1,11 +1,10 @@
-import { invoke } from "@tauri-apps/api/core";
-import { openUrl } from "@tauri-apps/plugin-opener";
-import type { LicenseCheckStatus } from "@yaakapp-internal/license";
+import { checkLicense } from "@yaakapp-internal/license";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useKeyValue } from "../hooks/useKeyValue";
 import { appInfo } from "../lib/appInfo";
 import { pricingUrl } from "../lib/pricingUrl";
 import { DismissibleBanner } from "./core/DismissibleBanner";
+import { platform } from "@yaakapp-internal/platform";
 
 const COMMERCIAL_USE_SNOOZE_MS = 7 * 24 * 60 * 60 * 1000;
 const COMMERCIAL_USE_BANNER_MESSAGE =
@@ -95,7 +94,7 @@ async function shouldShowCommercialUsePrompt(): Promise<boolean> {
   }
 
   try {
-    const license = await invoke<LicenseCheckStatus>("plugin:yaak-license|check");
+    const license = await checkLicense();
     return license.status === "personal_use";
   } catch (err) {
     console.log("Failed to check license before commercial-use prompt", err);
@@ -104,7 +103,7 @@ async function shouldShowCommercialUsePrompt(): Promise<boolean> {
 }
 
 async function openCommercialUsePricing(source: string): Promise<void> {
-  await openUrl(pricingUrl(`app.commercial-use.${source}`)).catch(console.error);
+  await platform.openUrl(pricingUrl(`app.commercial-use.${source}`)).catch(console.error);
 }
 
 function isSnoozed(value: string | null, ms: number): boolean {

apps/yaak-client/components/ContextMenus.tsx

@@ -0,0 +1,26 @@
+import { useAtomValue } from "jotai";
+import { contextMenusAtom, hideContextMenu } from "../lib/contextMenu";
+import { ContextMenu } from "./core/Dropdown";
+import { ErrorBoundary } from "./ErrorBoundary";
+
+/** Renders menus opened by {@link showContextMenu}, the way {@link Dialogs} renders dialogs. */
+export function ContextMenus() {
+  const menus = useAtomValue(contextMenusAtom);
+  return (
+    <>
+      {menus.map(({ id, items, triggerPosition, triggerRect, triggerEl }) => (
+        <ErrorBoundary key={id} name={`ContextMenu ${id}`}>
+          <ContextMenu
+            items={items}
+            triggerPosition={triggerPosition}
+            triggerRect={triggerRect}
+            // The trigger isn't a React component here, so it arrives as an element and gets
+            // wrapped to look like the ref the menu expects
+            triggerRef={{ current: triggerEl ?? null }}
+            onClose={() => hideContextMenu(id)}
+          />
+        </ErrorBoundary>
+      ))}
+    </>
+  );
+}

apps/yaak-client/components/CreateWorkspaceDialog.tsx

@@ -5,7 +5,7 @@ import { VStack } from "@yaakapp-internal/ui";
 import { useState } from "react";
 import { router } from "../lib/router";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { showErrorToast } from "../lib/toast";
 import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
@@ -39,7 +39,7 @@ export function CreateWorkspaceDialog({ hide }: Props) {
 
         // Do getWorkspaceMeta instead of naively creating one because it might have
         // been created already when the store refreshes the workspace meta after
-        const workspaceMeta = await invokeCmd<WorkspaceMeta>("cmd_get_workspace_meta", {
+        const workspaceMeta = await rpc<WorkspaceMeta>("cmd_get_workspace_meta", {
           workspaceId,
         });
         await updateModel({

apps/yaak-client/components/EnvironmentActionsDropdown.tsx

@@ -67,7 +67,14 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         )}
         // If no environments, the button simply opens the dialog.
         // NOTE: We don't create a new button because we want to reuse the hotkey from the menu items
-        onClick={subEnvironments.length === 0 ? () => editEnvironment(null) : undefined}
+        onClick={
+          subEnvironments.length === 0
+            ? (event) => {
+                event.preventDefault();
+                editEnvironment(null);
+              }
+            : undefined
+        }
         {...buttonProps}
       >
         <EnvironmentColorIndicator environment={activeEnvironment ?? null} />

apps/yaak-client/components/ExportDataDialog.tsx

@@ -1,4 +1,3 @@
-import { save } from "@tauri-apps/plugin-dialog";
 import type { Workspace } from "@yaakapp-internal/models";
 import { workspacesAtom } from "@yaakapp-internal/models";
 import { HStack, VStack } from "@yaakapp-internal/ui";
@@ -7,12 +6,13 @@ import { useCallback, useMemo, useState } from "react";
 import slugify from "slugify";
 import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { pluralizeCount } from "../lib/pluralize";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { CommercialUseBanner } from "./CommercialUseBanner";
 import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
 import { DetailsBanner } from "./core/DetailsBanner";
 import { Link } from "./core/Link";
+import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
   onHide: () => void;
@@ -65,21 +65,22 @@ function ExportDataDialogContent({
     const ids = Object.keys(selectedWorkspaces).filter((k) => selectedWorkspaces[k]);
     const workspace = ids.length === 1 ? workspaces.find((w) => w.id === ids[0]) : undefined;
     const slug = workspace ? slugify(workspace.name, { lower: true }) : "workspaces";
-    const exportPath = await save({
-      title: "Export Data",
-      defaultPath: `yaak.${slug}.json`,
-    });
-    if (exportPath == null) {
-      return;
-    }
-
-    await invokeCmd("cmd_export_data", {
+    const document = await rpc<string>("cmd_export_data", {
       workspaceIds: ids,
-      exportPath,
       includePrivateEnvironments: includePrivateEnvironments,
     });
+
+    const savedTo = await platform.files.save(
+      `yaak.${slug}.json`,
+      new TextEncoder().encode(document),
+      [{ name: "JSON", extensions: ["json"] }],
+    );
+    if (savedTo == null) {
+      return; // Cancelled
+    }
+
     onHide();
-    onSuccess(exportPath);
+    onSuccess(savedTo);
   }, [includePrivateEnvironments, onHide, onSuccess, selectedWorkspaces, workspaces]);
 
   const allSelected = workspaces.every((w) => selectedWorkspaces[w.id]);

apps/yaak-client/components/FeedbackToast.tsx

@@ -2,7 +2,7 @@ import { HStack, VStack } from "@yaakapp-internal/ui";
 import { useRef, useState } from "react";
 import type { FeedbackFeature } from "../lib/featureFeedbackConstants";
 import { FEEDBACK_FEATURES } from "../lib/featureFeedbackConstants";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { hideToastById, showToast } from "../lib/toast";
 import { Button } from "./core/Button";
 import { Input } from "./core/Input";
@@ -31,7 +31,7 @@ export function FeedbackToast({ feature, onDone }: Props) {
     onDone();
 
     // Fire-and-forget; failures are intentionally ignored
-    invokeCmd("cmd_send_feedback", { feature, text: trimmedText }).catch(() => {});
+    rpc("cmd_send_feedback", { feature, text: trimmedText }).catch(() => {});
     showToast({
       id: `feature-feedback-${feature}`,
       timeout: 3000,

apps/yaak-client/components/GlobalHooks.tsx

@@ -5,10 +5,13 @@ import { useHotKey, useSubscribeHotKeys } from "../hooks/useHotKey";
 import { useSubscribeHttpAuthentication } from "../hooks/useHttpAuthentication";
 import { useSyncFontSizeSetting } from "../hooks/useSyncFontSizeSetting";
 import { useSyncWorkspaceChildModels } from "../hooks/useSyncWorkspaceChildModels";
+import { usePlatformEvent } from "../hooks/usePlatformEvent";
 import { useSyncZoomSetting } from "../hooks/useSyncZoomSetting";
 import { useSubscribeTemplateFunctions } from "../hooks/useTemplateFunctions";
+import { fireAndForget } from "../lib/fireAndForget";
 import { jotaiStore } from "../lib/jotai";
 import { renameModelWithPrompt } from "../lib/renameModelWithPrompt";
+import { router } from "../lib/router";
 
 export function GlobalHooks() {
   useSyncZoomSetting();
@@ -24,6 +27,10 @@ export function GlobalHooks() {
   useActiveWorkspaceChangedToast();
   useSubscribeHotKeys();
 
+  usePlatformEvent("show_home", () => {
+    fireAndForget(router.navigate({ to: "/", search: { home: true } }));
+  });
+
   useHotKey(
     "request.rename",
     async () => {

apps/yaak-client/components/GrpcEditor.tsx

@@ -1,9 +1,8 @@
 import { linter } from "@codemirror/lint";
 import type { EditorView } from "@codemirror/view";
 import { jsoncLanguage } from "@shopify/lang-jsonc";
-import type { GrpcRequest } from "@yaakapp-internal/models";
-import { FormattedError, InlineCode, VStack } from "@yaakapp-internal/ui";
-import classNames from "classnames";
+import { type GrpcRequest, patchModel } from "@yaakapp-internal/models";
+import { Banner, FormattedError, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
 import {
   handleRefresh,
   jsonCompletion,
@@ -11,12 +10,20 @@ import {
   stateExtensions,
   updateSchema,
 } from "codemirror-json-schema";
+import type { JSONSchema7 } from "json-schema";
+import type { ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ReflectResponseService } from "../hooks/useGrpc";
+import { wasUpdatedExternally } from "../hooks/useRequestUpdateKey";
 import { showAlert } from "../lib/alert";
+import { showConfirm } from "../lib/confirm";
 import { showDialog } from "../lib/dialog";
+import type { JsonSchema } from "../lib/jsonSchemaExample";
+import { buildExampleFromSchema } from "../lib/jsonSchemaExample";
 import { pluralizeCount } from "../lib/pluralize";
+import { queryClient } from "../lib/queryClient";
 import { Button } from "./core/Button";
+import { Dropdown } from "./core/Dropdown";
 import type { EditorProps } from "./core/Editor/Editor";
 import { Editor } from "./core/Editor/LazyEditor";
 import { GrpcProtoSelectionDialog } from "./GrpcProtoSelectionDialog";
@@ -29,6 +36,11 @@ type Props = Pick<EditorProps, "heightMode" | "onChange" | "className" | "forceU
   protoFiles: string[];
 };
 
+type MethodSchema =
+  | { type: "none" }
+  | { type: "schema"; schema: JsonSchema }
+  | { type: "error"; id: string; title: string; body: ReactNode; log: unknown[] };
+
 export function GrpcEditor({
   services,
   reflectionError,
@@ -42,21 +54,16 @@ export function GrpcEditor({
     setEditorView(h);
   }, []);
 
-  // Find the schema for the selected service and method and update the editor
-  useEffect(() => {
-    if (
-      editorView == null ||
-      services === null ||
-      request.service === null ||
-      request.method === null
-    ) {
-      return;
+  // Find the schema for the selected service and method
+  const methodSchema = useMemo<MethodSchema>(() => {
+    if (services === null || request.service === null || request.method === null) {
+      return { type: "none" };
     }
 
     const s = services.find((s) => s.name === request.service);
     if (s == null) {
-      console.log("Failed to find service", { service: request.service, services });
-      showAlert({
+      return {
+        type: "error",
         id: "grpc-find-service-error",
         title: "Couldn't Find Service",
         body: (
@@ -64,14 +71,14 @@ export function GrpcEditor({
             Failed to find service <InlineCode>{request.service}</InlineCode> in schema
           </>
         ),
-      });
-      return;
+        log: ["Failed to find service", { service: request.service, services }],
+      };
     }
 
     const schema = s.methods.find((m) => m.name === request.method)?.schema;
-    if (request.method != null && schema == null) {
-      console.log("Failed to find method", { method: request.method, methods: s?.methods });
-      showAlert({
+    if (schema == null) {
+      return {
+        type: "error",
         id: "grpc-find-schema-error",
         title: "Couldn't Find Method",
         body: (
@@ -80,18 +87,15 @@ export function GrpcEditor({
             <InlineCode>{request.service}</InlineCode> in schema
           </>
         ),
-      });
-      return;
-    }
-
-    if (schema == null) {
-      return;
+        log: ["Failed to find method", { method: request.method, methods: s.methods }],
+      };
     }
 
     try {
-      updateSchema(editorView, JSON.parse(schema));
+      return { type: "schema", schema: JSON.parse(schema) as JsonSchema };
     } catch (err) {
-      showAlert({
+      return {
+        type: "error",
         id: "grpc-parse-schema-error",
         title: "Failed to Parse Schema",
         body: (
@@ -103,9 +107,22 @@ export function GrpcEditor({
             <FormattedError>{String(err)}</FormattedError>
           </VStack>
         ),
-      });
+        log: ["Failed to parse schema", err],
+      };
     }
-  }, [editorView, services, request.method, request.service]);
+  }, [services, request.method, request.service]);
+
+  useEffect(() => {
+    if (methodSchema.type !== "error") return;
+    console.log(...methodSchema.log);
+    showAlert({ id: methodSchema.id, title: methodSchema.title, body: methodSchema.body });
+  }, [methodSchema]);
+
+  // Update the editor whenever the schema changes
+  useEffect(() => {
+    if (editorView == null || methodSchema.type !== "schema") return;
+    updateSchema(editorView, methodSchema.schema as JSONSchema7);
+  }, [editorView, methodSchema]);
 
   const extraExtensions = useMemo(
     () => [
@@ -124,45 +141,145 @@ export function GrpcEditor({
   const reflectionUnavailable = reflectionError?.match(/unimplemented/i);
   reflectionError = reflectionUnavailable ? undefined : reflectionError;
 
+  const handleGenerateExample = useCallback(async () => {
+    if (methodSchema.type !== "schema") return;
+
+    if (request.message.trim() !== "") {
+      const confirmed = await showConfirm({
+        id: "grpc-generate-example",
+        title: "Generate Example",
+        description: "The current message will be replaced with an example.",
+        confirmText: "Generate",
+      });
+      if (!confirmed) return;
+    }
+
+    const message = JSON.stringify(buildExampleFromSchema(methodSchema.schema), null, 2);
+    await patchModel(request, { message });
+
+    // Force the editor to pick up the new message
+    wasUpdatedExternally(request.id);
+  }, [methodSchema, request]);
+
+  // The reflect query is keyed by request, url and proto files, so a prefix invalidate
+  // reaches it without threading a refetch down from the connection layout.
+  const handleReloadSchema = useCallback(
+    () => queryClient.invalidateQueries({ queryKey: ["grpc_reflect", request.id] }),
+    [request.id],
+  );
+
+  const handleShowReflectionError = useCallback(() => {
+    showDialog({
+      id: "grpc-reflection-error",
+      title: "Reflection Failed",
+      size: "sm",
+      render: ({ hide }) => (
+        <>
+          <FormattedError>{reflectionError ?? "unknown"}</FormattedError>
+          <div className="w-full my-4">
+            <Button
+              className="ml-auto"
+              color="primary"
+              size="sm"
+              onClick={async () => {
+                hide();
+                await handleReloadSchema();
+              }}
+            >
+              Retry
+            </Button>
+          </div>
+        </>
+      ),
+    });
+  }, [handleReloadSchema, reflectionError]);
+
   const actions = useMemo(
     () => [
-      <div key="reflection" className={classNames(services == null && "opacity-100!")}>
-        <Button
-          size="xs"
-          color={
-            reflectionLoading
-              ? "secondary"
-              : reflectionUnavailable
-                ? "info"
-                : reflectionError
-                  ? "danger"
-                  : "secondary"
-          }
-          isLoading={reflectionLoading}
-          onClick={() => {
-            showDialog({
-              title: "Configure Schema",
-              size: "md",
-              id: "reflection-failed",
-              render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
-            });
-          }}
+      // Matches the GraphQL editor: one always-visible control labelled by schema state,
+      // with everything schema-related behind it.
+      <div key="schema" className="opacity-100!">
+        <Dropdown
+          items={[
+            {
+              // Hidden for servers without reflection, which isn't an error
+              hidden: !reflectionError,
+              type: "content",
+              label: (
+                <Banner color="danger">
+                  <p className="mb-1">Reflection failed</p>
+                  <Button
+                    size="xs"
+                    color="danger"
+                    variant="border"
+                    onClick={handleShowReflectionError}
+                  >
+                    View Error
+                  </Button>
+                </Banner>
+              ),
+            },
+            {
+              label: "Generate Example Message",
+              leftSlot: <Icon icon="magic_wand" />,
+              disabled: methodSchema.type !== "schema",
+              onSelect: handleGenerateExample,
+            },
+            { type: "separator" },
+            {
+              label: "Reload Schema",
+              leftSlot: <Icon icon="refresh" spin={reflectionLoading} />,
+              keepOpenOnSelect: true,
+              onSelect: handleReloadSchema,
+            },
+            {
+              label: protoFiles.length > 0 ? "Select Proto Files\u2026" : "Configure Schema\u2026",
+              leftSlot: <Icon icon="settings" />,
+              onSelect: () => {
+                showDialog({
+                  title: "Configure Schema",
+                  size: "md",
+                  id: "grpc-configure-schema",
+                  render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
+                });
+              },
+            },
+          ]}
         >
-          {reflectionLoading
-            ? "Inspecting Schema"
-            : reflectionUnavailable
-              ? "Select Proto Files"
-              : reflectionError
-                ? "Server Error"
-                : protoFiles.length > 0
-                  ? pluralizeCount("File", protoFiles.length)
-                  : services != null && protoFiles.length === 0
-                    ? "Schema Detected"
-                    : "Select Schema"}
-        </Button>
+          <Button
+            size="sm"
+            variant="border"
+            title="Schema"
+            forDropdown
+            isLoading={reflectionLoading}
+            color={reflectionUnavailable ? "info" : reflectionError ? "danger" : "default"}
+          >
+            {reflectionLoading
+              ? "Inspecting Schema"
+              : reflectionUnavailable
+                ? "Select Proto Files"
+                : reflectionError
+                  ? "Server Error"
+                  : protoFiles.length > 0
+                    ? pluralizeCount("File", protoFiles.length)
+                    : services != null
+                      ? "Schema Detected"
+                      : "Select Schema"}
+          </Button>
+        </Dropdown>
       </div>,
     ],
-    [protoFiles.length, reflectionError, reflectionLoading, reflectionUnavailable, services],
+    [
+      handleGenerateExample,
+      handleReloadSchema,
+      handleShowReflectionError,
+      methodSchema.type,
+      protoFiles.length,
+      reflectionError,
+      reflectionLoading,
+      reflectionUnavailable,
+      services,
+    ],
   );
 
   return (

apps/yaak-client/components/GrpcProtoSelectionDialog.tsx

@@ -1,4 +1,3 @@
-import { open } from "@tauri-apps/plugin-dialog";
 import type { GrpcRequest } from "@yaakapp-internal/models";
 import { Banner, HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useActiveRequest } from "../hooks/useActiveRequest";
@@ -8,6 +7,7 @@ import { pluralizeCount } from "../lib/pluralize";
 import { Button } from "./core/Button";
 import { IconButton } from "./core/IconButton";
 import { Link } from "./core/Link";
+import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
   onDone: () => void;
@@ -45,7 +45,7 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
           color="primary"
           variant="border"
           onClick={async () => {
-            const selected = await open({
+            const selected = await platform.dialog.open({
               title: "Select Proto Files",
               multiple: true,
               filters: [{ name: "Proto Files", extensions: ["proto"] }],
@@ -63,7 +63,7 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
           variant="border"
           color="primary"
           onClick={async () => {
-            const selected = await open({
+            const selected = await platform.dialog.open({
               title: "Select Proto Directory",
               directory: true,
             });

apps/yaak-client/components/GrpcRequestPane.tsx

@@ -1,4 +1,9 @@
-import { type GrpcRequest, type HttpRequestHeader, patchModel } from "@yaakapp-internal/models";
+import {
+  type GrpcRequest,
+  type HttpRequestHeader,
+  patchModel,
+  patchModelDebounced,
+} from "@yaakapp-internal/models";
 import { HStack, Icon, useContainerSize, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { CSSProperties } from "react";
@@ -75,11 +80,13 @@ export function GrpcRequestPane({
   const { width: paneWidth } = useContainerSize(urlContainerEl);
 
   const handleChangeUrl = useCallback(
-    (url: string) => patchModel(activeRequest, { url }),
+    (url: string) => patchModelDebounced(activeRequest, { url }),
     [activeRequest],
   );
 
   const handleChangeMessage = useCallback(
+    // Not debounced: handleSend reads message from the store, so a pending
+    // debounced patch would send stale text
     (message: string) => patchModel(activeRequest, { message }),
     [activeRequest],
   );
@@ -126,6 +133,8 @@ export function GrpcRequestPane({
     onSend({ message: activeRequest.message });
   }, [activeRequest, onSend]);
 
+  const hasDescription = activeRequest.description.trim().length > 0;
+
   const tabs: TabItem[] = useMemo(
     () => [
       { value: TAB_MESSAGE, label: "Message" },
@@ -139,19 +148,19 @@ export function GrpcRequestPane({
       {
         value: TAB_DESCRIPTION,
         label: "Info",
-        rightSlot: activeRequest.description && <CountBadge count={true} />,
+        rightSlot: hasDescription && <CountBadge count={true} />,
       },
     ],
-    [activeRequest.description, authTab, metadataTab, numSettingsOverrides],
+    [authTab, hasDescription, metadataTab, numSettingsOverrides],
   );
 
   const handleMetadataChange = useCallback(
-    (metadata: HttpRequestHeader[]) => patchModel(activeRequest, { metadata }),
+    (metadata: HttpRequestHeader[]) => patchModelDebounced(activeRequest, { metadata }),
     [activeRequest],
   );
 
   const handleDescriptionChange = useCallback(
-    (description: string) => patchModel(activeRequest, { description }),
+    (description: string) => patchModelDebounced(activeRequest, { description }),
     [activeRequest],
   );
 
@@ -187,13 +196,6 @@ export function GrpcRequestPane({
               type: "default",
               shortLabel: o.label,
             }))}
-            itemsAfter={[
-              {
-                label: "Refresh",
-                type: "default",
-                leftSlot: <Icon size="sm" icon="refresh" />,
-              },
-            ]}
           >
             <Button
               size="sm"
@@ -299,7 +301,7 @@ export function GrpcRequestPane({
               className="font-sans text-xl! px-0!"
               containerClassName="border-0"
               placeholder={resolvedModelName(activeRequest)}
-              onChange={(name) => patchModel(activeRequest, { name })}
+              onChange={(name) => patchModelDebounced(activeRequest, { name })}
             />
             <MarkdownEditor
               name="request-description"

apps/yaak-client/components/HeadersEditor.tsx

@@ -1,14 +1,17 @@
 import type { HttpRequestHeader } from "@yaakapp-internal/models";
-import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
 import { HStack } from "@yaakapp-internal/ui";
+import { acceptLanguages } from "../lib/data/acceptLanguages";
+import { cacheControlDirectives } from "../lib/data/cacheControl";
 import { charsets } from "../lib/data/charsets";
 import { connections } from "../lib/data/connections";
 import { encodings } from "../lib/data/encodings";
+import type { HeaderValuePreset } from "../lib/data/headerValuePresets";
 import { headerNames } from "../lib/data/headerNames";
 import { mimeTypes } from "../lib/data/mimetypes";
+import { userAgents } from "../lib/data/userAgents";
 import { CountBadge } from "./core/CountBadge";
 import { DetailsBanner } from "./core/DetailsBanner";
-import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import type { GenericCompletion, GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import type { InputProps } from "./core/Input";
 import type { Pair, PairEditorProps } from "./core/PairEditor";
 import { PairEditorRow } from "./core/PairEditor";
@@ -105,12 +108,21 @@ export function HeadersEditor({
 
 const MIN_MATCH = 3;
 
-const headerOptionsMap: Record<string, string[]> = {
+const headerOptionsMap: Record<string, HeaderValuePreset[]> = {
   "content-type": mimeTypes,
   accept: ["*/*", ...mimeTypes],
   "accept-encoding": encodings,
+  "content-encoding": encodings,
   connection: connections,
   "accept-charset": charsets,
+  "accept-language": acceptLanguages,
+  "cache-control": cacheControlDirectives,
+  "user-agent": userAgents,
+  pragma: ["no-cache"],
+  te: ["trailers", "compress", "deflate", "gzip"],
+  dnt: ["1", "0"],
+  "upgrade-insecure-requests": ["1"],
+  "x-requested-with": ["XMLHttpRequest"],
 };
 
 const valueType = (pair: Pair): InputProps["type"] => {
@@ -132,12 +144,22 @@ const valueType = (pair: Pair): InputProps["type"] => {
 
 const valueAutocomplete = (headerName: string): GenericCompletionConfig | undefined => {
   const name = headerName.toLowerCase().trim();
-  const options: GenericCompletionOption[] =
-    headerOptionsMap[name]?.map((o) => ({
-      label: o,
-      type: "constant",
-      boost: 1, // Put above other completions
-    })) ?? [];
+  const options: GenericCompletion[] =
+    headerOptionsMap[name]?.map((o) =>
+      typeof o === "string"
+        ? {
+            label: o,
+            type: "constant",
+            boost: 1, // Put above other completions
+          }
+        : {
+            // Show the short label but insert the full value (e.g. User-Agent)
+            label: o.label,
+            apply: o.value,
+            type: "constant",
+            boost: 1,
+          },
+    ) ?? [];
   return { minMatch: MIN_MATCH, options };
 };
 

apps/yaak-client/components/HttpRequestPane.tsx

@@ -1,25 +1,23 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
-import { patchModel } from "@yaakapp-internal/models";
+import { getModel, patchModel, patchModelDebounced } from "@yaakapp-internal/models";
 import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
 import classNames from "classnames";
 import { atom, useAtomValue } from "jotai";
 import type { CSSProperties } from "react";
 import { lazy, Suspense, useCallback, useMemo, useRef, useState } from "react";
-import { activeRequestIdAtom } from "../hooks/useActiveRequestId";
-import { allRequestsAtom } from "../hooks/useAllRequests";
+import { importCurl, looksLikeCurl } from "../commands/importCurl";
+import { allRequestUrlsAtom } from "../hooks/useAllRequests";
 import { useAuthTab } from "../hooks/useAuthTab";
 import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
 import { useHeadersTab } from "../hooks/useHeadersTab";
-import { useImportCurl } from "../hooks/useImportCurl";
 import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
 import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
 import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
-import { deepEqualAtom } from "../lib/atoms";
 import { languageFromContentType } from "../lib/contentType";
 import { generateId } from "../lib/generateId";
-import { extractPathPlaceholders } from "../lib/pathPlaceholders";
+import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
 import { convertRequestBody } from "../lib/requestBodyConversion";
 import {
   BODY_TYPE_BINARY,
@@ -42,7 +40,6 @@ import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import { getUrlCompletionConfig } from "./core/Editor/url/completion";
 import { Editor } from "./core/Editor/LazyEditor";
 import { InlineCode } from "@yaakapp-internal/ui";
-import type { Pair } from "./core/PairEditor";
 import { PlainInput } from "./core/PlainInput";
 import type { TabItem, TabsRef } from "./core/Tabs/Tabs";
 import { setActiveTab, TabContent, Tabs } from "./core/Tabs/Tabs";
@@ -77,15 +74,12 @@ const TAB_SETTINGS = "settings";
 const TAB_DESCRIPTION = "description";
 const TABS_STORAGE_KEY = "http_request_tabs";
 
-const nonActiveRequestUrlsAtom = atom((get) => {
-  const activeRequestId = get(activeRequestIdAtom);
-  const requests = get(allRequestsAtom);
-  return requests
-    .filter((r) => r.id !== activeRequestId)
-    .map((r): GenericCompletionOption => ({ type: "constant", label: r.url }));
-});
-
-const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
+// Derived from the identity-stable URL list so this only recomputes when a URL
+// actually changes. The active request's own URL is included, but exact matches
+// are filtered out at completion time by genericCompletion.
+const requestUrlOptionsAtom = atom((get): GenericCompletionOption[] =>
+  get(allRequestUrlsAtom).map((url) => ({ type: "constant", label: url })),
+);
 
 export function HttpRequestPane({ style, fullHeight, className, activeRequest }: Props) {
   const activeRequestId = activeRequest.id;
@@ -133,20 +127,33 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
     [activeRequest],
   );
 
-  const { urlParameterPairs, urlParametersKey } = useMemo(() => {
-    const placeholderNames = extractPathPlaceholders(activeRequest.url);
-    const nonEmptyParameters = activeRequest.urlParameters.filter((p) => p.name || p.value);
-    const items: Pair[] = [...nonEmptyParameters];
-    for (const name of placeholderNames) {
-      const item = items.find((p) => p.name === name);
-      if (item) {
-        item.readOnlyName = true;
-      } else {
-        items.push({ name, value: "", enabled: true, readOnlyName: true, id: generateId() });
-      }
-    }
-    return { urlParameterPairs: items, urlParametersKey: placeholderNames.join(",") };
-  }, [activeRequest.url, activeRequest.urlParameters]);
+  // Renaming a path placeholder has to rewrite the URL and rename the parameter together, or the
+  // value detaches from the placeholder.
+  // NOTE: Reads the request fresh rather than closing over `activeRequest`. The row that calls this
+  //  holds onto it until the URL's placeholders change, so a captured request would go stale and
+  //  patch its parameter list back over newer edits.
+  const handleRenamePathPlaceholder = useCallback(
+    (oldName: string, newName: string) => {
+      const request = getModel("http_request", activeRequestId);
+      if (request == null) return false;
+
+      const patch = renamePathPlaceholder(request, oldName, newName);
+      if (patch == null) return false; // Unusable name, so the editor reverts the field
+      void patchModel(request, patch);
+      return true;
+    },
+    [activeRequestId],
+  );
+
+  const { urlParameterPairs, urlParametersKey } = useMemo(
+    () =>
+      derivePathPlaceholderPairs(
+        activeRequest.url,
+        activeRequest.urlParameters,
+        handleRenamePathPlaceholder,
+      ),
+    [activeRequest.url, activeRequest.urlParameters, handleRenamePathPlaceholder],
+  );
 
   let numParams = 0;
   if (
@@ -158,6 +165,8 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
       : 0;
   }
 
+  const hasDescription = activeRequest.description.trim().length > 0;
+
   const tabs = useMemo<TabItem[]>(
     () => [
       {
@@ -253,6 +262,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
       {
         value: TAB_DESCRIPTION,
         label: "Info",
+        rightSlot: hasDescription && <CountBadge count={true} />,
       },
     ],
     [
@@ -260,6 +270,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
       authTab,
       contentType,
       handleContentTypeChange,
+      hasDescription,
       headersTab,
       numParams,
       numSettingsOverrides,
@@ -271,19 +282,18 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
   const { activeResponse } = usePinnedHttpResponse(activeRequestId);
   const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
   const updateKey = useRequestUpdateKey(activeRequestId);
-  const { mutate: importCurl } = useImportCurl();
 
   const handleBodyChange = useCallback(
-    (body: HttpRequest["body"]) => patchModel(activeRequest, { body }),
+    (body: HttpRequest["body"]) => patchModelDebounced(activeRequest, { body }),
     [activeRequest],
   );
 
   const handleBodyTextChange = useCallback(
-    (text: string) => patchModel(activeRequest, { body: { ...activeRequest.body, text } }),
+    (text: string) => patchModelDebounced(activeRequest, { body: { ...activeRequest.body, text } }),
     [activeRequest],
   );
 
-  const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
+  const autocompleteUrls = useAtomValue(requestUrlOptionsAtom);
 
   const autocomplete: GenericCompletionConfig = useMemo(
     () => getUrlCompletionConfig(autocompleteUrls),
@@ -292,8 +302,8 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
 
   const handlePaste = useCallback(
     async (e: ClipboardEvent, text: string) => {
-      if (text.startsWith("curl ")) {
-        importCurl({ overwriteRequestId: activeRequestId, command: text });
+      if (looksLikeCurl(text)) {
+        importCurl.mutate({ overwriteRequestId: activeRequestId, command: text });
       } else {
         const patch = prepareImportQuerystring(text);
         if (patch != null) {
@@ -315,7 +325,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
         }
       }
     },
-    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh, importCurl],
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh],
   );
   const handleSend = useCallback(
     () => sendRequest(activeRequest.id ?? null),
@@ -323,7 +333,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
   );
 
   const handleUrlChange = useCallback(
-    (url: string) => patchModel(activeRequest, { url }),
+    (url: string) => patchModelDebounced(activeRequest, { url }),
     [activeRequest],
   );
 
@@ -369,7 +379,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                 forceUpdateKey={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
                 headers={activeRequest.headers}
                 stateKey={`headers.${activeRequest.id}`}
-                onChange={(headers) => patchModel(activeRequest, { headers })}
+                onChange={(headers) => patchModelDebounced(activeRequest, { headers })}
               />
             </TabContent>
             <TabContent value={TAB_PARAMS}>
@@ -377,7 +387,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                 stateKey={`params.${activeRequest.id}`}
                 forceUpdateKey={forceUpdateKey + urlParametersKey}
                 pairs={urlParameterPairs}
-                onChange={(urlParameters) => patchModel(activeRequest, { urlParameters })}
+                onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
               />
             </TabContent>
             <TabContent value={TAB_SETTINGS}>
@@ -429,7 +439,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                     requestId={activeRequest.id}
                     contentType={contentType}
                     body={activeRequest.body}
-                    onChange={(body) => patchModel(activeRequest, { body })}
+                    onChange={(body) => patchModelDebounced(activeRequest, { body })}
                     onChangeContentType={handleContentTypeChange}
                   />
                 ) : typeof activeRequest.bodyType === "string" ? (

apps/yaak-client/components/HttpResponsePane.tsx

@@ -8,6 +8,7 @@ import { useCopyHttpResponse } from "../hooks/useCopyHttpResponse";
 import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
 import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useResponseBodyBytes, useResponseBodyText } from "../hooks/useResponseBodyText";
+import { useResponseBodyUrl } from "../hooks/useResponseBodyUrl";
 import { useResponseViewMode } from "../hooks/useResponseViewMode";
 import { useSaveResponse } from "../hooks/useSaveResponse";
 import { useTimelineViewMode } from "../hooks/useTimelineViewMode";
@@ -409,14 +410,13 @@ function EnsureCompleteResponse({
   Component,
 }: {
   response: HttpResponse;
-  Component: ComponentType<{ bodyPath: string }>;
+  Component: ComponentType<{ bodyUrl: string }>;
 }) {
-  if (response.bodyPath === null) {
-    return <div>Empty response body</div>;
-  }
+  // Wait until the response has been fully-downloaded before asking for it
+  const complete = response.state === "closed";
+  const bodyUrl = useResponseBodyUrl(complete ? response : null);
 
-  // Wait until the response has been fully-downloaded
-  if (response.state !== "closed") {
+  if (!complete || bodyUrl.isPending) {
     return (
       <EmptyStateText>
         <LoadingIcon />
@@ -424,7 +424,15 @@ function EnsureCompleteResponse({
     );
   }
 
-  return <Component bodyPath={response.bodyPath} />;
+  if (bodyUrl.error) {
+    return <Banner color="danger">{String(bodyUrl.error)}</Banner>;
+  }
+
+  if (bodyUrl.data == null) {
+    return <div>Empty response body</div>;
+  }
+
+  return <Component bodyUrl={bodyUrl.data} />;
 }
 
 function HttpSvgViewer({ response }: { response: HttpResponse }) {

apps/yaak-client/components/ImportCurl.tsx

@@ -0,0 +1,112 @@
+import { platform, useCapability } from "@yaakapp-internal/platform";
+import { Icon } from "@yaakapp-internal/ui";
+import * as m from "motion/react-m";
+import { useEffect, useState } from "react";
+import { importCurl, looksLikeCurl } from "../commands/importCurl";
+import { useWindowFocus } from "../hooks/useWindowFocus";
+import { showToast } from "../lib/toast";
+import { Button } from "./core/Button";
+
+/**
+ * Offers to create a request from a Curl command on the clipboard. A host that can read
+ * the clipboard on its own offers it whenever the window is focused; one that would have
+ * to prompt for permission first waits for the user to paste instead.
+ */
+export function ImportCurl() {
+  return useCapability("clipboardRead") ? <ImportCurlButton /> : <ImportCurlOnPaste />;
+}
+
+function ImportCurlButton() {
+  const focused = useWindowFocus();
+  const [clipboardText, setClipboardText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- none
+  useEffect(() => {
+    void platform.clipboard.readText().then(setClipboardText);
+  }, [focused]);
+
+  if (!looksLikeCurl(clipboardText)) {
+    return null;
+  }
+
+  return (
+    <m.div
+      initial={{ opacity: 0, scale: 0 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ delay: 0.5 }}
+    >
+      <Button
+        size="2xs"
+        variant="border"
+        color="success"
+        className="rounded-full"
+        rightSlot={<Icon icon="import" size="sm" />}
+        isLoading={isLoading}
+        title="Import Curl command from clipboard"
+        onClick={async () => {
+          setIsLoading(true);
+          try {
+            await importCurl.mutateAsync({ command: clipboardText });
+            setClipboardText(""); // Hide the button until the clipboard changes
+          } catch (e) {
+            console.log("Failed to import curl", e);
+          } finally {
+            setIsLoading(false);
+          }
+        }}
+      >
+        Import Curl
+      </Button>
+    </m.div>
+  );
+}
+
+function ImportCurlOnPaste() {
+  useEffect(() => {
+    const handlePaste = (e: ClipboardEvent) => {
+      const command = e.clipboardData?.getData("text/plain") ?? "";
+      if (!looksLikeCurl(command)) return;
+
+      // Editable targets keep the text as text. The URL editor imports it itself.
+      if (isEditable(e.target)) return;
+
+      showToast({
+        id: "curl-paste",
+        color: "success",
+        message: (
+          <div>
+            <h2 className="font-semibold">Curl command detected</h2>
+            <p className="text-text-subtle text-sm">Create a request from the pasted command?</p>
+          </div>
+        ),
+        action: ({ hide }) => (
+          <Button
+            size="xs"
+            color="success"
+            className="mr-auto min-w-20"
+            rightSlot={<Icon icon="import" size="sm" />}
+            onClick={() => {
+              hide();
+              importCurl.mutate({ command });
+            }}
+          >
+            Create Request
+          </Button>
+        ),
+      });
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, []);
+
+  return null;
+}
+
+function isEditable(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target.closest(".cm-editor") != null) return true;
+  return ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+}

apps/yaak-client/components/ImportCurlButton.tsx

@@ -1,56 +0,0 @@
-import { clear, readText } from "@tauri-apps/plugin-clipboard-manager";
-import * as m from "motion/react-m";
-import { useEffect, useState } from "react";
-import { useImportCurl } from "../hooks/useImportCurl";
-import { useWindowFocus } from "../hooks/useWindowFocus";
-import { Button } from "./core/Button";
-import { Icon } from "@yaakapp-internal/ui";
-
-export function ImportCurlButton() {
-  const focused = useWindowFocus();
-  const [clipboardText, setClipboardText] = useState("");
-
-  const importCurl = useImportCurl();
-  const [isLoading, setIsLoading] = useState(false);
-
-  // oxlint-disable-next-line react-hooks/exhaustive-deps -- none
-  useEffect(() => {
-    void readText().then(setClipboardText);
-  }, [focused]);
-
-  if (!clipboardText?.trim().startsWith("curl ")) {
-    return null;
-  }
-
-  return (
-    <m.div
-      initial={{ opacity: 0, scale: 0 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ delay: 0.5 }}
-    >
-      <Button
-        size="2xs"
-        variant="border"
-        color="success"
-        className="rounded-full"
-        rightSlot={<Icon icon="import" size="sm" />}
-        isLoading={isLoading}
-        title="Import Curl command from clipboard"
-        onClick={async () => {
-          setIsLoading(true);
-          try {
-            await importCurl.mutateAsync({ command: clipboardText });
-            await clear(); // Clear the clipboard so the button goes away
-            setClipboardText("");
-          } catch (e) {
-            console.log("Failed to import curl", e);
-          } finally {
-            setIsLoading(false);
-          }
-        }}
-      >
-        Import Curl
-      </Button>
-    </m.div>
-  );
-}

apps/yaak-client/components/ImportDataDialog.tsx

@@ -1,57 +1,795 @@
-import { VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
-import { useLocalStorage } from "react-use";
+import {
+  type Folder,
+  type ImportDestination,
+  type ImportPlan,
+  type ImportPlanItem,
+  type ImportSource,
+  type Workspace,
+} from "@yaakapp-internal/models";
+import { Banner, HStack, Icon, type IconProps, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { platform } from "@yaakapp-internal/platform";
+import classNames from "classnames";
+import { formatDistanceToNowStrict } from "date-fns";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { pluralize } from "../lib/pluralize";
 import { CommercialUseBanner } from "./CommercialUseBanner";
 import { Button } from "./core/Button";
-import { SelectFile } from "./SelectFile";
+import { Checkbox } from "./core/Checkbox";
+import type { CheckboxTreeNode } from "./core/CheckboxTree";
+import { CheckboxTree } from "./core/CheckboxTree";
+import { IconTooltip } from "./core/IconTooltip";
+import { PlainInput } from "./core/PlainInput";
+import { Select } from "./core/Select";
+import { SegmentedControl } from "./core/SegmentedControl";
 
 interface Props {
-  importData: (filePath: string) => Promise<void>;
+  currentWorkspace: Workspace | null;
+  workspaces: Workspace[];
+  selectedFolder: Folder | null;
+  planFile: (filePath: string, destination: ImportDestination) => Promise<ImportPlan>;
+  planUrl: (url: string, destination: ImportDestination) => Promise<ImportPlan>;
+  listSources: (workspaceId: string) => Promise<ImportSource[]>;
+  findSourcesForOrigin: (args: { filePath?: string; url?: string }) => Promise<ImportSource[]>;
+  commit: (plan: ImportPlan) => Promise<void>;
+  cancel: () => void;
+  onError: (err: unknown) => void;
 }
 
-export function ImportDataDialog({ importData }: Props) {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [filePath, setFilePath] = useLocalStorage<string | null>("importFilePath", null);
-
+/**
+ * An absolute or relative path is unambiguously a file. Everything else is treated as a URL, so a
+ * bare host like `example.com/openapi.json` still works (the backend defaults it to https).
+ */
+function isFilePath(value: string): boolean {
   return (
-    <VStack space={5} className="pb-4">
-      <CommercialUseBanner source="data-import" title="Importing work data?" />
+    value.startsWith("/") ||
+    value.startsWith("./") ||
+    value.startsWith("../") ||
+    value.startsWith("~/") ||
+    value.startsWith("\\\\") ||
+    /^[a-zA-Z]:[\\/]/.test(value)
+  );
+}
 
-      <VStack space={1}>
-        <ul className="list-disc pl-5">
-          <li>OpenAPI 3.0, 3.1</li>
-          <li>Postman Collection v2, v2.1</li>
-          <li>Insomnia v4+</li>
-          <li>Swagger 2.0</li>
-          <li>
-            Curl commands <em className="text-text-subtle">(or paste into URL)</em>
-          </li>
-        </ul>
-      </VStack>
-      <VStack space={2}>
-        <SelectFile
-          filePath={filePath ?? null}
-          onChange={({ filePath }) => setFilePath(filePath)}
-        />
-        {filePath && (
+function fileName(path: string): string {
+  return path.split(/[/\\]/).at(-1) || path;
+}
+
+/**
+ * Loads the current workspace's linked sources before rendering the dialog, so the inner
+ * component can construct its initial state (prefilled path, destination) in one pass instead of
+ * patching it in with effects after the first paint.
+ */
+export function ImportDataDialog(props: Props) {
+  const [initialSources, setInitialSources] = useState<ImportSource[] | null>(null);
+  const { currentWorkspace, listSources } = props;
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = currentWorkspace == null ? Promise.resolve([]) : listSources(currentWorkspace.id);
+    load
+      .then((sources) => {
+        if (!cancelled) setInitialSources(sources);
+      })
+      .catch(() => {
+        if (!cancelled) setInitialSources([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [currentWorkspace, listSources]);
+
+  if (initialSources == null) return null;
+  return <LoadedImportDataDialog {...props} initialSources={initialSources} />;
+}
+
+function latestSource(sources: ImportSource[]): ImportSource | null {
+  return sources.reduce<ImportSource | null>(
+    (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
+    null,
+  );
+}
+
+function LoadedImportDataDialog({
+  currentWorkspace,
+  workspaces,
+  selectedFolder,
+  planFile,
+  planUrl,
+  listSources,
+  findSourcesForOrigin,
+  commit,
+  cancel,
+  onError,
+  initialSources,
+}: Props & { initialSources: ImportSource[] }) {
+  // A workspace with a linked source is probably being re-imported, so start from that source
+  const prefill = latestSource(initialSources);
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [plan, setPlan] = useState<ImportPlan | null>(null);
+  const [items, setItems] = useState<ImportPlanItem[]>([]);
+  // null means no explicit choice yet, so the default below applies
+  const [destinationChoice, setDestinationChoice] = useState<"new" | "current" | "other" | null>(
+    null,
+  );
+  const [otherWorkspaceId, setOtherWorkspaceId] = useState<string | null>(null);
+  const [targetSelectedFolder, setTargetSelectedFolder] = useState(selectedFolder != null);
+  const [linkedSources, setLinkedSources] = useState<ImportSource[]>(
+    prefill != null ? initialSources : [],
+  );
+  const [originSources, setOriginSources] = useState<ImportSource[]>(
+    prefill != null ? [prefill] : [],
+  );
+  // A file path or a URL. Both inputs write here, so there is only ever one thing to import
+  const [source, setSource] = useState<string | null>(prefill?.origin ?? null);
+  const [forceUpdateKey, setForceUpdateKey] = useState<number>(0);
+  const [isHovering, setIsHovering] = useState<boolean>(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const trimmedSource = source?.trim() ?? "";
+  const filePath = isFilePath(trimmedSource) ? trimmedSource : null;
+
+  const selectSource = (value: string) => {
+    setSource(value);
+    // Remount the input so it shows the path of the newly-picked file
+    setForceUpdateKey((k) => k + 1);
+  };
+
+  // Accept a file dropped anywhere on the dialog, the way SelectFile does for its button
+  useEffect(() => {
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "over") {
+        const p = event.position;
+        const r = ref.current?.getBoundingClientRect();
+        if (r == null) return;
+        setIsHovering(p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom);
+      } else if (event.type === "drop" && isHovering) {
+        const p = event.paths[0];
+        if (p) selectSource(p);
+        setIsHovering(false);
+      } else {
+        setIsHovering(false);
+      }
+    });
+  }, [isHovering, setSource]);
+
+  useEffect(() => {
+    if (trimmedSource === "") {
+      setOriginSources([]);
+      return;
+    }
+    let cancelled = false;
+    const timeout = setTimeout(() => {
+      findSourcesForOrigin(filePath != null ? { filePath } : { url: trimmedSource })
+        .then((sources) => {
+          if (!cancelled) setOriginSources(sources);
+        })
+        .catch(() => setOriginSources([]));
+    }, 300);
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    };
+  }, [trimmedSource, filePath, findSourcesForOrigin]);
+
+  // The one workspace this file is linked to, if there is exactly one.
+  const linkedWorkspace = useMemo(() => {
+    const ids = [...new Set(originSources.map((s) => s.workspaceId))];
+    if (ids.length !== 1) return null;
+    return workspaces.find((w) => w.id === ids[0]) ?? null;
+  }, [originSources, workspaces]);
+
+  // A file linked to the current workspace defaults back into it, so re-importing doesn't
+  // accidentally create a duplicate workspace. A file linked elsewhere only gets a suggestion —
+  // silently targeting a workspace that is neither new nor current is too surprising. An
+  // explicit choice always wins.
+  const destinationKind =
+    destinationChoice ??
+    (linkedWorkspace != null && linkedWorkspace.id === currentWorkspace?.id ? "current" : "new");
+
+  const destinationWorkspaceId =
+    destinationKind === "current"
+      ? (currentWorkspace?.id ?? null)
+      : destinationKind === "other"
+        ? otherWorkspaceId
+        : null;
+
+  useEffect(() => {
+    if (destinationWorkspaceId == null) {
+      setLinkedSources([]);
+      return;
+    }
+    let cancelled = false;
+    listSources(destinationWorkspaceId)
+      .then((sources) => {
+        if (!cancelled) setLinkedSources(sources);
+      })
+      .catch(() => setLinkedSources([]));
+    return () => {
+      cancelled = true;
+    };
+  }, [destinationWorkspaceId, listSources]);
+
+  const handleSelectFile = async () => {
+    const selected = await platform.dialog.open({ title: "Select File", multiple: false });
+    if (selected == null) return;
+    selectSource(selected);
+  };
+
+  // The selected folder belongs to the workspace being viewed, so it is only offerable when that
+  // is also the destination.
+  const canTargetSelectedFolder = selectedFolder != null && destinationKind === "current";
+
+  const destination = (): ImportDestination => {
+    if (destinationWorkspaceId == null) {
+      return { type: "new_workspace" };
+    }
+    return {
+      type: "existing_workspace",
+      workspaceId: destinationWorkspaceId,
+      folderId: canTargetSelectedFolder && targetSelectedFolder ? selectedFolder.id : undefined,
+    };
+  };
+
+  const handlePreview = async () => {
+    setIsLoading(true);
+    try {
+      const nextPlan =
+        filePath != null
+          ? await planFile(filePath, destination())
+          : await planUrl(trimmedSource, destination());
+      setPlan(nextPlan);
+      setItems(nextPlan.items);
+    } catch (err) {
+      onError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCommit = async () => {
+    if (plan == null) return;
+    setIsLoading(true);
+    try {
+      await commit({ ...plan, items });
+    } catch (err) {
+      onError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const itemTree = useMemo(() => buildItemTree(items), [items]);
+
+  // A folder row's checkbox carries everything beneath it, deletions included — the row labels
+  // say which of those are destructive. Checking anything also brings back the folders it needs
+  // to live in.
+  const toggleNode = (node: CheckboxTreeNode<TreeRow>, checked: boolean) => {
+    const targets = new Set(togglableItems(node).map((i) => i.modelId));
+    if (checked && node.data.kind === "item") {
+      const byId = new Map(items.map((i) => [i.modelId, i]));
+      for (const ancestor of ancestorsOf(node.data.item, byId)) {
+        if (isMissingFolder(ancestor)) targets.add(ancestor.modelId);
+      }
+    }
+    setItems((prev) => prev.map((i) => (targets.has(i.modelId) ? { ...i, selected: checked } : i)));
+  };
+
+  const resolveConflict = (modelId: string, resolution: "keep_mine" | "take_source") => {
+    setItems((prev) =>
+      prev.map((item) => (item.modelId === modelId ? { ...item, resolution } : item)),
+    );
+  };
+
+  // Deleting a folder takes its contents with it, so those rows have nothing left to decide.
+  const disabledIds = useMemo(() => {
+    const disabled = new Set<string>();
+    const byId = new Map(items.map((i) => [i.modelId, i]));
+    for (const item of items) {
+      if (item.action !== "delete") continue;
+      for (const parent of ancestorsOf(item, byId)) {
+        if (parent.action === "delete" && parent.selected) {
+          disabled.add(item.modelId);
+        }
+      }
+    }
+    return disabled;
+  }, [items]);
+
+  if (plan != null) {
+    const unchanged = items.filter((i) => i.action === "unchanged");
+    const footerNote =
+      unchanged.length > 0
+        ? `${unchanged.length} ${pluralize("resource", unchanged.length)} unchanged`
+        : "";
+    const changeCount = items.filter((item) => {
+      if (disabledIds.has(item.modelId)) return false;
+      if (item.action === "conflict") return item.resolution === "take_source";
+      if (item.action === "unchanged") return false;
+      return item.selected;
+    }).length;
+
+    // The row's label carries what kind of destination it is, so the value can just be its name
+    const [destinationLabel, destinationValue] = ((): [string, string] => {
+      if (plan.destination.type === "new_workspace") {
+        const names = plan.resources.workspaces.map((w) => w.name).filter((n) => n !== "");
+        if (names.length === 0) return ["New workspace", "Untitled"];
+        return [pluralize("New workspace", names.length), names.join(", ")];
+      }
+      const { workspaceId, folderId } = plan.destination;
+      const name = workspaces.find((w) => w.id === workspaceId)?.name ?? "Unknown workspace";
+      return [
+        "Destination",
+        folderId != null && folderId === selectedFolder?.id
+          ? `${name} / ${selectedFolder.name}`
+          : name,
+      ];
+    })();
+
+    // The destination workspace roots the tree. It is not a plan item — commit always applies
+    // it — so its checkbox only aggregates the subtree.
+    const workspaceRoot: CheckboxTreeNode<TreeRow> = (() => {
+      const planned = plan.resources.workspaces[0];
+      const planDestination = plan.destination;
+      const existing =
+        planDestination.type === "existing_workspace"
+          ? workspaces.find((w) => w.id === planDestination.workspaceId)
+          : null;
+      return {
+        key: existing?.id ?? planned?.id ?? "workspace",
+        data: {
+          kind: "destination",
+          label: existing?.name ?? planned?.name ?? "New workspace",
+          isNew: planDestination.type === "new_workspace",
+        },
+        children: itemTree,
+      };
+    })();
+
+    return (
+      <VStack space={4} className="pb-4">
+        <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
+          <PreviewRow label="Detected format" value={plan.importer} />
+          <PreviewRow label={destinationLabel} value={destinationValue} />
+        </div>
+
+        {plan.warnings.map((warning) => (
+          <Banner
+            key={`${warning.title}:${warning.detail}`}
+            color={warning.level === "warning" ? "warning" : "info"}
+            className="flex items-start gap-2.5"
+          >
+            <Icon
+              icon={warning.level === "warning" ? "alert_triangle" : "info"}
+              size="sm"
+              className="mt-0.5"
+            />
+            <div className="min-w-0">
+              <div className="text-sm font-medium">{warning.title}</div>
+              <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
+            </div>
+          </Banner>
+        ))}
+
+        <div className="rounded-lg border border-border-subtle px-3 py-2 overflow-y-auto max-h-[40vh]">
+          <CheckboxTree
+            node={workspaceRoot}
+            checked={nodeCheckedStatus}
+            onCheck={toggleNode}
+            isCheckboxDisabled={(n) => disabledIds.has(n.key)}
+            isCollapsedByDefault={(n) => n.data.kind === "item" && n.data.item.action === "ignored"}
+            isRelevant={(n) =>
+              n.data.kind === "destination" ||
+              (n.data.kind === "item" && n.data.item.action !== "unchanged")
+            }
+            renderRow={(n) => <ImportTreeRow row={n.data} onResolveConflict={resolveConflict} />}
+          />
+        </div>
+
+        <HStack space={2} alignItems="center" className="mt-3">
+          {footerNote !== "" && <div className="text-xs text-text-subtle">{footerNote}</div>}
           <Button
-            color="primary"
-            disabled={!filePath || isLoading}
-            isLoading={isLoading}
-            size="sm"
-            onClick={async () => {
-              setIsLoading(true);
-              try {
-                await importData(filePath);
-              } finally {
-                setIsLoading(false);
-              }
+            className="ml-auto"
+            color="secondary"
+            variant="border"
+            disabled={isLoading}
+            onClick={() => {
+              setPlan(null);
+              setItems([]);
             }}
           >
-            {isLoading ? "Importing" : "Import"}
+            Back
           </Button>
+          <Button color="primary" isLoading={isLoading} onClick={handleCommit}>
+            {isLoading
+              ? "Importing"
+              : changeCount > 0
+                ? `Apply ${changeCount} ${changeCount === 1 ? "Change" : "Changes"}`
+                : "Done"}
+          </Button>
+        </HStack>
+      </VStack>
+    );
+  }
+
+  const lastImported =
+    originSources.find((s) => s.workspaceId === destinationWorkspaceId) ??
+    linkedSources.reduce<ImportSource | null>(
+      (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
+      null,
+    );
+
+  return (
+    <VStack ref={ref} space={4} className="pb-4">
+      <CommercialUseBanner source="data-import" title="Importing work data?" />
+
+      <button
+        type="button"
+        onClick={handleSelectFile}
+        className={classNames(
+          "w-full rounded-lg border border-dashed px-4 py-6",
+          "flex flex-col items-center gap-1 text-center",
+          isHovering
+            ? "border-notice bg-surface-highlight"
+            : "border-border hover:border-text-subtle",
+        )}
+      >
+        <Icon icon="folder_input" className="text-text-subtlest w-8! h-8! mb-2" />
+        {/* Fixed height so the region doesn't resize between the empty and selected states */}
+        <div className="h-6 w-full flex items-center justify-center">
+          {filePath == null ? (
+            <div className="text-text">
+              <strong className="font-semibold">Choose a file</strong> or drag it here
+            </div>
+          ) : (
+            <div className="text-text font-mono text-xs max-w-full truncate" title={filePath}>
+              {fileName(filePath)}
+            </div>
+          )}
+        </div>
+        <div className="text-xs text-text-subtlest">
+          Supports OpenAPI, Swagger, Postman, Insomnia, curl, and Yaak exports
+        </div>
+      </button>
+
+      <PlainInput
+        label="Or enter a file path or URL"
+        size="sm"
+        placeholder="https://example.com/openapi.json"
+        defaultValue={source ?? ""}
+        forceUpdateKey={String(forceUpdateKey)}
+        onChange={setSource}
+      />
+
+      <VStack space={2} className={classNames(workspaces.length === 0 && "hidden")}>
+        <Select
+          name="import-destination-kind"
+          label="Import location"
+          size="sm"
+          value={destinationKind}
+          onChange={setDestinationChoice}
+          options={[
+            { value: "new", label: "New Workspace" },
+            ...(currentWorkspace != null
+              ? [{ value: "current" as const, label: "Current Workspace" }]
+              : []),
+            { value: "other", label: "Other Workspace" },
+          ]}
+        />
+        {destinationKind === "other" && (
+          <Select
+            name="import-destination-workspace"
+            label="Workspace"
+            hideLabel
+            size="sm"
+            value={otherWorkspaceId ?? ""}
+            onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
+            filterable
+            options={[
+              { value: "", label: "Select a workspace" },
+              ...workspaces
+                .filter((w) => w.id !== currentWorkspace?.id)
+                .map((w) => ({ value: w.id, label: w.name })),
+            ]}
+          />
+        )}
+        {lastImported != null && destinationWorkspaceId != null ? (
+          <div className="text-xs text-text-subtle">
+            Last imported from {lastImported.originLabel} ·{" "}
+            {formatDistanceToNowStrict(`${lastImported.lastImportedAt}Z`, { addSuffix: true })}
+          </div>
+        ) : linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId ? (
+          <div className="text-xs text-text-subtle">
+            This file was last imported into{" "}
+            <button
+              type="button"
+              className="underline hocus:text-text"
+              onClick={() => {
+                if (linkedWorkspace.id === currentWorkspace?.id) {
+                  setDestinationChoice("current");
+                } else {
+                  setDestinationChoice("other");
+                  setOtherWorkspaceId(linkedWorkspace.id);
+                }
+              }}
+            >
+              {linkedWorkspace.name}
+            </button>
+          </div>
+        ) : null}
+        {canTargetSelectedFolder && (
+          <Checkbox
+            checked={targetSelectedFolder}
+            title={`Place root resources in selected folder “${selectedFolder.name}”`}
+            onChange={setTargetSelectedFolder}
+          />
         )}
       </VStack>
+
+      <HStack space={2} justifyContent="end">
+        <Button color="secondary" variant="border" disabled={isLoading} onClick={cancel}>
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          disabled={
+            trimmedSource === "" ||
+            isLoading ||
+            (destinationKind === "other" && otherWorkspaceId == null)
+          }
+          isLoading={isLoading}
+          onClick={handlePreview}
+        >
+          {isLoading ? "Analyzing" : "Preview Import"}
+        </Button>
+      </HStack>
     </VStack>
   );
 }
+
+function ImportTreeRow({
+  row,
+  onResolveConflict,
+}: {
+  row: TreeRow;
+  onResolveConflict: (modelId: string, resolution: "keep_mine" | "take_source") => void;
+}) {
+  if (row.kind !== "item") {
+    return (
+      <>
+        <Icon color="secondary" icon={row.kind === "destination" ? "house" : row.icon} />
+        <div className="truncate flex-1">{row.label}</div>
+        {row.kind === "destination" && row.isNew && (
+          <ActionChip label="new" help="Created by this import" className="text-success" />
+        )}
+      </>
+    );
+  }
+
+  const { item } = row;
+  const label = actionLabel(item);
+  return (
+    <>
+      {item.model === "folder" || item.model === "environment" ? (
+        <Icon color="secondary" icon={item.model === "folder" ? "folder" : "variable"} />
+      ) : (
+        <span aria-hidden className="w-4" />
+      )}
+      <div className="truncate flex-1">{item.name}</div>
+      {item.action === "conflict" ? (
+        <div className="shrink-0">
+          <SegmentedControl
+            name={`conflict-${item.modelId}`}
+            label={`Resolve conflict for ${item.name}`}
+            hideLabel
+            size="2xs"
+            help={actionHelp(item)}
+            value={item.resolution ?? "keep_mine"}
+            onChange={(v) => onResolveConflict(item.modelId, v)}
+            options={[
+              { value: "keep_mine", label: "Keep mine" },
+              { value: "take_source", label: "Take source" },
+            ]}
+          />
+        </div>
+      ) : (
+        label != null && (
+          <ActionChip
+            label={label}
+            help={actionHelp(item)}
+            className={classNames(
+              item.action === "create" && "text-success",
+              item.action === "update" && "text-info",
+              item.action === "delete" && "text-danger",
+              item.action === "keep_local" && item.selected && "text-warning",
+              item.action === "ignored" && "text-text-subtlest",
+            )}
+          />
+        )
+      )}
+    </>
+  );
+}
+
+function ActionChip({
+  label,
+  help,
+  className,
+}: {
+  label: string;
+  help: string | null;
+  className?: string;
+}) {
+  return (
+    <InlineCode
+      className={classNames(
+        "py-0 bg-transparent w-32 shrink-0 whitespace-nowrap text-xs",
+        "inline-flex items-center justify-center gap-1.5",
+        className,
+      )}
+    >
+      {label}
+      {help != null && <IconTooltip content={help} iconSize="xs" />}
+    </InlineCode>
+  );
+}
+
+function actionLabel(item: ImportPlanItem): string | null {
+  switch (item.action) {
+    case "create":
+      return "new";
+    case "update":
+      return "updated";
+    case "delete":
+      return "removed";
+    case "keep_local":
+      return "edited";
+    case "ignored":
+      return "ignored";
+    default:
+      return null;
+  }
+}
+
+function actionHelp(item: ImportPlanItem): string | null {
+  const help = (text: string) =>
+    item.changedFields.length > 0
+      ? `${text} · ${item.changedFields.map(fieldLabel).join(", ")}`
+      : text;
+  switch (item.action) {
+    case "create":
+      return "Not in this workspace yet";
+    case "update":
+      return item.reason === "moved_into_ignored_folder"
+        ? "Moved into a folder that isn't imported. Importing that folder brings it along"
+        : help("Changed in the source since the last import");
+    case "delete":
+      return "Gone from the source since the last import. Checking it deletes it here";
+    case "keep_local":
+      return help("Changed here since the last import. Checking it reverts to the source");
+    case "conflict":
+      return help("Changed here and in the source since the last import");
+    case "ignored":
+      return "Not in this workspace. Imports leave it alone until you check it";
+    default:
+      return null;
+  }
+}
+
+function fieldLabel(field: string): string {
+  return field.replace(/([A-Z])/g, " $1").toLowerCase();
+}
+
+/** Every plan item above `item`, nearest first. */
+function ancestorsOf(item: ImportPlanItem, byId: Map<string, ImportPlanItem>): ImportPlanItem[] {
+  const ancestors: ImportPlanItem[] = [];
+  const seen = new Set<string>();
+  let parentId = item.parentId;
+  while (parentId != null && !seen.has(parentId)) {
+    seen.add(parentId);
+    const parent = byId.get(parentId);
+    if (parent == null) break;
+    ancestors.push(parent);
+    parentId = parent.parentId;
+  }
+  return ancestors;
+}
+
+/**
+ * A row of the preview tree. Most are plan items, but the destination workspace and the group the
+ * workspace's environments sit in are headings: they aggregate their children and decide nothing
+ * themselves.
+ */
+type TreeRow =
+  | { kind: "destination"; label: string; isNew: boolean }
+  | { kind: "group"; label: string; icon: IconProps["icon"] }
+  | { kind: "item"; item: ImportPlanItem };
+
+function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
+  const byId = new Map(items.map((i) => [i.modelId, i]));
+  const childrenOf = new Map<string, ImportPlanItem[]>();
+  const roots: ImportPlanItem[] = [];
+  for (const item of items) {
+    if (item.parentId != null && byId.has(item.parentId)) {
+      const siblings = childrenOf.get(item.parentId) ?? [];
+      siblings.push(item);
+      childrenOf.set(item.parentId, siblings);
+    } else {
+      roots.push(item);
+    }
+  }
+
+  const byKind = (list: ImportPlanItem[]) => [
+    ...list.filter((i) => i.model === "environment"),
+    ...list.filter((i) => i.model === "folder"),
+    ...list.filter((i) => i.model !== "environment" && i.model !== "folder"),
+  ];
+
+  const toNode = (item: ImportPlanItem, seen: Set<string>): CheckboxTreeNode<TreeRow> => ({
+    key: item.modelId,
+    data: { kind: "item", item },
+    children: seen.has(item.modelId)
+      ? []
+      : byKind(childrenOf.get(item.modelId) ?? []).map((c) =>
+          toNode(c, new Set([...seen, item.modelId])),
+        ),
+  });
+
+  // The workspace's environments have nothing to sit under — a sub-environment is a sibling of
+  // the base one, not its child — so a heading groups them into one thing to turn on and off.
+  const environments = roots.filter((i) => i.model === "environment");
+  const others = byKind(roots.filter((i) => i.model !== "environment"));
+  const nodes = others.map((r) => toNode(r, new Set()));
+  if (environments.length === 0) return nodes;
+  return [
+    {
+      key: "group:environments",
+      data: { kind: "group", label: "Variables", icon: "variable" },
+      children: environments.map((e) => toNode(e, new Set())),
+    },
+    ...nodes,
+  ];
+}
+
+function collectRows(node: CheckboxTreeNode<TreeRow>): TreeRow[] {
+  return [node.data, ...node.children.flatMap(collectRows)];
+}
+
+/** A folder that isn't there yet, so anything inside it needs it brought in first. */
+function isMissingFolder(item: ImportPlanItem): boolean {
+  return item.model === "folder" && (item.action === "create" || item.action === "ignored");
+}
+
+/**
+ * The plan item a row's checkbox decides, if it decides one. An unchanged resource has nothing to
+ * decide and a conflict is decided by its own control, so neither takes a checkbox — nor rides
+ * along with a parent's.
+ */
+function togglableItem(row: TreeRow): ImportPlanItem | null {
+  if (row.kind !== "item") return null;
+  const { item } = row;
+  return item.action === "unchanged" || item.action === "conflict" ? null : item;
+}
+
+function togglableItems(node: CheckboxTreeNode<TreeRow>): ImportPlanItem[] {
+  return collectRows(node)
+    .map(togglableItem)
+    .filter((i) => i != null);
+}
+
+function nodeCheckedStatus(node: CheckboxTreeNode<TreeRow>): boolean | "indeterminate" | "hidden" {
+  const covered = togglableItems(node);
+  if (covered.length === 0) return "hidden";
+  const selected = covered.filter((i) => i.selected).length;
+  if (selected === covered.length) return true;
+  if (selected === 0) return false;
+  return "indeterminate";
+}
+
+function PreviewRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-start justify-between gap-4 px-3 py-2 text-sm">
+      <span className="text-text-subtle">{label}</span>
+      <span className="text-right font-medium">{value}</span>
+    </div>
+  );
+}

apps/yaak-client/components/LargeValueDialog.tsx

@@ -0,0 +1,274 @@
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import { Banner, Button, HStack, LoadingIcon } from "@yaakapp-internal/ui";
+import type { ReactNode } from "react";
+import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import type { SniffedValue } from "./core/Editor/sniffValue";
+import { showDialog } from "../lib/dialog";
+import { decodeValue, largeValueActions } from "../lib/largeValue";
+import { Dropdown } from "./core/Dropdown";
+import { AudioViewer } from "./responseViewers/AudioViewer";
+import { ImageViewer } from "./responseViewers/ImageViewer";
+import { SvgViewer } from "./responseViewers/SvgViewer";
+import { VideoViewer } from "./responseViewers/VideoViewer";
+
+const PdfViewer = lazy(() =>
+  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
+);
+
+interface Props {
+  /** The whole value, exactly as it reads in the document */
+  text: string;
+  sniffed: SniffedValue | null;
+}
+
+/**
+ * Shows a value the editor collapsed, in whatever viewer its type calls for.
+ *
+ * The editor only ever read the value's head, so this is where it is decoded in full — on an
+ * explicit click, behind a spinner, rather than during layout.
+ */
+export function LargeValueDialog({ text, sniffed }: Props) {
+  const viewer = sniffed == null ? null : viewerFor(sniffed.mime);
+  const decoded = useDecoded(text, viewer == null ? null : sniffed);
+
+  // Nothing recognised it, so there is nothing to decode it into
+  if (sniffed == null || viewer == null) {
+    return (
+      <PagedText text={text}>
+        {sniffed != null && (
+          <Banner color="info" className="mb-3">
+            {sniffed.label} content cannot be previewed, so it is shown as it appears in the
+            response.
+          </Banner>
+        )}
+      </PagedText>
+    );
+  }
+
+  if (decoded == null) {
+    return (
+      <HStack className="h-full" alignItems="center" justifyContent="center">
+        <LoadingIcon />
+      </HStack>
+    );
+  }
+
+  if ("error" in decoded) {
+    return (
+      <PagedText text={text}>
+        <Banner color="danger" className="mb-3">
+          Failed to decode this {sniffed.label} value: {decoded.error}
+        </Banner>
+      </PagedText>
+    );
+  }
+
+  const { bytes } = decoded;
+
+  switch (viewer) {
+    case "svg":
+      return <DecodedSvg bytes={bytes} />;
+    case "image":
+      return (
+        <div className="h-full overflow-auto flex items-center justify-center">
+          <ImageViewer data={toArrayBuffer(bytes)} mimeType={sniffed.mime} />
+        </div>
+      );
+    case "audio":
+      return <AudioViewer data={bytes} mimeType={sniffed.mime} />;
+    case "video":
+      return <VideoViewer data={bytes} mimeType={sniffed.mime} />;
+    case "pdf":
+      return (
+        <Suspense fallback={<LoadingIcon />}>
+          <PdfViewer data={bytes} />
+        </Suspense>
+      );
+    case "text":
+      return <DecodedText bytes={bytes} />;
+  }
+}
+
+/**
+ * Decoding megabytes is worth doing once, not on every render — and the viewers below key their
+ * blob URLs off the string, so a fresh one each time would rebuild them for nothing.
+ */
+function DecodedSvg({ bytes }: { bytes: Uint8Array }) {
+  const text = useMemo(() => new TextDecoder().decode(bytes), [bytes]);
+  return <SvgViewer text={text} />;
+}
+
+function DecodedText({ bytes }: { bytes: Uint8Array }) {
+  const text = useMemo(() => new TextDecoder().decode(bytes), [bytes]);
+  return <PagedText text={text} />;
+}
+
+/**
+ * The same menu the tag in the editor carries, minus the one entry that would only reopen this.
+ *
+ * It lives in the dialog's title rather than above the content, which would cost a band of
+ * whitespace the width of the dialog to hold one small button.
+ */
+function LargeValueActions({ text, sniffed }: Props) {
+  const items = useMemo(
+    () =>
+      largeValueActions({
+        value: () => text,
+        sniffed,
+        // The tag copies only what it hides; in here, what you see is the whole value
+        copyText: () => text,
+      }),
+    [text, sniffed],
+  );
+
+  return (
+    <Dropdown items={items}>
+      <Button size="xs" variant="border" forDropdown>
+        Actions
+      </Button>
+    </Dropdown>
+  );
+}
+
+type Viewer = "image" | "svg" | "audio" | "video" | "pdf" | "text";
+
+/** Which viewer a media type calls for, or null if none of them can show it. */
+function viewerFor(mime: string): Viewer | null {
+  if (mime.startsWith("image/svg")) return "svg";
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("audio/")) return "audio";
+  if (mime.startsWith("video/")) return "video";
+  if (mime === "application/pdf") return "pdf";
+  if (mime.startsWith("text/") || /\b(json|xml|javascript|csv)\b/.test(mime)) return "text";
+  return null;
+}
+
+type Decoded = { bytes: Uint8Array } | { error: string };
+
+/**
+ * The value's bytes, once they exist.
+ *
+ * Decoding a few megabytes takes long enough to be seen, so it happens in an effect rather than
+ * during render — the dialog paints with a spinner first, instead of opening late.
+ */
+function useDecoded(text: string, sniffed: SniffedValue | null): Decoded | null {
+  const [decoded, setDecoded] = useState<Decoded | null>(null);
+
+  useEffect(() => {
+    if (sniffed == null) return;
+
+    setDecoded(null);
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      let result: Decoded;
+      try {
+        result = { bytes: decodeValue(text, sniffed) };
+      } catch (err) {
+        result = { error: err instanceof Error ? err.message : String(err) };
+      }
+      if (!cancelled) setDecoded(result);
+    });
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [text, sniffed]);
+
+  return decoded;
+}
+
+/** A copy, since a `Uint8Array` may be a view onto a larger buffer */
+function toArrayBuffer(bytes: Uint8Array): ArrayBuffer {
+  return bytes.slice().buffer;
+}
+
+/** Characters shown at once. A page this size lays out instantly once its lines are short. */
+const PAGE_CHARS = 50_000;
+
+/** Where a line is broken. The long-line cost this whole feature avoids is per line. */
+const WRAP_CHARS = 120;
+
+/**
+ * The raw text, in pages of short lines.
+ *
+ * What is left when nothing can render the value. Handing it to an editor whole would walk
+ * straight back into the layout stall that collapsed it in the first place, so it is paged and
+ * hard-wrapped instead: no line is ever long, and no page is ever big.
+ */
+function PagedText({ text, children }: { text: string; children?: ReactNode }) {
+  const [page, setPage] = useState(0);
+  const pages = Math.max(1, Math.ceil(text.length / PAGE_CHARS));
+  const from = page * PAGE_CHARS;
+  const to = Math.min(from + PAGE_CHARS, text.length);
+  const body = useMemo(() => wrap(text.slice(from, to)), [text, from, to]);
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)_auto] gap-3">
+      <div>{children}</div>
+      <pre className="overflow-auto font-mono text-sm text-text-subtle select-text">{body}</pre>
+      <HStack space={2} alignItems="center" className="text-sm text-text-subtle">
+        <span>
+          {(to - from).toLocaleString()} of {text.length.toLocaleString()} characters
+        </span>
+        {pages > 1 && (
+          <HStack space={2} alignItems="center" className="ml-auto">
+            <Button
+              size="xs"
+              variant="border"
+              disabled={page === 0}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              Previous
+            </Button>
+            <span>
+              Page {page + 1} of {pages.toLocaleString()}
+            </span>
+            <Button
+              size="xs"
+              variant="border"
+              disabled={page >= pages - 1}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              Next
+            </Button>
+          </HStack>
+        )}
+      </HStack>
+    </div>
+  );
+}
+
+/** Breaks every line at {@link WRAP_CHARS}, leaving the ones already shorter alone. */
+function wrap(text: string): string {
+  const lines: string[] = [];
+  for (const line of text.split("\n")) {
+    if (line.length <= WRAP_CHARS) {
+      lines.push(line);
+      continue;
+    }
+    for (let i = 0; i < line.length; i += WRAP_CHARS) {
+      lines.push(line.slice(i, i + WRAP_CHARS));
+    }
+  }
+  return lines.join("\n");
+}
+
+export function showLargeValueDialog({ text, sniffed }: Props) {
+  showDialog({
+    id: "large-value",
+    size: "lg",
+    className: "h-[calc(100vh-10rem)]",
+    // Everything in one line: the same words the tag uses, and the same menu it carries. A
+    // separate description and a row of its own for the button cost three bands to say this.
+    title: (
+      <HStack space={3} alignItems="center">
+        <span>
+          {sniffed == null ? "Hidden Value" : sniffed.label} · {formatSize(text.length)}
+        </span>
+        <LargeValueActions text={text} sniffed={sniffed} />
+      </HStack>
+    ),
+    render: () => <LargeValueDialog text={text} sniffed={sniffed} />,
+  });
+}

apps/yaak-client/components/LicenseBadge.tsx

@@ -1,4 +1,3 @@
-import { openUrl } from "@tauri-apps/plugin-opener";
 import type { LicenseCheckStatus } from "@yaakapp-internal/license";
 import { useLicense } from "@yaakapp-internal/license";
 import { settingsAtom } from "@yaakapp-internal/models";
@@ -14,6 +13,7 @@ import type { ButtonProps } from "./core/Button";
 import { Dropdown, type DropdownItem } from "./core/Dropdown";
 import { Icon } from "@yaakapp-internal/ui";
 import { PillButton } from "./core/PillButton";
+import { platform } from "@yaakapp-internal/platform";
 
 const dismissedAtom = atomWithKVStorage<string | null>("dismissed_license_expired", null);
 
@@ -52,7 +52,7 @@ function getDetail(
             leftSlot: <Icon icon="gift" />,
             rightSlot: <Icon icon="external_link" size="sm" className="opacity-disabled" />,
             hidden: data.data.changes === 0 || data.data.changesUrl == null,
-            onSelect: () => openUrl(data.data.changesUrl ?? ""),
+            onSelect: () => platform.openUrl(data.data.changesUrl ?? ""),
           },
           {
             type: "separator",
@@ -63,7 +63,7 @@ function getDetail(
             leftSlot: <Icon icon="refresh" />,
             rightSlot: <Icon icon="external_link" size="sm" className="opacity-disabled" />,
             hidden: data.data.changesUrl == null,
-            onSelect: () => openUrl(data.data.billingUrl),
+            onSelect: () => platform.openUrl(data.data.billingUrl),
           },
           {
             label: "Enter License Key",

apps/yaak-client/components/LocalImage.tsx

@@ -1,7 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
-import { convertFileSrc } from "@tauri-apps/api/core";
-import { resolveResource } from "@tauri-apps/api/path";
 import classNames from "classnames";
+import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
   src: string;
@@ -12,8 +11,8 @@ export function LocalImage({ src: srcPath, className }: Props) {
   const src = useQuery({
     queryKey: ["local-image", srcPath],
     queryFn: async () => {
-      const p = await resolveResource(srcPath);
-      return convertFileSrc(p);
+      const p = await platform.files.resolveResource(srcPath);
+      return platform.files.url(p);
     },
   });
 

apps/yaak-client/components/ModelSettingsEditor.tsx

@@ -2,7 +2,9 @@ import type {
   Folder,
   GrpcRequest,
   HttpRequest,
+  HttpVersion,
   InheritedBoolSetting,
+  InheritedHttpVersionSetting,
   InheritedIntSetting,
   WebsocketRequest,
   Workspace,
@@ -13,6 +15,7 @@ import {
   modelSupportsSetting,
   type RequestSettingDefinition,
   SETTING_FOLLOW_REDIRECTS,
+  SETTING_HTTP_VERSION,
   SETTING_REQUEST_MESSAGE_SIZE,
   SETTING_REQUEST_TIMEOUT,
   SETTING_SEND_COOKIES,
@@ -21,6 +24,7 @@ import {
 } from "../lib/requestSettings";
 import { Checkbox } from "./core/Checkbox";
 import { PlainInput } from "./core/PlainInput";
+import { Select } from "./core/Select";
 import {
   SettingOverrideRow,
   SettingRow,
@@ -38,37 +42,21 @@ interface Props {
   model: ModelWithSettings;
 }
 
-type ModelWithSettings =
-  | Workspace
-  | Folder
-  | HttpRequest
-  | WebsocketRequest
-  | GrpcRequest;
+type ModelWithSettings = Workspace | Folder | HttpRequest | WebsocketRequest | GrpcRequest;
 type ModelWithHttpSettings = Workspace | Folder | HttpRequest;
-type ModelWithTlsSettings =
-  | Workspace
-  | Folder
-  | HttpRequest
-  | WebsocketRequest
-  | GrpcRequest;
-type ModelWithCookieSettings =
-  | Workspace
-  | Folder
-  | HttpRequest
-  | WebsocketRequest;
-type ModelWithMessageSizeSettings =
-  | Workspace
-  | Folder
-  | WebsocketRequest
-  | GrpcRequest;
+type ModelWithTlsSettings = Workspace | Folder | HttpRequest | WebsocketRequest | GrpcRequest;
+type ModelWithCookieSettings = Workspace | Folder | HttpRequest | WebsocketRequest;
+type ModelWithMessageSizeSettings = Workspace | Folder | WebsocketRequest | GrpcRequest;
 type BooleanSetting = boolean | InheritedBoolSetting;
 type IntegerSetting = number | InheritedIntSetting;
+type HttpVersionSetting = HttpVersion | InheritedHttpVersionSetting;
 type CookieSettingsPatch = {
   settingSendCookies?: ModelWithCookieSettings["settingSendCookies"];
   settingStoreCookies?: ModelWithCookieSettings["settingStoreCookies"];
 };
 type HttpSettingsPatch = {
   settingFollowRedirects?: ModelWithHttpSettings["settingFollowRedirects"];
+  settingHttpVersion?: ModelWithHttpSettings["settingHttpVersion"];
   settingRequestTimeout?: ModelWithHttpSettings["settingRequestTimeout"];
 };
 type TlsSettingsPatch = {
@@ -78,10 +66,7 @@ type MessageSizeSettingsPatch = {
   settingRequestMessageSize?: ModelWithMessageSizeSettings["settingRequestMessageSize"];
 };
 
-export function ModelSettingsEditor({
-  model,
-  showSectionTitles = false,
-}: Props) {
+export function ModelSettingsEditor({ model, showSectionTitles = false }: Props) {
   const ancestors = useModelAncestors(model);
   const supportsHttpSettings = modelSupportsHttpSettings(model);
   const supportsCookieSettings = modelSupportsCookieSettings(model);
@@ -154,12 +139,26 @@ export function ModelSettingsEditor({
               }
             />
           )}
+          {supportsHttpSettings && (
+            <HttpVersionSettingRow
+              settingDefinition={SETTING_HTTP_VERSION}
+              setting={model.settingHttpVersion}
+              inheritedValue={resolveInheritedValue(
+                ancestors,
+                SETTING_HTTP_VERSION.modelKey,
+                model.settingHttpVersion,
+              )}
+              onChange={(settingHttpVersion) =>
+                patchHttpSettings(model, {
+                  settingHttpVersion,
+                })
+              }
+            />
+          )}
         </SettingsSection>
       )}
       {supportsCookieSettings && (
-        <SettingsSection
-          title={supportsTlsSettings || showSectionTitles ? "Cookies" : null}
-        >
+        <SettingsSection title={supportsTlsSettings || showSectionTitles ? "Cookies" : null}>
           <BooleanSettingRow
             settingDefinition={SETTING_SEND_COOKIES}
             setting={model.settingSendCookies}
@@ -195,7 +194,7 @@ export function ModelSettingsEditor({
 }
 
 export function countOverriddenSettings(model: ModelWithSettings) {
-  const settings: (BooleanSetting | IntegerSetting)[] = [];
+  const settings: (BooleanSetting | IntegerSetting | HttpVersionSetting)[] = [];
 
   if (modelSupportsCookieSettings(model)) {
     settings.push(model.settingSendCookies, model.settingStoreCookies);
@@ -204,22 +203,22 @@ export function countOverriddenSettings(model: ModelWithSettings) {
   settings.push(model.settingValidateCertificates);
 
   if (modelSupportsHttpSettings(model)) {
-    settings.push(model.settingFollowRedirects, model.settingRequestTimeout);
+    settings.push(
+      model.settingFollowRedirects,
+      model.settingRequestTimeout,
+      model.settingHttpVersion,
+    );
   }
 
   if (modelSupportsMessageSizeSettings(model)) {
     settings.push(model.settingRequestMessageSize);
   }
 
-  return settings.filter(
-    (setting) => isInheritedSetting(setting) && setting.enabled === true,
-  ).length;
+  return settings.filter((setting) => isInheritedSetting(setting) && setting.enabled === true)
+    .length;
 }
 
-function patchCookieSettings(
-  model: ModelWithCookieSettings,
-  patch: Partial<CookieSettingsPatch>,
-) {
+function patchCookieSettings(model: ModelWithCookieSettings, patch: Partial<CookieSettingsPatch>) {
   switch (model.model) {
     case "workspace":
       return patchModel(model, patch as Partial<Workspace>);
@@ -232,10 +231,7 @@ function patchCookieSettings(
   }
 }
 
-function patchHttpSettings(
-  model: ModelWithHttpSettings,
-  patch: Partial<HttpSettingsPatch>,
-) {
+function patchHttpSettings(model: ModelWithHttpSettings, patch: Partial<HttpSettingsPatch>) {
   switch (model.model) {
     case "workspace":
       return patchModel(model, patch as Partial<Workspace>);
@@ -246,10 +242,7 @@ function patchHttpSettings(
   }
 }
 
-function patchTlsSettings(
-  model: ModelWithTlsSettings,
-  patch: Partial<TlsSettingsPatch>,
-) {
+function patchTlsSettings(model: ModelWithTlsSettings, patch: Partial<TlsSettingsPatch>) {
   switch (model.model) {
     case "workspace":
       return patchModel(model, patch as Partial<Workspace>);
@@ -280,21 +273,15 @@ function patchMessageSizeSettings(
   }
 }
 
-function modelSupportsHttpSettings(
-  model: ModelWithSettings,
-): model is ModelWithHttpSettings {
+function modelSupportsHttpSettings(model: ModelWithSettings): model is ModelWithHttpSettings {
   return modelSupportsSetting(model, SETTING_REQUEST_TIMEOUT);
 }
 
-function modelSupportsCookieSettings(
-  model: ModelWithSettings,
-): model is ModelWithCookieSettings {
+function modelSupportsCookieSettings(model: ModelWithSettings): model is ModelWithCookieSettings {
   return modelSupportsSetting(model, SETTING_SEND_COOKIES);
 }
 
-function modelSupportsTlsSettings(
-  model: ModelWithSettings,
-): model is ModelWithTlsSettings {
+function modelSupportsTlsSettings(model: ModelWithSettings): model is ModelWithTlsSettings {
   return modelSupportsSetting(model, SETTING_VALIDATE_CERTIFICATES);
 }
 
@@ -317,11 +304,7 @@ function BooleanSettingRow({
 }) {
   const inherited = isInheritedSetting(setting);
   const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited
-    ? overridden
-      ? setting.value
-      : inheritedValue
-    : setting;
+  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
 
   if (!inherited) {
     return (
@@ -352,6 +335,63 @@ function BooleanSettingRow({
   );
 }
 
+const HTTP_VERSION_OPTIONS: { label: string; value: HttpVersion }[] = [
+  { label: "Automatic", value: "auto" },
+  { label: "HTTP/1.1", value: "http1" },
+  { label: "HTTP/2", value: "http2" },
+];
+
+function HttpVersionSettingRow({
+  inheritedValue,
+  setting,
+  settingDefinition,
+  onChange,
+}: {
+  inheritedValue: HttpVersion;
+  setting: HttpVersionSetting;
+  settingDefinition: RequestSettingDefinition<"settingHttpVersion">;
+  onChange: (setting: HttpVersionSetting) => void;
+}) {
+  const inherited = isInheritedSetting(setting);
+  const overridden = inherited ? setting.enabled === true : false;
+  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+
+  if (!inherited) {
+    return (
+      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
+        <Select
+          hideLabel
+          name={settingDefinition.modelKey}
+          label={settingDefinition.title}
+          size="sm"
+          value={value}
+          options={HTTP_VERSION_OPTIONS}
+          onChange={(value) => onChange(value)}
+        />
+      </SettingRow>
+    );
+  }
+
+  return (
+    <SettingOverrideRow
+      title={settingDefinition.title}
+      description={settingDefinition.description}
+      overridden={overridden}
+      onResetOverride={() => onChange({ ...setting, enabled: false })}
+    >
+      <Select
+        hideLabel
+        name={settingDefinition.modelKey}
+        label={settingDefinition.title}
+        size="sm"
+        value={value}
+        options={HTTP_VERSION_OPTIONS}
+        onChange={(value) => onChange({ ...setting, enabled: true, value })}
+      />
+    </SettingOverrideRow>
+  );
+}
+
 function IntegerSettingRow({
   inheritedValue,
   setting,
@@ -365,18 +405,11 @@ function IntegerSettingRow({
 }) {
   const inherited = isInheritedSetting(setting);
   const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited
-    ? overridden
-      ? setting.value
-      : inheritedValue
-    : setting;
+  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
 
   if (!inherited) {
     return (
-      <SettingRow
-        title={settingDefinition.title}
-        description={settingDefinition.description}
-      >
+      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
         <NumberUnitInput
           name={settingDefinition.modelKey}
           label={settingDefinition.title}
@@ -429,20 +462,13 @@ function MessageSizeSettingRow({
 }) {
   const inherited = isInheritedSetting(setting);
   const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited
-    ? overridden
-      ? setting.value
-      : inheritedValue
-    : setting;
+  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
   const displayValue = formatMegabytes(value);
   const placeholder = "0";
 
   if (!inherited) {
     return (
-      <SettingRow
-        title={settingDefinition.title}
-        description={settingDefinition.description}
-      >
+      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
         <MessageSizeInput
           name={settingDefinition.modelKey}
           label={settingDefinition.title}
@@ -567,13 +593,18 @@ function resolveInheritedValue(
   key: BooleanWorkspaceSettingKey,
   fallback: BooleanSetting,
 ): boolean;
+function resolveInheritedValue(
+  ancestors: (Folder | Workspace)[],
+  key: "settingHttpVersion",
+  fallback: HttpVersionSetting,
+): HttpVersion;
 function resolveInheritedValue(
   ancestors: (Folder | Workspace)[],
   key: keyof WorkspaceSettings,
-  fallback: BooleanSetting | IntegerSetting,
+  fallback: BooleanSetting | IntegerSetting | HttpVersionSetting,
 ) {
   for (const ancestor of ancestors) {
-    const setting = ancestor[key] as BooleanSetting | IntegerSetting;
+    const setting = ancestor[key] as BooleanSetting | IntegerSetting | HttpVersionSetting;
     if (isInheritedSetting(setting)) {
       if (setting.enabled === true) {
         return setting.value;
@@ -589,6 +620,7 @@ function resolveInheritedValue(
 type WorkspaceSettings = Pick<
   Workspace,
   | "settingFollowRedirects"
+  | "settingHttpVersion"
   | "settingRequestMessageSize"
   | "settingRequestTimeout"
   | "settingSendCookies"
@@ -598,14 +630,12 @@ type WorkspaceSettings = Pick<
 
 type BooleanWorkspaceSettingKey = Exclude<
   keyof WorkspaceSettings,
-  "settingRequestTimeout" | "settingRequestMessageSize"
+  "settingRequestTimeout" | "settingRequestMessageSize" | "settingHttpVersion"
 >;
 
 function formatMegabytes(bytes: number) {
   const megabytes = bytes / BYTES_PER_MB;
-  return Number.isInteger(megabytes)
-    ? `${megabytes}`
-    : megabytes.toFixed(3).replace(/\.?0+$/, "");
+  return Number.isInteger(megabytes) ? `${megabytes}` : megabytes.toFixed(3).replace(/\.?0+$/, "");
 }
 
 function parseMegabytes(value: string) {
@@ -626,9 +656,5 @@ function isValidInteger(value: string) {
 function isValidMegabytes(value: string) {
   if (value === "") return true;
   const megabytes = Number(value);
-  return (
-    Number.isFinite(megabytes) &&
-    megabytes >= 0 &&
-    megabytes <= MAX_MESSAGE_SIZE_MB
-  );
+  return Number.isFinite(megabytes) && megabytes >= 0 && megabytes <= MAX_MESSAGE_SIZE_MB;
 }

apps/yaak-client/components/Onboarding.tsx

@@ -0,0 +1,212 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import { platform } from "@yaakapp-internal/platform";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { HeaderSize, Heading, Icon, type IconProps, LoadingIcon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
+import { showDialog } from "../lib/dialog";
+import { importData } from "../lib/importData";
+import {
+  createExampleWorkspace,
+  createFreshWorkspace,
+  type OnboardingChoice,
+  recordOnboardingChoice,
+} from "../lib/onboarding";
+import { showErrorToast } from "../lib/toast";
+import { CloneGitRepositoryDialog } from "./CloneGitRepositoryDialog";
+import { Button } from "./core/Button";
+
+/** Shown instead of a workspace when there are none. */
+export function Onboarding() {
+  const settings = useAtomValue(settingsAtom);
+  const { capabilities } = platform;
+  const canImport = capabilities.plugins;
+  const showAlreadyUsing = capabilities.localFiles || capabilities.git || canImport;
+  const [busy, setBusy] = useState<OnboardingChoice | null>(null);
+
+  const choose = (choice: OnboardingChoice, run: () => Promise<void> | void) => async () => {
+    recordOnboardingChoice(choice);
+    setBusy(choice);
+    try {
+      await run();
+    } catch (err) {
+      showErrorToast({
+        id: "onboarding-failed",
+        title: "Something went wrong",
+        message: String(err),
+      });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full w-full">
+      <HeaderSize
+        data-tauri-drag-region
+        size="lg"
+        className="x-theme-appHeader bg-surface"
+        osType={platform.osType()}
+        hideWindowControls={settings.hideWindowControls}
+        useNativeTitlebar={settings.useNativeTitlebar}
+        interfaceScale={settings.interfaceScale}
+      />
+      <div className="overflow-auto px-6 py-10 grid">
+        <div className="m-auto w-full max-w-lg flex flex-col gap-7">
+          <div className="flex flex-col gap-1.5">
+            <Heading>How would you like to get started?</Heading>
+            <p className="text-text-subtle">
+              {canImport
+                ? "Bring over existing work, try a real API, or start fresh."
+                : "Try a real API, or start fresh."}
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            {canImport && (
+              <StartOption
+                color="primary"
+                icon="folder_input"
+                title="Migrate from another tool"
+                description="Postman, Insomnia, OpenAPI, or curl"
+                busy={busy === "import"}
+                disabled={busy != null}
+                onClick={choose("import", () => importData.mutateAsync())}
+              />
+            )}
+            <StartOption
+              color="info"
+              icon="flask"
+              title="Try Yaak with a real API"
+              description="Ready-made requests you can send right away"
+              busy={busy === "example"}
+              disabled={busy != null}
+              onClick={choose("example", createExampleWorkspace)}
+            />
+            <StartOption
+              color="success"
+              icon="plus"
+              title="Start fresh"
+              description="An empty workspace for your first request"
+              busy={busy === "fresh"}
+              disabled={busy != null}
+              onClick={choose("fresh", createFreshWorkspace)}
+            />
+          </div>
+
+          {showAlreadyUsing && (
+            <div className="pt-5 border-t border-dashed border-border-subtle flex flex-col items-start gap-2.5">
+              <span className="text-sm text-text-subtle">Already using Yaak?</span>
+              <div className="flex flex-wrap gap-2">
+                {capabilities.localFiles && (
+                  <Button
+                    size="xs"
+                    variant="border"
+                    color="secondary"
+                    leftSlot={<Icon icon="folder_open" size="sm" />}
+                    disabled={busy != null}
+                    onClick={choose("open_folder", async () => {
+                      const dir = await platform.dialog.open({
+                        title: "Select Workspace Directory",
+                        directory: true,
+                        multiple: false,
+                      });
+                      if (dir == null) return;
+                      await openWorkspaceFromSyncDir.mutateAsync(dir);
+                    })}
+                  >
+                    Open folder
+                  </Button>
+                )}
+                {capabilities.git && (
+                  <Button
+                    size="xs"
+                    variant="border"
+                    color="secondary"
+                    leftSlot={<Icon icon="git_branch" size="sm" />}
+                    disabled={busy != null}
+                    onClick={choose("clone_git", () => {
+                      showDialog({
+                        id: "clone-git-repository",
+                        size: "md",
+                        title: "Clone Git Repository",
+                        render: ({ hide }) => <CloneGitRepositoryDialog hide={hide} />,
+                      });
+                    })}
+                  >
+                    Clone repository
+                  </Button>
+                )}
+                {canImport && (
+                  <Button
+                    size="xs"
+                    variant="border"
+                    color="secondary"
+                    leftSlot={<Icon icon="import" size="sm" />}
+                    disabled={busy != null}
+                    onClick={choose("import_yaak", () => importData.mutateAsync())}
+                  >
+                    Import
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StartOption({
+  color,
+  icon,
+  title,
+  description,
+  onClick,
+  busy,
+  disabled,
+}: {
+  color: Color;
+  icon: IconProps["icon"];
+  title: string;
+  description: string;
+  onClick: () => void;
+  busy: boolean;
+  disabled: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={classNames(
+        "group w-full text-left rounded-lg px-3 py-2.5 border border-border-subtle",
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3.5",
+        "enabled:hocus:bg-surface-highlight/50 enabled:hocus:border-border",
+        "outline-border-focus focus-visible:outline-2",
+        disabled && !busy && "opacity-disabled",
+      )}
+    >
+      {/* The banner theme tints this tile from the theme's own color for each option */}
+      <div
+        className={classNames(
+          `x-theme-banner--${color}`,
+          "size-10 rounded-md bg-surface-highlight grid place-items-center",
+        )}
+      >
+        {busy ? <LoadingIcon size="sm" /> : <Icon icon={icon} color={color} size="md" />}
+      </div>
+      <div className="min-w-0">
+        <div className="font-semibold text-text">{title}</div>
+        <div className="text-sm text-text-subtle">{description}</div>
+      </div>
+      <Icon
+        icon="chevron_right"
+        className="text-text-subtlest group-enabled:group-hover:text-text-subtle group-enabled:group-focus-visible:text-text-subtle"
+      />
+    </button>
+  );
+}

apps/yaak-client/components/RedirectToLatestWorkspace.tsx

@@ -7,6 +7,7 @@ import { getRecentRequests } from "../hooks/useRecentRequests";
 import { useRecentWorkspaces } from "../hooks/useRecentWorkspaces";
 import { fireAndForget } from "../lib/fireAndForget";
 import { router } from "../lib/router";
+import { Onboarding } from "./Onboarding";
 
 export function RedirectToLatestWorkspace() {
   const workspaces = useAtomValue(workspacesAtom);
@@ -14,10 +15,6 @@ export function RedirectToLatestWorkspace() {
 
   useEffect(() => {
     if (workspaces.length === 0 || recentWorkspaces == null) {
-      console.log("No workspaces found to redirect to. Skipping.", {
-        workspaces,
-        recentWorkspaces,
-      });
       return;
     }
 
@@ -34,11 +31,21 @@ export function RedirectToLatestWorkspace() {
           request_id: requestId,
         };
 
+        // Whatever created the first workspace may have already navigated into it
+        const currentId = router.history.location.pathname.match(/^\/workspaces\/([^/]+)/)?.[1];
+        if (workspaces.some((w) => w.id === currentId)) return;
+
         console.log("Redirecting to workspace", params, search);
         await router.navigate({ to: "/workspaces/$workspaceId", params, search });
       })(),
     );
   }, [recentWorkspaces, workspaces, workspaces.length]);
 
+  // The global models are loaded before the router mounts, so an empty list is a real
+  // first launch (or the last workspace was just deleted), not a store still loading
+  if (workspaces.length === 0) {
+    return <Onboarding />;
+  }
+
   return null;
 }

apps/yaak-client/components/ResponseHeaders.tsx

@@ -1,4 +1,3 @@
-import { openUrl } from "@tauri-apps/plugin-opener";
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { format, formatDistanceToNowStrict } from "date-fns";
 import { useMemo } from "react";
@@ -6,6 +5,7 @@ import { CountBadge } from "./core/CountBadge";
 import { DetailsBanner } from "./core/DetailsBanner";
 import { IconButton } from "./core/IconButton";
 import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
   response: HttpResponse;
@@ -45,7 +45,7 @@ export function ResponseHeaders({ response }: Props) {
                 iconSize="sm"
                 className="inline-block w-auto h-auto! opacity-50 hover:opacity-100"
                 icon="external_link"
-                onClick={() => openUrl(response.url)}
+                onClick={() => platform.openUrl(response.url)}
                 title="Open in browser"
               />
             </div>

apps/yaak-client/components/ResponseInfo.tsx

@@ -1,7 +1,7 @@
-import { openUrl } from "@tauri-apps/plugin-opener";
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { IconButton } from "./core/IconButton";
 import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
   response: HttpResponse;
@@ -26,7 +26,7 @@ export function ResponseInfo({ response }: Props) {
                 iconSize="sm"
                 className="inline-block w-auto ml-1 h-auto! opacity-50 hover:opacity-100"
                 icon="external_link"
-                onClick={() => openUrl(response.url)}
+                onClick={() => platform.openUrl(response.url)}
                 title="Open in browser"
               />
             </div>

apps/yaak-client/components/SelectFile.tsx

@@ -1,5 +1,4 @@
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { open } from "@tauri-apps/plugin-dialog";
+import { platform } from "@yaakapp-internal/platform";
 import { HStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import mime from "mime";
@@ -41,7 +40,7 @@ export function SelectFile({
   ...props
 }: Props) {
   const handleClick = async () => {
-    const filePath = await open({
+    const filePath = await platform.dialog.open({
       title: directory ? "Select Folder" : "Select File",
       multiple: false,
       directory,
@@ -64,32 +63,21 @@ export function SelectFile({
   // NOTE: This doesn't work for Windows since native drag-n-drop can't work at the same tmie
   //  as browser drag-n-drop.
   useEffect(() => {
-    let unlisten: (() => void) | undefined;
-    const setup = async () => {
-      const webview = getCurrentWebviewWindow();
-      unlisten = await webview.onDragDropEvent((event) => {
-        if (event.payload.type === "over") {
-          const p = event.payload.position;
-          const r = ref.current?.getBoundingClientRect();
-          if (r == null) return;
-          const isOver = p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
-          console.log("IS OVER", isOver);
-          setIsHovering(isOver);
-        } else if (event.payload.type === "drop" && isHovering) {
-          console.log("User dropped", event.payload.paths);
-          const p = event.payload.paths[0];
-          if (p) onChange({ filePath: p, contentType: null });
-          setIsHovering(false);
-        } else {
-          console.log("File drop cancelled");
-          setIsHovering(false);
-        }
-      });
-    };
-    setup().catch(console.error);
-    return () => {
-      if (unlisten) unlisten();
-    };
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "over") {
+        const p = event.position;
+        const r = ref.current?.getBoundingClientRect();
+        if (r == null) return;
+        const isOver = p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
+        setIsHovering(isOver);
+      } else if (event.type === "drop" && isHovering) {
+        const p = event.paths[0];
+        if (p) onChange({ filePath: p, contentType: null });
+        setIsHovering(false);
+      } else {
+        setIsHovering(false);
+      }
+    });
   }, [isHovering, onChange]);
 
   const filePathWithNameOverride = nameOverride ? `${filePath} (${nameOverride})` : filePath;

apps/yaak-client/components/Settings/Settings.tsx

@@ -1,6 +1,4 @@
-import { useSearch } from "@tanstack/react-router";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { type } from "@tauri-apps/plugin-os";
+import { platform } from "@yaakapp-internal/platform";
 import { useLicense } from "@yaakapp-internal/license";
 import { pluginsAtom, settingsAtom } from "@yaakapp-internal/models";
 import { HeaderSize, HStack, Icon } from "@yaakapp-internal/ui";
@@ -21,6 +19,8 @@ import { SettingsProxy } from "./SettingsProxy";
 import { SettingsTheme } from "./SettingsTheme";
 
 interface Props {
+  tab?: SettingsTabWithSubtab | null;
+  /** Set when Settings is in a dialog rather than owning a window. */
   hide?: () => void;
 }
 
@@ -43,25 +43,19 @@ const tabs = [
   TAB_LICENSE,
 ] as const;
 export type SettingsTab = (typeof tabs)[number];
+export type SettingsTabWithSubtab = SettingsTab | `${SettingsTab}:${string}`;
 
-export default function Settings({ hide }: Props) {
-  const { tab: tabFromQuery } = useSearch({ from: "/workspaces/$workspaceId/settings" });
+export default function Settings({ tab, hide }: Props) {
   // Parse tab and subtab (e.g., "plugins:installed")
-  const [mainTab, subtab] = tabFromQuery?.split(":") ?? [];
+  const [mainTab, subtab] = tab?.split(":") ?? [];
   const settings = useAtomValue(settingsAtom);
   const plugins = useAtomValue(pluginsAtom);
   const licenseCheck = useLicense();
 
-  // Close settings window on escape
+  // Close settings window on escape. In a dialog, the dialog handles Escape itself.
   // TODO: Could this be put in a better place? Eg. in Rust key listener when creating the window
   useKeyPressEvent("Escape", async () => {
-    if (hide != null) {
-      // It's being shown in a dialog, so close the dialog
-      hide();
-    } else {
-      // It's being shown in a window, so close the window
-      await getCurrentWebviewWindow().close();
-    }
+    if (hide == null) await platform.window.close();
   });
 
   return (
@@ -75,7 +69,7 @@ export default function Settings({ hide }: Props) {
           onlyXWindowControl
           size="md"
           className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
-          osType={type()}
+          osType={platform.osType()}
           hideWindowControls={settings.hideWindowControls}
           useNativeTitlebar={settings.useNativeTitlebar}
           interfaceScale={settings.interfaceScale}
@@ -85,13 +79,13 @@ export default function Settings({ hide }: Props) {
             justifyContent="center"
             className="w-full h-full grid grid-cols-[1fr_auto] pointer-events-none"
           >
-            <div className={classNames(type() === "macos" ? "text-center" : "pl-2")}>Settings</div>
+            <div className={classNames(platform.osType() === "macos" ? "text-center" : "pl-2")}>Settings</div>
           </HStack>
         </HeaderSize>
       )}
       <Tabs
         layout="horizontal"
-        defaultValue={mainTab || tabFromQuery}
+        defaultValue={mainTab}
         addBorders
         tabListClassName="min-w-40 bg-surface x-theme-sidebar border-r border-border pl-3"
         label="Settings"

apps/yaak-client/components/Settings/SettingsGeneral.tsx

@@ -1,4 +1,3 @@
-import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
 import { Heading, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
@@ -9,6 +8,7 @@ import { CargoFeature } from "../CargoFeature";
 import { CommercialUseBanner } from "../CommercialUseBanner";
 import { DismissibleBanner } from "../core/DismissibleBanner";
 import { IconButton } from "../core/IconButton";
+import { platform } from "@yaakapp-internal/platform";
 import {
   ModelSettingRowBoolean,
   ModelSettingSelectControl,
@@ -152,7 +152,7 @@ export function SettingsGeneral() {
                 {
                   title: revealInFinderText,
                   icon: "folder_open",
-                  onClick: () => revealItemInDir(appInfo.appDataDir),
+                  onClick: () => platform.revealItemInDir(appInfo.appDataDir),
                 },
               ]}
             />
@@ -168,7 +168,7 @@ export function SettingsGeneral() {
                 {
                   title: revealInFinderText,
                   icon: "folder_open",
-                  onClick: () => revealItemInDir(appInfo.appLogDir),
+                  onClick: () => platform.revealItemInDir(appInfo.appLogDir),
                 },
               ]}
             />

apps/yaak-client/components/Settings/SettingsHotkeys.tsx

@@ -124,7 +124,7 @@ export function SettingsHotkeys() {
             <HotkeyRow
               key={action}
               action={action}
-              currentKeys={hotkeys[action]}
+              currentKeys={hotkeys[action] ?? []}
               defaultKeys={defaultHotkeys[action]}
               onSave={async (keys) => {
                 const newHotkeys = { ...settings.hotkeys };

apps/yaak-client/components/Settings/SettingsInterface.tsx

@@ -1,4 +1,4 @@
-import { type } from "@tauri-apps/plugin-os";
+import { platform } from "@yaakapp-internal/platform";
 import { useFonts } from "@yaakapp-internal/fonts";
 import { useLicense } from "@yaakapp-internal/license";
 import type { EditorKeymap, Settings } from "@yaakapp-internal/models";
@@ -9,7 +9,7 @@ import { useState } from "react";
 import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
 import { showConfirm } from "../../lib/confirm";
 import { pricingUrl } from "../../lib/pricingUrl";
-import { invokeCmd } from "../../lib/tauri";
+import { rpc } from "../../lib/rpc";
 import { CargoFeature } from "../CargoFeature";
 import { Button } from "../core/Button";
 import { Checkbox } from "../core/Checkbox";
@@ -176,7 +176,7 @@ export function SettingsInterface() {
 
         <SettingsSection title="Window">
           <NativeTitlebarSetting settings={settings} />
-          {type() !== "macos" && (
+          {platform.osType() !== "macos" && (
             <ModelSettingRowBoolean
               model={settings}
               modelKey="hideWindowControls"
@@ -216,7 +216,7 @@ function NativeTitlebarSetting({ settings }: { settings: Settings }) {
           size="xs"
           onClick={async () => {
             await patchModel(settings, { useNativeTitlebar: nativeTitlebar });
-            await invokeCmd("cmd_restart");
+            await rpc("cmd_restart");
           }}
         >
           Apply and Restart

apps/yaak-client/components/Settings/SettingsLicense.tsx

@@ -1,4 +1,3 @@
-import { openUrl } from "@tauri-apps/plugin-opener";
 import { useLicense } from "@yaakapp-internal/license";
 import { Banner, HStack, Icon, VStack } from "@yaakapp-internal/ui";
 import { differenceInDays } from "date-fns";
@@ -12,6 +11,7 @@ import { Button } from "../core/Button";
 import { Link } from "../core/Link";
 import { PlainInput } from "../core/PlainInput";
 import { Separator } from "../core/Separator";
+import { platform } from "@yaakapp-internal/platform";
 
 export function SettingsLicense() {
   return (
@@ -135,7 +135,7 @@ function SettingsLicenseCmp() {
           <Button
             color="secondary"
             size="sm"
-            onClick={() => openUrl("https://yaak.app/dashboard?intent=app.license.support")}
+            onClick={() => platform.openUrl("https://yaak.app/dashboard?intent=app.license.support")}
             rightSlot={<Icon icon="external_link" />}
           >
             Direct Support
@@ -151,7 +151,7 @@ function SettingsLicenseCmp() {
             color="primary"
             rightSlot={<Icon icon="external_link" />}
             onClick={() =>
-              openUrl(pricingUrl(`app.license.purchase.${check.data?.status ?? "unknown"}`))
+              platform.openUrl(pricingUrl(`app.license.purchase.${check.data?.status ?? "unknown"}`))
             }
           >
             Purchase License

apps/yaak-client/components/Settings/SettingsPlugins.tsx

@@ -1,5 +1,4 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { openUrl } from "@tauri-apps/plugin-opener";
 import type { Plugin } from "@yaakapp-internal/models";
 import { patchModel, pluginsAtom } from "@yaakapp-internal/models";
 import type { PluginVersion } from "@yaakapp-internal/plugins";
@@ -39,6 +38,7 @@ import { PlainInput } from "../core/PlainInput";
 import { TabContent, Tabs } from "../core/Tabs/Tabs";
 import { EmptyStateText } from "../EmptyStateText";
 import { SelectFile } from "../SelectFile";
+import { platform } from "@yaakapp-internal/platform";
 
 interface SettingsPluginsProps {
   defaultSubtab?: string;
@@ -113,7 +113,7 @@ export function SettingsPlugins({ defaultSubtab }: SettingsPluginsProps) {
                   icon="help"
                   title="View documentation"
                   onClick={() =>
-                    openUrl("https://yaak.app/docs/plugin-development/plugins-quick-start")
+                    platform.openUrl("https://yaak.app/docs/plugin-development/plugins-quick-start")
                   }
                 />
               </HStack>

apps/yaak-client/components/SettingsDropdown.tsx

@@ -1,4 +1,3 @@
-import { openUrl } from "@tauri-apps/plugin-opener";
 import { useLicense } from "@yaakapp-internal/license";
 import { useRef } from "react";
 import { openSettings } from "../commands/openSettings";
@@ -13,6 +12,7 @@ import { Dropdown } from "./core/Dropdown";
 import { Icon } from "@yaakapp-internal/ui";
 import { IconButton } from "./core/IconButton";
 import { KeyboardShortcutsDialog } from "./KeyboardShortcutsDialog";
+import { platform } from "@yaakapp-internal/platform";
 
 export function SettingsDropdown() {
   const exportData = useExportData();
@@ -62,7 +62,7 @@ export function SettingsDropdown() {
         {
           label: "Create Run Button",
           leftSlot: <Icon icon="rocket" />,
-          onSelect: () => openUrl("https://yaak.app/button/new"),
+          onSelect: () => platform.openUrl("https://yaak.app/button/new"),
         },
         { type: "separator", label: `Yaak v${appInfo.version}` },
         {
@@ -78,26 +78,26 @@ export function SettingsDropdown() {
           leftSlot: <Icon icon="circle_dollar_sign" />,
           rightSlot: <Icon icon="external_link" color="success" className="opacity-60" />,
           onSelect: () =>
-            openUrl(pricingUrl(`app.menu.purchase.${check.data?.status ?? "unknown"}`)),
+            platform.openUrl(pricingUrl(`app.menu.purchase.${check.data?.status ?? "unknown"}`)),
         },
         {
           label: "Install CLI",
           hidden: appInfo.cliVersion != null,
           leftSlot: <Icon icon="square_terminal" />,
           rightSlot: <Icon icon="external_link" color="secondary" />,
-          onSelect: () => openUrl("https://yaak.app/docs/cli"),
+          onSelect: () => platform.openUrl("https://yaak.app/docs/cli"),
         },
         {
           label: "Feedback",
           leftSlot: <Icon icon="chat" />,
           rightSlot: <Icon icon="external_link" color="secondary" />,
-          onSelect: () => openUrl("https://yaak.app/feedback"),
+          onSelect: () => platform.openUrl("https://yaak.app/feedback"),
         },
         {
           label: "Changelog",
           leftSlot: <Icon icon="cake" />,
           rightSlot: <Icon icon="external_link" color="secondary" />,
-          onSelect: () => openUrl(`https://yaak.app/changelog/${appInfo.version}`),
+          onSelect: () => platform.openUrl(`https://yaak.app/changelog/${appInfo.version}`),
         },
       ]}
     >

apps/yaak-client/components/Sidebar.tsx

@@ -43,7 +43,8 @@ import { getFolderActions } from "../hooks/useFolderActions";
 import { getGrpcRequestActions } from "../hooks/useGrpcRequestActions";
 import { useHotKey } from "../hooks/useHotKey";
 import { getHttpRequestActions } from "../hooks/useHttpRequestActions";
-import { useListenToTauriEvent } from "../hooks/useListenToTauriEvent";
+import { platform } from "@yaakapp-internal/platform";
+import { usePlatformEvent } from "../hooks/usePlatformEvent";
 import { getModelAncestors } from "../hooks/useModelAncestors";
 import { sendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
 import { useSidebarHidden } from "../hooks/useSidebarHidden";
@@ -112,6 +113,7 @@ function Sidebar({ className }: { className?: string }) {
   const treeId = `tree.${activeWorkspaceId ?? "unknown"}`;
   const filterText = useAtomValue(sidebarFilterAtom);
   const [tree, allFields, emptyFilterSuggestions] = useAtomValue(sidebarTreeAtom) ?? [];
+
   const wrapperRef = useRef<HTMLElement>(null);
   const treeRef = useRef<TreeHandle>(null);
   const filterRef = useRef<InputHandle>(null);
@@ -130,11 +132,17 @@ function Sidebar({ className }: { className?: string }) {
     if (!didFocus) filterRef.current?.focus();
   }, []);
 
-  // Focus any new sidebar models when created
-  useListenToTauriEvent<ModelPayload>("model_write", ({ payload }) => {
-    if (!isSidebarLeafModel(payload.model)) return;
-    if (!(payload.change.type === "upsert" && payload.change.created)) return;
-    treeRef.current?.selectItem(payload.model.id, true);
+  // Focus new sidebar models created by the user in this window. Writes from other
+  // sources (import, sync, CLI) can carry thousands of models and shouldn't move
+  // the selection.
+  usePlatformEvent<ModelPayload[]>("model_writes", (payloads) => {
+    for (const payload of payloads) {
+      if (payload.updateSource.type !== "window") continue;
+      if (payload.updateSource.label !== platform.window.label) continue;
+      if (!isSidebarLeafModel(payload.model)) continue;
+      if (!(payload.change.type === "upsert" && payload.change.created)) continue;
+      treeRef.current?.selectItem(payload.model.id, true);
+    }
   });
 
   useEffect(() => {
@@ -724,7 +732,11 @@ function Sidebar({ className }: { className?: string }) {
   );
 }
 
-export default Sidebar;
+// Memoized so route navigations (which re-render the workspace layout) don't
+// re-render the sidebar subtree. In large workspaces a sidebar re-render is
+// very expensive: it re-renders DndContext, whose context churn re-renders
+// every visible TreeItem regardless of their memo comparators.
+export default memo(Sidebar);
 
 function getGitContextMenuItems({
   items,

apps/yaak-client/components/SyncToFilesystemSetting.tsx

@@ -1,4 +1,3 @@
-import { readDir } from "@tauri-apps/plugin-fs";
 import { Banner, VStack } from "@yaakapp-internal/ui";
 import { useState } from "react";
 import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
@@ -6,6 +5,7 @@ import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
 import { SettingRowBoolean, SettingRowDirectory } from "./core/SettingRow";
 import { SelectFile } from "./SelectFile";
+import { platform } from "@yaakapp-internal/platform";
 
 export interface SyncToFilesystemSettingProps {
   layout?: "form" | "settings";
@@ -24,7 +24,7 @@ export function SyncToFilesystemSetting({
 
   const handleFilePathChange = async (filePath: string | null) => {
     if (filePath != null) {
-      const files = await readDir(filePath);
+      const files = await platform.files.readDir(filePath);
       if (files.length > 0) {
         setSyncDir(filePath);
         return;

apps/yaak-client/components/UrlParameterEditor.tsx

@@ -1,15 +1,14 @@
-import type { HttpRequest } from "@yaakapp-internal/models";
 import { VStack } from "@yaakapp-internal/ui";
 import { useCallback, useRef } from "react";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
-import type { PairEditorHandle, PairEditorProps } from "./core/PairEditor";
+import type { EditablePair, PairEditorHandle, PairEditorProps } from "./core/PairEditor";
 import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
 
 type Props = {
   forceUpdateKey: string;
-  pairs: HttpRequest["headers"];
+  pairs: EditablePair[];
   stateKey: PairEditorProps["stateKey"];
-  onChange: (headers: HttpRequest["urlParameters"]) => void;
+  onChange: PairEditorProps["onChange"];
 };
 
 export function UrlParametersEditor({ pairs, forceUpdateKey, onChange, stateKey }: Props) {

apps/yaak-client/components/WebsocketRequestPane.tsx

@@ -1,5 +1,10 @@
 import type { WebsocketRequest } from "@yaakapp-internal/models";
-import { patchModel } from "@yaakapp-internal/models";
+import {
+  flushAllModelWrites,
+  getModel,
+  patchModel,
+  patchModelDebounced,
+} from "@yaakapp-internal/models";
 import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
 import { closeWebsocket, connectWebsocket, sendWebsocket } from "@yaakapp-internal/ws";
 import classNames from "classnames";
@@ -8,8 +13,7 @@ import type { CSSProperties } from "react";
 import { useCallback, useMemo, useRef } from "react";
 import { getActiveCookieJar } from "../hooks/useActiveCookieJar";
 import { getActiveEnvironment } from "../hooks/useActiveEnvironment";
-import { activeRequestIdAtom } from "../hooks/useActiveRequestId";
-import { allRequestsAtom } from "../hooks/useAllRequests";
+import { allRequestUrlsAtom } from "../hooks/useAllRequests";
 import { useAuthTab } from "../hooks/useAuthTab";
 import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
 import { useHeadersTab } from "../hooks/useHeadersTab";
@@ -18,10 +22,8 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { activeWebsocketConnectionAtom } from "../hooks/usePinnedWebsocketConnection";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
-import { deepEqualAtom } from "../lib/atoms";
 import { languageFromContentType } from "../lib/contentType";
-import { generateId } from "../lib/generateId";
-import { extractPathPlaceholders } from "../lib/pathPlaceholders";
+import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
 import { prepareImportQuerystring } from "../lib/prepareImportQuerystring";
 import { resolvedModelName } from "../lib/resolvedModelName";
 import { CountBadge } from "./core/CountBadge";
@@ -29,7 +31,6 @@ import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import { getUrlCompletionConfig } from "./core/Editor/url/completion";
 import { Editor } from "./core/Editor/LazyEditor";
 import { IconButton } from "./core/IconButton";
-import type { Pair } from "./core/PairEditor";
 import { PlainInput } from "./core/PlainInput";
 import type { TabItem, TabsRef } from "./core/Tabs/Tabs";
 import { setActiveTab, TabContent, Tabs } from "./core/Tabs/Tabs";
@@ -55,15 +56,12 @@ const TAB_SETTINGS = "settings";
 const TAB_DESCRIPTION = "description";
 const TABS_STORAGE_KEY = "websocket_request_tabs";
 
-const nonActiveRequestUrlsAtom = atom((get) => {
-  const activeRequestId = get(activeRequestIdAtom);
-  const requests = get(allRequestsAtom);
-  return requests
-    .filter((r) => r.id !== activeRequestId)
-    .map((r): GenericCompletionOption => ({ type: "constant", label: r.url }));
-});
-
-const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
+// Derived from the identity-stable URL list so this only recomputes when a URL
+// actually changes. The active request's own URL is included, but exact matches
+// are filtered out at completion time by genericCompletion.
+const requestUrlOptionsAtom = atom((get): GenericCompletionOption[] =>
+  get(allRequestUrlsAtom).map((url) => ({ type: "constant", label: url })),
+);
 
 export function WebsocketRequestPane({ style, fullHeight, className, activeRequest }: Props) {
   const activeRequestId = activeRequest.id;
@@ -84,20 +82,35 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
     [],
   );
 
-  const { urlParameterPairs, urlParametersKey } = useMemo(() => {
-    const placeholderNames = extractPathPlaceholders(activeRequest.url);
-    const nonEmptyParameters = activeRequest.urlParameters.filter((p) => p.name || p.value);
-    const items: Pair[] = [...nonEmptyParameters];
-    for (const name of placeholderNames) {
-      const item = items.find((p) => p.name === name);
-      if (item) {
-        item.readOnlyName = true;
-      } else {
-        items.push({ name, value: "", enabled: true, readOnlyName: true, id: generateId() });
-      }
-    }
-    return { urlParameterPairs: items, urlParametersKey: placeholderNames.join(",") };
-  }, [activeRequest.url, activeRequest.urlParameters]);
+  // Renaming a path placeholder has to rewrite the URL and rename the parameter together, or the
+  // value detaches from the placeholder.
+  // NOTE: Reads the request fresh rather than closing over `activeRequest`. The row that calls this
+  //  holds onto it until the URL's placeholders change, so a captured request would go stale and
+  //  patch its parameter list back over newer edits.
+  const handleRenamePathPlaceholder = useCallback(
+    (oldName: string, newName: string) => {
+      const request = getModel("websocket_request", activeRequestId);
+      if (request == null) return false;
+
+      const patch = renamePathPlaceholder(request, oldName, newName);
+      if (patch == null) return false; // Unusable name, so the editor reverts the field
+      void patchModel(request, patch);
+      return true;
+    },
+    [activeRequestId],
+  );
+
+  const { urlParameterPairs, urlParametersKey } = useMemo(
+    () =>
+      derivePathPlaceholderPairs(
+        activeRequest.url,
+        activeRequest.urlParameters,
+        handleRenamePathPlaceholder,
+      ),
+    [activeRequest.url, activeRequest.urlParameters, handleRenamePathPlaceholder],
+  );
+
+  const hasDescription = activeRequest.description.trim().length > 0;
 
   const tabs = useMemo<TabItem[]>(() => {
     return [
@@ -120,15 +133,16 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
       {
         value: TAB_DESCRIPTION,
         label: "Info",
+        rightSlot: hasDescription && <CountBadge count={true} />,
       },
     ];
-  }, [authTab, headersTab, numSettingsOverrides, urlParameterPairs.length]);
+  }, [authTab, hasDescription, headersTab, numSettingsOverrides, urlParameterPairs.length]);
 
   const { activeResponse } = usePinnedHttpResponse(activeRequestId);
   const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
   const connection = useAtomValue(activeWebsocketConnectionAtom);
 
-  const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
+  const autocompleteUrls = useAtomValue(requestUrlOptionsAtom);
 
   const autocomplete: GenericCompletionConfig = useMemo(
     () => getUrlCompletionConfig(autocompleteUrls),
@@ -136,6 +150,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
   );
 
   const handleConnect = useCallback(async () => {
+    await flushAllModelWrites(); // The backend reads the request from the DB
     await connectWebsocket({
       requestId: activeRequest.id,
       environmentId: getActiveEnvironment()?.id ?? null,
@@ -145,6 +160,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
 
   const handleSend = useCallback(async () => {
     if (connection == null) return;
+    await flushAllModelWrites(); // The backend reads the message from the DB
     await sendWebsocket({
       connectionId: connection?.id,
       environmentId: getActiveEnvironment()?.id ?? null,
@@ -157,7 +173,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
   }, [connection]);
 
   const handleUrlChange = useCallback(
-    (url: string) => patchModel(activeRequest, { url }),
+    (url: string) => patchModelDebounced(activeRequest, { url }),
     [activeRequest],
   );
 
@@ -241,7 +257,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                 forceUpdateKey={forceUpdateKey}
                 headers={activeRequest.headers}
                 stateKey={`headers.${activeRequest.id}`}
-                onChange={(headers) => patchModel(activeRequest, { headers })}
+                onChange={(headers) => patchModelDebounced(activeRequest, { headers })}
               />
             </TabContent>
             <TabContent value={TAB_PARAMS}>
@@ -249,7 +265,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                 stateKey={`params.${activeRequest.id}`}
                 forceUpdateKey={forceUpdateKey + urlParametersKey}
                 pairs={urlParameterPairs}
-                onChange={(urlParameters) => patchModel(activeRequest, { urlParameters })}
+                onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
               />
             </TabContent>
             <TabContent value={TAB_MESSAGE}>
@@ -261,7 +277,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                 heightMode={fullHeight ? "full" : "auto"}
                 defaultValue={activeRequest.message}
                 language={messageLanguage}
-                onChange={(message) => patchModel(activeRequest, { message })}
+                onChange={(message) => patchModelDebounced(activeRequest, { message })}
                 stateKey={`json.${activeRequest.id}`}
               />
             </TabContent>
@@ -278,7 +294,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                   className="font-sans text-xl! px-0!"
                   containerClassName="border-0"
                   placeholder={resolvedModelName(activeRequest)}
-                  onChange={(name) => patchModel(activeRequest, { name })}
+                  onChange={(name) => patchModelDebounced(activeRequest, { name })}
                 />
                 <MarkdownEditor
                   name="request-description"
@@ -286,7 +302,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                   defaultValue={activeRequest.description}
                   stateKey={`description.${activeRequest.id}`}
                   forceUpdateKey={forceUpdateKey}
-                  onChange={(description) => patchModel(activeRequest, { description })}
+                  onChange={(description) => patchModelDebounced(activeRequest, { description })}
                 />
               </div>
             </TabContent>

apps/yaak-client/components/Workspace.tsx

@@ -1,4 +1,4 @@
-import { type } from "@tauri-apps/plugin-os";
+import { platform } from "@yaakapp-internal/platform";
 import { settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
 import { Banner, HeaderSize, HStack, SidebarLayout } from "@yaakapp-internal/ui";
 import classNames from "classnames";
@@ -40,6 +40,7 @@ import { ErrorBoundary } from "./ErrorBoundary";
 import { FolderLayout } from "./FolderLayout";
 import { GrpcConnectionLayout } from "./GrpcConnectionLayout";
 import { HttpRequestLayout } from "./HttpRequestLayout";
+import { RedirectToLatestWorkspace } from "./RedirectToLatestWorkspace";
 import Sidebar from "./Sidebar";
 import { SidebarActions } from "./SidebarActions";
 import { WebsocketRequestLayout } from "./WebsocketRequestLayout";
@@ -53,7 +54,7 @@ export function Workspace() {
 
   const workspaces = useAtomValue(workspacesAtom);
   const settings = useAtomValue(settingsAtom);
-  const osType = type();
+  const osType = platform.osType();
   const [width, setWidth] = useSidebarWidth();
   const [sidebarHidden, setSidebarHidden] = useSidebarHidden();
   const [floatingSidebarHidden, setFloatingSidebarHidden] = useFloatingSidebarHidden();
@@ -66,9 +67,8 @@ export function Workspace() {
     return { background };
   }, [activeEnvironment?.color]);
 
-  // We're loading still
   if (workspaces.length === 0) {
-    return null;
+    return <RedirectToLatestWorkspace />;
   }
 
   const header = (

apps/yaak-client/components/WorkspaceActionsDropdown.tsx

@@ -1,5 +1,3 @@
-import { open } from "@tauri-apps/plugin-dialog";
-import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { getModel, settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
@@ -16,6 +14,7 @@ import { useCreateWorkspace } from "../hooks/useCreateWorkspace";
 import { useDeleteSendHistory } from "../hooks/useDeleteSendHistory";
 import { useWorkspaceActions } from "../hooks/useWorkspaceActions";
 import { showDialog } from "../lib/dialog";
+import { importData } from "../lib/importData";
 import { jotaiStore } from "../lib/jotai";
 import { revealInFinderText } from "../lib/reveal";
 import { CloneGitRepositoryDialog } from "./CloneGitRepositoryDialog";
@@ -26,6 +25,7 @@ import { Icon } from "@yaakapp-internal/ui";
 import type { RadioDropdownItem } from "./core/RadioDropdown";
 import { RadioDropdown } from "./core/RadioDropdown";
 import { SwitchWorkspaceDialog } from "./SwitchWorkspaceDialog";
+import { platform } from "@yaakapp-internal/platform";
 
 type Props = Pick<ButtonProps, "className" | "justify" | "forDropdown" | "leftSlot">;
 
@@ -75,7 +75,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
             label: "Open Folder",
             leftSlot: <Icon icon="folder_open" />,
             onSelect: async () => {
-              const dir = await open({
+              const dir = await platform.dialog.open({
                 title: "Select Workspace Directory",
                 directory: true,
                 multiple: false,
@@ -90,6 +90,11 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
             leftSlot: <Icon icon="hard_drive_download" />,
             onSelect: openCloneGitRepositoryDialog,
           },
+          {
+            label: "Import Data",
+            leftSlot: <Icon icon="folder_input" />,
+            onSelect: () => importData.mutate(),
+          },
         ],
       },
     ];
@@ -114,7 +119,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
         leftSlot: <Icon icon="folder_symlink" />,
         onSelect: async () => {
           if (workspaceMeta?.settingSyncDir == null) return;
-          await revealItemInDir(workspaceMeta.settingSyncDir);
+          await platform.revealItemInDir(workspaceMeta.settingSyncDir);
         },
       },
       {

apps/yaak-client/components/WorkspaceHeader.tsx

@@ -10,7 +10,7 @@ import { CookieDropdown } from "./CookieDropdown";
 import { IconButton } from "./core/IconButton";
 import { PillButton } from "./core/PillButton";
 import { EnvironmentActionsDropdown } from "./EnvironmentActionsDropdown";
-import { ImportCurlButton } from "./ImportCurlButton";
+import { ImportCurl } from "./ImportCurl";
 import { LicenseBadge } from "./LicenseBadge";
 import { RecentRequestsDropdown } from "./RecentRequestsDropdown";
 import { SettingsDropdown } from "./SettingsDropdown";
@@ -56,7 +56,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({
         <RecentRequestsDropdown />
       </div>
       <div className="flex-1 flex gap-1 items-center h-full justify-end pointer-events-none pr-1">
-        <ImportCurlButton />
+        <ImportCurl />
         {showEncryptionSetup ? (
           <PillButton color="danger" onClick={setupOrConfigureEncryption}>
             Enter Encryption Key

apps/yaak-client/components/core/CheckboxTree.tsx

@@ -0,0 +1,114 @@
+import { Icon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import type { CheckboxProps } from "./Checkbox";
+import { Checkbox } from "./Checkbox";
+
+export interface CheckboxTreeNode<T> {
+  key: string;
+  data: T;
+  children: CheckboxTreeNode<T>[];
+}
+
+interface Props<T> {
+  node: CheckboxTreeNode<T>;
+  depth?: number;
+  /** Return "hidden" to render row alignment space instead of a checkbox */
+  checked: (node: CheckboxTreeNode<T>) => CheckboxProps["checked"] | "hidden";
+  onCheck: (node: CheckboxTreeNode<T>, checked: boolean) => void;
+  checkboxTitle?: (node: CheckboxTreeNode<T>) => string;
+  isCheckboxDisabled?: (node: CheckboxTreeNode<T>) => boolean;
+  /** An irrelevant row is hidden unless one of its descendants is relevant */
+  isRelevant: (node: CheckboxTreeNode<T>) => boolean;
+  /** A node that starts collapsed, so a large subtree doesn't crowd out the rest */
+  isCollapsedByDefault?: (node: CheckboxTreeNode<T>) => boolean;
+  renderRow: (node: CheckboxTreeNode<T>) => ReactNode;
+  onSelectRow?: (node: CheckboxTreeNode<T>) => void;
+  canSelectRow?: (node: CheckboxTreeNode<T>) => boolean;
+  isRowSelected?: (node: CheckboxTreeNode<T>) => boolean;
+}
+
+export function CheckboxTree<T>(props: Props<T>) {
+  const { node, depth = 0 } = props;
+  const [collapsed, setCollapsed] = useState<boolean>(
+    () => props.isCollapsedByDefault?.(node) ?? false,
+  );
+  if (!hasRelevantNode(node, props.isRelevant)) return null;
+
+  const checked = props.checked(node);
+  const selected = props.isRowSelected?.(node) ?? false;
+  const selectable = props.onSelectRow != null && (props.canSelectRow?.(node) ?? true);
+  const hasVisibleChildren = node.children.some((c) => hasRelevantNode(c, props.isRelevant));
+  const rowContent = (
+    <div className="flex-1 min-w-0 flex items-center gap-1 px-1 py-0.5 text-left">
+      {props.renderRow(node)}
+    </div>
+  );
+
+  return (
+    <div
+      className={classNames(
+        depth > 0 && "pl-4 ml-2 border-l border-dashed border-border-subtle relative",
+      )}
+    >
+      <div
+        className={classNames(
+          "relative flex gap-1 w-full h-xs items-center",
+          selected ? "text-text" : "text-text-subtle",
+        )}
+      >
+        {selected && (
+          <div className="absolute left-[-100vw] right-0 top-0 bottom-0 bg-surface-active opacity-30 -z-10" />
+        )}
+        {hasVisibleChildren ? (
+          <button
+            type="button"
+            aria-label={collapsed ? "Expand" : "Collapse"}
+            aria-expanded={!collapsed}
+            className="shrink-0 text-text-subtlest hocus:text-text"
+            onClick={() => setCollapsed((v) => !v)}
+          >
+            <Icon size="sm" icon={collapsed ? "chevron_right" : "chevron_down"} />
+          </button>
+        ) : (
+          <span aria-hidden className="w-4 shrink-0" />
+        )}
+        {checked === "hidden" ? (
+          <span aria-hidden className="w-4 mr-0.5 shrink-0" />
+        ) : (
+          <Checkbox
+            checked={checked}
+            title={props.checkboxTitle?.(node) ?? "Toggle"}
+            hideLabel
+            disabled={props.isCheckboxDisabled?.(node)}
+            onChange={(checked) => props.onCheck(node, checked)}
+          />
+        )}
+        {selectable ? (
+          <button
+            type="button"
+            className="flex-1 min-w-0 flex text-left"
+            onClick={() => props.onSelectRow?.(node)}
+          >
+            {rowContent}
+          </button>
+        ) : (
+          rowContent
+        )}
+      </div>
+
+      {!collapsed &&
+        node.children.map((child) => (
+          <CheckboxTree key={child.key} {...props} node={child} depth={depth + 1} />
+        ))}
+    </div>
+  );
+}
+
+function hasRelevantNode<T>(
+  node: CheckboxTreeNode<T>,
+  isRelevant: (node: CheckboxTreeNode<T>) => boolean,
+): boolean {
+  return isRelevant(node) || node.children.some((c) => hasRelevantNode(c, isRelevant));
+}

apps/yaak-client/components/core/Confirm.tsx

@@ -62,7 +62,7 @@ export function Confirm({
         />
       )}
       <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
-        <Button type="submit" color={color} disabled={!didConfirm}>
+        <Button autoFocus={!requireTyping} type="submit" color={color} disabled={!didConfirm}>
           {confirmText ?? "Confirm"}
         </Button>
         <Button onClick={handleHide} variant="border">

apps/yaak-client/components/core/Dialog.tsx

@@ -10,11 +10,13 @@ export interface DialogProps {
   children: ReactNode;
   open: boolean;
   onClose?: () => void;
-  disableBackdropClose?: boolean;
+  /** Block dismissal from the backdrop, Escape key, and built-in close button. */
+  disableClose?: boolean;
   title?: ReactNode;
   description?: ReactNode;
   className?: string;
   size?: DialogSize;
+  /** Hide the built-in close button without changing backdrop or Escape behavior. */
   hideX?: boolean;
   noPadding?: boolean;
   noScroll?: boolean;
@@ -27,7 +29,7 @@ export function Dialog({
   size = "full",
   open,
   onClose,
-  disableBackdropClose,
+  disableClose,
   title,
   description,
   hideX,
@@ -42,7 +44,7 @@ export function Dialog({
   );
 
   return (
-    <Overlay open={open} onClose={disableBackdropClose ? undefined : onClose} portalName="dialog">
+    <Overlay open={open} onClose={disableClose ? undefined : onClose} portalName="dialog">
       <div
         role="dialog"
         className={classNames(
@@ -58,7 +60,7 @@ export function Dialog({
           // NOTE: We handle Escape on the element itself so that it doesn't close multiple
           //   dialogs and can be intercepted by children if needed.
           if (e.key === "Escape") {
-            onClose?.();
+            if (!disableClose) onClose?.();
             e.stopPropagation();
             e.preventDefault();
           }
@@ -110,7 +112,7 @@ export function Dialog({
           </div>
 
           {/*Put close at the end so that it's the last thing to be tabbed to*/}
-          {!hideX && (
+          {!disableClose && !hideX && (
             <div className="ml-auto absolute right-1 top-1">
               <IconButton
                 className="opacity-70 hover:opacity-100"

apps/yaak-client/components/core/Dropdown.tsx

@@ -36,12 +36,16 @@ import { fireAndForget } from "../../lib/fireAndForget";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { Button } from "./Button";
 import { Hotkey } from "./Hotkey";
+import { IconButton } from "./IconButton";
+import type { SeparatorAction } from "./Separator";
 import { Separator } from "./Separator";
 
 export type DropdownItemSeparator = {
   type: "separator";
   label?: ReactNode;
   hidden?: boolean;
+  /** A control shown beside the label, eg. revealing the labelled file on disk. */
+  action?: SeparatorAction;
 };
 
 export type DropdownItemContent = {
@@ -66,6 +70,12 @@ export type DropdownItemDefault = {
   submenu?: DropdownItem[];
   /** If true, submenu opens on click instead of hover */
   submenuOpenOnClick?: boolean;
+  /**
+   * How the submenu opens. "row" (default) opens it from the row itself (hover, or click
+   * with submenuOpenOnClick). "button" keeps the row selectable via onSelect and renders
+   * a dedicated button on the right that opens the submenu.
+   */
+  submenuTrigger?: "row" | "button";
   icon?: IconProps["icon"];
 };
 
@@ -233,23 +243,40 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
 
 export interface ContextMenuProps {
   triggerPosition: { x: number; y: number } | null;
+  /**
+   * The box the menu belongs to, when the trigger has one.
+   *
+   * Placement aligns to the trigger's left or right edge depending on the room beside it, so a
+   * menu opened from an element wants its real rect. Without one the position is treated as a
+   * zero-width point, which is right for a menu opened at the cursor and wrong for one opened
+   * from a button.
+   */
+  triggerRect?: Pick<DOMRect, "top" | "bottom" | "left" | "right">;
+  /**
+   * The element the menu belongs to, so a click on it doesn't count as a click outside.
+   *
+   * Without this the trigger gets both: the outside-click handler closes the menu on mousedown,
+   * then the trigger's own click opens it again, and pressing it looks like it does nothing.
+   */
+  triggerRef?: RefObject<HTMLElement | null>;
   className?: string;
   items: DropdownProps["items"];
   onClose: () => void;
 }
 
 export const ContextMenu = forwardRef<DropdownRef, ContextMenuProps>(function ContextMenu(
-  { triggerPosition, className, items, onClose },
+  { triggerPosition, triggerRect, triggerRef, className, items, onClose },
   ref,
 ) {
   const triggerShape = useMemo(
-    () => ({
-      top: triggerPosition?.y ?? 0,
-      bottom: triggerPosition?.y ?? 0,
-      left: triggerPosition?.x ?? 0,
-      right: triggerPosition?.x ?? 0,
-    }),
-    [triggerPosition],
+    () =>
+      triggerRect ?? {
+        top: triggerPosition?.y ?? 0,
+        bottom: triggerPosition?.y ?? 0,
+        left: triggerPosition?.x ?? 0,
+        right: triggerPosition?.x ?? 0,
+      },
+    [triggerPosition, triggerRect],
   );
 
   if (triggerPosition == null) return null;
@@ -259,9 +286,13 @@ export const ContextMenu = forwardRef<DropdownRef, ContextMenuProps>(function Co
       isOpen={true} // Always open because we return null if not
       className={className}
       defaultSelectedIndex={null}
+      // A menu opened from an element points back at it. One opened at the cursor has nothing
+      // to point at, so it goes without.
+      showTriangle={triggerRect != null}
       ref={ref}
       items={items}
       onClose={onClose}
+      triggerRef={triggerRef}
       triggerShape={triggerShape}
     />
   );
@@ -277,7 +308,9 @@ interface MenuProps {
   fullWidth?: boolean;
   isOpen: boolean;
   items: DropdownItem[];
-  triggerRef?: RefObject<HTMLButtonElement | null>;
+  // Any element, not just a button: a menu can be opened from anything, and this is only ever
+  // used to ask whether a click landed on the trigger
+  triggerRef?: RefObject<HTMLElement | null>;
   isSubmenu?: boolean;
 }
 
@@ -479,9 +512,15 @@ const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items"
           }
         }
 
-        if (!item.keepOpenOnSelect) handleCloseAll();
+        if (!item.keepOpenOnSelect) {
+          handleCloseAll();
+        } else if (isSubmenu) {
+          // Keep the parent menu open, but close this submenu — its items may no
+          // longer describe the row after the action (e.g. Pin → Unpin, Remove)
+          handleClose();
+        }
       },
-      [handleCloseAll, setSelectedIndex],
+      [handleCloseAll, handleClose, isSubmenu, setSelectedIndex],
     );
 
     useImperativeHandle(ref, () => {
@@ -606,7 +645,7 @@ const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items"
         const item = filteredItems[selectedIndex ?? -1];
         if (!item || item.type === "separator" || item.type === "content") return;
         e.preventDefault();
-        if (item.submenu) {
+        if (item.submenu && item.submenuTrigger !== "button") {
           const parent = document.activeElement as HTMLButtonElement;
           if (parent) {
             setActiveSubmenu({ item, parent, viaKeyboard: true });
@@ -625,9 +664,11 @@ const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items"
           clearTimeout(submenuTimeoutRef.current);
         }
 
-        if (item.submenu && !item.submenuOpenOnClick) {
+        if (item.submenu && !item.submenuOpenOnClick && item.submenuTrigger !== "button") {
           setActiveSubmenu({ item, parent });
-        } else if (activeSubmenu) {
+        } else if (activeSubmenu && activeSubmenu.item !== item) {
+          // Hovering the row that owns the open submenu must not dismiss it — the
+          // pointer travels across the row on its way to a button-triggered submenu
           submenuTimeoutRef.current = window.setTimeout(() => {
             const submenuEl = submenuRef.current;
             if (!submenuEl || !activeSubmenu) {
@@ -753,6 +794,7 @@ const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items"
                   // oxlint-disable-next-line no-array-index-key -- Nothing else available
                   key={i}
                   className={classNames("my-1.5", item.label ? "ml-2" : null)}
+                  action={item.action}
                 >
                   {item.label}
                 </Separator>
@@ -774,6 +816,7 @@ const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items"
                 onFocus={handleFocus}
                 onSelect={handleSelect}
                 onHover={handleItemHover}
+                onOpenSubmenu={(item, el) => setActiveSubmenu({ item, parent: el })}
                 // oxlint-disable-next-line no-array-index-key -- It's fine
                 key={i}
                 item={item}
@@ -845,6 +888,7 @@ interface MenuItemProps {
   onSelect: (item: DropdownItemDefault, el?: HTMLButtonElement) => Promise<void>;
   onFocus: (item: DropdownItemDefault) => void;
   onHover: (item: DropdownItemDefault, el: HTMLButtonElement) => void;
+  onOpenSubmenu: (item: DropdownItemDefault, el: HTMLButtonElement) => void;
   focused: boolean;
   isParentOfActiveSubmenu?: boolean;
 }
@@ -856,6 +900,7 @@ function MenuItem({
   onHover,
   item,
   onSelect,
+  onOpenSubmenu,
   isParentOfActiveSubmenu,
   ...props
 }: MenuItemProps) {
@@ -891,19 +936,22 @@ function MenuItem({
     e.currentTarget.focus();
   };
 
-  const rightSlot = item.submenu ? (
-    <Icon icon="chevron_right" color="secondary" />
-  ) : (
-    (item.rightSlot ?? <Hotkey variant="text" action={item.hotKeyAction ?? null} />)
-  );
+  const hasButtonSubmenu = item.submenu != null && item.submenuTrigger === "button";
 
-  return (
+  const rightSlot =
+    item.submenu && !hasButtonSubmenu ? (
+      <Icon icon="chevron_right" color="secondary" />
+    ) : (
+      (item.rightSlot ?? <Hotkey variant="text" action={item.hotKeyAction ?? null} />)
+    );
+
+  const button = (
     <Button
       ref={initRef}
       size="sm"
       tabIndex={-1}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={(e) => e.currentTarget.blur()}
+      onMouseEnter={hasButtonSubmenu ? undefined : handleMouseEnter}
+      onMouseLeave={hasButtonSubmenu ? undefined : (e) => e.currentTarget.blur()}
       disabled={item.disabled}
       onFocus={handleFocus}
       onClick={handleClick}
@@ -924,6 +972,7 @@ function MenuItem({
         "min-w-32 outline-hidden px-2 mx-1.5 flex whitespace-nowrap",
         "focus:bg-surface-highlight focus:text rounded-sm focus:outline-hidden focus-visible:outline-1",
         isParentOfActiveSubmenu && "bg-surface-highlight text rounded-sm",
+        hasButtonSubmenu && "pr-8",
         item.color === "danger" && "text-danger!",
         item.color === "primary" && "text-primary!",
         item.color === "success" && "text-success!",
@@ -936,6 +985,52 @@ function MenuItem({
       <div className={classNames("truncate min-w-20")}>{item.label}</div>
     </Button>
   );
+
+  if (!hasButtonSubmenu) {
+    return button;
+  }
+
+  // The submenu trigger overlays the row as a sibling (not a child) because the row is
+  // itself a button and buttons cannot nest. Hover handling lives on this wrapper so the
+  // row keeps its focus highlight while the mouse is over the trigger.
+  return (
+    <div
+      className="relative grid group/menuitem"
+      onMouseEnter={() => {
+        const el = buttonRef.current;
+        if (el == null) return;
+        onHover(item, el);
+        el.focus();
+      }}
+      onMouseLeave={() => buttonRef.current?.blur()}
+    >
+      {button}
+      <div
+        className={classNames(
+          "absolute right-1.5 inset-y-0 flex items-center",
+          "opacity-0 group-hover/menuitem:opacity-100 group-focus-within/menuitem:opacity-100",
+        )}
+      >
+        <IconButton
+          color="custom"
+          size="2xs"
+          tabIndex={-1}
+          icon="ellipsis_vertical"
+          iconColor="secondary"
+          title="More actions"
+          className="h-full! w-7!"
+          onMouseDown={(e) => {
+            // Prevent the trigger from stealing focus, which would unhighlight the row
+            e.preventDefault();
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onOpenSubmenu(item, e.currentTarget);
+          }}
+        />
+      </div>
+    </div>
+  );
 }
 
 interface MenuItemHotKeyProps {

apps/yaak-client/components/core/Editor/Editor.css

@@ -121,6 +121,24 @@
         @apply cursor-default;
       }
 
+      /* The chevron on a tag that opens a menu. The tag itself is the button, so this is
+         only the affordance that says so. */
+      .tag-action {
+        @apply inline-flex items-center align-middle ml-1;
+        @apply text-text-subtlest;
+
+        svg {
+          @apply w-[0.9em] h-[0.9em];
+        }
+      }
+
+      /* A preview of the value a tag stands for. Sized before the image loads, so arriving
+         never changes the line's height. */
+      .tag-thumbnail {
+        @apply inline-block align-middle mr-1 rounded-xs;
+        @apply w-[1.1em] h-[1.1em] object-cover bg-surface-highlight;
+      }
+
       .fn {
         @apply inline-block;
         .fn-inner {

apps/yaak-client/components/core/Editor/Editor.tsx

@@ -8,6 +8,7 @@ import { emacs } from "@replit/codemirror-emacs";
 import { vim } from "@replit/codemirror-vim";
 
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+import { debounce } from "@yaakapp-internal/lib";
 import type { EditorKeymap } from "@yaakapp-internal/models";
 import { settingsAtom } from "@yaakapp-internal/models";
 import type { EditorLanguage, TemplateFunction } from "@yaakapp-internal/plugins";
@@ -15,7 +16,6 @@ import { HStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { GraphQLSchema } from "graphql";
 import { useAtomValue } from "jotai";
-import { md5 } from "js-md5";
 import type { ReactNode, RefObject } from "react";
 import {
   Children,
@@ -33,6 +33,7 @@ import { useEnvironmentVariables } from "../../../hooks/useEnvironmentVariables"
 import { eventMatchesHotkey } from "../../../hooks/useHotKey";
 import { useRequestEditor } from "../../../hooks/useRequestEditor";
 import { useTemplateFunctionCompletionOptions } from "../../../hooks/useTemplateFunctions";
+import { docFingerprint } from "../../../lib/docFingerprint";
 import { editEnvironment } from "../../../lib/editEnvironment";
 import { tryFormatJson, tryFormatXml } from "../../../lib/formatters";
 import { jotaiStore } from "../../../lib/jotai";
@@ -42,6 +43,7 @@ import { IconButton } from "../IconButton";
 import "./Editor.css";
 import {
   baseExtensions,
+  editableExtensions,
   getLanguageExtension,
   multiLineExtensions,
   readonlyExtensions,
@@ -288,7 +290,7 @@ function EditorInner({
     function configureReadOnly() {
       if (cm.current === null) return;
       const current = readOnlyCompartment.current.get(cm.current.view.state) ?? emptyExtension;
-      const next = readOnly ? readonlyExtensions : emptyExtension;
+      const next = readOnly ? readonlyExtensions : editableExtensions;
       // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
       if (current === next) return;
 
@@ -381,6 +383,7 @@ function EditorInner({
   const initEditorRef = useCallback(
     function initEditorRef(container: HTMLDivElement | null) {
       if (container === null) {
+        flushCachedEditorState(stateKey);
         cm.current?.view.destroy();
         cm.current = null;
         return;
@@ -410,7 +413,7 @@ function EditorInner({
           keymapCompartment.current.of(
             keymapExtensions[settings.editorKeymap] ?? keymapExtensions.default,
           ),
-          readOnlyCompartment.current.of(readOnly ? readonlyExtensions : emptyExtension),
+          readOnlyCompartment.current.of(readOnly ? readonlyExtensions : editableExtensions),
           ...getExtensions({
             container,
             singleLine,
@@ -430,7 +433,7 @@ function EditorInner({
               : []),
         ];
 
-        const cachedJsonState = getCachedEditorState(defaultValue ?? "", stateKey);
+        const cachedJsonState = getCachedEditorState(defaultValue ?? "", stateKey, !!readOnly);
 
         const doc = `${defaultValue ?? ""}`;
         const config: EditorStateConfig = { extensions, doc };
@@ -598,6 +601,8 @@ function getExtensions({
     EditorView.contentAttributes.of({
       autocapitalize: "off",
       autocorrect: "off",
+      // Keeps macOS Writing Tools from offering to write code for us
+      writingsuggestions: "false",
     }),
     EditorView.domEventHandlers({
       focus: () => {
@@ -639,7 +644,7 @@ function getExtensions({
         onChange.current?.(update.state.doc.toString());
       }
 
-      saveCachedEditorState(stateKey, update.state);
+      saveCachedEditorStateDebounced(stateKey, update.state);
     }),
   ];
 }
@@ -652,13 +657,53 @@ const placeholderElFromText = (text: string | undefined) => {
   return el;
 };
 
+// Caching the state is too expensive to do on every update (every keystroke and cursor move),
+// so debounce it per state key and flush when the editor unmounts.
+//
+// The cost scales with the document, and every update pays it in full:
+//   - `state.toJSON` flattens the whole rope into a string, ~0.13 ms per 200 KB
+//   - the fingerprint is an exact md5 for editable documents, ~0.3 ms per 200 KB. `docFingerprint`
+//     only samples read-only ones, so editing a large body still hashes all of it
+//   - `sessionStorage.setItem` is synchronous and blocks the main thread
+// Typing in a 200 KB body costs ~0.4 ms per keystroke before the storage write, and a 1 MB one
+// ~2.3 ms. Read-only documents skip most of the hashing but still serialize, which is the larger
+// half once documents get into the megabytes.
+const SAVE_STATE_DEBOUNCE_MS = 500;
+const stateSavers = new Map<string, ReturnType<typeof debounce>>();
+
+function saveCachedEditorStateDebounced(stateKey: string | null, state: EditorState) {
+  if (!stateKey) return;
+  let saver = stateSavers.get(stateKey);
+  if (saver == null) {
+    saver = debounce(
+      (s: EditorState) => saveCachedEditorState(stateKey, s),
+      SAVE_STATE_DEBOUNCE_MS,
+    );
+    stateSavers.set(stateKey, saver);
+  }
+  saver(state);
+}
+
+// NOTE: Only called when an editor unmounts, so the saver is dropped rather than left in the map
+//  for every state key the session has ever shown. A pending saver holds the last EditorState,
+//  which holds the whole document.
+function flushCachedEditorState(stateKey: string | null) {
+  if (!stateKey) return;
+  const saver = stateSavers.get(stateKey);
+  if (saver == null) return;
+  saver.flush();
+  stateSavers.delete(stateKey);
+}
+
 function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
   if (!stateKey || state == null) return;
   const stateObj = state.toJSON(stateFields);
 
-  // Save state in sessionStorage by removing doc and saving the hash of it instead.
+  // Save state in sessionStorage by removing doc and saving a fingerprint of it instead.
   // This will be checked on restore and put back in if it matches.
-  stateObj.docHash = md5(stateObj.doc);
+  // Editable documents get the exact hash, so a collision can never restore undo history
+  // belonging to other content
+  stateObj.docHash = docFingerprint(stateObj.doc, { exact: !state.readOnly });
   stateObj.doc = undefined;
 
   try {
@@ -668,7 +713,7 @@ function saveCachedEditorState(stateKey: string | null, state: EditorState | nul
   }
 }
 
-function getCachedEditorState(doc: string, stateKey: string | null) {
+function getCachedEditorState(doc: string, stateKey: string | null, readOnly: boolean) {
   if (stateKey == null) return;
 
   try {
@@ -678,7 +723,7 @@ function getCachedEditorState(doc: string, stateKey: string | null) {
     const { docHash, ...state } = JSON.parse(stateStr);
 
     // Ensure the doc matches the one that was used to save the state
-    if (docHash !== md5(doc)) {
+    if (docHash !== docFingerprint(doc, { exact: !readOnly })) {
       return null;
     }
 

apps/yaak-client/components/core/Editor/extensions.ts

@@ -59,6 +59,7 @@ import { pluralizeCount } from "../../../lib/pluralize";
 import { showGraphQLDocExplorerAtom } from "../../graphql/graphqlAtoms";
 import type { EditorProps } from "./Editor";
 import { jsonParseLinter } from "./json-lint";
+import { largeValues, mediaValues } from "./largeValues";
 import { pairs } from "./pairs/extension";
 import { searchMatchCount } from "./searchMatchCount";
 import { text } from "./text/extension";
@@ -258,8 +259,19 @@ export const baseExtensions = [
 export const readonlyExtensions = [
   EditorState.readOnly.of(true),
   EditorView.contentAttributes.of({ tabindex: "-1" }),
+  // Nobody is editing this, so every rule applies
+  largeValues,
 ];
 
+/**
+ * The counterpart for a document being edited.
+ *
+ * Only encoded media collapses here: it is pasted rather than typed, and replaced rather than
+ * edited, so a tag stands in for it without hiding anything anyone meant to read. The rules that
+ * hide text by length alone stay out. See {@link mediaValues}.
+ */
+export const editableExtensions = [mediaValues];
+
 export const multiLineExtensions = ({ hideGutter }: { hideGutter?: boolean }) => [
   search({ top: true }),
   searchMatchCount(),

apps/yaak-client/components/core/Editor/json-lint.ts

@@ -1,9 +1,29 @@
 import type { Diagnostic } from "@codemirror/lint";
 import type { EditorView } from "@codemirror/view";
-import { parse as jsonLintParse } from "@prantlf/jsonlint";
+import { type ParseError, parse, printParseErrorCode } from "jsonc-parser";
 
 const TEMPLATE_SYNTAX_REGEX = /\$\{\[[\s\S]*?]}/g;
 
+// jsonc-parser reports error codes, so these are the words the editor shows for them
+const MESSAGES: Record<string, string> = {
+  InvalidSymbol: "Invalid symbol",
+  InvalidNumberFormat: "Invalid number format",
+  PropertyNameExpected: "Property name expected",
+  ValueExpected: "Value expected",
+  ColonExpected: "Colon expected",
+  CommaExpected: "Comma expected",
+  CloseBraceExpected: "Closing brace expected",
+  CloseBracketExpected: "Closing bracket expected",
+  EndOfFileExpected: "End of file expected",
+  InvalidCommentToken: "Comments are not allowed",
+  UnexpectedEndOfComment: "Unexpected end of comment",
+  UnexpectedEndOfString: "Unexpected end of string",
+  UnexpectedEndOfNumber: "Unexpected end of number",
+  InvalidUnicode: "Invalid unicode sequence",
+  InvalidEscapeCharacter: "Invalid escape character",
+  InvalidCharacter: "Invalid character",
+};
+
 interface JsonLintOptions {
   allowComments?: boolean;
   allowTrailingCommas?: boolean;
@@ -11,34 +31,30 @@ interface JsonLintOptions {
 
 export function jsonParseLinter(options?: JsonLintOptions) {
   return (view: EditorView): Diagnostic[] => {
-    try {
-      const doc = view.state.doc.toString();
-      // We need lint to not break on stuff like {"foo:" ${[ ... ]}} so we'll replace all template
-      // syntax with repeating `1` characters, so it's valid JSON and the position is still correct.
-      const escapedDoc = doc.replace(TEMPLATE_SYNTAX_REGEX, (m) => "1".repeat(m.length));
-      jsonLintParse(escapedDoc, {
-        mode: (options?.allowComments ?? true) ? "cjson" : "json",
-        ignoreTrailingCommas: options?.allowTrailingCommas ?? false,
-      });
-      // oxlint-disable-next-line no-explicit-any
-    } catch (err: any) {
-      if (!("location" in err)) {
-        return [];
-      }
+    const doc = view.state.doc.toString();
+    if (doc.trim() === "") return [];
 
-      // const line = location?.start?.line;
-      // const column = location?.start?.column;
-      if (err.location.start.offset) {
-        return [
-          {
-            from: err.location.start.offset,
-            to: err.location.start.offset,
-            severity: "error",
-            message: err.message,
-          },
-        ];
-      }
-    }
-    return [];
+    // We need lint to not break on stuff like {"foo:" ${[ ... ]}} so we'll replace all template
+    // syntax with repeating `1` characters, so it's valid JSON and the position is still correct.
+    const escapedDoc = doc.replace(TEMPLATE_SYNTAX_REGEX, (m) => "1".repeat(m.length));
+
+    const errors: ParseError[] = [];
+    parse(escapedDoc, errors, {
+      allowTrailingComma: options?.allowTrailingCommas ?? false,
+      disallowComments: !(options?.allowComments ?? true),
+    });
+
+    // Later errors are mostly consequences of the first one, so only that one is shown
+    const error = errors[0];
+    if (error == null) return [];
+
+    return [
+      {
+        from: error.offset,
+        to: error.offset + error.length,
+        severity: "error",
+        message: MESSAGES[printParseErrorCode(error.error)] ?? "Invalid JSON",
+      },
+    ];
   };
 }

apps/yaak-client/components/core/Editor/json/breadcrumbExtension.ts

@@ -0,0 +1,41 @@
+import { syntaxTree } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import type { EditorView, ViewUpdate } from "@codemirror/view";
+import { ViewPlugin } from "@codemirror/view";
+import type { JsonPathSegment } from "./jsonPath";
+import { jsonPathSegmentsAt } from "./jsonPath";
+
+export interface BreadcrumbUpdate {
+  /** Path to the cursor, or `null` when the document isn't JSON. */
+  segments: JsonPathSegment[] | null;
+}
+
+/**
+ * Reports the JSON path under the cursor when the editor is created (it may restore a
+ * cached selection), and whenever the selection, document, or parsed tree changes. The
+ * tree matters because large documents parse in the background, so a path read early
+ * can be wrong until the parser reaches the cursor.
+ *
+ * The callback is not fired on blur: moving focus to the filter box (by clicking
+ * a crumb) must not erase the breadcrumb that was just acted on.
+ */
+export function jsonBreadcrumbExtension(onUpdate: (update: BreadcrumbUpdate) => void): Extension {
+  const report = (view: EditorView) => {
+    onUpdate({ segments: jsonPathSegmentsAt(view.state, view.state.selection.main.head) });
+  };
+
+  return ViewPlugin.define((view) => {
+    report(view);
+    return {
+      update(update: ViewUpdate) {
+        if (
+          update.selectionSet ||
+          update.docChanged ||
+          syntaxTree(update.startState) !== syntaxTree(update.state)
+        ) {
+          report(update.view);
+        }
+      },
+    };
+  });
+}

apps/yaak-client/components/core/Editor/json/jsonPath.test.ts

@@ -0,0 +1,136 @@
+import { EditorState } from "@codemirror/state";
+import { jsonc } from "@shopify/lang-jsonc";
+import { forceParsing } from "@codemirror/language";
+import { describe, expect, test } from "vite-plus/test";
+import { jsonPathSegmentsAt, jsonPathToSegments, segmentsToJsonPath } from "./jsonPath";
+
+function stateFor(doc: string): EditorState {
+  const state = EditorState.create({ doc, extensions: [jsonc()] });
+  // Ensure the whole doc is parsed so resolveInner sees a complete tree.
+  forceParsing({ state } as never, doc.length, 5000);
+  return state;
+}
+
+/** JSONPath produced when the cursor sits just after the first occurrence of `needle`. */
+function pathAt(doc: string, needle: string): string {
+  const pos = doc.indexOf(needle) + needle.length;
+  const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+  if (segs == null) throw new Error("no JSON tree");
+  return segmentsToJsonPath(segs);
+}
+
+/** JSONPath produced when the cursor sits just before the first occurrence of `needle`. */
+function pathBefore(doc: string, needle: string): string {
+  const pos = doc.indexOf(needle);
+  const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+  if (segs == null) throw new Error("no JSON tree");
+  return segmentsToJsonPath(segs);
+}
+
+describe("jsonPathSegmentsAt", () => {
+  test("nested object keys", () => {
+    const doc = `{ "address": { "geo": { "lat": "-37" } } }`;
+    expect(pathAt(doc, `-37`)).toBe(`$.address.geo.lat`);
+  });
+
+  test("array element index", () => {
+    const doc = `{ "featured": [ { "id": 1 }, { "id": 2 } ] }`;
+    expect(pathAt(doc, `2`)).toBe(`$.featured[1].id`);
+  });
+
+  test("root array element", () => {
+    const doc = `[ { "id": 1 }, { "id": 2 } ]`;
+    expect(pathAt(doc, `"id": 2`)).toBe(`$[1].id`);
+  });
+
+  test("key containing a dot uses bracket-quote notation", () => {
+    const doc = `{ "sort": { "link": { "filter": { "category.id": [ "100" ] } } } }`;
+    expect(pathAt(doc, `"100"`)).toBe(`$.sort.link.filter["category.id"][0]`);
+  });
+
+  test("cursor on a property name resolves that key", () => {
+    const doc = `{ "outer": { "inner": 5 } }`;
+    expect(pathAt(doc, `"inner"`)).toBe(`$.outer.inner`);
+  });
+
+  test("deeply nested arrays and objects", () => {
+    const doc = `{ "a": [ { "b": [ 10, 20, 30 ] } ] }`;
+    expect(pathAt(doc, `30`)).toBe(`$.a[0].b[2]`);
+  });
+
+  test("root scalar yields the root path", () => {
+    expect(pathAt(`"hello"`, `hello`)).toBe(`$`);
+  });
+
+  test("caret just before a key still resolves that key", () => {
+    // The character to the left is the object's whitespace, not the property.
+    const doc = `[\n  {\n    "userId": 1,\n    "body": "x"\n  }\n]`;
+    expect(pathBefore(doc, `"body"`)).toBe(`$[0].body`);
+  });
+
+  test("caret in a line's indentation resolves that line's member", () => {
+    // Caret in the blank indentation of the `title` line (structurally the
+    // object's whitespace) reads as being on `title`, not a neighbour.
+    const doc = `[\n  {\n    "userId": 1,\n    "id": 1,\n    "title": "x"\n  }\n]`;
+    const pos = doc.indexOf(`"title"`) - 2; // two spaces into the title line
+    const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+    expect(segs == null ? null : segmentsToJsonPath(segs)).toBe(`$[0].title`);
+  });
+
+  test("caret at the end of an array element keeps the element index", () => {
+    // The caret sits after `}` where the left token is the object's close brace.
+    const doc = `[\n  { "id": 1 },\n  { "id": 2 }\n]`;
+    const pos = doc.indexOf(`},`) + 1;
+    const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+    expect(segs == null ? null : segmentsToJsonPath(segs)).toBe(`$[0]`);
+  });
+
+  test("non-JSON documents return null", () => {
+    const state = EditorState.create({ doc: `<xml/>` });
+    expect(jsonPathSegmentsAt(state, 3)).toBeNull();
+  });
+});
+
+describe("segmentsToJsonPath", () => {
+  test("empty segment list is the root", () => {
+    expect(segmentsToJsonPath([])).toBe(`$`);
+  });
+
+  test("partial path via count", () => {
+    const segs = [
+      { kind: "key", key: "a" },
+      { kind: "index", index: 2 },
+      { kind: "key", key: "b" },
+    ] as const;
+    expect(segmentsToJsonPath([...segs], 2)).toBe(`$.a[2]`);
+  });
+});
+
+describe("jsonPathToSegments", () => {
+  test("round-trips paths built by segmentsToJsonPath", () => {
+    for (const path of ["$", "$[0]", "$[0].id", '$.data["user.name"][12]', '$["say \\"hi\\""]']) {
+      const segments = jsonPathToSegments(path);
+      expect(segments).not.toBeNull();
+      expect(segmentsToJsonPath(segments ?? [])).toBe(path);
+    }
+  });
+
+  test("returns null for paths that don't name a single location", () => {
+    for (const path of [
+      "$..id",
+      "$[*]",
+      "$.items[?(@.id)]",
+      "$[0:2]",
+      "items[0]",
+      "$.a b",
+      '$["\\q"]',
+      '$["unterminated]',
+      '$["line\nbreak"]',
+      "$[01]",
+      "$[9007199254740993]",
+      "$.$",
+    ]) {
+      expect(jsonPathToSegments(path)).toBeNull();
+    }
+  });
+});

apps/yaak-client/components/core/Editor/json/jsonPath.ts

@@ -0,0 +1,102 @@
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
+import type { SyntaxNode } from "@lezer/common";
+import type { JsonPathSegment } from "@yaakapp-internal/lib/jsonPath";
+
+export { jsonPathToSegments } from "@yaakapp-internal/lib/jsonPath";
+export type { JsonPathSegment } from "@yaakapp-internal/lib/jsonPath";
+
+// Lezer node names from the JSONC grammar (@shopify/lang-jsonc). A JSON value is
+// exactly one of these; everything else in the tree is punctuation or a comment.
+const VALUE_NODES = new Set(["Object", "Array", "String", "Number", "True", "False", "Null"]);
+// The nodes with children that a caret can land "between" — its whitespace and
+// punctuation belong to the container, not to any value inside it.
+const CONTAINER_NODES = new Set(["Object", "Array", "JsoncText"]);
+
+/** Read a `PropertyName` (a quoted JSON string) back to its raw key. */
+function keyFromPropertyName(node: SyntaxNode, state: EditorState): string {
+  const raw = state.doc.sliceString(node.from, node.to);
+  try {
+    return JSON.parse(raw) as string;
+  } catch {
+    // A half-typed or malformed key still deserves a best-effort label.
+    return raw.replace(/^"|"$/g, "");
+  }
+}
+
+/** Index of `child` among the value elements of its parent `Array` node. */
+function indexInArray(array: SyntaxNode, child: SyntaxNode): number {
+  let idx = 0;
+  for (let c = array.firstChild; c != null; c = c.nextSibling) {
+    if (c.from === child.from && c.to === child.to) return idx;
+    if (VALUE_NODES.has(c.name)) idx++;
+  }
+  return idx;
+}
+
+/**
+ * The path from the document root to the member on the caret's line, or `null`
+ * when the document has no JSON tree (a different language, or empty). An empty
+ * array means the caret sits at the root value itself.
+ *
+ * A caret exactly on a token uses that token. A caret in a line's whitespace
+ * resolves to the enclosing object or array, so it's re-anchored to the first
+ * non-whitespace character on that line — in pretty-printed JSON each member
+ * starts its own line, so that's the member's own token. This tracks "the line
+ * I'm on" without guessing between neighbouring keys.
+ *
+ * From the anchor, each ancestor contributes a segment: a `Property` its key, a
+ * value directly inside an `Array` its index. Collected deepest-first, reversed.
+ */
+export function jsonPathSegmentsAt(state: EditorState, pos: number): JsonPathSegment[] | null {
+  const tree = syntaxTree(state);
+  if (tree.topNode.name !== "JsoncText") return null;
+
+  let node: SyntaxNode = tree.resolveInner(pos, -1);
+  if (CONTAINER_NODES.has(node.name)) {
+    const line = state.doc.lineAt(pos);
+    const indent = line.text.length - line.text.trimStart().length;
+    if (indent < line.text.length) {
+      node = tree.resolveInner(line.from + indent, 1);
+    }
+  }
+
+  const segments: JsonPathSegment[] = [];
+  let cur: SyntaxNode | null = node;
+  while (cur != null) {
+    const parent: SyntaxNode | null = cur.parent;
+    if (cur.name === "Property") {
+      const nameNode = cur.getChild("PropertyName");
+      if (nameNode != null) {
+        segments.push({ kind: "key", key: keyFromPropertyName(nameNode, state) });
+      }
+    } else if (parent != null && parent.name === "Array" && VALUE_NODES.has(cur.name)) {
+      segments.push({ kind: "index", index: indexInArray(parent, cur) });
+    }
+    cur = parent;
+  }
+
+  segments.reverse();
+  return segments;
+}
+
+const BARE_KEY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
+/** A single segment as JSONPath, choosing dot vs. bracket form for a key. */
+function segmentToJsonPath(segment: JsonPathSegment): string {
+  if (segment.kind === "index") return `[${segment.index}]`;
+  // jsonpath-plus interprets a bare `$` as its root operator.
+  if (BARE_KEY.test(segment.key) && segment.key !== "$") return `.${segment.key}`;
+  // Anything with a dot, space, quote, etc. must be a quoted bracket accessor.
+  // JSON.stringify gives correct double-quoting and escaping, matching the
+  // convention the JSONPath filter box already displays.
+  return `[${JSON.stringify(segment.key)}]`;
+}
+
+/**
+ * Build a JSONPath expression for the first `count` segments (all of them by
+ * default). `segmentsToJsonPath([])` is the root, `$`.
+ */
+export function segmentsToJsonPath(segments: JsonPathSegment[], count = segments.length): string {
+  return "$" + segments.slice(0, count).map(segmentToJsonPath).join("");
+}

apps/yaak-client/components/core/Editor/largeValues.test.ts

@@ -0,0 +1,500 @@
+import { EditorState } from "@codemirror/state";
+import { jsonc } from "@shopify/lang-jsonc";
+import { text } from "./text/extension";
+import { twig } from "./twig/extension";
+import { describe, expect, test } from "vite-plus/test";
+import {
+  COLLAPSE_MEDIA_CHARS,
+  COLLAPSE_TOKEN_CHARS,
+  collapseDecorations,
+  largeValues,
+  MAX_VISIBLE_LINE_CHARS,
+} from "./largeValues";
+import type { SniffedValue } from "./sniffValue";
+
+const BIG = "A".repeat(1_000_000);
+
+/** With a grammar, so tokens can be collapsed individually */
+const jsonState = (doc: string) => EditorState.create({ doc, extensions: [jsonc(), largeValues] });
+
+/** Without a grammar, so only the column rule applies */
+const plainState = (doc: string) => EditorState.create({ doc, extensions: largeValues });
+
+/**
+ * The decorations as if the whole document were on screen.
+ *
+ * In the editor the plugin passes the viewport instead, which is the same call with narrower
+ * ranges — the rules themselves don't know the difference.
+ */
+function decorationsFor(state: EditorState) {
+  return collapseDecorations(state, [{ from: 0, to: state.doc.length }]);
+}
+
+function collapsedRanges(state: EditorState) {
+  const ranges: { from: number; to: number }[] = [];
+  const iter = decorationsFor(state).iter();
+  while (iter.value != null) {
+    ranges.push({ from: iter.from, to: iter.to });
+    iter.next();
+  }
+  return ranges;
+}
+
+/** How much of each line is still rendered */
+function visibleLineLengths(state: EditorState) {
+  const hidden = collapsedRanges(state);
+  const lengths: number[] = [];
+  for (let n = 1; n <= state.doc.lines; n++) {
+    const line = state.doc.line(n);
+    const covered = hidden
+      .filter((h) => h.from >= line.from && h.to <= line.to)
+      .reduce((sum, h) => sum + (h.to - h.from), 0);
+    lengths.push(line.length - covered);
+  }
+  return lengths;
+}
+
+describe("collapsing", () => {
+  test("leaves an ordinary body alone", () => {
+    expect(collapsedRanges(jsonState('{"hello":"world"}'))).toEqual([]);
+  });
+
+  test("leaves a large body of short lines alone", () => {
+    const doc = Array.from({ length: 20_000 }, (_, i) => `  { "id": ${i} },`).join("\n");
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+    expect(collapsedRanges(jsonState(doc))).toEqual([]);
+  });
+
+  test("leaves a line just under the column limit alone", () => {
+    expect(collapsedRanges(plainState("x".repeat(MAX_VISIBLE_LINE_CHARS)))).toEqual([]);
+  });
+
+  test("never renders more than the column limit per line", () => {
+    for (const state of [jsonState(`{"image":"${BIG}"}`), plainState(BIG)]) {
+      for (const length of visibleLineLengths(state)) {
+        expect(length).toBeLessThanOrEqual(MAX_VISIBLE_LINE_CHARS);
+      }
+    }
+  });
+
+  test("keeps the document text intact", () => {
+    const doc = `{"image":"${BIG}"}`;
+    expect(jsonState(doc).sliceDoc()).toBe(doc);
+    expect(jsonState(doc).doc.length).toBe(doc.length);
+  });
+});
+
+describe("token collapsing, with a grammar", () => {
+  test("hides the whole value, leaving its quotes visible", () => {
+    const doc = `{"name":"a.png","image":"${BIG}","size":12}`;
+    const state = jsonState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(1);
+    // Exactly the text between the quotes, so the line reads as `"image":"<tag>"`
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(BIG);
+    expect(doc[ranges[0]!.from - 1]).toBe('"');
+    expect(doc[ranges[0]!.to]).toBe('"');
+
+    // Everything after the value is still rendered, unlike a plain column cut
+    expect(doc.slice(ranges[0]!.to)).toContain('"size":12}');
+  });
+
+  // Small enough that the parse always finishes inside PARSE_TIMEOUT_MS, even on a slow
+  // machine. With a bigger body this falls back to the column cut, which is by design but
+  // makes the assertion depend on how fast the runner is.
+  test("keeps every key visible in a minified body with several large values", () => {
+    const chunk = "B".repeat(20_000);
+    const doc = `{${["a", "b", "c", "d", "e"].map((k) => `"${k}":"${chunk}"`).join(",")}}`;
+    const state = jsonState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(5);
+    for (const key of ["a", "b", "c", "d", "e"]) {
+      // No collapse swallows the key
+      const at = doc.indexOf(`"${key}":`);
+      expect(ranges.some((r) => r.from <= at && r.to > at)).toBe(false);
+    }
+    expect(visibleLineLengths(state)[0]).toBeLessThanOrEqual(MAX_VISIBLE_LINE_CHARS);
+  });
+
+  test("collapses a value on a pretty-printed line", () => {
+    const doc = `{\n  "name": "a.png",\n  "image": "${BIG}"\n}`;
+    const state = jsonState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(1);
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(BIG);
+    // Only the long line is touched, and all that is left of it is `  "image": ""`
+    expect(visibleLineLengths(state)).toEqual([1, 18, 13, 1]);
+    expect(state.doc.line(2).text).toBe('  "name": "a.png",');
+  });
+
+  test("ignores tokens under the collapse threshold", () => {
+    // Under the threshold once the surrounding quotes are counted
+    const short = "C".repeat(COLLAPSE_TOKEN_CHARS - 10);
+    const doc = `{${Array.from({ length: 4 }, (_, i) => `"k${i}":"${short}"`).join(",")}}`;
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+
+    // Nothing is big enough to collapse on its own, so the column rule takes over
+    const ranges = collapsedRanges(jsonState(doc));
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.to).toBe(doc.length);
+  });
+});
+
+describe("column collapsing, without a grammar", () => {
+  test("collapses everything past the limit", () => {
+    const ranges = collapsedRanges(plainState(BIG));
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+    expect(ranges[0]!.to).toBe(BIG.length);
+  });
+
+  test("handles a long line of many short tokens", () => {
+    // A single-line CSV row: no token is long enough to collapse on its own
+    const row = Array.from({ length: 40_000 }, (_, i) => `value ${i}`).join(", ");
+    const ranges = collapsedRanges(plainState(row));
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+  });
+
+  test("collapses each long line independently", () => {
+    const doc = `${BIG}\nshort\n${BIG}`;
+    const ranges = collapsedRanges(plainState(doc));
+    expect(ranges).toHaveLength(2);
+    for (const length of visibleLineLengths(plainState(doc))) {
+      expect(length).toBeLessThanOrEqual(MAX_VISIBLE_LINE_CHARS);
+    }
+  });
+
+  test("never hides a line break", () => {
+    const doc = `${BIG}\nshort`;
+    const state = plainState(doc);
+    for (const { from, to } of collapsedRanges(state)) {
+      expect(state.sliceDoc(from, to)).not.toContain("\n");
+    }
+    expect(state.doc.lines).toBe(2);
+  });
+});
+
+describe("undelimited tokens", () => {
+  // The text grammar parses a whole line as one token. Collapsing it whole would leave the
+  // line with nothing on it but a tag, so the column cut handles it instead.
+  const textState = (doc: string) => EditorState.create({ doc, extensions: [text(), largeValues] });
+
+  test("falls back to the column cut for a long line of plain text", () => {
+    const doc = Array.from({ length: 90_000 }, (_, i) => `word${i}`).join(" ");
+    const ranges = collapsedRanges(textState(doc));
+
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+    expect(ranges[0]!.to).toBe(doc.length);
+  });
+
+  test("leaves the start of the line readable", () => {
+    const doc = `IMPORTANT-PREFIX ${"z".repeat(500_000)}`;
+    const state = textState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+    expect(state.sliceDoc(0, 16)).toBe("IMPORTANT-PREFIX");
+  });
+});
+
+describe("sniffing the collapsed value", () => {
+  /** The widget standing in for each collapse, in document order */
+  function widgets(state: EditorState) {
+    const found: { valueFrom: number; sniffed: SniffedValue | null }[] = [];
+    const iter = decorationsFor(state).iter();
+    while (iter.value != null) {
+      found.push(iter.value.spec.widget);
+      iter.next();
+    }
+    return found;
+  }
+
+  /** A base64 value that starts with a PNG signature and runs on well past the limits */
+  function pngBase64(length = 1_000_000) {
+    const bytes = new Uint8Array(length);
+    bytes.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of bytes) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  test("names the format of a base64 value inside JSON", () => {
+    const state = jsonState(`{"image":"${pngBase64()}"}`);
+    expect(widgets(state)[0]?.sniffed).toMatchObject({ mime: "image/png", label: "PNG" });
+  });
+
+  test("names the format of a data URI", () => {
+    const doc = `{"image":"data:image/jpeg;base64,${BIG}"}`;
+    expect(widgets(jsonState(doc))[0]?.sniffed).toMatchObject({ label: "JPEG" });
+  });
+
+  test("names nothing when the value is just text", () => {
+    expect(widgets(jsonState(`{"image":"${BIG}"}`))[0]?.sniffed).toBeNull();
+    expect(widgets(plainState(BIG))[0]?.sniffed).toBeNull();
+  });
+
+  test("reads a column cut from the start of its line, not from the cut", () => {
+    // A body that is nothing but one base64 blob: the tail is hidden, but the value it
+    // belongs to begins at the start of the line, which is where the signature is
+    const state = plainState(pngBase64());
+    const [widget] = widgets(state);
+
+    expect(widget?.valueFrom).toBe(0);
+    expect(widget?.sniffed).toMatchObject({ label: "PNG" });
+  });
+
+  test("reads a token collapse from the value itself", () => {
+    const doc = `{"image":"${pngBase64()}"}`;
+    const [widget] = widgets(jsonState(doc));
+
+    // Just past the opening quote, so the signature is the first thing it sees
+    expect(widget?.valueFrom).toBe(doc.indexOf('"', doc.indexOf("image") + 6) + 1);
+    expect(widget?.sniffed).toMatchObject({ label: "PNG" });
+  });
+
+  test("finds a run that starts partway through a line, and names it", () => {
+    // No grammar here, and the value is not the whole line. The run is found by its alphabet,
+    // so the prefix stays on screen and the blob is still named.
+    const prefix = "some prefix text ";
+    const state = plainState(`${prefix}${pngBase64()}`);
+    const [widget] = widgets(state);
+
+    expect(widget?.valueFrom).toBe(prefix.length);
+    expect(widget?.sniffed).toMatchObject({ label: "PNG" });
+  });
+});
+
+describe("recomputing", () => {
+  test("updates when the document changes", () => {
+    const state = plainState('{"image":"short"}');
+    expect(collapsedRanges(state)).toEqual([]);
+
+    const next = state.update({
+      changes: { from: 0, to: state.doc.length, insert: BIG },
+    }).state;
+    expect(collapsedRanges(next)).toHaveLength(1);
+  });
+});
+
+describe("media collapsing, below the length rules", () => {
+  /** A real PNG signature, at a size that no length rule would touch */
+  function png(bytes: number) {
+    const b = new Uint8Array(bytes);
+    b.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of b) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  /** Well under every length threshold, so only the media rule can collapse it */
+  const SMALL = png(3_000);
+
+  test("collapses a small image on a short line", () => {
+    expect(SMALL.length).toBeLessThan(MAX_VISIBLE_LINE_CHARS);
+    expect(SMALL.length).toBeLessThan(COLLAPSE_TOKEN_CHARS);
+
+    const state = jsonState(`{\n  "avatar": "${SMALL}"\n}`);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(1);
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(SMALL);
+  });
+
+  test("names it, so the tag can say what it is", () => {
+    const state = jsonState(`{"avatar":"${SMALL}"}`);
+    const iter = decorationsFor(state).iter();
+    expect(iter.value?.spec.widget.sniffed).toMatchObject({ mime: "image/png", label: "PNG" });
+  });
+
+  test("leaves a value of the same size alone when nothing recognises it", () => {
+    // The only difference from the case above is what the bytes turn out to be
+    const prose = "x".repeat(SMALL.length);
+    expect(collapsedRanges(jsonState(`{"note":"${prose}"}`))).toEqual([]);
+  });
+
+  test("leaves anything under the media threshold alone, recognised or not", () => {
+    const tiny = png(400);
+    expect(tiny.length).toBeLessThan(COLLAPSE_MEDIA_CHARS);
+    expect(collapsedRanges(jsonState(`{"icon":"${tiny}"}`))).toEqual([]);
+  });
+
+  test("leaves text alone even when its first bytes match a signature", () => {
+    // `Qk0` decodes to `BM`, the whole of the BMP signature. Two bytes come up by chance often
+    // enough that the sniff alone must not be allowed to hide something.
+    const prose = `Qk0 ${"the quick brown fox jumps over the lazy dog. ".repeat(40)}`;
+    expect(prose.length).toBeGreaterThan(COLLAPSE_MEDIA_CHARS);
+    expect(collapsedRanges(jsonState(`{"note":"${prose}"}`))).toEqual([]);
+  });
+
+  test("still collapses it once it is long enough to be a rendering problem", () => {
+    // Past the length rule the sniff no longer decides anything, so this is hidden for its size
+    const prose = "Qk0 " + "words and more words ".repeat(COLLAPSE_TOKEN_CHARS);
+    expect(collapsedRanges(jsonState(`{"note":"${prose}"}`))).toHaveLength(1);
+  });
+
+  test("collapses a data URI on a short line", () => {
+    const state = jsonState(`{"avatar":"data:image/jpeg;base64,${SMALL}"}`);
+    expect(collapsedRanges(state)).toHaveLength(1);
+  });
+
+  test("still leaves an ordinary document completely untouched", () => {
+    const doc = Array.from({ length: 5_000 }, (_, i) => `  { "id": ${i}, "name": "item" },`).join(
+      "\n",
+    );
+    expect(collapsedRanges(jsonState(doc))).toEqual([]);
+  });
+});
+
+describe("media rule only, for a document being edited", () => {
+  /** What an editable editor gets: rule 2 alone */
+  function editableRanges(state: EditorState) {
+    const ranges: { from: number; to: number }[] = [];
+    const iter = collapseDecorations(state, [{ from: 0, to: state.doc.length }], "media").iter();
+    while (iter.value != null) {
+      ranges.push({ from: iter.from, to: iter.to });
+      iter.next();
+    }
+    return ranges;
+  }
+
+  function png(bytes: number) {
+    const b = new Uint8Array(bytes);
+    b.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of b) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  test("collapses a pasted image, the one thing it is for", () => {
+    const value = png(3_000);
+    const state = jsonState(`{\n  "avatar": "${value}"\n}`);
+
+    expect(editableRanges(state)).toHaveLength(1);
+    expect(state.sliceDoc(editableRanges(state)[0]!.from, editableRanges(state)[0]!.to)).toBe(
+      value,
+    );
+  });
+
+  test("leaves a long value alone when nothing can name it", () => {
+    // Rule 1 would take this on a stalling line. Editing it is plausible, so it stays.
+    const doc = `{"blob":"${"Z".repeat(COLLAPSE_TOKEN_CHARS * 3)}"}`;
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+    expect(editableRanges(jsonState(doc))).toEqual([]);
+  });
+
+  test("never cuts at the column limit, which would strand text out of reach", () => {
+    // Rule 3 territory: a minified body with no value big enough to collapse on its own
+    const doc = `[${Array.from({ length: 4_000 }, (_, i) => `"word-${i}"`).join(",")}]`;
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+    expect(editableRanges(jsonState(doc))).toEqual([]);
+    // The read-only rules still cut it
+    expect(collapsedRanges(jsonState(doc))).toHaveLength(1);
+  });
+
+  test("never swallows a template tag, collapsing only the run beside it", () => {
+    // A brace is not in the base64 alphabet, so the run starts after the tag and the tag stays
+    // on screen where it can still be read and edited
+    const tag = "{{ image }}";
+    const doc = `{"avatar":"${tag}${png(3_000)}"}`;
+    const ranges = editableRanges(jsonState(doc));
+
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(doc.indexOf(tag) + tag.length);
+    expect(doc.slice(ranges[0]!.from, ranges[0]!.to)).not.toContain("{");
+  });
+
+  test("finds a data URI whole, header and all", () => {
+    const value = `data:image/jpeg;base64,${png(3_000)}`;
+    const doc = `{"avatar":"${value}"}`;
+    const ranges = editableRanges(jsonState(doc));
+
+    expect(ranges).toHaveLength(1);
+    expect(doc.slice(ranges[0]!.from, ranges[0]!.to)).toBe(value);
+  });
+
+  test("hides no line break, so the plugin may provide it from the viewport", () => {
+    const state = jsonState(`{\n  "a": "${png(3_000)}",\n  "b": 1\n}`);
+    for (const { from, to } of editableRanges(state)) {
+      expect(state.sliceDoc(from, to)).not.toContain("\n");
+    }
+  });
+});
+
+describe("templated fields, where the grammar is an overlay", () => {
+  // Every editable field mixes its language with twig, which mounts the base language as an
+  // overlay. Overlays are not traversed by `Tree.iterate`, so a rule that walks the tree sees
+  // one enormous Text node and finds nothing. Rule 2 reads the text instead, and this is the
+  // case that has to keep working: an image pasted into a JSON request body.
+  const twigState = (doc: string) =>
+    EditorState.create({
+      doc,
+      extensions: [
+        twig({
+          base: jsonc(),
+          environmentVariables: [],
+          completionOptions: [],
+          onClickVariable: () => {},
+          onClickMissingVariable: () => {},
+          onClickPathParameter: () => {},
+          extraExtensions: [],
+        }),
+        largeValues,
+      ],
+    });
+
+  function png(bytes: number) {
+    const b = new Uint8Array(bytes);
+    b.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of b) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  test("collapses a pasted image in a templated body", () => {
+    const value = png(3_000);
+    const state = twigState(`{\n  "avatar": "${value}"\n}`);
+    const ranges: { from: number; to: number }[] = [];
+    const iter = collapseDecorations(state, [{ from: 0, to: state.doc.length }], "media").iter();
+    while (iter.value != null) {
+      ranges.push({ from: iter.from, to: iter.to });
+      iter.next();
+    }
+
+    expect(ranges).toHaveLength(1);
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(value);
+  });
+});
+
+describe("viewport scoping", () => {
+  const doc = () => {
+    const value = "A".repeat(COLLAPSE_TOKEN_CHARS * 2);
+    return `{\n${["a", "b", "c"].map((k) => `  "${k}": "${value}"`).join(",\n")}\n}`;
+  };
+
+  test("decorates only the ranges it is given", () => {
+    const state = jsonState(doc());
+    const secondLine = state.doc.line(3);
+
+    const all = collapseDecorations(state, [{ from: 0, to: state.doc.length }]);
+    const one = collapseDecorations(state, [{ from: secondLine.from, to: secondLine.to }]);
+
+    expect(all.size).toBe(3);
+    expect(one.size).toBe(1);
+  });
+
+  test("covers a line the range only partly overlaps", () => {
+    // The viewport can start mid-line; the collapse still has to span the whole value
+    const state = jsonState(doc());
+    const line = state.doc.line(2);
+    const partial = collapseDecorations(state, [{ from: line.from + 5, to: line.from + 6 }]);
+
+    expect(partial.size).toBe(1);
+    const iter = partial.iter();
+    expect(iter.to).toBeGreaterThan(line.from + 6);
+  });
+});

apps/yaak-client/components/core/Editor/largeValues.ts

@@ -0,0 +1,584 @@
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import type { EditorState, Extension, Range } from "@codemirror/state";
+import type { Tree as SyntaxTree } from "@lezer/common";
+import type { DecorationSet, ViewUpdate } from "@codemirror/view";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { fireAndForget } from "../../../lib/fireAndForget";
+import type { SniffedValue } from "./sniffValue";
+import { isEncodedRun, SNIFF_HEAD_CHARS, sniffValue } from "./sniffValue";
+
+/**
+ * How much of a line may be rendered before the rest is collapsed.
+ *
+ * VS Code draws nothing past column 10,000 (`editor.stopRenderingLineAfter`) for the same
+ * reason. It can afford to be blunt about it because it doesn't soft wrap by default; we
+ * collapse to a placeholder that can be opened instead.
+ */
+export const MAX_VISIBLE_LINE_CHARS = 10_000;
+
+/**
+ * A quoted value longer than this is collapsed whole, whatever it turns out to hold. Long
+ * enough that nothing a person might actually read is ever hidden on length alone.
+ */
+export const COLLAPSE_TOKEN_CHARS = 5_000;
+
+/**
+ * A quoted value longer than this is collapsed too, but only when {@link sniffValue} can say
+ * what it is. Encoded media is never worth reading, so once we can name it and offer a viewer,
+ * a tag beats a wall of base64 well below the length that would make it a rendering problem —
+ * this covers the avatars and icons that make up most base64 in real payloads. Anything we
+ * can't identify stays visible until it's big enough to be a problem on its own.
+ */
+export const COLLAPSE_MEDIA_CHARS = 1_000;
+
+/**
+ * Collapses what can't be read: over-long lines, which stall layout, and encoded media, which
+ * is only noise on screen.
+ *
+ * Layout cost tracks the length of the longest line, not the size of the document. A 1 MB
+ * response of ordinary multi-line JSON renders fine, while the same 1 MB on a single line stalls
+ * the UI, because soft wrap has to measure the whole line end to end to find its break points.
+ * Measured in WKWebView, the engine macOS ships: 221 ms per render pass at 1 MB and 968 ms at
+ * 3 MB, against 51 ms and 138 ms once collapsed, with soft wrap left on.
+ *
+ * Three rules:
+ *
+ * 1. Collapse quoted values over {@link COLLAPSE_TOKEN_CHARS} whole, so a base64 string reads
+ *    as `"image": "PNG · 999.8 KB"` with its key intact. A minified body with several large
+ *    values keeps every one of its keys. Needs a grammar to find the value.
+ * 2. Collapse quoted values over {@link COLLAPSE_MEDIA_CHARS} that sniff as a known format,
+ *    which is what catches an ordinary embedded image long before it is a rendering problem.
+ * 3. On a line still over {@link MAX_VISIBLE_LINE_CHARS}, collapse whatever is left past the
+ *    column limit. This needs no grammar, so it covers plain text, undelimited tokens, and any
+ *    line that is simply long.
+ *
+ * Only what the viewport covers is examined, and only lines long enough to hold a collapse are
+ * looked at, so a document of ordinary short lines costs a length check per visible line and
+ * nothing else — no grammar is consulted and no tree is walked.
+ *
+ * Nothing leaves the document. Copy, filter and save all still see the full text, and the tag
+ * itself is a button, opening a menu that views, copies or saves exactly what it stands for.
+ *
+ * The value's own head says what it is — a `data:` URI names its media type, and raw base64
+ * gives its format up in the first dozen bytes — so the tag can name the format and open the
+ * value in the matching viewer without any of it being read. See {@link sniffValue}.
+ *
+ * An editable document gets rule 2 alone, as {@link mediaValues}. Encoded media is never typed
+ * by hand: it arrives pasted, and the only edit anyone makes to it is replacing it wholesale,
+ * which the tag already supports — {@link EditorView.atomicRanges} makes it delete as one unit.
+ * So collapsing it hides nothing anyone was going to read. The other two rules stay out, since
+ * they hide text by length alone, without being able to say what it is: under rule 3 a minified
+ * body would become uneditable past the column limit, which really would be editing text you
+ * can't see.
+ */
+
+/**
+ * Which of the three rules to apply.
+ *
+ * `media` is the subset safe for a document being edited: collapse only what we can name.
+ */
+export type CollapseRules = "all" | "media";
+
+/**
+ * A hidden range, the value it belongs to, and what that value turned out to be.
+ *
+ * The hidden range and the value differ under the column rule, where the value starts at the
+ * beginning of the line but only what runs past the limit is hidden. The tag stands in for
+ * [from, to) and copies exactly that; the viewer needs the whole value, [valueFrom, to).
+ */
+interface Collapse {
+  from: number;
+  to: number;
+  valueFrom: number;
+  sniffed: SniffedValue | null;
+}
+
+/**
+ * Lucide's `chevron-down`, inlined because the widget builds its DOM synchronously and
+ * rendering React here would leave it empty while CodeMirror measures line heights.
+ */
+const CHEVRON_DOWN =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" ' +
+  'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ' +
+  'aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>';
+
+/**
+ * Marks the tag as the thing that opens the menu.
+ *
+ * The whole tag is the target rather than the chevron alone: there is only one action, and a
+ * label you can't click next to a hit area a few pixels wide is a worse button than the tag
+ * itself. The chevron stays as the affordance that says so.
+ *
+ * A span with a role rather than a real button, because a button's box model makes the line
+ * taller — the one thing this extension exists to keep from happening.
+ */
+function makeTagButton(el: HTMLElement, title: string, onOpen: () => void) {
+  el.role = "button";
+  el.ariaHasPopup = "menu";
+  el.tabIndex = 0;
+  el.title = title;
+  el.ariaLabel = title;
+
+  // Keep the editor from moving the cursor when the tag is pressed
+  el.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  el.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onOpen();
+  });
+  el.addEventListener("keydown", (e) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    e.stopPropagation();
+    onOpen();
+  });
+}
+
+class LargeValueWidget extends WidgetType {
+  constructor(
+    private readonly from: number,
+    private readonly to: number,
+    private readonly valueFrom: number,
+    private readonly sniffed: SniffedValue | null,
+  ) {
+    super();
+  }
+
+  eq(other: LargeValueWidget) {
+    return (
+      other.from === this.from &&
+      other.to === this.to &&
+      other.valueFrom === this.valueFrom &&
+      other.sniffed?.mime === this.sniffed?.mime
+    );
+  }
+
+  toDOM(view: EditorView) {
+    const length = this.to - this.from;
+
+    const el = document.createElement("span");
+    // The same neutral tag styling a path parameter uses. The theme scope matters: these
+    // tokens resolve against the tag palette, not the editor's ambient one, where a
+    // tag-sized border is meant to be near invisible.
+    el.className = "x-theme-templateTag x-theme-templateTag--secondary template-tag";
+
+    const thumbnail = buildThumbnail(view, this.valueFrom, this.to, this.sniffed);
+    if (thumbnail != null) {
+      el.appendChild(thumbnail);
+    }
+
+    const label = document.createElement("span");
+    // A named type reads as a stand-in for the value, so it only needs to say what and how big.
+    // Without a name there is nothing to show but the fact that something is missing.
+    label.textContent =
+      this.sniffed == null
+        ? `${formatSize(length)} hidden…`
+        : `${this.sniffed.label} · ${formatSize(length)}`;
+    el.appendChild(label);
+
+    const chevron = document.createElement("span");
+    chevron.className = "tag-action";
+    chevron.ariaHidden = "true";
+    chevron.innerHTML = CHEVRON_DOWN;
+    el.appendChild(chevron);
+
+    makeTagButton(
+      el,
+      this.sniffed == null ? "Value actions" : `${this.sniffed.label} actions`,
+      () => fireAndForget(this.openMenu(view, el)),
+    );
+
+    return el;
+  }
+
+  /**
+   * Copy, view and save, in a menu opened against the button.
+   *
+   * Everything the menu needs is pulled in on click. The editor loads on every response, and
+   * neither the React menu nor the viewers behind the dialog are worth carrying until someone
+   * asks for them.
+   */
+  private async openMenu(view: EditorView, tag: HTMLElement) {
+    const [{ toggleContextMenu }, { showLargeValueDialog }, { encodingLabel, largeValueActions }] =
+      await Promise.all([
+        import("../../../lib/contextMenu"),
+        import("../../LargeValueDialog"),
+        import("../../../lib/largeValue"),
+      ]);
+
+    const { sniffed } = this;
+    // Sliced when an action runs rather than now, so opening the menu never touches the value
+    const value = () => view.state.sliceDoc(this.valueFrom, this.to);
+    const head = view.state.sliceDoc(
+      this.valueFrom,
+      Math.min(this.valueFrom + SNIFF_HEAD_CHARS, this.to),
+    );
+
+    // The whole tag, so the menu can align to whichever edge has room beside it
+    const rect = tag.getBoundingClientRect();
+    toggleContextMenu({
+      id: "large-value",
+      triggerPosition: { x: rect.left, y: rect.bottom },
+      triggerRect: rect,
+      triggerEl: tag,
+      items: [
+        { type: "separator", label: encodingLabel(head, sniffed, this.to - this.from) },
+        ...largeValueActions({
+          value,
+          sniffed,
+          // Exactly what the tag stands in for, which under the column rule is only the tail
+          copyText: () => view.state.sliceDoc(this.from, this.to),
+          onView: () => showLargeValueDialog({ text: value(), sniffed }),
+        }),
+      ],
+    });
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+/**
+ * How much encoded image a tag will preview. Roughly 3 MB of file, base64 being 4 bytes to 3.
+ *
+ * The decode runs on WebKit's image thread, but the bitmap it produces is sized by the image's
+ * own dimensions, not by the box we draw it in — a 4000×3000 photo costs 48 MB however small the
+ * thumbnail. So there has to be a limit, even though encoded size is only a proxy for the one
+ * that matters: a well-compressed photo can decode larger than a lossless screenshot twice its
+ * file size. This is set high enough to cover ordinary screenshots and wallpapers, since a tag
+ * that previews some images and not others is worse than one that previews none. Only widgets in
+ * the viewport are ever built, so a screenful is the most that decode at once.
+ */
+const THUMBNAIL_MAX_CHARS = 4_000_000;
+
+/**
+ * A preview of the value, at a size fixed before it loads.
+ *
+ * The box is a fixed square from the moment it's inserted, so the image arriving never changes
+ * the line's height or the tag's width. A growing line box is the layout cost this whole
+ * extension exists to avoid, and an image of unknown dimensions is the classic way to cause one.
+ *
+ * The src is the value's own text handed straight to the decoder as a data URI. Decoding the
+ * base64 ourselves first would mean walking megabytes on the main thread, which is the one
+ * thing that must not happen here.
+ */
+function buildThumbnail(
+  view: EditorView,
+  valueFrom: number,
+  to: number,
+  sniffed: SniffedValue | null,
+): HTMLElement | null {
+  if (sniffed == null || !sniffed.mime.startsWith("image/")) return null;
+  if (sniffed.encoding !== "base64") return null;
+  if (to - valueFrom > THUMBNAIL_MAX_CHARS) return null;
+
+  const img = document.createElement("img");
+  img.className = "tag-thumbnail";
+  img.alt = "";
+  img.ariaHidden = "true";
+  img.decoding = "async";
+  // A magic number can be wrong, and a data URI can lie. Drop the box rather than leave a
+  // broken-image glyph sitting in the tag.
+  img.addEventListener("error", () => img.remove());
+  // Read the document and build the data URI after the widget is measured and on screen
+  requestAnimationFrame(() => {
+    if (!img.isConnected) return;
+    const payload = view.state.sliceDoc(valueFrom + sniffed.offset, to);
+    img.src = `data:${sniffed.mime};base64,${payload}`;
+  });
+  return img;
+}
+
+interface Line {
+  from: number;
+  to: number;
+}
+
+/**
+ * The lines the given ranges touch, in document order and each listed once.
+ *
+ * Only lines long enough to hold a collapse are returned. That check is what keeps this free on
+ * ordinary documents: no grammar is consulted and no tree is walked for a screen of short lines.
+ */
+function collapsibleLines(state: EditorState, ranges: readonly { from: number; to: number }[]) {
+  const lines: Line[] = [];
+  let lastFrom = -1;
+
+  for (const range of ranges) {
+    let pos = range.from;
+    for (;;) {
+      const line = state.doc.lineAt(pos);
+      if (line.from > lastFrom) {
+        lastFrom = line.from;
+        if (line.to - line.from >= COLLAPSE_MEDIA_CHARS) {
+          lines.push({ from: line.from, to: line.to });
+        }
+      }
+      if (line.to >= range.to) break;
+      pos = line.to + 1;
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * How long to spend parsing before falling back to the column rule.
+ *
+ * The initial parse is budgeted by time, so it stops partway through a document with several
+ * large values, and we'd only find the first one. Parsing the rest of a 1 MB body costs about
+ * 12 ms, against the 171 ms of layout it saves.
+ */
+const PARSE_TIMEOUT_MS = 100;
+
+/**
+ * The parsed tree covering these lines.
+ *
+ * Parsing is only ever forced for a line long enough to stall layout, where finding the values
+ * inside it is what saves the frame. For everything else we take whatever the background parse
+ * has reached and decorate again when it advances — a forced parse runs from the top of the
+ * document, so making one happen on every scroll would cost far more than the tags are worth.
+ */
+function treeForLines(state: EditorState, lines: Line[]): SyntaxTree {
+  const last = lines[lines.length - 1];
+  const stalls = lines.some((l) => l.to - l.from > MAX_VISIBLE_LINE_CHARS);
+  if (last == null || !stalls) {
+    return syntaxTree(state);
+  }
+  return ensureSyntaxTree(state, last.to, PARSE_TIMEOUT_MS) ?? syntaxTree(state);
+}
+
+const QUOTES = ['"', "'", "`"];
+
+/** A run of base64, long enough to be worth looking at. Nothing else can be encoded media. */
+const ENCODED_RUN = new RegExp(`[A-Za-z0-9+/=_-]{${COLLAPSE_MEDIA_CHARS},}`, "g");
+
+/** The header that turns a bare run into a data URI, when one sits right before it. */
+const DATA_URI_HEAD = /data:[^,;\s"']*(?:;[^,;\s"']*)*;base64,$/;
+
+/**
+ * Encoded media on this line, found by reading the text rather than the grammar.
+ *
+ * Deliberately grammar-free. Every editable field in the app mixes its language with the twig
+ * parser, which mounts the base language as an *overlay*, and overlays are not traversed by
+ * `Tree.iterate` — so a rule that walks the tree finds one enormous `Text` node and nothing
+ * inside it. Rule 2 has to work in those fields above all, since that is where images get
+ * pasted, and a run of base64 is a text pattern anyway: no grammar can describe it better than
+ * the alphabet does.
+ *
+ * A `data:` header is picked up by looking backwards from the run, so the whole URI collapses
+ * as one thing and its declared type is what names it.
+ */
+function findMediaRuns(state: EditorState, line: Line): Collapse[] {
+  const text = state.sliceDoc(line.from, line.to);
+  const collapses: Collapse[] = [];
+
+  ENCODED_RUN.lastIndex = 0;
+  for (let m = ENCODED_RUN.exec(text); m != null; m = ENCODED_RUN.exec(text)) {
+    let start = m.index;
+    // A data URI's own header breaks the alphabet, so the run starts after it
+    const header = DATA_URI_HEAD.exec(text.slice(0, start));
+    if (header != null) {
+      start = header.index;
+    }
+
+    const valueFrom = line.from + start;
+    const valueTo = line.from + m.index + m[0].length;
+    const head = state.sliceDoc(valueFrom, Math.min(valueFrom + SNIFF_HEAD_CHARS, valueTo));
+    const sniffed = sniffValue(head);
+
+    // Only hide what we can name. A short magic number matches by chance now and then, so the
+    // run itself has to look encoded too.
+    if (sniffed != null && sniffed.encoding === "base64" && isEncodedRun(head, sniffed.offset)) {
+      collapses.push({ from: valueFrom, to: valueTo, valueFrom, sniffed });
+    }
+  }
+
+  return collapses;
+}
+
+/**
+ * Quoted values big enough to be a rendering problem on their own, whatever they hold.
+ *
+ * Needs the grammar, to find where the value starts and ends, and so only runs for a document
+ * nobody is editing — which is also the only place this rule applies.
+ */
+function findLargeTokens(state: EditorState, tree: SyntaxTree, line: Line): Collapse[] {
+  const collapses: Collapse[] = [];
+
+  tree.iterate({
+    from: line.from,
+    to: line.to,
+    enter: (node) => {
+      // A node this small can't contain anything worth collapsing, and neither can its children
+      if (node.to - node.from < COLLAPSE_TOKEN_CHARS) return false;
+      // Only leaves, so we collapse the string itself rather than the object holding it
+      if (node.node.firstChild != null) return true;
+
+      const from = Math.max(node.from, line.from);
+      const to = Math.min(node.to, line.to);
+      const open = state.sliceDoc(from, from + 1);
+      const quoted = to - from >= 2 && QUOTES.includes(open) && state.sliceDoc(to - 1, to) === open;
+      if (!quoted) return false;
+
+      // Everything inside the quotes. The whole value is hidden, so it is its own value range
+      const valueFrom = from + 1;
+      const valueTo = to - 1;
+      if (valueTo - valueFrom < COLLAPSE_TOKEN_CHARS) return false;
+
+      const head = state.sliceDoc(valueFrom, Math.min(valueFrom + SNIFF_HEAD_CHARS, valueTo));
+      collapses.push({ from: valueFrom, to: valueTo, valueFrom, sniffed: sniffValue(head) });
+      return false;
+    },
+  });
+
+  return collapses;
+}
+
+/**
+ * Both rules' findings as one list, in document order, with nothing overlapping.
+ *
+ * A big quoted base64 value satisfies both rules, and two decorations over the same text is an
+ * error. The token wins where they collide, because its range stops at the quotes and so leaves
+ * the structure around it readable.
+ */
+function mergeCollapses(tokens: Collapse[], runs: Collapse[]): Collapse[] {
+  const merged = [...tokens];
+  for (const run of runs) {
+    if (!tokens.some((t) => run.from < t.to && t.from < run.to)) {
+      merged.push(run);
+    }
+  }
+  return merged.sort((a, b) => a.from - b.from);
+}
+
+/**
+ * Where the line runs past the column limit, counting only what is still visible after the
+ * token collapses, or -1 if it fits.
+ */
+function findColumnCut(line: Line, tokens: Collapse[]): number {
+  let visible = 0;
+  let pos = line.from;
+
+  for (const token of [...tokens, null]) {
+    const segmentEnd = token == null ? line.to : token.from;
+    if (segmentEnd > pos) {
+      if (visible + (segmentEnd - pos) > MAX_VISIBLE_LINE_CHARS) {
+        return pos + (MAX_VISIBLE_LINE_CHARS - visible);
+      }
+      visible += segmentEnd - pos;
+    }
+    if (token != null) {
+      pos = token.to;
+    }
+  }
+
+  return -1;
+}
+
+function collapsesForLine(
+  state: EditorState,
+  tree: SyntaxTree,
+  line: Line,
+  rules: CollapseRules,
+): Collapse[] {
+  const runs = findMediaRuns(state, line);
+  // Length alone only hides things on a line that would stall without it, and never in a
+  // document being edited, where hiding text by size would put it out of reach
+  const stalls = rules === "all" && line.to - line.from > MAX_VISIBLE_LINE_CHARS;
+  const tokens = mergeCollapses(stalls ? findLargeTokens(state, tree, line) : [], runs);
+
+  // Short enough to render, so there is nothing left to cut
+  if (!stalls) {
+    return tokens;
+  }
+
+  const cut = findColumnCut(line, tokens);
+  if (cut < 0) {
+    return tokens;
+  }
+
+  // The cut always lands in a visible stretch, so it never splits a token collapse
+  const kept = tokens.filter((t) => t.to <= cut);
+  // Only the tail is hidden, but the value it belongs to runs from the start of the line — a
+  // body that is nothing but one base64 blob is still recognisable from there
+  const head = state.sliceDoc(line.from, Math.min(line.from + SNIFF_HEAD_CHARS, line.to));
+  kept.push({ from: cut, to: line.to, valueFrom: line.from, sniffed: sniffValue(head) });
+  return kept;
+}
+
+/**
+ * The collapses covering the given document ranges.
+ *
+ * Kept separate from the plugin so the rules can be exercised against a state directly, with no
+ * view and no DOM.
+ */
+export function collapseDecorations(
+  state: EditorState,
+  ranges: readonly { from: number; to: number }[],
+  rules: CollapseRules = "all",
+): DecorationSet {
+  const lines = collapsibleLines(state, ranges);
+  if (lines.length === 0) {
+    return Decoration.none;
+  }
+
+  const tree = treeForLines(state, lines);
+  const decorations: Range<Decoration>[] = [];
+  for (const line of lines) {
+    for (const { from, to, valueFrom, sniffed } of collapsesForLine(state, tree, line, rules)) {
+      const widget = new LargeValueWidget(from, to, valueFrom, sniffed);
+      decorations.push(Decoration.replace({ widget }).range(from, to));
+    }
+  }
+  return Decoration.set(decorations);
+}
+
+/**
+ * Scoped to the viewport, so the cost is a screenful however big the document is.
+ *
+ * Recomputed when the document changes, when the viewport moves, and when background parsing
+ * advances — a value can only be found once the grammar has reached it.
+ */
+function collapsePlugin(rules: CollapseRules) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = collapseDecorations(view.state, view.visibleRanges, rules);
+      }
+
+      update(update: ViewUpdate) {
+        if (
+          update.docChanged ||
+          update.viewportChanged ||
+          syntaxTree(update.startState) !== syntaxTree(update.state)
+        ) {
+          this.decorations = collapseDecorations(
+            update.view.state,
+            update.view.visibleRanges,
+            rules,
+          );
+        }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+      // Step the cursor over a placeholder instead of stranding it inside, and delete it whole
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none),
+    },
+  );
+}
+
+/** All three rules. For a document nobody is editing. */
+export const largeValues: Extension = [collapsePlugin("all")];
+
+/** Only what we can name, which is the part that is safe to hide while someone is editing. */
+export const mediaValues: Extension = [collapsePlugin("media")];

apps/yaak-client/components/core/Editor/searchMatchCount.test.ts

@@ -0,0 +1,202 @@
+import { SearchQuery } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+import { describe, expect, test } from "vite-plus/test";
+import {
+  currentMatch,
+  literalSearch,
+  MAX_COUNT,
+  MatchCounter,
+  normalizeDoc,
+  normalizeSearch,
+  scanNormalized,
+  scanQuery,
+} from "./searchMatchCount";
+
+type QueryConfig = ConstructorParameters<typeof SearchQuery>[0];
+
+const stateOf = (doc: string) => EditorState.create({ doc });
+
+/**
+ * The matches the counter finds, having checked them against the search panel's own cursor.
+ *
+ * The cursor decides which ranges the editor highlights and which one `find next` lands on, so
+ * a count that doesn't agree with it is a wrong count, however fast it was to produce.
+ */
+function matchesOf(doc: string, config: QueryConfig) {
+  const state = stateOf(doc);
+  const query = new SearchQuery(config);
+  const matches = new MatchCounter().matches(state, query);
+  expect(matches).toEqual(scanQuery(state, query));
+  return matches;
+}
+
+const countOf = (doc: string, config: QueryConfig) => matchesOf(doc, config).length;
+
+describe("counting", () => {
+  test("counts every match, whatever the case", () => {
+    expect(countOf("one Two three two", { search: "two" })).toBe(2);
+    expect(countOf("one Two three two", { search: "two", caseSensitive: true })).toBe(1);
+  });
+
+  test("skips matches overlapping an earlier one", () => {
+    expect(countOf("aaaaa", { search: "aa" })).toBe(2);
+    expect(countOf("ababa", { search: "aba" })).toBe(1);
+  });
+
+  test("treats a query as text, not as a pattern", () => {
+    expect(countOf("a.b axb", { search: "a.b" })).toBe(1);
+  });
+
+  test("unquotes escapes unless the query is literal", () => {
+    expect(countOf("one\ntwo\nthree", { search: "\\n" })).toBe(2);
+    expect(countOf("one\\ntwo", { search: "\\n", literal: true })).toBe(1);
+  });
+
+  test("counts regexp and whole word queries through the cursor", () => {
+    expect(literalSearch(new SearchQuery({ search: "a", regexp: true }))).toBe(null);
+    expect(literalSearch(new SearchQuery({ search: "a", wholeWord: true }))).toBe(null);
+    expect(countOf("a1 b2 c3", { search: "[a-z]\\d", regexp: true })).toBe(3);
+    expect(countOf("cat cats cat", { search: "cat", wholeWord: true })).toBe(2);
+  });
+
+  test("stops counting at the cap", () => {
+    expect(countOf("x".repeat(MAX_COUNT + 100), { search: "x" })).toBe(MAX_COUNT + 1);
+  });
+
+  test("reports where the matches are", () => {
+    expect(matchesOf("ab..ab", { search: "ab" })).toEqual([
+      { from: 0, to: 2 },
+      { from: 4, to: 6 },
+    ]);
+  });
+
+  test("finds nothing to match with an empty needle", () => {
+    expect(scanNormalized(normalizeDoc("abc", false), "")).toEqual([]);
+  });
+});
+
+describe("normalization", () => {
+  test("finds what a character decomposes into", () => {
+    // The é is one character holding an `e`, and the match covers the whole of it
+    expect(matchesOf("café", { search: "e" })).toEqual([{ from: 3, to: 4 }]);
+    expect(matchesOf("file", { search: "fi" })).toEqual([{ from: 0, to: 1 }]);
+    expect(matchesOf("a…b", { search: "..." })).toEqual([{ from: 1, to: 2 }]);
+    expect(countOf("one two", { search: "one two" })).toBe(1);
+    expect(countOf("ｆｕｌｌ width", { search: "full" })).toBe(1);
+  });
+
+  test("matches a decomposed query against composed text, and the reverse", () => {
+    expect(countOf("café", { search: "café" })).toBe(1);
+    expect(countOf("café", { search: "café" })).toBe(1);
+    expect(countOf("café", { search: "café" })).toBe(1);
+  });
+
+  test("keeps offsets straight after an expansion", () => {
+    expect(matchesOf("é.é.end", { search: "end" })).toEqual([{ from: 4, to: 7 }]);
+    expect(matchesOf("fififi stop", { search: "stop" })).toEqual([{ from: 4, to: 8 }]);
+  });
+
+  test("normalizes the query whole, the document by character", () => {
+    expect(normalizeSearch("CAFÉ", false)).toBe("café");
+    expect(normalizeSearch("CAFÉ", true)).toBe("CAFÉ");
+    // Whole-string NFKD would fold this to a final sigma, which the cursor never does
+    expect(normalizeDoc("ΟΔΟΣ", false).text).toBe("οδοσ");
+  });
+
+  test("leaves a document that normalizes to itself untouched", () => {
+    const { text, expansions } = normalizeDoc("plain 日本 🎉 text", false);
+    expect(text).toBe("plain 日本 🎉 text");
+    expect(expansions).toEqual([]);
+  });
+});
+
+describe("current match", () => {
+  const matches = [
+    { from: 0, to: 2 },
+    { from: 4, to: 6 },
+    { from: 8, to: 10 },
+  ];
+
+  test("counts from one, and reports 0 off a match", () => {
+    expect(currentMatch(matches, { from: 4, to: 6 })).toBe(2);
+    expect(currentMatch(matches, { from: 8, to: 10 })).toBe(3);
+    expect(currentMatch(matches, { from: 5, to: 5 })).toBe(2);
+    expect(currentMatch(matches, { from: 2, to: 3 })).toBe(0);
+    expect(currentMatch(matches, { from: 4, to: 7 })).toBe(0);
+    expect(currentMatch([], { from: 0, to: 0 })).toBe(0);
+  });
+
+  test("moving the selection doesn't scan again", () => {
+    const state = stateOf("a1 b2 c3");
+    const query = new SearchQuery({ search: "\\d", regexp: true });
+    const counter = new MatchCounter();
+    const found = counter.matches(state, query);
+
+    // The document a selection-only transaction leaves behind is the one already scanned
+    const moved = state.update({ selection: { anchor: 4, head: 5 } }).state;
+    expect(counter.matches(moved, query)).toBe(found);
+    expect(currentMatch(found, moved.selection.main)).toBe(2);
+  });
+});
+
+/**
+ * The mapping from normalized offsets back to document offsets is the part of this that can go
+ * quietly wrong, and only on input nobody thinks to write a case for. So generate the input.
+ */
+describe("against the cursor, on awkward text", () => {
+  const ALPHABET = [
+    ..."abcABC .\\\n".split(""),
+    "é",
+    "é",
+    "fi",
+    "…",
+    " ",
+    "İ",
+    "Σ",
+    "ς",
+    "日",
+    "🎉",
+    "Ⅻ",
+    "ｆ",
+    "①",
+    "́",
+  ];
+
+  /** Seeded, so a failure is the same failure next run */
+  function random(seed: number) {
+    let state = seed;
+    return () => {
+      state = (state * 1664525 + 1013904223) >>> 0;
+      return state / 2 ** 32;
+    };
+  }
+
+  for (const caseSensitive of [false, true]) {
+    test(`agrees on every generated document (caseSensitive: ${caseSensitive})`, () => {
+      const next = random(caseSensitive ? 20260831 : 7);
+
+      for (let round = 0; round < 400; round++) {
+        const doc = Array.from(
+          { length: 2 + Math.floor(next() * 60) },
+          () => ALPHABET[Math.floor(next() * ALPHABET.length)]!,
+        ).join("");
+
+        // Half the queries are lifted out of the document, so matches are actually found
+        const start = Math.floor(next() * doc.length);
+        const search =
+          next() < 0.5
+            ? doc.slice(start, start + 1 + Math.floor(next() * 3))
+            : Array.from(
+                { length: 1 + Math.floor(next() * 2) },
+                () => ALPHABET[Math.floor(next() * ALPHABET.length)]!,
+              ).join("");
+        if (search === "") continue;
+
+        const state = stateOf(doc);
+        const query = new SearchQuery({ search, caseSensitive });
+        const where = `doc=${JSON.stringify(doc)} search=${JSON.stringify(search)}`;
+        expect(new MatchCounter().matches(state, query), where).toEqual(scanQuery(state, query));
+      }
+    });
+  }
+});

apps/yaak-client/components/core/Editor/searchMatchCount.ts

@@ -1,7 +1,232 @@
-import { getSearchQuery, searchPanelOpen } from "@codemirror/search";
-import type { Extension } from "@codemirror/state";
+import { getSearchQuery, type SearchQuery, searchPanelOpen } from "@codemirror/search";
+import type { EditorState, Extension, Text } from "@codemirror/state";
 import { type EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
 
+/** Matches are counted no further than this, since an exact total stops being useful long before */
+export const MAX_COUNT = 9999;
+
+/** What normalizing rewrites: anything outside ASCII, plus the case it folds */
+const REWRITTEN = /\P{ASCII}|[A-Z]+/gu;
+const REWRITTEN_CASE_SENSITIVE = /\P{ASCII}/gu;
+
+export interface Match {
+  from: number;
+  to: number;
+}
+
+/** A character whose normalized form is a different length, shifting every offset past it */
+interface Expansion {
+  normFrom: number;
+  normTo: number;
+  docFrom: number;
+  docTo: number;
+}
+
+/** A document as SearchCursor compares it, with what's needed to get back to real offsets */
+export interface NormalizedDoc {
+  text: string;
+  expansions: Expansion[];
+}
+
+/**
+ * Rewrites a document the way SearchCursor does — NFKD, then a case fold unless the search is
+ * case-sensitive — in a single pass rather than one call per code point.
+ *
+ * The cursor spends 90% of its time asking ICU about one character at a time, which is what
+ * makes counting matches in a large response slow. Doing it a character at a time still matters
+ * for the result, since it keeps NFKD from reordering marks across characters, so the
+ * granularity stays and only the repeated work goes: each distinct character is normalized once
+ * and the answer reused, and ASCII runs never reach ICU at all.
+ */
+export function normalizeDoc(text: string, caseSensitive: boolean): NormalizedDoc {
+  const rewritten = new Map<string, string>();
+  const expansions: Expansion[] = [];
+  let shift = 0;
+
+  const normalized = text.replace(
+    caseSensitive ? REWRITTEN_CASE_SENSITIVE : REWRITTEN,
+    (chunk: string, at: number) => {
+      // An ASCII run only ever folds case, which can't change its length
+      if (chunk.charCodeAt(0) < 0x80) return chunk.toLowerCase();
+
+      let out = rewritten.get(chunk);
+      if (out === undefined) {
+        out = chunk.normalize("NFKD");
+        if (!caseSensitive) out = out.toLowerCase();
+        rewritten.set(chunk, out);
+      }
+
+      if (out.length !== chunk.length) {
+        expansions.push({
+          normFrom: at + shift,
+          normTo: at + shift + out.length,
+          docFrom: at,
+          docTo: at + chunk.length,
+        });
+        shift += out.length - chunk.length;
+      }
+
+      return out;
+    },
+  );
+
+  return { text: normalized, expansions };
+}
+
+/** The query as SearchCursor compares it, which it normalizes whole rather than by character */
+export function normalizeSearch(search: string, caseSensitive: boolean): string {
+  const normalized = search.normalize("NFKD");
+  return caseSensitive ? normalized : normalized.toLowerCase();
+}
+
+/** Every occurrence of `needle`, skipping matches that overlap an earlier one */
+export function scanNormalized(doc: NormalizedDoc, needle: string): Match[] {
+  const matches: Match[] = [];
+  if (needle === "") return matches;
+
+  const { text } = doc;
+  let pos = text.indexOf(needle);
+  while (pos >= 0) {
+    let end = pos + needle.length;
+    // However the query was cut, a match ends on a whole code point, as the cursor's do
+    if (isLowSurrogate(text.charCodeAt(end))) end++;
+
+    matches.push({ from: docStart(doc, pos), to: docEnd(doc, end) });
+    if (matches.length > MAX_COUNT) break;
+
+    pos = text.indexOf(needle, resumeAfter(doc, end));
+  }
+
+  return matches;
+}
+
+/** The same through the query's own cursor, which handles regexps and whole words */
+export function scanQuery(state: EditorState, query: SearchQuery): Match[] {
+  const matches: Match[] = [];
+  const cursor = query.getCursor(state);
+
+  for (let result = cursor.next(); !result.done; result = cursor.next()) {
+    matches.push({ from: result.value.from, to: result.value.to });
+    if (matches.length > MAX_COUNT) break;
+  }
+
+  return matches;
+}
+
+const isLowSurrogate = (code: number) => code >= 0xdc00 && code <= 0xdfff;
+
+/** The last character expansion beginning at or before `offset`, if there is one */
+function expansionAt({ expansions }: NormalizedDoc, offset: number): Expansion | null {
+  let low = 0;
+  let high = expansions.length - 1;
+  let found: Expansion | null = null;
+
+  while (low <= high) {
+    const mid = (low + high) >> 1;
+    if (expansions[mid]!.normFrom <= offset) {
+      found = expansions[mid]!;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+
+  return found;
+}
+
+function docStart(doc: NormalizedDoc, offset: number): number {
+  const expansion = expansionAt(doc, offset);
+  if (expansion == null) return offset;
+  // A match starting inside a character's expansion starts at the character
+  return offset < expansion.normTo
+    ? expansion.docFrom
+    : offset - (expansion.normTo - expansion.docTo);
+}
+
+/**
+ * Where scanning picks up after a match ending at `offset`.
+ *
+ * The cursor moves through the document a character at a time, so once a match ends inside a
+ * character's expansion the rest of that expansion is behind it — "…" holds three dots but only
+ * ever counts as one match of ".".
+ */
+function resumeAfter(doc: NormalizedDoc, offset: number): number {
+  const expansion = expansionAt(doc, offset);
+  return expansion != null && offset > expansion.normFrom && offset < expansion.normTo
+    ? expansion.normTo
+    : offset;
+}
+
+function docEnd(doc: NormalizedDoc, offset: number): number {
+  const expansion = expansionAt(doc, offset);
+  if (expansion == null) return offset;
+  if (offset <= expansion.normFrom) return expansion.docFrom;
+  // A match ending inside a character's expansion covers the whole character
+  return offset < expansion.normTo
+    ? expansion.docTo
+    : offset - (expansion.normTo - expansion.docTo);
+}
+
+/** Position of the match holding the selection, counting from one, or 0 when it isn't on one */
+export function currentMatch(matches: Match[], selection: { from: number; to: number }): number {
+  let index = 0;
+  for (const match of matches) {
+    index++;
+    if (match.from <= selection.from && match.to >= selection.to) return index;
+  }
+  return 0;
+}
+
+/** The text a plain query looks for, or null when only the cursor can answer it */
+export function literalSearch(query: SearchQuery): string | null {
+  if (query.regexp || query.wholeWord || query.test != null) return null;
+  // Mirrors SearchQuery's own unquoting, which the published type doesn't expose
+  return query.literal
+    ? query.search
+    : query.search.replace(/\\([nrt\\])/g, (_, ch) =>
+        ch === "n" ? "\n" : ch === "r" ? "\r" : ch === "t" ? "\t" : "\\",
+      );
+}
+
+/**
+ * Finds the matches for the search panel, keeping the normalized document and the matches it
+ * last found, so neither moving the selection nor typing another character starts over.
+ */
+export class MatchCounter {
+  private doc: { doc: Text; caseSensitive: boolean; normalized: NormalizedDoc } | null = null;
+  private last: { doc: Text; query: SearchQuery; matches: Match[] } | null = null;
+
+  matches(state: EditorState, query: SearchQuery): Match[] {
+    const last = this.last;
+    if (last != null && last.doc === state.doc && last.query.eq(query)) {
+      return last.matches;
+    }
+
+    const matches = this.scan(state, query);
+    this.last = { doc: state.doc, query, matches };
+    return matches;
+  }
+
+  private scan(state: EditorState, query: SearchQuery): Match[] {
+    const search = literalSearch(query);
+    if (search == null) return scanQuery(state, query);
+
+    const doc = this.normalizedDoc(state.doc, query.caseSensitive);
+    return scanNormalized(doc, normalizeSearch(search, query.caseSensitive));
+  }
+
+  private normalizedDoc(doc: Text, caseSensitive: boolean): NormalizedDoc {
+    const cached = this.doc;
+    if (cached != null && cached.doc === doc && cached.caseSensitive === caseSensitive) {
+      return cached.normalized;
+    }
+
+    const normalized = normalizeDoc(doc.toString(), caseSensitive);
+    this.doc = { doc, caseSensitive, normalized };
+    return normalized;
+  }
+}
+
 /**
  * A CodeMirror extension that displays the total number of search matches
  * inside the built-in search panel.
@@ -10,6 +235,7 @@ export function searchMatchCount(): Extension {
   return ViewPlugin.fromClass(
     class {
       private countEl: HTMLElement | null = null;
+      private counter = new MatchCounter();
 
       constructor(private view: EditorView) {
         this.updateCount();
@@ -38,38 +264,21 @@ export function searchMatchCount(): Extension {
         }
 
         this.ensureCountEl();
+        if (this.countEl == null) return;
 
         if (!query.search) {
-          if (this.countEl) {
-            this.countEl.textContent = "0/0";
-          }
+          this.countEl.textContent = "0/0";
           return;
         }
 
-        const selection = state.selection.main;
-        let count = 0;
-        let currentIndex = 0;
-        const MAX_COUNT = 9999;
-        const cursor = query.getCursor(state);
-        for (let result = cursor.next(); !result.done; result = cursor.next()) {
-          count++;
-          const match = result.value;
-          if (match.from <= selection.from && match.to >= selection.to) {
-            currentIndex = count;
-          }
-          if (count > MAX_COUNT) break;
-        }
-
-        if (this.countEl) {
-          if (count > MAX_COUNT) {
-            this.countEl.textContent = `${MAX_COUNT}+`;
-          } else if (count === 0) {
-            this.countEl.textContent = "0/0";
-          } else if (currentIndex > 0) {
-            this.countEl.textContent = `${currentIndex}/${count}`;
-          } else {
-            this.countEl.textContent = `0/${count}`;
-          }
+        const matches = this.counter.matches(state, query);
+        if (matches.length > MAX_COUNT) {
+          this.countEl.textContent = `${MAX_COUNT}+`;
+        } else if (matches.length === 0) {
+          this.countEl.textContent = "0/0";
+        } else {
+          const current = currentMatch(matches, state.selection.main);
+          this.countEl.textContent = `${current}/${matches.length}`;
         }
       }
 

apps/yaak-client/components/core/Editor/sniffValue.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, test } from "vite-plus/test";
+import { decodeBase64Prefix, labelForMime, SNIFF_HEAD_CHARS, sniffValue } from "./sniffValue";
+
+/** A base64 value that starts with `magic` and runs on for a while, as a real one would */
+function base64Of(magic: number[], length = 2_000): string {
+  const bytes = new Uint8Array(length);
+  bytes.set(magic);
+  for (let i = magic.length; i < length; i++) {
+    bytes[i] = i % 251;
+  }
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary);
+}
+
+/** One character, one byte. These are all ASCII signatures. */
+function ascii(s: string): number[] {
+  const bytes: number[] = [];
+  for (let i = 0; i < s.length; i++) {
+    bytes.push(s.charCodeAt(i));
+  }
+  return bytes;
+}
+
+/** Four bytes no signature looks at: a RIFF chunk length, or an ISO-BMFF box size */
+const IGNORED = [0x00, 0x00, 0x00, 0x20];
+
+const PNG = [0x89, ...ascii("PNG"), 0x0d, 0x0a, 0x1a, 0x0a];
+const JPEG = [0xff, 0xd8, 0xff, 0xe0];
+const PDF = ascii("%PDF-1.7");
+
+describe("magic numbers", () => {
+  const cases: [string, number[], string, string][] = [
+    ["PNG", PNG, "image/png", "PNG"],
+    ["JPEG", JPEG, "image/jpeg", "JPEG"],
+    ["GIF", ascii("GIF89a"), "image/gif", "GIF"],
+    ["PDF", PDF, "application/pdf", "PDF"],
+    ["WEBP", [...ascii("RIFF"), ...IGNORED, ...ascii("WEBP")], "image/webp", "WEBP"],
+    ["WAV", [...ascii("RIFF"), ...IGNORED, ...ascii("WAVE")], "audio/wav", "WAV"],
+    ["ZIP", [...ascii("PK"), 0x03, 0x04], "application/zip", "ZIP"],
+    ["GZIP", [0x1f, 0x8b, 0x08], "application/gzip", "GZIP"],
+    ["MP3", [...ascii("ID3"), 0x04], "audio/mpeg", "MP3"],
+    ["OGG", ascii("OggS"), "audio/ogg", "OGG"],
+    ["FLAC", ascii("fLaC"), "audio/flac", "FLAC"],
+    ["WEBM", [0x1a, 0x45, 0xdf, 0xa3], "video/webm", "WEBM"],
+    ["MP4", [...IGNORED, ...ascii("ftypisom")], "video/mp4", "MP4"],
+    ["AVIF", [...IGNORED, ...ascii("ftypavif")], "image/avif", "AVIF"],
+    ["HEIC", [...IGNORED, ...ascii("ftypheic")], "image/heic", "HEIC"],
+    ["M4A", [...IGNORED, ...ascii("ftypM4A ")], "audio/mp4", "M4A"],
+    ["MOV", [...IGNORED, ...ascii("ftypqt  ")], "video/quicktime", "MOV"],
+    ["BMP", ascii("BMxx"), "image/bmp", "BMP"],
+    ["TIFF", [...ascii("II"), 0x2a, 0x00], "image/tiff", "TIFF"],
+  ];
+
+  for (const [name, magic, mime, label] of cases) {
+    test(`recognises ${name}`, () => {
+      expect(sniffValue(base64Of(magic))).toEqual({ mime, label, offset: 0, encoding: "base64" });
+    });
+  }
+
+  test("recognises nothing in arbitrary base64", () => {
+    expect(sniffValue(btoa("just some text that happens to be encoded"))).toBeNull();
+  });
+
+  test("recognises nothing in text that isn't base64", () => {
+    expect(sniffValue("the quick brown fox jumps over the lazy dog".repeat(10))).toBeNull();
+  });
+
+  test("recognises nothing in a JWT-shaped value", () => {
+    expect(sniffValue(`${btoa('{"alg":"HS256"}')}.${btoa('{"sub":"1"}')}.c2ln`)).toBeNull();
+  });
+
+  test("reads the url-safe alphabet", () => {
+    const urlSafe = base64Of(PNG).replaceAll("+", "-").replaceAll("/", "_");
+    expect(sniffValue(urlSafe)?.label).toBe("PNG");
+  });
+
+  test("ignores leading whitespace, and counts it in the offset", () => {
+    expect(sniffValue(`   ${base64Of(PNG)}`)).toMatchObject({ label: "PNG", offset: 3 });
+  });
+});
+
+describe("data URIs", () => {
+  test("takes the declared type over the bytes", () => {
+    const uri = `data:image/svg+xml;base64,${btoa("<svg/>")}`;
+    expect(sniffValue(uri)).toEqual({
+      mime: "image/svg+xml",
+      label: "SVG",
+      offset: "data:image/svg+xml;base64,".length,
+      encoding: "base64",
+    });
+  });
+
+  test("points past the header, so the payload can be decoded from there", () => {
+    const payload = base64Of(PNG);
+    const uri = `data:image/png;base64,${payload}`;
+    const sniffed = sniffValue(uri)!;
+    expect(uri.slice(sniffed.offset, sniffed.offset + 8)).toBe(payload.slice(0, 8));
+  });
+
+  test("falls back to the bytes when the declared type says nothing", () => {
+    const uri = `data:application/octet-stream;base64,${base64Of(PDF)}`;
+    expect(sniffValue(uri)).toMatchObject({ mime: "application/pdf", label: "PDF" });
+  });
+
+  test("handles a header with no type at all", () => {
+    expect(sniffValue(`data:;base64,${base64Of(JPEG)}`)).toMatchObject({ mime: "image/jpeg" });
+  });
+
+  test("handles extra parameters", () => {
+    const uri = `data:text/plain;charset=utf-8;base64,${btoa("hello")}`;
+    expect(sniffValue(uri)).toMatchObject({ mime: "text/plain", encoding: "base64" });
+  });
+
+  test("handles a percent-encoded payload", () => {
+    expect(sniffValue("data:text/html,%3Ch1%3Ehi%3C/h1%3E")).toEqual({
+      mime: "text/html",
+      label: "HTML",
+      offset: "data:text/html,".length,
+      encoding: "percent",
+    });
+  });
+
+  test("defaults a bare percent-encoded payload to text", () => {
+    expect(sniffValue("data:,hello%20there")).toMatchObject({
+      mime: "text/plain",
+      encoding: "percent",
+    });
+  });
+});
+
+describe("decoding only the head", () => {
+  test("reads no more of the value than the bytes asked for", () => {
+    const big = base64Of(PNG, 3_000_000);
+    // Truncating to the head must not change what is found, which is the whole point:
+    // callers only ever hand it a slice
+    expect(sniffValue(big.slice(0, SNIFF_HEAD_CHARS))).toEqual(sniffValue(big));
+  });
+
+  test("decodes whole 4-character groups only", () => {
+    // 12 bytes needs 16 characters; a 15-character slice yields the 12 bytes of 3 whole groups
+    expect(decodeBase64Prefix(base64Of(PNG), 0, 12)).toHaveLength(12);
+    expect(decodeBase64Prefix(base64Of(PNG).slice(0, 15), 0, 12)).toHaveLength(9);
+  });
+
+  test("declines a value too short to hold a group", () => {
+    expect(decodeBase64Prefix("abc", 0, 12)).toBeNull();
+  });
+
+  test("declines text outside the alphabet", () => {
+    expect(decodeBase64Prefix("hello world, not base64!", 0, 12)).toBeNull();
+  });
+});
+
+describe("labels", () => {
+  test.each([
+    ["image/png", "PNG"],
+    ["image/svg+xml", "SVG"],
+    ["text/plain", "TEXT"],
+    ["application/vnd.ms-excel", "MS-EXCEL"],
+    ["image/x-icon", "ICON"],
+    ["application/octet-stream", "APPLICATION"],
+    ["font/woff2", "WOFF2"],
+    ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "DOCUMENT"],
+  ])("%s reads as %s", (mime, label) => {
+    expect(labelForMime(mime)).toBe(label);
+  });
+});

apps/yaak-client/components/core/Editor/sniffValue.ts

@@ -0,0 +1,219 @@
+/**
+ * What a collapsed value turns out to be.
+ *
+ * Sniffing reads the head of the value only. A `data:` URI states its own media type, and raw
+ * base64 gives up its type in the first few bytes, so neither needs the rest — which is the
+ * point, since the whole reason these values are collapsed is that touching all of one costs
+ * enough to stall the UI.
+ */
+export interface SniffedValue {
+  /** Full media type, e.g. `image/png`. What the dialog routes on. */
+  mime: string;
+  /** A word for the tag, e.g. `PNG`. */
+  label: string;
+  /** Where the encoded payload starts in the value, past any `data:` header. */
+  offset: number;
+  encoding: "base64" | "percent";
+}
+
+/**
+ * How much of a value {@link sniffValue} needs. Enough for a `data:` header of realistic
+ * length, and far more than the 24 base64 characters the magic numbers are read from.
+ */
+export const SNIFF_HEAD_CHARS = 256;
+
+/** Bytes the longest signature needs: `RIFF????WEBP`, and an ISO-BMFF brand at offset 8. */
+const SNIFF_BYTES = 12;
+
+/** `data:[<mime>][;<param>…],` — the payload follows the comma. */
+const DATA_URI = /^data:([^,;]*)((?:;[^,;]*)*),/;
+
+/** Media types that name no format, so the bytes are worth a look even when one is declared. */
+const UNINFORMATIVE = ["", "application/octet-stream", "binary/octet-stream"];
+
+interface Signature {
+  label: string;
+  mime: string;
+  offset?: number;
+  /** Byte values, where `null` matches anything */
+  magic: readonly (number | null)[];
+}
+
+/**
+ * A magic number written as the ASCII it reads as, with `?` for a byte that varies.
+ *
+ * Indexed rather than iterated, because a signature is a sequence of bytes: one character here
+ * is one byte, and splitting into code points would be the wrong unit for that.
+ */
+function ascii(pattern: string): (number | null)[] {
+  const bytes: (number | null)[] = [];
+  for (let i = 0; i < pattern.length; i++) {
+    bytes.push(pattern[i] === "?" ? null : pattern.charCodeAt(i));
+  }
+  return bytes;
+}
+
+const SIGNATURES: readonly Signature[] = [
+  { label: "PNG", mime: "image/png", magic: [0x89, ...ascii("PNG"), 0x0d, 0x0a, 0x1a, 0x0a] },
+  { label: "JPEG", mime: "image/jpeg", magic: [0xff, 0xd8, 0xff] },
+  { label: "GIF", mime: "image/gif", magic: ascii("GIF8") },
+  { label: "BMP", mime: "image/bmp", magic: ascii("BM") },
+  { label: "WEBP", mime: "image/webp", magic: ascii("RIFF????WEBP") },
+  { label: "TIFF", mime: "image/tiff", magic: [...ascii("II"), 0x2a, 0x00] },
+  { label: "TIFF", mime: "image/tiff", magic: [...ascii("MM"), 0x00, 0x2a] },
+  { label: "ICO", mime: "image/x-icon", magic: [0x00, 0x00, 0x01, 0x00] },
+  { label: "PDF", mime: "application/pdf", magic: ascii("%PDF-") },
+  { label: "WAV", mime: "audio/wav", magic: ascii("RIFF????WAVE") },
+  { label: "AVI", mime: "video/x-msvideo", magic: ascii("RIFF????AVI ") },
+  { label: "MP3", mime: "audio/mpeg", magic: ascii("ID3") },
+  // A bare MPEG frame header: 11 sync bits, then a layer III / II / I version pair
+  { label: "MP3", mime: "audio/mpeg", magic: [0xff, 0xfb] },
+  { label: "MP3", mime: "audio/mpeg", magic: [0xff, 0xf3] },
+  { label: "MP3", mime: "audio/mpeg", magic: [0xff, 0xf2] },
+  { label: "OGG", mime: "audio/ogg", magic: ascii("OggS") },
+  { label: "FLAC", mime: "audio/flac", magic: ascii("fLaC") },
+  { label: "WEBM", mime: "video/webm", magic: [0x1a, 0x45, 0xdf, 0xa3] },
+  { label: "ZIP", mime: "application/zip", magic: [...ascii("PK"), 0x03, 0x04] },
+  { label: "GZIP", mime: "application/gzip", magic: [0x1f, 0x8b] },
+  { label: "7Z", mime: "application/x-7z-compressed", magic: [...ascii("7z"), 0xbc, 0xaf, 0x27] },
+  { label: "RAR", mime: "application/vnd.rar", magic: ascii("Rar!") },
+  { label: "GLTF", mime: "model/gltf-binary", magic: ascii("glTF") },
+];
+
+/**
+ * ISO base media files all start `????ftyp`, so the format is in the brand that follows rather
+ * than in the signature itself. Anything unlisted is some flavour of MP4.
+ */
+const ISO_BRANDS: Record<string, { mime: string; label: string }> = {
+  avif: { mime: "image/avif", label: "AVIF" },
+  avis: { mime: "image/avif", label: "AVIF" },
+  heic: { mime: "image/heic", label: "HEIC" },
+  heix: { mime: "image/heic", label: "HEIC" },
+  hevc: { mime: "image/heic", label: "HEIC" },
+  mif1: { mime: "image/heif", label: "HEIF" },
+  msf1: { mime: "image/heif", label: "HEIF" },
+  "M4A ": { mime: "audio/mp4", label: "M4A" },
+  "qt  ": { mime: "video/quicktime", label: "MOV" },
+};
+
+function matches(bytes: Uint8Array, { magic, offset = 0 }: Signature): boolean {
+  if (bytes.length < offset + magic.length) return false;
+  return magic.every((b, i) => b == null || bytes[offset + i] === b);
+}
+
+function readAscii(bytes: Uint8Array, from: number, length: number): string {
+  return String.fromCharCode(...bytes.subarray(from, from + length));
+}
+
+/** The format the first bytes of a file identify it as, or null if they identify nothing. */
+export function sniffBytes(bytes: Uint8Array): { mime: string; label: string } | null {
+  if (readAscii(bytes, 4, 4) === "ftyp") {
+    return ISO_BRANDS[readAscii(bytes, 8, 4)] ?? { mime: "video/mp4", label: "MP4" };
+  }
+  const sig = SIGNATURES.find((s) => matches(bytes, s));
+  return sig == null ? null : { mime: sig.mime, label: sig.label };
+}
+
+/**
+ * The first `bytes` bytes of a base64 payload, or null if it isn't base64 after all.
+ *
+ * Only the characters those bytes need are decoded. The trailing partial group is dropped
+ * rather than padded, since `atob` rejects a group of one or two characters outright and we
+ * have no use for the byte a three-character group would add.
+ */
+export function decodeBase64Prefix(text: string, offset: number, bytes: number): Uint8Array | null {
+  const wanted = Math.ceil(bytes / 3) * 4;
+  let b64 = text.slice(offset, offset + wanted);
+  b64 = b64.slice(0, b64.length - (b64.length % 4));
+  if (b64.length === 0) return null;
+
+  // The URL-safe alphabet stands for the same bytes
+  b64 = b64.replaceAll("-", "+").replaceAll("_", "/");
+  if (!/^[A-Za-z0-9+/]+$/.test(b64)) return null;
+
+  try {
+    const binary = atob(b64);
+    const out = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      out[i] = binary.charCodeAt(i);
+    }
+    return out;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * What a value is, from its head alone, or null if nothing recognises it.
+ *
+ * `head` need only be the first {@link SNIFF_HEAD_CHARS} characters — pass more and the rest is
+ * ignored. The offsets in the result are relative to the start of the whole value.
+ */
+export function sniffValue(head: string): SniffedValue | null {
+  const lead = head.length - head.trimStart().length;
+  const value = head.slice(lead);
+
+  const dataUri = DATA_URI.exec(value);
+  if (dataUri != null) {
+    const declared = dataUri[1]!.toLowerCase();
+    const offset = lead + dataUri[0].length;
+    if (!dataUri[2]!.split(";").includes("base64")) {
+      // A percent-encoded payload states its own type or is text by definition
+      const mime = declared === "" ? "text/plain" : declared;
+      return { mime, label: labelForMime(mime), offset, encoding: "percent" };
+    }
+    if (!UNINFORMATIVE.includes(declared)) {
+      return { mime: declared, label: labelForMime(declared), offset, encoding: "base64" };
+    }
+    return sniffBase64At(head, offset);
+  }
+
+  return sniffBase64At(head, lead);
+}
+
+function sniffBase64At(head: string, offset: number): SniffedValue | null {
+  const bytes = decodeBase64Prefix(head, offset, SNIFF_BYTES);
+  const sniffed = bytes == null ? null : sniffBytes(bytes);
+  return sniffed == null ? null : { ...sniffed, offset, encoding: "base64" };
+}
+
+/** The shortest run of base64 that {@link isEncodedRun} will accept as convincing */
+const ENCODED_RUN_CHARS = 64;
+
+/**
+ * Whether a value is one unbroken run of base64, rather than text that merely opens like it.
+ *
+ * A magic number is only a few bytes, so short ones match by chance — `BM` is two, which comes
+ * up about once in every 65,000 values. That was harmless while a value had to be long enough
+ * to hurt rendering before anything was hidden, and the sniff only chose the label. It is not
+ * harmless when the sniff itself decides to hide something, so that rule asks for this as well:
+ * prose leaves the alphabet within a few characters, and an encoded blob never does.
+ */
+export function isEncodedRun(head: string, offset: number): boolean {
+  const run = head.slice(offset);
+  return run.length >= ENCODED_RUN_CHARS && /^[A-Za-z0-9+/\-_]+={0,2}$/.test(run);
+}
+
+/** Subtypes whose own name makes a poor label */
+const LABEL_OVERRIDES: Record<string, string> = {
+  "text/plain": "TEXT",
+};
+
+/**
+ * A word short enough for a tag. The distinguishing part of a subtype is its last dotted
+ * segment before any `+suffix`, so `image/svg+xml` reads as SVG and `application/vnd.ms-excel`
+ * as MS-EXCEL. Anything still too long falls back to the top-level type.
+ */
+export function labelForMime(mime: string): string {
+  const override = LABEL_OVERRIDES[mime];
+  if (override != null) {
+    return override;
+  }
+
+  const [type, subtype] = mime.split("/");
+  const word = (subtype ?? "").split("+")[0]!.split(".").pop()!.replace(/^x-/, "");
+  if (word.length > 0 && word.length <= 10 && word !== "octet-stream") {
+    return word.toUpperCase();
+  }
+  return (type ?? mime).toUpperCase();
+}

apps/yaak-client/components/core/Editor/twig/completion.test.ts

@@ -0,0 +1,155 @@
+/* oxlint-disable no-template-curly-in-string */
+import { CompletionContext } from "@codemirror/autocomplete";
+import { json } from "@codemirror/lang-json";
+import { EditorState, type Extension, type TransactionSpec } from "@codemirror/state";
+import type { EditorView } from "@codemirror/view";
+import { describe, expect, test } from "vite-plus/test";
+import { singleLineExtensions } from "../singleLine";
+import { twigCompletion, type TwigCompletionOption } from "./completion";
+import { parser } from "./twig";
+
+const options: TwigCompletionOption[] = [
+  { name: "someVar", label: "someVar", type: "variable", value: "value", onClick: () => {} },
+  { name: "uuid.v4", label: "uuid.v4", type: "function", args: [], value: null, onClick: () => {} },
+];
+const source = twigCompletion({ options });
+
+// Both keyboard acceptance and clicking a suggestion invoke Completion.apply.
+function complete(input: string, label: string, extensions: Extension = []) {
+  const cursor = input.indexOf("|");
+  if (cursor < 0) throw new Error("Missing cursor marker");
+  let state = EditorState.create({
+    doc: input.slice(0, cursor) + input.slice(cursor + 1),
+    selection: { anchor: cursor },
+    extensions,
+  });
+  const result = source(new CompletionContext(state, cursor, false));
+  const completion = result?.options.find((option) => option.label === label);
+  expect(completion).toBeDefined();
+  const view = {
+    get state() {
+      return state;
+    },
+    dispatch(spec: TransactionSpec) {
+      state = state.update(spec).state;
+    },
+  } as EditorView;
+  if (typeof completion?.apply !== "function" || !result) throw new Error("Missing apply");
+  completion.apply(view, completion, result.from, cursor);
+  return state;
+}
+
+function expectValidTag(state: EditorState, expected: string) {
+  expect(state.doc.toString()).toBe(expected);
+  const tags: string[] = [];
+  parser.parse(expected).iterate({
+    enter(node) {
+      expect(node.type.isError).toBe(false);
+      if (node.name === "Tag") tags.push(expected.slice(node.from, node.to));
+    },
+  });
+  expect(tags).toHaveLength(1);
+}
+
+describe("twig completion", () => {
+  test.each(["${[\nsome|", "${[ \n\n\tsome|", "${[\nsome|\n ]}", "${[\n |"])(
+    "completes across multiline whitespace: %s",
+    (input) => expectValidTag(complete(input, "someVar"), "${[ someVar ]}"),
+  );
+
+  test.each(["${[\nuuid.v|", "${[\n uuid.v|()\n ]}"])(
+    "completes a function across multiline whitespace: %s",
+    (input) => expectValidTag(complete(input, "uuid.v4"), "${[ uuid.v4() ]}"),
+  );
+
+  test("preserves surrounding lines and literal pipes", () => {
+    expect(complete("before\n${[\nsome|\n]}\na | b", "someVar").doc.toString()).toBe(
+      "before\n${[ someVar ]}\na | b",
+    );
+  });
+
+  test("does not search past non-whitespace for an opener or closer", () => {
+    expect(complete("prefix\nsome|\nother ]}", "someVar").doc.toString()).toBe(
+      "prefix\n${[ someVar ]}\nother ]}",
+    );
+    expect(complete("${[some|\nother ]}", "someVar").doc.toString()).toBe(
+      "${[ someVar ]}\nother ]}",
+    );
+  });
+
+  test.each(["${[|", "${[ |", "${[  |"])(
+    "offers completion immediately after a template opener: %s",
+    (input) => {
+      expectValidTag(complete(input, "someVar"), "${[ someVar ]}");
+    },
+  );
+
+  test.each(["$", "{", "${", '{"value": "'])(
+    "does not automatically offer empty-name completions after %s",
+    (doc) => {
+      const state = EditorState.create({ doc });
+      expect(source(new CompletionContext(state, doc.length, false))).toBeNull();
+    },
+  );
+
+  test.each(["uuid|", "${[uuid|", "${[ uuid| ]}"])(
+    "completes a namespace before wrapping the final function: %s",
+    (input) => {
+      const namespace = complete(input, "uuid.*");
+      expect(namespace.doc.toString()).toBe(input.replace("uuid|", "uuid."));
+      const cursor = namespace.selection.main.head;
+      const next = namespace.sliceDoc(0, cursor) + "|" + namespace.sliceDoc(cursor);
+      expectValidTag(complete(next, "uuid.v4"), "${[ uuid.v4() ]}");
+    },
+  );
+
+  test.each(["some|", "${[some|", "${[ some|", "${[  someVar|", "${[\tsome|"])(
+    "completes a variable in a single-line value: %s",
+    (input) => {
+      const state = complete(input, "someVar", singleLineExtensions());
+      expectValidTag(state, "${[ someVar ]}");
+      expect(state.selection.main.head).toBe(state.doc.length);
+    },
+  );
+
+  test.each(["${[some|]}", "${[ some| ]}", "${[someVar|]}"])(
+    "reuses closing delimiters: %s",
+    (input) => {
+      expectValidTag(complete(input, "someVar"), "${[ someVar ]}");
+    },
+  );
+
+  test.each(["uuid.v|", "${[uuid.v|", "${[ uuid.v| ]}", "${[uuid.v|()]}"])(
+    "completes a function: %s",
+    (input) => {
+      expectValidTag(complete(input, "uuid.v4"), "${[ uuid.v4() ]}");
+    },
+  );
+
+  test("preserves surrounding JSON and its closing punctuation", () => {
+    expectValidTag(
+      complete('{"value":"${[some|","other":1}', "someVar", json()),
+      '{"value":"${[ someVar ]}","other":1}',
+    );
+  });
+
+  test("preserves surrounding text and other complete tags", () => {
+    expect(complete("${[ someVar ]} ${[some|]} trailing", "someVar").doc.toString()).toBe(
+      "${[ someVar ]} ${[ someVar ]} trailing",
+    );
+  });
+
+  test("does not consume closing punctuation without a template opener", () => {
+    expect(complete("[some|]}", "someVar").doc.toString()).toBe("[${[ someVar ]}]}");
+  });
+
+  test("invalidates cached suggestions when typing delimiters or a namespace separator", () => {
+    const state = EditorState.create({ doc: "some" });
+    const result = source(new CompletionContext(state, 4, false));
+    expect(result?.validFor).toBeInstanceOf(RegExp);
+    const validFor = result?.validFor as RegExp;
+    expect(validFor.test("someVar")).toBe(true);
+    expect(validFor.test("some ${[some")).toBe(false);
+    expect(validFor.test("uuid.")).toBe(false);
+  });
+});

apps/yaak-client/components/core/Editor/twig/completion.ts

@@ -1,5 +1,6 @@
 import type { Completion, CompletionContext } from "@codemirror/autocomplete";
 import { startCompletion } from "@codemirror/autocomplete";
+import type { EditorState } from "@codemirror/state";
 import type { TemplateFunction } from "@yaakapp-internal/plugins";
 
 const openTag = "${[ ";
@@ -36,6 +37,22 @@ export interface TwigCompletionConfig {
 
 const MIN_MATCH_NAME = 1;
 
+// Only inspect adjacent whitespace, including newlines, rather than copying the
+// entire document to look for a delimiter in large request bodies.
+function skipWhitespace(state: EditorState, pos: number, direction: -1 | 1) {
+  while (direction === -1 ? pos > 0 : pos < state.doc.length) {
+    const from = direction === -1 ? pos - 1 : pos;
+    if (!/\s/.test(state.sliceDoc(from, from + 1))) break;
+    pos += direction;
+  }
+  return pos;
+}
+
+function findOpenTag(state: EditorState, from: number) {
+  const end = skipWhitespace(state, from, -1);
+  return end >= 3 && state.sliceDoc(end - 3, end) === "${[" ? end - 3 : null;
+}
+
 export function twigCompletion({ options }: TwigCompletionConfig) {
   return function completions(context: CompletionContext) {
     const toStartOfName = context.matchBefore(/[\w_.]*/);
@@ -44,7 +61,8 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
     if (toMatch === null) return null;
 
     const matchLen = toMatch.to - toMatch.from;
-    if (!context.explicit && toMatch.from > 0 && matchLen < MIN_MATCH_NAME) {
+    const hasOpenTag = findOpenTag(context.state, toMatch.from) !== null;
+    if (!context.explicit && !hasOpenTag && toMatch.from > 0 && matchLen < MIN_MATCH_NAME) {
       return null;
     }
 
@@ -83,6 +101,16 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
             detail: o.type,
             type: o.type === "variable" ? "variable" : "function",
             apply: (view, _completion, from, to) => {
+              // Keep the completion range name-only for filtering, but replace a manually
+              // typed opener when accepting (through either the keyboard or the menu).
+              const opener = findOpenTag(view.state, from);
+              if (opener !== null) {
+                from = opener;
+                const hasParentheses =
+                  o.type === "function" && view.state.sliceDoc(to, to + 2) === "()";
+                const closer = skipWhitespace(view.state, to + (hasParentheses ? 2 : 0), 1);
+                if (view.state.sliceDoc(closer, closer + 2) === "]}") to = closer + 2;
+              }
               const insert = openTag + inner + closeTag;
               view.dispatch({
                 changes: { from, to, insert: insert },
@@ -103,7 +131,8 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
 
     return {
       matchLen,
-      validFor: () => true, // Not really sure why this is all it needs
+      // Delimiters change the replacement range; dots change namespace options.
+      validFor: /^\w*$/,
       from: toMatch.from,
       options: sortedCompletions,
     };

apps/yaak-client/components/core/Input.tsx

@@ -22,6 +22,7 @@ import { Button } from "./Button";
 import type { DropdownItem } from "./Dropdown";
 import { Dropdown } from "./Dropdown";
 import type { EditorProps } from "./Editor/Editor";
+import type { GenericCompletion } from "./Editor/genericCompletion";
 import { Editor } from "./Editor/LazyEditor";
 import { IconButton } from "./IconButton";
 import { IconTooltip } from "./IconTooltip";
@@ -63,6 +64,13 @@ export type InputProps = Pick<
   placeholder?: string;
   required?: boolean;
   rightSlot?: ReactNode;
+  /**
+   * Show a chevron that opens the `autocomplete` options as a menu, so a value can be picked
+   * without knowing what to type. Opt-in, because plenty of inputs pass `autocomplete` without
+   * wanting the affordance (the URL bar completes from history, and a chevron there would be
+   * noise). Renders nothing when there are no options to show.
+   */
+  showOptionsPicker?: boolean;
   size?: "2xs" | "xs" | "sm" | "md" | "auto";
   stateKey: EditorProps["stateKey"];
   extraExtensions?: EditorProps["extraExtensions"];
@@ -115,6 +123,7 @@ function BaseInput({
   readOnly,
   required,
   rightSlot,
+  showOptionsPicker,
   size = "md",
   stateKey,
   tint,
@@ -156,6 +165,17 @@ function BaseInput({
     [],
   );
 
+  // Replace the whole value with a picked option. Dispatching runs it through the editor's
+  // onChange, same as typing, so callers see one consistent change path.
+  const insertOption = useCallback((value: string) => {
+    const view = editorRef.current;
+    if (view == null) return;
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
+    view.focus();
+  }, []);
+
+  const pickerOptions = showOptionsPicker && !disabled ? (props.autocomplete?.options ?? []) : [];
+
   const setEditorRef = useCallback(
     (h: EditorView | null) => {
       editorRef.current = h;
@@ -350,12 +370,55 @@ function BaseInput({
             onClick={() => setObscured((o) => !o)}
           />
         )}
+        {pickerOptions.length > 0 && (
+          <OptionsPickerDropdown options={pickerOptions} onSelect={insertOption} />
+        )}
         {rightSlot}
       </HStack>
     </div>
   );
 }
 
+/**
+ * Chevron that opens the input's autocomplete options as a menu, for browsing values rather than
+ * typing them. Shows `label` but inserts `apply` when set, so a long value can be listed under a
+ * short name (e.g. a User-Agent).
+ *
+ * Skipped in the tab order: once focus is in the input, inline autocomplete offers the same
+ * options, so this would only add a stop between fields. Hidden when the nearest container is
+ * narrow and the input needs the width more — written as a `max` query so it stays visible for
+ * inputs that have no container ancestor at all.
+ */
+function OptionsPickerDropdown({
+  options,
+  onSelect,
+}: {
+  options: GenericCompletion[];
+  onSelect: (value: string) => void;
+}) {
+  const items = useMemo<DropdownItem[]>(
+    () =>
+      options.map((o) => ({
+        label: o.label,
+        onSelect: () => onSelect(typeof o.apply === "string" ? o.apply : o.label),
+      })),
+    [options, onSelect],
+  );
+
+  return (
+    <Dropdown items={items}>
+      <IconButton
+        tabIndex={-1}
+        iconSize="sm"
+        size="xs"
+        icon="chevron_down"
+        title="Show suggestions"
+        className="mr-0.5 h-auto! my-0.5 text-text-subtlest @max-[24rem]:hidden"
+      />
+    </Dropdown>
+  );
+}
+
 function validateRequire(v: string) {
   return v.length > 0;
 }

apps/yaak-client/components/core/Link.tsx

@@ -1,4 +1,5 @@
 import { Link as RouterLink } from "@tanstack/react-router";
+import { platform } from "@yaakapp-internal/platform";
 import classNames from "classnames";
 import type { HTMLAttributes } from "react";
 import { appInfo } from "../../lib/appInfo";
@@ -33,7 +34,10 @@ export function Link({ href, children, noUnderline, className, ...other }: Props
         href={finalHref}
         target="_blank"
         rel={isYaakLink ? undefined : "noopener noreferrer"}
-        onClick={(e) => e.preventDefault()}
+        onClick={(e) => {
+          e.preventDefault();
+          void platform.openUrl(finalHref);
+        }}
         className={className}
         {...other}
       >

apps/yaak-client/components/core/PairEditor.tsx

@@ -9,7 +9,6 @@ import {
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
-import { basename } from "@tauri-apps/api/path";
 import classNames from "classnames";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { WrappedEnvironmentVariable } from "../../hooks/useEnvironmentVariables";
@@ -34,12 +33,22 @@ import { Input } from "./Input";
 import { ensurePairId } from "./PairEditor.util";
 import type { RadioDropdownItem } from "./RadioDropdown";
 import { RadioDropdown } from "./RadioDropdown";
+import { platform } from "@yaakapp-internal/platform";
 
 export interface PairEditorHandle {
+  /**
+   * Focus a row's name field once it's able to take focus. Focus can't land immediately when the
+   * row isn't mounted yet or the editor is hidden — eg. sitting in a tab that's still becoming
+   * active — so this retries for up to ~1s. A newer focus request cancels a pending one.
+   */
   focusName(id: string): void;
+  /** Focus a row's value field. See {@link PairEditorHandle.focusName} for timing. */
   focusValue(id: string): void;
 }
 
+/** ~1s at 60fps, plenty for a tab switch to land without spinning forever if it never does */
+const MAX_FOCUS_ATTEMPTS = 60;
+
 export type PairEditorProps = {
   allowFileValues?: boolean;
   allowMultilineValues?: boolean;
@@ -53,7 +62,7 @@ export type PairEditorProps = {
   nameValidate?: InputProps["validate"];
   noScroll?: boolean;
   onChange: (pairs: PairWithId[]) => void;
-  pairs: Pair[];
+  pairs: EditablePair[];
   stateKey: InputProps["stateKey"];
   setRef?: (n: PairEditorHandle) => void;
   valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
@@ -72,17 +81,47 @@ export type Pair = {
   contentType?: string;
   filename?: string;
   isFile?: boolean;
-  readOnlyName?: boolean;
 };
 
 export type PairWithId = Pair & {
   id: string;
 };
 
+/**
+ * A pair as handed to the editor. Adds behaviour that only the editor cares about, so the plain
+ * `Pair` stays the shape that gets written to models.
+ */
+export type EditablePair = Pair & {
+  /**
+   * When set, name edits are held until the field blurs and then committed through this, instead
+   * of calling `onChange` on every keystroke. Return false to reject the new name, which reverts
+   * the field. For names that can't be written directly, like a URL path placeholder that lives
+   * in the URL itself.
+   */
+  commitName?: (name: string) => boolean;
+};
+
+type EditablePairWithId = EditablePair & {
+  id: string;
+};
+
+/** Strip the editor-only fields, so they can never reach a model write */
+function toPairData({ commitName: _commitName, ...pair }: EditablePairWithId): PairWithId {
+  return pair;
+}
+
 /** Max number of pairs to show before prompting the user to reveal the rest */
 const MAX_INITIAL_PAIRS = 30;
 
-export function PairEditor({
+// Keyed on `stateKey` so no state survives a change of owner. Row ids alone can't tell owners
+// apart — two pair sets can share ids (eg. one duplicated from the other), and the same-rows
+// fast path below would swap in the new data without rebuilding the row editors, leaving any
+// still-focused input showing the old owner's text.
+export function PairEditor(props: PairEditorProps) {
+  return <PairEditorInner key={props.stateKey} {...props} />;
+}
+
+function PairEditorInner({
   allowFileValues,
   allowMultilineValues,
   className,
@@ -106,8 +145,8 @@ export function PairEditor({
   setRef,
 }: PairEditorProps) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const [isDragging, setIsDragging] = useState<PairWithId | null>(null);
-  const [pairs, setPairs] = useState<PairWithId[]>([]);
+  const [isDragging, setIsDragging] = useState<EditablePairWithId | null>(null);
+  const [pairs, setPairs] = useState<EditablePairWithId[]>([]);
   const [showAll, toggleShowAll] = useToggle(false);
   // NOTE: Use local force update key because we trigger an effect on forceUpdateKey change. If
   //  we simply pass forceUpdateKey to the editor, the data set by useEffect will be stale.
@@ -115,16 +154,38 @@ export function PairEditor({
 
   const rowsRef = useRef<Record<string, RowHandle | null>>({});
 
+  const pendingFocusFrame = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      if (pendingFocusFrame.current != null) cancelAnimationFrame(pendingFocusFrame.current);
+    },
+    [],
+  );
+
+  const focusWhenReady = useCallback((id: string, field: "name" | "value") => {
+    if (pendingFocusFrame.current != null) cancelAnimationFrame(pendingFocusFrame.current);
+
+    let attemptsLeft = MAX_FOCUS_ATTEMPTS;
+    const attempt = () => {
+      pendingFocusFrame.current = null;
+      const row = rowsRef.current[id];
+      const landed = field === "name" ? row?.focusName() : row?.focusValue();
+      if (landed || --attemptsLeft <= 0) return;
+      pendingFocusFrame.current = requestAnimationFrame(attempt);
+    };
+    attempt();
+  }, []);
+
   const handle = useMemo<PairEditorHandle>(
     () => ({
       focusName(id: string) {
-        rowsRef.current[id]?.focusName();
+        focusWhenReady(id, "name");
       },
       focusValue(id: string) {
-        rowsRef.current[id]?.focusValue();
+        focusWhenReady(id, "value");
       },
     }),
-    [],
+    [focusWhenReady],
   );
 
   const initPairEditorRow = useCallback(
@@ -147,7 +208,7 @@ export function PairEditor({
   // oxlint-disable-next-line react-hooks/exhaustive-deps -- Only care about forceUpdateKey
   useEffect(() => {
     // Remove empty headers on initial render and ensure they all have valid ids (pairs didn't use to have IDs)
-    const newPairs: PairWithId[] = [];
+    const newPairs: EditablePairWithId[] = [];
     for (let i = 0; i < originalPairs.length; i++) {
       const p = originalPairs[i];
       if (!p) continue; // Make TS happy
@@ -155,6 +216,21 @@ export function PairEditor({
       newPairs.push(ensurePairId(p));
     }
 
+    // When the reset holds the exact same rows (eg. renaming a URL path placeholder, which keeps
+    // every row id), swap the data in without rebuilding the row editors. Unfocused inputs re-seed
+    // themselves when `defaultValue` changes, and a rebuild would drop the user's focus and
+    // selection — like tabbing from a placeholder's name into its value.
+    const trailingPair = pairs[pairs.length - 1];
+    const sameRows =
+      trailingPair != null &&
+      isPairEmpty(trailingPair) &&
+      pairs.length === newPairs.length + 1 &&
+      newPairs.every((p, i) => p.id === pairs[i]?.id);
+    if (sameRows) {
+      setPairs([...newPairs, trailingPair]);
+      return;
+    }
+
     // Add empty last pair if there is none
     const lastPair = newPairs[newPairs.length - 1];
     if (lastPair == null || !isPairEmpty(lastPair)) {
@@ -166,10 +242,10 @@ export function PairEditor({
   }, [forceUpdateKey]);
 
   const setPairsAndSave = useCallback(
-    (fn: (pairs: PairWithId[]) => PairWithId[]) => {
+    (fn: (pairs: EditablePairWithId[]) => EditablePairWithId[]) => {
       setPairs((oldPairs) => {
         const pairs = fn(oldPairs);
-        onChange(pairs);
+        onChange(pairs.map(toPairData));
         return pairs;
       });
     },
@@ -177,7 +253,7 @@ export function PairEditor({
   );
 
   const handleChange = useCallback(
-    (pair: PairWithId) =>
+    (pair: EditablePairWithId) =>
       setPairsAndSave((pairs) => pairs.map((p) => (pair.id !== p.id ? p : pair))),
     [setPairsAndSave],
   );
@@ -362,14 +438,14 @@ export function PairEditor({
 
 type PairEditorRowProps = {
   className?: string;
-  pair: PairWithId;
+  pair: EditablePairWithId;
   forceFocusNamePairId?: string | null;
   forceFocusValuePairId?: string | null;
-  onChange?: (pair: PairWithId) => void;
-  onDelete?: (pair: PairWithId, focusPrevious: boolean) => void;
-  onFocusName?: (pair: PairWithId) => void;
-  onFocusValue?: (pair: PairWithId) => void;
-  onSubmit?: (pair: PairWithId) => void;
+  onChange?: (pair: EditablePairWithId) => void;
+  onDelete?: (pair: EditablePairWithId, focusPrevious: boolean) => void;
+  onFocusName?: (pair: EditablePairWithId) => void;
+  onFocusValue?: (pair: EditablePairWithId) => void;
+  onSubmit?: (pair: EditablePairWithId) => void;
   isLast?: boolean;
   disabled?: boolean;
   disableDrag?: boolean;
@@ -397,8 +473,8 @@ type PairEditorRowProps = {
 >;
 
 interface RowHandle {
-  focusName(): void;
-  focusValue(): void;
+  focusName(): boolean;
+  focusValue(): boolean;
 }
 
 export function PairEditorRow({
@@ -436,9 +512,11 @@ export function PairEditorRow({
   const handle = useRef<RowHandle>({
     focusName() {
       nameInputRef.current?.focus();
+      return nameInputRef.current?.isFocused() ?? false;
     },
     focusValue() {
       valueInputRef.current?.focus();
+      return valueInputRef.current?.isFocused() ?? false;
     },
   });
 
@@ -471,11 +549,37 @@ export function PairEditorRow({
     [onChange, pair],
   );
 
+  // The name being typed into a deferred-commit field, before it's committed or reverted
+  const pendingName = useRef<string | null>(null);
+
   const handleChangeName = useMemo(
-    () => (name: string) => onChange?.({ ...pair, name }),
+    () => (name: string) => {
+      // Keep the edit local until commit. Writing on every keystroke would reset the editor from
+      // beneath the cursor, since the pairs are derived from the name being edited.
+      if (pair.commitName != null) pendingName.current = name;
+      else onChange?.({ ...pair, name });
+    },
     [onChange, pair],
   );
 
+  const revertName = useCallback(() => {
+    const nameInput = nameInputRef.current;
+    if (nameInput != null) {
+      const changes = { from: 0, to: nameInput.value().length, insert: pair.name };
+      nameInput.dispatch({ changes });
+    }
+    pendingName.current = null;
+  }, [pair.name]);
+
+  const handleBlurName = useCallback(() => {
+    if (pair.commitName == null) return;
+
+    const name = pendingName.current;
+    pendingName.current = null;
+    if (name == null || name === pair.name) return;
+    if (!pair.commitName(name)) revertName();
+  }, [pair, revertName]);
+
   const handleChangeValueText = useMemo(
     () => (value: string) => onChange?.({ ...pair, value, isFile: false }),
     [onChange, pair],
@@ -551,6 +655,10 @@ export function PairEditorRow({
     [setDraggableRef, setDroppableRef],
   );
 
+  // Skip the trailing placeholder row. It exists to start a new pair, so a picker there would
+  // imply it's already a real row. `Input` handles the rest, including having no options to show.
+  const showOptionsPicker = !isLast;
+
   return (
     <div
       ref={handleSetRef}
@@ -596,7 +704,7 @@ export function PairEditorRow({
           stateKey={`name.${pair.id}.${stateKey}`}
           disabled={disabled}
           wrapLines={false}
-          readOnly={pair.readOnlyName || isDraggingGlobal}
+          readOnly={isDraggingGlobal}
           size="sm"
           required={!isLast && !!pair.enabled && !!pair.value}
           validate={nameValidate}
@@ -606,12 +714,14 @@ export function PairEditorRow({
           defaultValue={pair.name}
           label="Name"
           name={`name[${index}]`}
+          onBlur={handleBlurName}
           onChange={handleChangeName}
           onFocus={handleFocusName}
           placeholder={namePlaceholder ?? "name"}
           autocomplete={nameAutocomplete}
           autocompleteVariables={nameAutocompleteVariables}
           autocompleteFunctions={nameAutocompleteFunctions}
+          showOptionsPicker={showOptionsPicker}
         />
         <div className="w-full grid grid-cols-[minmax(0,1fr)_auto] gap-1 items-center">
           {pair.isFile ? (
@@ -656,6 +766,7 @@ export function PairEditorRow({
               autocomplete={valueAutocomplete?.(pair.name)}
               autocompleteFunctions={valueAutocompleteFunctions}
               autocompleteVariables={valueAutocompleteVariablesFiltered}
+              showOptionsPicker={showOptionsPicker}
             />
           )}
         </div>
@@ -675,8 +786,10 @@ export function PairEditorRow({
           <IconButton
             iconSize="sm"
             size="xs"
-            icon={isLast || disabled ? "empty" : "chevron_down"}
-            title="Select form data type"
+            // Ellipsis rather than a chevron: the name and value fields now carry chevrons for
+            // picking a suggestion, and this menu acts on the row instead of filling in a field.
+            icon={isLast || disabled ? "empty" : "ellipsis_vertical"}
+            title="More actions"
             className="text-text-subtlest"
           />
         </Dropdown>
@@ -746,7 +859,7 @@ function FileActionsDropdown({
         leftSlot: <Icon icon="file_code" />,
         onSelect: async () => {
           console.log("PAIR", pair);
-          const defaultFilename = await basename(pair.value ?? "");
+          const defaultFilename = await platform.files.basename(pair.value ?? "");
           const filename = await showPrompt({
             id: "filename",
             title: "Override Filename",
@@ -800,7 +913,8 @@ function FileActionsDropdown({
       <IconButton
         iconSize="sm"
         size="xs"
-        icon="chevron_down"
+        // Matches the plain row menu, so the actions column reads the same for file and text rows
+        icon="ellipsis_vertical"
         title="Select form data type"
         className="text-text-subtlest"
       />
@@ -808,7 +922,7 @@ function FileActionsDropdown({
   );
 }
 
-function emptyPair(): PairWithId {
+function emptyPair(): EditablePairWithId {
   return ensurePairId({ enabled: true, name: "", value: "" });
 }
 

apps/yaak-client/components/core/PairEditor.util.tsx

@@ -1,9 +1,10 @@
 import { generateId } from "../../lib/generateId";
 import type { Pair, PairWithId } from "./PairEditor";
 
-export function ensurePairId(p: Pair): PairWithId {
+// NOTE: Generic so callers keep whatever they passed in (eg. an EditablePair stays editable)
+export function ensurePairId<T extends Pair>(p: T): T & PairWithId {
   if (typeof p.id === "string") {
-    return p as PairWithId;
+    return p as T & PairWithId;
   }
   return { ...p, id: p.id ?? generateId() };
 }

apps/yaak-client/components/core/PlainInput.tsx

@@ -205,6 +205,7 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
             autoComplete="off"
             autoCapitalize="off"
             autoCorrect="off"
+            writingsuggestions="false"
             inputMode={inputMode}
             onChange={(e) => handleChange(e.target.value)}
             onPaste={(e) => onPaste?.(e.clipboardData.getData("Text"))}

apps/yaak-client/components/core/SegmentedControl.tsx

@@ -6,6 +6,7 @@ import { useStateWithDeps } from "../../hooks/useStateWithDeps";
 import { generateId } from "../../lib/generateId";
 import { Button } from "./Button";
 import { IconButton, type IconButtonProps } from "./IconButton";
+import { IconTooltip } from "./IconTooltip";
 import { Label } from "./Label";
 
 interface Props<T extends string> {
@@ -36,11 +37,15 @@ export function SegmentedControl<T extends string>({
   const containerRef = useRef<HTMLDivElement>(null);
   const id = useRef(`input-${generateId()}`);
 
+  // A visually hidden label has nowhere to show the help, so the last option carries it
+  const inlineHelp =
+    hideLabel && help ? <IconTooltip tabIndex={-1} content={help} iconSize="xs" /> : null;
+
   return (
     <div className="w-full grid">
       <Label
         htmlFor={id.current}
-        help={help}
+        help={hideLabel ? undefined : help}
         visuallyHidden={hideLabel}
         className={classNames(labelClassName)}
       >
@@ -78,9 +83,10 @@ export function SegmentedControl<T extends string>({
           }
         }}
       >
-        {options.map((o) => {
+        {options.map((o, i) => {
           const isSelected = selectedValue === o.value;
           const isActive = value === o.value;
+          const rightSlot = i === options.length - 1 ? inlineHelp : null;
           if (o.icon == null) {
             return (
               <Button
@@ -95,6 +101,7 @@ export function SegmentedControl<T extends string>({
                   isActive && "text-text!",
                   "focus:ring-1 focus:ring-border-focus",
                 )}
+                rightSlot={rightSlot}
                 onClick={() => onChange(o.value)}
               >
                 {o.label}
@@ -117,6 +124,7 @@ export function SegmentedControl<T extends string>({
                 )}
                 title={o.label}
                 icon={o.icon}
+                rightSlot={rightSlot}
                 onClick={() => onChange(o.value)}
               />
             );

apps/yaak-client/components/core/Select.tsx

@@ -1,4 +1,4 @@
-import { type } from "@tauri-apps/plugin-os";
+import { platform } from "@yaakapp-internal/platform";
 import { HStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { CSSProperties, ReactNode } from "react";
@@ -66,7 +66,7 @@ export function Select<T extends string>({
       <Label htmlFor={id} visuallyHidden={hideLabel} className={labelClassName} help={help}>
         {label}
       </Label>
-      {type() === "macos" && !filterable ? (
+      {platform.osType() === "macos" && !filterable ? (
         <HStack
           space={2}
           className={classNames(
@@ -119,9 +119,13 @@ export function Select<T extends string>({
           )}
         >
           <Button
-            className="w-full text-sm font-mono"
+            className={classNames(
+              "w-full text-sm font-mono",
+              disabled && "border-dotted",
+              isInvalidSelection && "border-danger",
+            )}
             justify="start"
-            variant="border"
+            variant="input"
             size={size}
             leftSlot={leftSlot}
             disabled={disabled}

apps/yaak-client/components/core/Separator.tsx

@@ -1,13 +1,31 @@
 import type { Color } from "@yaakapp-internal/plugins";
+import type { IconProps } from "@yaakapp-internal/ui";
+import { IconButton } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { ReactNode } from "react";
 
+/**
+ * A single control attached to a labelled separator, rendered between the label
+ * and the rule.
+ *
+ * Declared rather than passed as a node so the separator keeps ownership of the
+ * things that are easy to get wrong by hand: matching the label's colour, and
+ * staying out of the rule's way when the label is long.
+ */
+export interface SeparatorAction {
+  icon: IconProps["icon"];
+  /** Tooltip and accessible name. Required — the control is icon-only. */
+  title: string;
+  onClick: () => void;
+}
+
 interface Props {
   orientation?: "horizontal" | "vertical";
   dashed?: boolean;
   className?: string;
   children?: ReactNode;
   color?: Color;
+  action?: SeparatorAction;
 }
 
 export function Separator({
@@ -16,15 +34,31 @@ export function Separator({
   dashed,
   orientation = "horizontal",
   children,
+  action,
 }: Props) {
   return (
     <div role="presentation" className={classNames(className, "flex items-center w-full")}>
       {children && (
         <div className="text-sm text-text-subtlest mr-2 whitespace-nowrap">{children}</div>
       )}
+      {action && (
+        <IconButton
+          size="2xs"
+          iconSize="xs"
+          className="shrink-0 mr-2 -ml-1"
+          // Forced, because the button itself sets `text-text` at full strength.
+          iconClassName="text-text-subtlest!"
+          icon={action.icon}
+          title={action.title}
+          onClick={action.onClick}
+        />
+      )}
       <div
         className={classNames(
           "opacity-60",
+          // Keep a stub of the line visible no matter how long the label is —
+          // `w-full` alone gets squeezed to nothing by a wide label.
+          orientation === "horizontal" && "min-w-8",
           color == null && "border-border",
           color === "primary" && "border-primary",
           color === "secondary" && "border-secondary",

apps/yaak-client/components/git/GitCommitDialog.tsx

@@ -21,6 +21,8 @@ import { CommercialUseBanner } from "../CommercialUseBanner";
 import { Button } from "../core/Button";
 import type { CheckboxProps } from "../core/Checkbox";
 import { Checkbox } from "../core/Checkbox";
+import type { CheckboxTreeNode } from "../core/CheckboxTree";
+import { CheckboxTree } from "../core/CheckboxTree";
 import { DiffViewer } from "../core/Editor/DiffViewer";
 import { Input } from "../core/Input";
 import { Separator } from "../core/Separator";
@@ -43,10 +45,7 @@ interface CommitTreeNode {
 
 export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
   const callbacks = useGitCallbacks(syncDir);
-  const [{ status }, { commit, commitAndPush, add, unstage, restore }] = useGit(
-    syncDir,
-    callbacks,
-  );
+  const [{ status }, { commit, commitAndPush, add, unstage, restore }] = useGit(syncDir, callbacks);
   const [isPushing, setIsPushing] = useState(false);
   const [commitError, setCommitError] = useState<string | null>(null);
   const [message, setMessage] = useState<string>("");
@@ -143,6 +142,15 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     return next(workspace, []);
   }, [workspace, internalEntries]);
 
+  const treeNode: CheckboxTreeNode<CommitTreeNode> | null = useMemo(() => {
+    const toTreeNode = (n: CommitTreeNode): CheckboxTreeNode<CommitTreeNode> => ({
+      key: n.status.relaPath + n.status.status + n.status.staged,
+      data: n,
+      children: n.children.map(toTreeNode),
+    });
+    return tree == null ? null : toTreeNode(tree);
+  }, [tree]);
+
   const checkNode = useCallback(
     (treeNode: CommitTreeNode) => {
       const checked = nodeCheckedStatus(treeNode);
@@ -190,7 +198,7 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     [restore],
   );
 
-  if (tree == null) {
+  if (tree == null || treeNode == null) {
     return null;
   }
 
@@ -221,12 +229,18 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
                   style={innerStyle}
                   className="h-full overflow-y-auto pb-3 pr-0.5 transform-cpu"
                 >
-                  <TreeNodeChildren
-                    node={tree}
-                    depth={0}
-                    onCheck={checkNode}
-                    onSelect={handleSelectChild}
-                    selectedPath={selectedEntry?.relaPath ?? null}
+                  <CheckboxTree
+                    node={treeNode}
+                    checked={(n) => nodeCheckedStatus(n.data)}
+                    onCheck={(n) => checkNode(n.data)}
+                    checkboxTitle={(n) =>
+                      nodeCheckedStatus(n.data) ? "Unstage change" : "Stage change"
+                    }
+                    isRelevant={(n) => n.data.status.status !== "current"}
+                    canSelectRow={(n) => n.data.status.status !== "current"}
+                    onSelectRow={(n) => handleSelectChild(n.data.status)}
+                    isRowSelected={(n) => selectedEntry?.relaPath === n.data.status.relaPath}
+                    renderRow={(n) => <CommitTreeRow node={n.data} />}
                   />
                   {externalEntries.find((e) => e.status !== "current") && (
                     <>
@@ -244,10 +258,7 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
                 </div>
               )}
               secondSlot={({ style: innerStyle }) => (
-                <div
-                  style={innerStyle}
-                  className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2"
-                >
+                <div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
                   <Input
                     className="text-base! font-sans rounded-md"
                     placeholder="Commit message..."
@@ -301,96 +312,39 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
   );
 }
 
-function TreeNodeChildren({
-  node,
-  depth,
-  onCheck,
-  onSelect,
-  selectedPath,
-}: {
-  node: CommitTreeNode | null;
-  depth: number;
-  onCheck: (node: CommitTreeNode, checked: boolean) => void;
-  onSelect: (entry: GitStatusEntry) => void;
-  selectedPath: string | null;
-}) {
-  if (node === null) return null;
-  if (!isNodeRelevant(node)) return null;
-
-  const checked = nodeCheckedStatus(node);
-  const isSelected = selectedPath === node.status.relaPath;
-
+function CommitTreeRow({ node }: { node: CommitTreeNode }) {
   return (
-    <div
-      className={classNames(
-        depth > 0 && "pl-4 ml-2 border-l border-dashed border-border-subtle relative",
-      )}
-    >
-      <div
-        className={classNames(
-          "relative flex gap-1 w-full h-xs items-center",
-          isSelected ? "text-text" : "text-text-subtle",
-        )}
-      >
-        {isSelected && (
-          <div className="absolute left-[-100vw] right-0 top-0 bottom-0 bg-surface-active opacity-30 -z-10" />
-        )}
-        <Checkbox
-          checked={checked}
-          title={checked ? "Unstage change" : "Stage change"}
-          hideLabel
-          onChange={(checked) => onCheck(node, checked)}
+    <>
+      {node.model.model !== "http_request" &&
+      node.model.model !== "grpc_request" &&
+      node.model.model !== "websocket_request" ? (
+        <Icon
+          color="secondary"
+          icon={
+            node.model.model === "folder"
+              ? "folder"
+              : node.model.model === "environment"
+                ? "variable"
+                : "house"
+          }
         />
-        <button
-          type="button"
-          className={classNames("flex-1 min-w-0 flex items-center gap-1 px-1 py-0.5 text-left")}
-          onClick={() => node.status.status !== "current" && onSelect(node.status)}
+      ) : (
+        <span aria-hidden className="w-4" />
+      )}
+      <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
+      {node.status.status !== "current" && (
+        <InlineCode
+          className={classNames(
+            "py-0 bg-transparent w-24 text-center shrink-0",
+            node.status.status === "modified" && "text-info",
+            node.status.status === "untracked" && "text-success",
+            node.status.status === "removed" && "text-danger",
+          )}
         >
-          {node.model.model !== "http_request" &&
-          node.model.model !== "grpc_request" &&
-          node.model.model !== "websocket_request" ? (
-            <Icon
-              color="secondary"
-              icon={
-                node.model.model === "folder"
-                  ? "folder"
-                  : node.model.model === "environment"
-                    ? "variable"
-                    : "house"
-              }
-            />
-          ) : (
-            <span aria-hidden className="w-4" />
-          )}
-          <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
-          {node.status.status !== "current" && (
-            <InlineCode
-              className={classNames(
-                "py-0 bg-transparent w-24 text-center shrink-0",
-                node.status.status === "modified" && "text-info",
-                node.status.status === "untracked" && "text-success",
-                node.status.status === "removed" && "text-danger",
-              )}
-            >
-              {node.status.status}
-            </InlineCode>
-          )}
-        </button>
-      </div>
-
-      {node.children.map((childNode) => {
-        return (
-          <TreeNodeChildren
-            key={childNode.status.relaPath + childNode.status.status + childNode.status.staged}
-            node={childNode}
-            depth={depth + 1}
-            onCheck={onCheck}
-            onSelect={onSelect}
-            selectedPath={selectedPath}
-          />
-        );
-      })}
-    </div>
+          {node.status.status}
+        </InlineCode>
+      )}
+    </>
   );
 }
 
@@ -495,15 +449,6 @@ function setCheckedAndChildren(
   if (toUnstage.length > 0) unstage({ relaPaths: toUnstage });
 }
 
-function isNodeRelevant(node: CommitTreeNode): boolean {
-  if (node.status.status !== "current") {
-    return true;
-  }
-
-  // Recursively check children
-  return node.children.some((c) => isNodeRelevant(c));
-}
-
 function DiffPanel({
   entry,
   onDiscardChanges,
@@ -526,13 +471,11 @@ function DiffPanel({
           size="2xs"
           variant="border"
           onClick={() => onDiscardChanges(entry)}
-        >Discard Changes</Button>
+        >
+          Discard Changes
+        </Button>
       </div>
-      <DiffViewer
-        original={prevYaml ?? ""}
-        modified={nextYaml ?? ""}
-        className="flex-1 min-h-0"
-      />
+      <DiffViewer original={prevYaml ?? ""} modified={nextYaml ?? ""} className="flex-1 min-h-0" />
     </div>
   );
 }

apps/yaak-client/components/git/diverged.tsx

@@ -86,10 +86,8 @@ export async function promptDivergedStrategy({
     showDialog({
       id: "git-diverged",
       title: "Branches Diverged",
-      hideX: true,
       size: "sm",
-      disableBackdropClose: true,
-      onClose: () => resolve("cancel"),
+      disableClose: true,
       render: ({ hide }) =>
         DivergedDialog({
           remote,

apps/yaak-client/components/graphql/GraphQLEditor.tsx

@@ -1,4 +1,5 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
 
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo } from "react";
@@ -11,6 +12,7 @@ import type { DropdownItem } from "../core/Dropdown";
 import { Dropdown } from "../core/Dropdown";
 import type { EditorProps } from "../core/Editor/Editor";
 import { Editor } from "../core/Editor/LazyEditor";
+import { IconButton } from "../core/IconButton";
 import type { RadioDropdownItem } from "../core/RadioDropdown";
 import { RadioDropdown } from "../core/RadioDropdown";
 import { Banner, FormattedError, Icon } from "@yaakapp-internal/ui";
@@ -18,6 +20,7 @@ import { Separator } from "../core/Separator";
 import { tryFormatGraphql } from "../../lib/formatters";
 import { parseGraphQLOperationNames } from "../../lib/graphqlOperationNames";
 import { normalizeGraphQLBody } from "../../lib/requestBodyConversion";
+import { revealInFinderText } from "../../lib/reveal";
 import { showGraphQLDocExplorerAtom } from "./graphqlAtoms";
 
 type Props = Pick<EditorProps, "heightMode" | "className" | "forceUpdateKey"> & {
@@ -28,6 +31,10 @@ type Props = Pick<EditorProps, "heightMode" | "className" | "forceUpdateKey"> &
 
 const OPERATION_NAME_NOT_SPECIFIED = "";
 
+// How much of the end of a schema filename is pinned when middle-truncating it.
+// Enough to keep the extension and a little of the name before it.
+const FILE_NAME_TAIL_CHARS = 12;
+
 export function GraphQLEditor(props: Props) {
   // There's some weirdness with stale onChange being called when switching requests, so we'll
   // key on the request ID as a workaround for now.
@@ -38,9 +45,41 @@ function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProp
   const [autoIntrospectDisabled, setAutoIntrospectDisabled] = useLocalStorage<
     Record<string, boolean>
   >("graphQLAutoIntrospectDisabled", {});
-  const { schema, isLoading, error, refetch, clear } = useIntrospectGraphQL(baseRequest, {
+  const {
+    schema,
+    isLoading,
+    error,
+    refetch,
+    clear,
+    loadFromFile,
+    reloadFromFile,
+    removeSchemaFile,
+    filePath,
+  } = useIntrospectGraphQL(baseRequest, {
     disabled: autoIntrospectDisabled?.[baseRequest.id],
   });
+
+  // Last path segment, for display only. The host owns real path semantics; this
+  // just needs something short enough to label the divider with.
+  const fileName = useMemo(() => filePath?.split(/[/\\]/).pop() || filePath, [filePath]);
+
+  // Selecting a file is all it takes — the request's source becomes that file,
+  // which is what keeps automatic introspection from overwriting it.
+  const handleLoadFromFile = useCallback(async () => {
+    const selected = await platform.dialog.open({
+      title: "Load GraphQL Schema",
+      multiple: false,
+      filters: [
+        {
+          name: "GraphQL Schema",
+          extensions: ["graphql", "graphqls", "gql", "json"],
+        },
+      ],
+    });
+    if (selected == null) return;
+
+    await loadFromFile(selected);
+  }, [loadFromFile]);
   const [currentBody, setCurrentBody] = useStateWithDeps<{
     query: string;
     variables: string | undefined;
@@ -160,14 +199,37 @@ function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProp
               ...((schema != null
                 ? [
                     {
-                      label: "Clear",
+                      label: "Clear Schema",
                       onSelect: clear,
                       color: "danger",
                       leftSlot: <Icon icon="trash" />,
                     },
-                    { type: "separator" },
                   ]
                 : []) satisfies DropdownItem[]),
+              {
+                // Labels the source actions below it, so the menu says where the
+                // schema came from without spending a row on it.
+                type: "separator",
+                hidden: schema == null && filePath == null,
+                label:
+                  fileName == null || filePath == null ? undefined : (
+                    // Middle truncation: the head shrinks and ellipsizes while the
+                    // tail is pinned, so the extension always survives. Full path
+                    // on hover.
+                    <div className="flex min-w-0 max-w-[16rem] font-mono text-xs" title={filePath}>
+                      <span className="truncate">{fileName.slice(0, -FILE_NAME_TAIL_CHARS)}</span>
+                      <span className="shrink-0">{fileName.slice(-FILE_NAME_TAIL_CHARS)}</span>
+                    </div>
+                  ),
+                action:
+                  filePath == null
+                    ? undefined
+                    : {
+                        icon: "folder_symlink",
+                        title: revealInFinderText,
+                        onClick: () => platform.revealItemInDir(filePath),
+                      },
+              },
               {
                 hidden: !error,
                 label: (
@@ -210,25 +272,33 @@ function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProp
                 type: "content",
               },
               {
-                hidden: schema == null,
-                label: `${isDocOpen ? "Hide" : "Show"} Documentation`,
-                leftSlot: <Icon icon="book_open_text" />,
-                onSelect: () => {
-                  setGraphqlDocStateAtomValue((v) => ({
-                    ...v,
-                    [request.id]: isDocOpen ? undefined : null,
-                  }));
+                // One refresh action for either source: re-read the file, or
+                // re-introspect the server.
+                label: "Reload Schema",
+                leftSlot: <Icon icon="refresh" spin={isLoading} />,
+                keepOpenOnSelect: true,
+                // Failures surface through the hook's error state either way.
+                onSelect: async () => {
+                  if (filePath != null) await reloadFromFile();
+                  else await refetch();
                 },
               },
               {
-                label: "Introspect Schema",
-                leftSlot: <Icon icon="refresh" spin={isLoading} />,
-                keepOpenOnSelect: true,
-                onSelect: refetch,
+                label: filePath == null ? "Load Schema from File…" : "Load a Different File…",
+                leftSlot: <Icon icon="import" />,
+                onSelect: handleLoadFromFile,
               },
-              { type: "separator", label: "Setting" },
               {
-                label: "Automatic Introspection",
+                hidden: filePath == null,
+                label: "Stop Using File",
+                leftSlot: <Icon icon="x" />,
+                onSelect: removeSchemaFile,
+              },
+              { type: "separator", label: "Settings" },
+              {
+                // Governs both sources: re-introspecting the server, and
+                // re-reading the file when the request is opened.
+                label: filePath == null ? "Automatic Introspection" : "Automatic Reload",
                 keepOpenOnSelect: true,
                 onSelect: () => {
                   setAutoIntrospectDisabled({
@@ -261,6 +331,29 @@ function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProp
           </Dropdown>
         )}
       </div>,
+      // Sits after the schema control it depends on. Always rendered, disabled
+      // without a schema, so the row never changes shape.
+      <div key="documentation" className="opacity-100!">
+          <IconButton
+            size="sm"
+            variant="border"
+            icon="book_open_text"
+            disabled={schema == null}
+            title={
+              schema == null
+                ? "Documentation unavailable without a schema"
+                : isDocOpen
+                  ? "Hide Documentation"
+                  : "Show Documentation"
+            }
+            onClick={() => {
+              setGraphqlDocStateAtomValue((v) => ({
+                ...v,
+                [request.id]: isDocOpen ? undefined : null,
+              }));
+            }}
+          />
+      </div>,
     ],
     [
       schema,
@@ -272,6 +365,11 @@ function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProp
       isLoading,
       operationNames,
       refetch,
+      handleLoadFromFile,
+      reloadFromFile,
+      removeSchemaFile,
+      filePath,
+      fileName,
       autoIntrospectDisabled,
       baseRequest.id,
       setGraphqlDocStateAtomValue,

apps/yaak-client/components/responseViewers/AudioViewer.tsx

@@ -1,26 +1,29 @@
-import { convertFileSrc } from "@tauri-apps/api/core";
 import { useEffect, useState } from "react";
 
 interface Props {
-  bodyPath?: string;
+  /** A URL for the body the host already stored. */
+  bodyUrl?: string;
   data?: Uint8Array;
+  mimeType?: string;
 }
 
-export function AudioViewer({ bodyPath, data }: Props) {
+export function AudioViewer({ bodyUrl, data, mimeType }: Props) {
   const [src, setSrc] = useState<string>();
 
   useEffect(() => {
-    if (bodyPath) {
-      setSrc(convertFileSrc(bodyPath));
+    if (bodyUrl) {
+      setSrc(bodyUrl);
     } else if (data) {
-      const blob = new Blob([new Uint8Array(data)], { type: "audio/mpeg" });
-      const url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      // The type matters here in a way it doesn't for an image: a media element goes by what
+      // the blob declares rather than sniffing it, so an Ogg labelled as MP3 won't play
+      const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "audio/mpeg" });
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data]);
+  }, [bodyUrl, data, mimeType]);
 
   // oxlint-disable-next-line jsx-a11y/media-has-caption
   return <audio className="w-full" controls src={src} />;

apps/yaak-client/components/responseViewers/CsvViewer.test.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test, vi } from "vite-plus/test";
+import { CsvViewerInner } from "./CsvViewer";
+
+vi.mock("@yaakapp-internal/ui", () => ({
+  Table: ({ children }: { children: ReactNode }) => <table>{children}</table>,
+  TableBody: ({ children }: { children: ReactNode }) => <tbody>{children}</tbody>,
+  TableCell: ({ children }: { children: ReactNode }) => <td>{children}</td>,
+  TableHead: ({ children }: { children: ReactNode }) => <thead>{children}</thead>,
+  TableHeaderCell: ({ children }: { children: ReactNode }) => <th>{children}</th>,
+  TableRow: ({ children }: { children: ReactNode }) => <tr>{children}</tr>,
+}));
+
+describe("CsvViewer", () => {
+  test("renders columns that extend beyond the first row", () => {
+    const markup = renderToStaticMarkup(
+      <CsvViewerInner
+        text={[
+          "startDate,2026-02-03T00:00-03:00",
+          "endDate,2026-02-03T23:59:59-03:00",
+          "id,Fecha de inicio,Nombre,Estado,Perfil de puesto,ID de sucursal,Sucursal,Fecha de fin,ID de usuario",
+          "391118210,2026-02-03 12:58:55,atencion1,Disponible,ATD,3549,sucursal,2026-02-03 12:59:08,42041",
+        ].join("\n")}
+      />,
+    );
+
+    expect(markup).toContain("ID de usuario");
+    expect(markup).toContain("42041");
+    expect(markup.match(/<td>/g)).toHaveLength(20);
+  });
+});

apps/yaak-client/components/responseViewers/CsvViewer.tsx

@@ -26,27 +26,33 @@ export function CsvViewer({ text, className }: Props) {
 export function CsvViewerInner({ text, className }: { text: string | null; className?: string }) {
   const parsed = useMemo(() => {
     if (text == null) return null;
-    return Papa.parse<Record<string, string>>(text, { header: true, skipEmptyLines: true });
+    return Papa.parse<string[]>(text, { skipEmptyLines: true });
   }, [text]);
 
   if (parsed === null) return null;
 
+  const header = parsed.data[0] ?? [];
+  const rows = parsed.data.slice(1);
+  const columnCount = parsed.data.reduce((count, row) => Math.max(count, row.length), 0);
+  const columnIndexes = Array.from({ length: columnCount }, (_, index) => index);
+
   return (
     <div className="overflow-auto h-full">
       <Table className={classNames(className, "text-sm")}>
         <TableHead>
           <TableRow>
-            {parsed.meta.fields?.map((field) => (
-              <TableHeaderCell key={field}>{field}</TableHeaderCell>
+            {columnIndexes.map((columnIndex) => (
+              <TableHeaderCell key={columnIndex}>{header[columnIndex] ?? ""}</TableHeaderCell>
             ))}
           </TableRow>
         </TableHead>
         <TableBody>
-          {parsed.data.map((row, i) => (
+          {rows.map((row, i) => (
             // oxlint-disable-next-line react/no-array-index-key
             <TableRow key={i}>
-              {parsed.meta.fields?.map((key) => (
-                <TableCell key={key}>{row[key] ?? ""}</TableCell>
+              {row.map((cell, columnIndex) => (
+                // oxlint-disable-next-line react/no-array-index-key
+                <TableCell key={columnIndex}>{cell}</TableCell>
               ))}
             </TableRow>
           ))}

apps/yaak-client/components/responseViewers/HTMLOrTextViewer.tsx

@@ -1,7 +1,9 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
-import { useMemo, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
 import { useCopyHttpResponse } from "../../hooks/useCopyHttpResponse";
-import { useResponseBodyText } from "../../hooks/useResponseBodyText";
+import { responseBodyTextQuery, useResponseBodyText } from "../../hooks/useResponseBodyText";
+import { useResponseFilter } from "../../hooks/useResponseFilter";
 import { useSaveResponse } from "../../hooks/useSaveResponse";
 import { languageFromContentType } from "../../lib/contentType";
 import { getContentTypeFromHeaders } from "../../lib/model_util";
@@ -52,30 +54,25 @@ interface HttpTextViewerProps {
 }
 
 function HttpTextViewer({ response, text, language, pretty, className }: HttpTextViewerProps) {
-  const [currentFilter, setCurrentFilter] = useState<string | null>(null);
-  const filteredBody = useResponseBodyText({ response, filter: currentFilter });
+  const queryClient = useQueryClient();
+  const filter = useResponseFilter({
+    stateKey: `response.body.${response.requestId}`,
+    // Shares the display query's cache entry, so the verdict costs no extra RPC
+    runFilter: useCallback(
+      (f: string) => queryClient.fetchQuery(responseBodyTextQuery({ response, filter: f })),
+      [queryClient, response],
+    ),
+  });
+  const filteredBody = useResponseBodyText({ response, filter: filter.appliedFilter });
   const saveResponse = useSaveResponse(response);
   const copyResponse = useCopyHttpResponse(response);
   const actionsDisabled = response.state !== "closed" && response.status >= 100;
 
-  const filterCallback = useMemo(
-    () => (filter: string) => {
-      setCurrentFilter(filter);
-      return {
-        data: filteredBody.data,
-        isPending: filteredBody.isPending,
-        error: !!filteredBody.error,
-      };
-    },
-    [filteredBody],
-  );
-
   return (
     <TextViewer
       text={text}
       language={language}
       stateKey={`response.body.${response.id}`}
-      filterStateKey={`response.body.${response.requestId}`}
       pretty={pretty}
       className={className}
       footerActions={[
@@ -98,7 +95,12 @@ function HttpTextViewer({ response, text, language, pretty, className }: HttpTex
           className="border !border-border-subtle"
         />,
       ]}
-      onFilter={filterCallback}
+      filter={filter}
+      filterResult={{
+        data: filteredBody.data,
+        isPending: filteredBody.isPending,
+        error: !!filteredBody.error,
+      }}
     />
   );
 }

apps/yaak-client/components/responseViewers/ImageViewer.tsx

@@ -1,33 +1,33 @@
-import { convertFileSrc } from "@tauri-apps/api/core";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 
-type Props = { className?: string } & (
+type Props = { className?: string; mimeType?: string } & (
   | {
-      bodyPath: string;
+      /** A URL for the body the host already stored. */
+      bodyUrl: string;
     }
   | {
       data: ArrayBuffer;
     }
 );
 
-export function ImageViewer({ className, ...props }: Props) {
+export function ImageViewer({ className, mimeType, ...props }: Props) {
   const [src, setSrc] = useState<string>();
-  const bodyPath = "bodyPath" in props ? props.bodyPath : null;
+  const bodyUrl = "bodyUrl" in props ? props.bodyUrl : null;
   const data = "data" in props ? props.data : null;
 
   useEffect(() => {
-    if (bodyPath != null) {
-      setSrc(convertFileSrc(bodyPath));
+    if (bodyUrl != null) {
+      setSrc(bodyUrl);
     } else if (data != null) {
-      const blob = new Blob([data], { type: "image/png" });
-      const url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      const blob = new Blob([data], { type: mimeType ?? "image/png" });
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data]);
+  }, [bodyUrl, data, mimeType]);
 
   return (
     <img

apps/yaak-client/components/responseViewers/PdfViewer.tsx

@@ -1,24 +1,21 @@
 import "react-pdf/dist/Page/TextLayer.css";
 import "react-pdf/dist/Page/AnnotationLayer.css";
-import { convertFileSrc } from "@tauri-apps/api/core";
 import "./PdfViewer.css";
 import type { PDFDocumentProxy } from "pdfjs-dist";
-import { useEffect, useRef, useState } from "react";
-import { Document, Page } from "react-pdf";
+import { useMemo, useRef, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
 import { useContainerSize } from "@yaakapp-internal/ui";
-import { fireAndForget } from "../../lib/fireAndForget";
 
-fireAndForget(
-  import("react-pdf").then(({ pdfjs }) => {
-    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-      "pdfjs-dist/build/pdf.worker.min.mjs",
-      import.meta.url,
-    ).toString();
-  }),
-);
+// Document can start loading during render, so configure its worker synchronously.
+// Vite bundles the installed PDF.js worker as a local asset, including offline builds.
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url,
+).toString();
 
 interface Props {
-  bodyPath?: string;
+  /** A URL for the body the host already stored. */
+  bodyUrl?: string;
   data?: Uint8Array;
 }
 
@@ -27,32 +24,40 @@ const options = {
   standardFontDataUrl: "/standard_fonts/",
 };
 
-export function PdfViewer({ bodyPath, data }: Props) {
+export function PdfViewer({ bodyUrl, data }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [numPages, setNumPages] = useState<number>();
-  const [src, setSrc] = useState<string | { data: Uint8Array }>();
 
   const { width: containerWidth } = useContainerSize(containerRef);
 
-  useEffect(() => {
-    if (bodyPath) {
-      setSrc(convertFileSrc(bodyPath));
-    } else if (data) {
+  // During render, not in an effect: an effect leaves the first paint with no file, and
+  // `Document` renders its "Failed to load PDF file" state for that frame before recovering
+  const src = useMemo(() => {
+    if (bodyUrl) {
+      return bodyUrl;
+    }
+    if (data) {
       // Create a copy to avoid "Buffer is already detached" errors
       // This happens when the ArrayBuffer is transferred/detached elsewhere
-      const dataCopy = new Uint8Array(data);
-      setSrc({ data: dataCopy });
-    } else {
-      setSrc(undefined);
+      return { data: new Uint8Array(data) };
     }
-  }, [bodyPath, data]);
+    return undefined;
+  }, [bodyUrl, data]);
 
   const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy): void => {
     setNumPages(nextNumPages);
   };
+
+  // Nothing to show yet, rather than the failure state `Document` renders for an empty file
+  if (src == null) {
+    return null;
+  }
+
   return (
     <div ref={containerRef} className="w-full h-full overflow-y-auto">
       <Document
+        // Keep the copied data stable: suspending the initial mount discards useMemo.
+        suspense={false}
         file={src}
         options={options}
         onLoadSuccess={onDocumentLoadSuccess}

apps/yaak-client/components/responseViewers/RecentFiltersDropdown.tsx

@@ -0,0 +1,96 @@
+import { Icon } from "@yaakapp-internal/ui";
+import type { RecentFilter } from "../../hooks/useRecentFilters";
+import { Dropdown, type DropdownItem } from "../core/Dropdown";
+import { IconButton } from "../core/IconButton";
+
+interface Props {
+  recentFilters: RecentFilter[];
+  activeFilter: string | null;
+  onSelect: (value: string) => void;
+  onRemove: (value: string) => void;
+  onTogglePin: (value: string) => void;
+  onClear: () => void;
+}
+
+export function RecentFiltersDropdown({
+  recentFilters,
+  activeFilter,
+  onSelect,
+  onRemove,
+  onTogglePin,
+  onClear,
+}: Props) {
+  const pinned = recentFilters.filter((f) => f.pinned);
+  const unpinned = recentFilters.filter((f) => !f.pinned);
+
+  const toItem = (filter: RecentFilter): DropdownItem => ({
+    label: (
+      <div className="font-mono text-sm truncate max-w-sm" title={filter.value}>
+        {filter.value}
+      </div>
+    ),
+    leftSlot: <Icon icon={filter.value === activeFilter ? "check" : "empty"} />,
+    onSelect: () => onSelect(filter.value),
+    submenuTrigger: "button",
+    submenu: [
+      {
+        label: filter.pinned ? "Unpin" : "Pin",
+        icon: filter.pinned ? "unpin" : "pin",
+        keepOpenOnSelect: true,
+        onSelect: () => onTogglePin(filter.value),
+      },
+      {
+        label: "Remove",
+        icon: "trash",
+        color: "danger",
+        keepOpenOnSelect: true,
+        onSelect: () => onRemove(filter.value),
+      },
+    ],
+  });
+
+  const items: DropdownItem[] = [];
+
+  if (recentFilters.length === 0) {
+    items.push({
+      type: "content",
+      label: (
+        <span className="block px-4 py-1 text-sm text-text-subtle">
+          Filters you use are remembered here
+        </span>
+      ),
+    });
+  }
+
+  if (pinned.length > 0) {
+    items.push({ type: "separator", label: "Pinned" }, ...pinned.map(toItem));
+  }
+
+  if (unpinned.length > 0) {
+    items.push({ type: "separator", label: "Recent" }, ...unpinned.map(toItem));
+  }
+
+  if (recentFilters.length > 0) {
+    items.push(
+      { type: "separator" },
+      {
+        label: "Clear All",
+        leftSlot: <Icon icon="trash" />,
+        color: "danger",
+        onSelect: onClear,
+      },
+    );
+  }
+
+  return (
+    <Dropdown items={items}>
+      <IconButton
+        size="xs"
+        icon="filter"
+        title="Recent filters"
+        iconColor="secondary"
+        className="w-8 ml-0.5 mr-1 h-auto!"
+      />
+    </Dropdown>
+  );
+}

apps/yaak-client/components/responseViewers/ResponseBreadcrumbBar.tsx

@@ -0,0 +1,192 @@
+import { Icon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { JsonPathSegment } from "../core/Editor/json/jsonPath";
+import { IconButton } from "../core/IconButton";
+import { Tooltip } from "../core/Tooltip";
+
+interface Props {
+  segments: JsonPathSegment[];
+  appliedFilter: string | null;
+  /**
+   * How many leading segments make up the applied filter. `null` when unfiltered, or
+   * when the filter isn't a plain path and is shown as raw text instead.
+   */
+  appliedDepth: number | null;
+  filterError: boolean;
+  /** Called with the number of leading segments to filter to. `0` clears the filter. */
+  onSelect: (count: number) => void;
+}
+
+/**
+ * Shows where the cursor sits inside a response (`$ > sort > [0] > id`). An applied
+ * plain-path filter is the start of the trail, so any crumb moves it. While filtered,
+ * the bar is tinted so a lingering filter is hard to miss.
+ */
+export function ResponseBreadcrumbBar({
+  segments,
+  appliedFilter,
+  appliedDepth,
+  filterError,
+  onSelect,
+}: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [overflow, setOverflow] = useState({ left: false, right: false });
+
+  const measure = useCallback(() => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setOverflow({
+      left: el.scrollLeft > 1,
+      right: el.scrollLeft < maxScroll - 1,
+    });
+  }, []);
+
+  // Keep the deepest crumb (where the cursor is) in view as the path changes.
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    el.scrollLeft = el.scrollWidth;
+    measure();
+  }, [segments, measure]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [measure]);
+
+  const scrollBy = useCallback((direction: -1 | 1) => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    el.scrollBy({ left: direction * Math.max(120, el.clientWidth * 0.6), behavior: "smooth" });
+  }, []);
+
+  const isFiltered = appliedFilter != null;
+
+  return (
+    <div className="rounded bg-surface shadow pointer-events-auto">
+      <div
+        className={classNames(
+          "flex items-stretch h-6 rounded border overflow-hidden font-mono text-xs text-text-subtle select-none",
+          !isFiltered && "border-border-subtle",
+          isFiltered && !filterError && "border-primary/40 bg-primary/10",
+          filterError && "border-danger/40 bg-danger/10",
+        )}
+      >
+        {isFiltered && appliedDepth == null ? (
+          <span
+            className={classNames(
+              "flex items-center min-w-0 truncate px-2",
+              filterError ? "text-danger" : "text-primary",
+            )}
+          >
+            {appliedFilter}
+          </span>
+        ) : (
+          <Crumb
+            label="$"
+            tooltip="Clear filter"
+            isApplied={isFiltered}
+            onClick={appliedDepth != null && appliedDepth > 0 ? () => onSelect(0) : null}
+          />
+        )}
+        {overflow.left && (
+          <IconButton
+            size="xs"
+            icon="chevron_left"
+            title="Scroll breadcrumbs left"
+            iconColor="secondary"
+            onClick={() => scrollBy(-1)}
+            className="shrink-0 h-auto!"
+          />
+        )}
+        <div
+          ref={scrollRef}
+          onScroll={measure}
+          className="flex items-stretch min-w-0 overflow-x-auto hide-scrollbars whitespace-nowrap"
+        >
+          {segments.map((segment, i) => {
+            const count = i + 1;
+            const isApplied = appliedDepth != null && count <= appliedDepth;
+            const isClickable = (!isFiltered || appliedDepth != null) && count !== appliedDepth;
+            return (
+              <div key={i} className="flex items-stretch shrink-0">
+                <Icon
+                  icon="chevron_right"
+                  size="xs"
+                  className="text-text-subtlest shrink-0 self-center"
+                />
+                <Crumb
+                  label={segment.kind === "index" ? `[${segment.index}]` : segment.key}
+                  tooltip={
+                    segment.kind === "index"
+                      ? `Filter to element ${segment.index}`
+                      : `Filter to ${segment.key}`
+                  }
+                  isApplied={isApplied}
+                  onClick={isClickable ? () => onSelect(count) : null}
+                />
+              </div>
+            );
+          })}
+        </div>
+        {overflow.right && (
+          <IconButton
+            size="xs"
+            icon="chevron_right"
+            title="Scroll breadcrumbs right"
+            iconColor="secondary"
+            onClick={() => scrollBy(1)}
+            className="shrink-0 h-auto!"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Crumb({
+  label,
+  tooltip,
+  isApplied,
+  onClick,
+}: {
+  label: string;
+  tooltip: string;
+  isApplied: boolean;
+  onClick: (() => void) | null;
+}) {
+  const outerClassName = classNames("flex items-center px-0.5 py-0.5", isApplied && "text-primary");
+  const innerClassName = "flex items-center h-full px-1 rounded-sm";
+  if (onClick == null) {
+    return (
+      <span className={classNames(outerClassName, "shrink-0")}>
+        <span className={innerClassName}>{label}</span>
+      </span>
+    );
+  }
+
+  return (
+    <Tooltip content={tooltip} className="shrink-0 items-stretch!">
+      <button
+        type="button"
+        onClick={onClick}
+        className={classNames(outerClassName, "group/crumb focus-visible:outline-none")}
+      >
+        <span
+          className={classNames(
+            innerClassName,
+            "transition-colors group-hover/crumb:text-text group-hover/crumb:bg-surface-highlight",
+            "group-focus-visible/crumb:ring-1 group-focus-visible/crumb:ring-border-focus",
+          )}
+        >
+          {label}
+        </span>
+      </button>
+    </Tooltip>
+  );
+}

apps/yaak-client/components/responseViewers/TextViewer.tsx

@@ -1,71 +1,91 @@
-import classNames from "classnames";
 import type { ReactNode } from "react";
-import { Children, useCallback, useMemo } from "react";
-import { createGlobalState } from "react-use";
-import { useDebouncedValue } from "@yaakapp-internal/ui";
+import { Children, useCallback, useMemo, useState } from "react";
 import { useFormatText } from "../../hooks/useFormatText";
+import type { ResponseFilterApi } from "../../hooks/useResponseFilter";
 import type { EditorProps } from "../core/Editor/Editor";
+import { jsonBreadcrumbExtension } from "../core/Editor/json/breadcrumbExtension";
+import type { JsonPathSegment } from "../core/Editor/json/jsonPath";
+import { jsonPathToSegments, segmentsToJsonPath } from "../core/Editor/json/jsonPath";
 import { hyperlink } from "../core/Editor/hyperlink/extension";
 import { Editor } from "../core/Editor/LazyEditor";
 import { IconButton } from "../core/IconButton";
 import { Input } from "../core/Input";
-
-const extraExtensions = [hyperlink];
+import { ResponseBreadcrumbBar } from "./ResponseBreadcrumbBar";
+import { RecentFiltersDropdown } from "./RecentFiltersDropdown";
 
 interface Props {
   text: string;
   language: EditorProps["language"];
   stateKey: string | null;
-  filterStateKey?: string | null;
   pretty?: boolean;
   className?: string;
   footerActions?: ReactNode;
-  onFilter?: (filter: string) => {
+  filter?: ResponseFilterApi;
+  filterResult?: {
     data: string | null | undefined;
     isPending: boolean;
     error: boolean;
   };
 }
 
-const useFilterText = createGlobalState<Record<string, string | null>>({});
-
 export function TextViewer({
   language,
   text,
   stateKey,
-  filterStateKey,
   pretty,
   className,
   footerActions,
-  onFilter,
+  filter,
+  filterResult,
 }: Props) {
-  const filterKey = filterStateKey ?? stateKey;
-  const [filterTextMap, setFilterTextMap] = useFilterText();
-  const filterText = filterKey ? (filterTextMap[filterKey] ?? null) : null;
-  const debouncedFilterText = useDebouncedValue(filterText);
-  const setFilterText = useCallback(
-    (v: string | null) => {
-      if (!filterKey) return;
-      setFilterTextMap((m) => ({ ...m, [filterKey]: v }));
-    },
-    [filterKey, setFilterTextMap],
+  // Track the JSON path under the cursor to drive the breadcrumb bar. Selection
+  // works even in this read-only editor, so it updates as the user clicks around.
+  const [breadcrumbSegments, setBreadcrumbSegments] = useState<JsonPathSegment[]>([]);
+  const handleBreadcrumbUpdate = useCallback(
+    ({ segments }: { segments: JsonPathSegment[] | null }) =>
+      setBreadcrumbSegments((prev) => {
+        const next = segments ?? [];
+        return segmentsToJsonPath(prev) === segmentsToJsonPath(next) ? prev : next;
+      }),
+    [],
+  );
+  const extraExtensions = useMemo(
+    () =>
+      language === "json"
+        ? [hyperlink, jsonBreadcrumbExtension(handleBreadcrumbUpdate)]
+        : [hyperlink],
+    [language, handleBreadcrumbUpdate],
   );
 
-  const isSearching = filterText != null;
-  const filteredResponse =
-    onFilter && debouncedFilterText
-      ? onFilter(debouncedFilterText)
-      : { data: null, isPending: false, error: false };
+  const canFilter =
+    filter != null && (language === "json" || language === "xml" || language === "html");
+  const isSearching = filter?.isSearching ?? false;
+  const appliedFilter = filter?.appliedFilter ?? null;
+  const resultError = filterResult?.error ?? false;
 
-  const toggleSearch = useCallback(() => {
-    if (isSearching) {
-      setFilterText(null);
-    } else {
-      setFilterText("");
-    }
-  }, [isSearching, setFilterText]);
+  // Filter output is always an array of matches, so under a plain-path filter the
+  // cursor's leading index is that single match and the rest extends the filter.
+  const appliedSegments =
+    appliedFilter != null && language === "json" ? jsonPathToSegments(appliedFilter) : null;
+  const pathSegments =
+    appliedSegments != null
+      ? [...appliedSegments, ...breadcrumbSegments.slice(1)]
+      : breadcrumbSegments;
+  const showBreadcrumbs =
+    filter != null &&
+    (appliedFilter != null || (language === "json" && breadcrumbSegments.length > 0));
 
-  const canFilter = onFilter && (language === "json" || language === "xml" || language === "html");
+  const handleFilterKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (filter == null) return;
+      if (e.key === "Escape") {
+        filter.toggleSearch();
+      } else if (e.key === "Enter" && filter.filterText != null) {
+        filter.applyFilter(filter.filterText);
+      }
+    },
+    [filter],
+  );
 
   const actions = useMemo<ReactNode[]>(() => {
     const nodes: ReactNode[] = isSearching ? [] : Children.toArray(footerActions);
@@ -76,8 +96,8 @@ export function TextViewer({
       nodes.push(
         <div key="input" className="w-full opacity-100!">
           <Input
-            key={filterKey ?? "filter"}
-            validate={!filteredResponse.error}
+            key={filter.stateKey ?? "filter"}
+            validate={!resultError}
             hideLabel
             autoFocus
             containerClassName="bg-surface"
@@ -85,39 +105,62 @@ export function TextViewer({
             placeholder={language === "json" ? "JSONPath expression" : "XPath expression"}
             label="Filter expression"
             name="filter"
-            defaultValue={filterText}
-            onKeyDown={(e) => e.key === "Escape" && toggleSearch()}
-            onChange={setFilterText}
-            stateKey={filterKey ? `filter.${filterKey}` : null}
+            defaultValue={filter.filterText}
+            forceUpdateKey={filter.filterUpdateKey}
+            onKeyDown={handleFilterKeyDown}
+            onChange={filter.setFilterText}
+            stateKey={filter.stateKey ? `filter.${filter.stateKey}` : null}
+            leftSlot={
+              <div className="py-0.5 flex">
+                <RecentFiltersDropdown
+                  recentFilters={filter.recentFilters}
+                  activeFilter={filter.appliedFilter}
+                  onSelect={filter.replaceFilter}
+                  onRemove={filter.removeRecentFilter}
+                  onTogglePin={filter.togglePinRecentFilter}
+                  onClear={filter.clearRecentFilters}
+                />
+              </div>
+            }
+            rightSlot={
+              <div className="py-0.5 flex">
+                <IconButton
+                  size="xs"
+                  icon="x"
+                  title="Close filter"
+                  iconColor="secondary"
+                  onClick={filter.toggleSearch}
+                  className="w-8 mr-0.5 h-auto!"
+                />
+              </div>
+            }
           />
         </div>,
       );
+    } else {
+      nodes.push(
+        <IconButton
+          key="icon"
+          size="sm"
+          isLoading={filterResult?.isPending ?? false}
+          icon="filter"
+          title="Filter response"
+          onClick={filter.toggleSearch}
+          className="border border-border-subtle!"
+        />,
+      );
     }
 
-    nodes.push(
-      <IconButton
-        key="icon"
-        size="sm"
-        isLoading={filteredResponse.isPending}
-        icon={isSearching ? "x" : "filter"}
-        title={isSearching ? "Close filter" : "Filter response"}
-        onClick={toggleSearch}
-        className={classNames("border border-border-subtle!", isSearching && "opacity-100!")}
-      />,
-    );
-
     return nodes;
   }, [
     canFilter,
     footerActions,
-    filterKey,
-    filterText,
-    filteredResponse.error,
-    filteredResponse.isPending,
+    filter,
+    filterResult?.isPending,
+    resultError,
     isSearching,
     language,
-    setFilterText,
-    toggleSearch,
+    handleFilterKeyDown,
   ]);
 
   const formattedBody = useFormatText({ text, language, pretty: pretty ?? false });
@@ -126,11 +169,11 @@ export function TextViewer({
   }
 
   let body: string;
-  if (isSearching && filterText?.length > 0) {
-    if (filteredResponse.error) {
+  if (appliedFilter) {
+    if (resultError) {
       body = "";
     } else {
-      body = filteredResponse.data != null ? filteredResponse.data : "";
+      body = filterResult?.data != null ? filterResult.data : "";
     }
   } else {
     body = formattedBody;
@@ -143,15 +186,30 @@ export function TextViewer({
   }
 
   return (
-    <Editor
-      readOnly
-      className={className}
-      defaultValue={body}
-      language={language}
-      actions={actions}
-      extraExtensions={extraExtensions}
-      stateKey={stateKey}
-    />
+    <div className="relative h-full w-full">
+      <Editor
+        readOnly
+        className={className}
+        defaultValue={body}
+        language={language}
+        actions={actions}
+        extraExtensions={extraExtensions}
+        stateKey={stateKey}
+      />
+      {showBreadcrumbs && (
+        <div className="absolute top-0 right-3 max-w-[70%] pointer-events-none">
+          <ResponseBreadcrumbBar
+            segments={language === "json" ? pathSegments : []}
+            appliedFilter={appliedFilter}
+            appliedDepth={appliedSegments?.length ?? null}
+            filterError={resultError}
+            onSelect={(count) =>
+              filter.replaceFilter(count === 0 ? "" : segmentsToJsonPath(pathSegments, count))
+            }
+          />
+        </div>
+      )}
+    </div>
   );
 }
 

apps/yaak-client/components/responseViewers/VideoViewer.tsx

@@ -1,26 +1,28 @@
-import { convertFileSrc } from "@tauri-apps/api/core";
 import { useEffect, useState } from "react";
 
 interface Props {
-  bodyPath?: string;
+  /** A URL for the body the host already stored. */
+  bodyUrl?: string;
   data?: Uint8Array;
+  mimeType?: string;
 }
 
-export function VideoViewer({ bodyPath, data }: Props) {
+export function VideoViewer({ bodyUrl, data, mimeType }: Props) {
   const [src, setSrc] = useState<string>();
 
   useEffect(() => {
-    if (bodyPath) {
-      setSrc(convertFileSrc(bodyPath));
+    if (bodyUrl) {
+      setSrc(bodyUrl);
     } else if (data) {
-      const blob = new Blob([new Uint8Array(data)], { type: "video/mp4" });
-      const url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      // As in AudioViewer: a media element trusts the declared type instead of sniffing
+      const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "video/mp4" });
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data]);
+  }, [bodyUrl, data, mimeType]);
 
   // oxlint-disable-next-line jsx-a11y/media-has-caption
   return <video className="w-full" controls src={src} />;

apps/yaak-client/font-size.ts

@@ -1,5 +1,5 @@
 // Listen for settings changes, the re-compute theme
-import { listen } from "@tauri-apps/api/event";
+import { platform } from "@yaakapp-internal/platform";
 import type { ModelPayload } from "@yaakapp-internal/models";
 import { fireAndForget } from "./lib/fireAndForget";
 import { getSettings } from "./lib/settings";
@@ -8,10 +8,12 @@ function setFontSizeOnDocument(fontSize: number) {
   document.documentElement.style.fontSize = `${fontSize}px`;
 }
 
-listen<ModelPayload>("model_write", async (event) => {
-  if (event.payload.change.type !== "upsert") return;
-  if (event.payload.model.model !== "settings") return;
-  setFontSizeOnDocument(event.payload.model.interfaceFontSize);
-}).catch(console.error);
+platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+  for (const payload of payloads) {
+    if (payload.change.type !== "upsert") continue;
+    if (payload.model.model !== "settings") continue;
+    setFontSizeOnDocument(payload.model.interfaceFontSize);
+  }
+});
 
 fireAndForget(getSettings().then((settings) => setFontSizeOnDocument(settings.interfaceFontSize)));

apps/yaak-client/font.ts

@@ -1,5 +1,5 @@
 // Listen for settings changes, the re-compute theme
-import { listen } from "@tauri-apps/api/event";
+import { platform } from "@yaakapp-internal/platform";
 import type { ModelPayload, Settings } from "@yaakapp-internal/models";
 import { fireAndForget } from "./lib/fireAndForget";
 import { getSettings } from "./lib/settings";
@@ -12,10 +12,12 @@ function setFonts(settings: Settings) {
   );
 }
 
-listen<ModelPayload>("model_write", async (event) => {
-  if (event.payload.change.type !== "upsert") return;
-  if (event.payload.model.model !== "settings") return;
-  setFonts(event.payload.model);
-}).catch(console.error);
+platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+  for (const payload of payloads) {
+    if (payload.change.type !== "upsert") continue;
+    if (payload.model.model !== "settings") continue;
+    setFonts(payload.model);
+  }
+});
 
 fireAndForget(getSettings().then((settings) => setFonts(settings)));