Add feature hints for sync, variables, encryption, and chaining

Co-Authored-By: Claude Fable 5 <noreply@anthropic.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,34 @@
+version: 2
+
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    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
+    groups:
+      cargo:
+        patterns:
+          - "*"
+        update-types:
+          - minor
+          - patch

.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/release-app.yml

@@ -70,7 +70,7 @@ jobs:
             runtime: "wry"
             targets: "aarch64-pc-windows-msvc"
     runs-on: ${{ matrix.platform }}
-    timeout-minutes: 40
+    timeout-minutes: 60
     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

.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 }}

.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,13 @@ 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",
   # CLI crates
   "crates-cli/yaak-cli",
   # Tauri-specific crates
@@ -63,15 +69,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.web

@@ -0,0 +1,46 @@
+# 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
+ENV YAAK_WEB_BIND=0.0.0.0: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/openWorkspaceSettings.tsx

@@ -1,10 +1,16 @@
-import type { WorkspaceSettingsTab } from "../components/WorkspaceSettingsDialog";
+import type {
+  WorkspaceSettingsHighlight,
+  WorkspaceSettingsTab,
+} from "../components/WorkspaceSettingsDialog";
 import { WorkspaceSettingsDialog } from "../components/WorkspaceSettingsDialog";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { jotaiStore } from "../lib/jotai";
 
-export function openWorkspaceSettings(tab?: WorkspaceSettingsTab) {
+export function openWorkspaceSettings(
+  tab?: WorkspaceSettingsTab,
+  highlight?: WorkspaceSettingsHighlight,
+) {
   const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
   if (workspaceId == null) return;
-  WorkspaceSettingsDialog.show(workspaceId, tab);
+  WorkspaceSettingsDialog.show(workspaceId, tab, highlight);
 }

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/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/DynamicForm.tsx

@@ -31,6 +31,7 @@ import type { Pair } from "./core/PairEditor";
 import { PairEditor } from "./core/PairEditor";
 import { PlainInput } from "./core/PlainInput";
 import { Select } from "./core/Select";
+import { SecretVariableHint } from "./hints/SecretVariableHint";
 import { Markdown } from "./Markdown";
 import { SelectFile } from "./SelectFile";
 
@@ -46,6 +47,8 @@ interface Props<T> {
   stateKey: string;
   className?: string;
   disabled?: boolean;
+  /** Offer to move literal secrets typed into password fields into a variable */
+  suggestVariables?: boolean;
 }
 
 export function DynamicForm<T extends Record<string, JsonPrimitive>>({
@@ -57,6 +60,7 @@ export function DynamicForm<T extends Record<string, JsonPrimitive>>({
   stateKey,
   className,
   disabled,
+  suggestVariables,
 }: Props<T>) {
   const setDataAttr = useCallback(
     (name: string, value: JsonPrimitive) => {
@@ -73,6 +77,7 @@ export function DynamicForm<T extends Record<string, JsonPrimitive>>({
       stateKey={stateKey}
       autocompleteFunctions={autocompleteFunctions}
       autocompleteVariables={autocompleteVariables}
+      suggestVariables={suggestVariables}
       data={data}
       className={classNames(className, "pb-4")} // Pad the bottom to look nice
     />
@@ -103,6 +108,7 @@ type FormInputsProps<T> = Pick<
 > & {
   setDataAttr: (name: string, value: JsonPrimitive) => void;
   disabled?: boolean;
+  suggestVariables?: boolean;
 };
 
 function FormInputs<T extends Record<string, JsonPrimitive>>({
@@ -113,6 +119,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
   setDataAttr,
   data,
   disabled,
+  suggestVariables,
 }: FormInputsProps<T>) {
   return (
     <>
@@ -147,6 +154,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                 arg={input}
                 autocompleteFunctions={autocompleteFunctions || false}
                 autocompleteVariables={autocompleteVariables || false}
+                suggestVariables={suggestVariables || false}
                 onChange={(v) => setDataAttr(input.name, v)}
                 value={
                   data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "")
@@ -287,6 +295,7 @@ function TextArg({
   value,
   autocompleteFunctions,
   autocompleteVariables,
+  suggestVariables,
   stateKey,
 }: {
   arg: FormInputText;
@@ -294,6 +303,7 @@ function TextArg({
   onChange: (v: string) => void;
   autocompleteFunctions: boolean;
   autocompleteVariables: boolean;
+  suggestVariables: boolean;
   stateKey: string;
 }) {
   const props: InputProps = {
@@ -316,10 +326,19 @@ function TextArg({
     autocompleteFunctions,
     autocompleteVariables,
   };
-  if (autocompleteVariables || autocompleteFunctions || arg.completionOptions) {
-    return <Input {...props} />;
-  }
-  return <PlainInput {...props} />;
+  const input =
+    autocompleteVariables || autocompleteFunctions || arg.completionOptions ? (
+      <Input {...props} />
+    ) : (
+      <PlainInput {...props} />
+    );
+  if (!suggestVariables || !arg.password) return input;
+  return (
+    <div className="flex flex-col gap-2">
+      {input}
+      <SecretVariableHint name={arg.name} value={value} onReplace={onChange} />
+    </div>
+  );
 }
 
 function EditorArg({

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/EnvironmentEditor.tsx

@@ -15,6 +15,7 @@ import {
   withEncryptionEnabled,
 } from "../lib/setupOrConfigureEncryption";
 import { DismissibleBanner } from "./core/DismissibleBanner";
+import { FeatureHint } from "./core/FeatureHint";
 import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import type { PairEditorHandle, PairWithId } from "./core/PairEditor";
 import { ensurePairId } from "./core/PairEditor.util";
@@ -152,6 +153,17 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
             This sharable environment contains plain-text secrets
           </DismissibleBanner>
         )}
+        {!environment.public && !isEncryptionEnabled && hasSecretLookingVariable(environment) && (
+          <FeatureHint
+            id="encrypt-secrets"
+            className="mr-3"
+            docsUrl="https://yaak.app/docs/collaboration/secrets-encryption"
+            action={{ label: "Enable Encryption", onClick: setupOrConfigureEncryption }}
+          >
+            Some of these look like secrets. Encrypt them so the workspace is safe to sync to a
+            folder or share with a team.
+          </FeatureHint>
+        )}
       </div>
       <PairOrBulkEditor
         setRef={setRef}
@@ -173,3 +185,9 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
     </div>
   );
 }
+
+const SECRET_NAME = /token|secret|password|passwd|api[_-]?key|private[_-]?key|credential/i;
+
+function hasSecretLookingVariable(environment: Environment) {
+  return environment.variables.some((v) => v.value.trim() !== "" && SECRET_NAME.test(v.name));
+}

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,7 +65,7 @@ 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({
+    const exportPath = await platform.dialog.save({
       title: "Export Data",
       defaultPath: `yaak.${slug}.json`,
     });
@@ -73,7 +73,7 @@ function ExportDataDialogContent({
       return;
     }
 
-    await invokeCmd("cmd_export_data", {
+    await rpc("cmd_export_data", {
       workspaceIds: ids,
       exportPath,
       includePrivateEnvironments: includePrivateEnvironments,

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/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

@@ -133,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" },
@@ -146,10 +148,10 @@ 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(
@@ -194,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"

apps/yaak-client/components/HttpAuthenticationEditor.tsx

@@ -178,6 +178,7 @@ export function HttpAuthenticationEditor({ model }: Props) {
         disabled={model.authentication.disabled === true}
         autocompleteVariables
         autocompleteFunctions
+        suggestVariables
         stateKey={`auth.${model.id}.${model.authenticationType}`}
         inputs={authConfig.data?.args ?? []}
         data={model.authentication}

apps/yaak-client/components/HttpRequestPane.tsx

@@ -5,11 +5,11 @@ import classNames from "classnames";
 import { atom, useAtomValue } from "jotai";
 import type { CSSProperties } from "react";
 import { lazy, Suspense, useCallback, useMemo, useRef, useState } from "react";
+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";
@@ -52,6 +52,7 @@ import { JsonBodyEditor } from "./JsonBodyEditor";
 import { MarkdownEditor } from "./MarkdownEditor";
 import { RequestMethodDropdown } from "./RequestMethodDropdown";
 import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { SharedOriginHint } from "./hints/SharedOriginHint";
 import { UrlBar } from "./UrlBar";
 import { UrlParametersEditor } from "./UrlParameterEditor";
 
@@ -165,6 +166,8 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
       : 0;
   }
 
+  const hasDescription = activeRequest.description.trim().length > 0;
+
   const tabs = useMemo<TabItem[]>(
     () => [
       {
@@ -260,6 +263,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
       {
         value: TAB_DESCRIPTION,
         label: "Info",
+        rightSlot: hasDescription && <CountBadge count={true} />,
       },
     ],
     [
@@ -267,6 +271,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
       authTab,
       contentType,
       handleContentTypeChange,
+      hasDescription,
       headersTab,
       numParams,
       numSettingsOverrides,
@@ -278,7 +283,6 @@ 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"]) => patchModelDebounced(activeRequest, { body }),
@@ -299,8 +303,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) {
@@ -322,7 +326,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
         }
       }
     },
-    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh, importCurl],
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh],
   );
   const handleSend = useCallback(
     () => sendRequest(activeRequest.id ?? null),
@@ -341,24 +345,27 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
     >
       {activeRequest && (
         <>
-          <UrlBar
-            stateKey={`url.${activeRequest.id}`}
-            key={forceUpdateKey + urlKey}
-            url={activeRequest.url}
-            placeholder="https://example.com"
-            onPasteOverwrite={handlePaste}
-            autocomplete={autocomplete}
-            onSend={handleSend}
-            onCancel={cancelResponse}
-            onUrlChange={handleUrlChange}
-            leftSlot={
-              <div className="py-0.5">
-                <RequestMethodDropdown request={activeRequest} className="ml-0.5 h-full!" />
-              </div>
-            }
-            forceUpdateKey={updateKey}
-            isLoading={activeResponse != null && activeResponse.state !== "closed"}
-          />
+          <div>
+            <UrlBar
+              stateKey={`url.${activeRequest.id}`}
+              key={forceUpdateKey + urlKey}
+              url={activeRequest.url}
+              placeholder="https://example.com"
+              onPasteOverwrite={handlePaste}
+              autocomplete={autocomplete}
+              onSend={handleSend}
+              onCancel={cancelResponse}
+              onUrlChange={handleUrlChange}
+              leftSlot={
+                <div className="py-0.5">
+                  <RequestMethodDropdown request={activeRequest} className="ml-0.5 h-full!" />
+                </div>
+              }
+              forceUpdateKey={updateKey}
+              isLoading={activeResponse != null && activeResponse.state !== "closed"}
+            />
+            <SharedOriginHint />
+          </div>
           <Tabs
             ref={tabsRef}
             label="Request"

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";
@@ -27,6 +28,7 @@ import { TabContent, Tabs } from "./core/Tabs/Tabs";
 import { Tooltip } from "./core/Tooltip";
 import { EmptyStateText } from "./EmptyStateText";
 import { ErrorBoundary } from "./ErrorBoundary";
+import { ChainingHint } from "./hints/ChainingHint";
 import { HttpResponseTimeline } from "./HttpResponseTimeline";
 import { RecentHttpResponsesDropdown } from "./RecentHttpResponsesDropdown";
 import { RequestBodyViewer } from "./RequestBodyViewer";
@@ -279,6 +281,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
                 {activeResponse.error}
               </Banner>
             )}
+            {activeResponse && <ChainingHint response={activeResponse} mimeType={mimeType} />}
             {/* Show tabs if we have any data (headers, body, etc.) even if there's an error */}
             <Tabs
               tabs={tabs}
@@ -409,14 +412,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 +426,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, and curl
+        </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}>
+        <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/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/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

@@ -1,6 +1,5 @@
 import type { Extension } from "@codemirror/state";
 import { Compartment } from "@codemirror/state";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { debounce } from "@yaakapp-internal/lib";
 import { gitMutations } from "@yaakapp-internal/git";
 import type { GitStatus } from "@yaakapp-internal/git";
@@ -44,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";
@@ -135,10 +135,10 @@ function Sidebar({ className }: { className?: string }) {
   // 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.
-  useListenToTauriEvent<ModelPayload[]>("model_writes", ({ payload: payloads }) => {
+  usePlatformEvent<ModelPayload[]>("model_writes", (payloads) => {
     for (const payload of payloads) {
       if (payload.updateSource.type !== "window") continue;
-      if (payload.updateSource.label !== getCurrentWebviewWindow().label) 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);

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;
@@ -59,6 +59,7 @@ export function SyncToFilesystemSetting({
         )}
 
         <SettingRowDirectory
+          highlightKey="sync_dir"
           title="Local directory sync"
           description="Sync data to a folder for backup and Git integration."
           filePath={value.filePath}

apps/yaak-client/components/WebsocketRequestPane.tsx

@@ -110,6 +110,8 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
     [activeRequest.url, activeRequest.urlParameters, handleRenamePathPlaceholder],
   );
 
+  const hasDescription = activeRequest.description.trim().length > 0;
+
   const tabs = useMemo<TabItem[]>(() => {
     return [
       {
@@ -131,9 +133,10 @@ 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);

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";
@@ -53,7 +53,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();

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";
@@ -27,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">;
 
@@ -76,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,
@@ -120,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/WorkspaceSettingsDialog.tsx

@@ -25,8 +25,12 @@ interface Props {
   workspaceId: string;
   hide: () => void;
   tab?: WorkspaceSettingsTab;
+  highlight?: WorkspaceSettingsHighlight;
 }
 
+/** Settings rows that can be pointed out when the dialog opens */
+export type WorkspaceSettingsHighlight = "sync_dir";
+
 const TAB_AUTH = "auth";
 const TAB_DNS = "dns";
 const TAB_HEADERS = "headers";
@@ -42,7 +46,7 @@ export type WorkspaceSettingsTab =
 
 const DEFAULT_TAB: WorkspaceSettingsTab = TAB_GENERAL;
 
-export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
+export function WorkspaceSettingsDialog({ workspaceId, hide, tab, highlight }: Props) {
   const workspace = useAtomValue(workspacesAtom).find((w) => w.id === workspaceId);
   const workspaceMeta = useAtomValue(workspaceMetasAtom).find((m) => m.workspaceId === workspaceId);
   const authTab = useAuthTab(TAB_AUTH, workspace ?? null);
@@ -104,7 +108,7 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
         />
       </TabContent>
       <TabContent value={TAB_SETTINGS} className="overflow-y-auto h-full px-4">
-        <SettingsList className="space-y-8 pb-3">
+        <SettingsList className="space-y-8 pb-3" highlight={highlight}>
           <SettingsSection title={null}>
             <SyncToFilesystemSetting
               layout="settings"
@@ -178,14 +182,23 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
   );
 }
 
-WorkspaceSettingsDialog.show = (workspaceId: string, tab?: WorkspaceSettingsTab) => {
+WorkspaceSettingsDialog.show = (
+  workspaceId: string,
+  tab?: WorkspaceSettingsTab,
+  highlight?: WorkspaceSettingsHighlight,
+) => {
   showDialog({
     id: "workspace-settings",
     size: "lg",
     className: "h-[calc(100vh-5rem)] max-h-200!",
     noPadding: true,
     render: ({ hide }) => (
-      <WorkspaceSettingsDialog workspaceId={workspaceId} hide={hide} tab={tab} />
+      <WorkspaceSettingsDialog
+        workspaceId={workspaceId}
+        hide={hide}
+        tab={tab}
+        highlight={highlight}
+      />
     ),
   });
 };

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/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/DismissibleBanner.tsx

@@ -2,11 +2,12 @@ import type { Color } from "@yaakapp-internal/plugins";
 import type { BannerProps } from "@yaakapp-internal/ui";
 import { Banner } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import type { MouseEvent } from "react";
+import type { MouseEvent, ReactNode } from "react";
 import { useEffect } from "react";
 import { useKeyValue } from "../../hooks/useKeyValue";
 import type { ButtonProps } from "./Button";
 import { Button } from "./Button";
+import { IconButton } from "./IconButton";
 
 type DismissibleBannerSize = "sm" | "xs";
 
@@ -18,17 +19,21 @@ export function DismissibleBanner({
   onDismiss,
   onShow,
   actions,
+  variant = "banner",
   ...props
 }: BannerProps & {
   id: string;
   size?: DismissibleBannerSize;
   onDismiss?: () => void | Promise<void>;
   onShow?: () => void | Promise<void>;
+  /** A tip dismisses with an X in the corner instead of a text button */
+  variant?: "banner" | "tip";
   actions?: {
     label: string;
     onClick: () => void;
     color?: Color;
     variant?: ButtonProps["variant"];
+    rightSlot?: ReactNode;
   }[];
 }) {
   const {
@@ -56,54 +61,69 @@ export function DismissibleBanner({
     event.preventDefault();
     event.stopPropagation();
   };
+  const dismiss = (event: MouseEvent) => {
+    stopParentClick(event);
+    setDismissed(true).catch(console.error);
+    Promise.resolve(onDismiss?.()).catch(console.error);
+  };
+  const isTip = variant === "tip";
+  const hasActionRow = !isTip || (actions?.length ?? 0) > 0;
 
   return (
     <Banner
-      className={classNames(
-        className,
-        "relative",
-        size === "xs" && "!px-2 !py-2 text-xs",
-      )}
+      className={classNames(className, "relative", size === "xs" && "!px-2 !py-2 text-xs")}
       {...props}
     >
-      <div className="@container">
+      <div className={classNames("@container", isTip && "relative")}>
+        {isTip && (
+          <IconButton
+            icon="x"
+            size="2xs"
+            iconSize="sm"
+            title="Dismiss message"
+            className="absolute! -top-0.5 -right-1 @[34rem]:top-1/2 @[34rem]:-translate-y-1/2 opacity-50 hover:opacity-100"
+            onClick={dismiss}
+          />
+        )}
         <div
           className={classNames(
             "grid @[34rem]:grid-cols-[minmax(0,1fr)_auto] @[34rem]:items-center",
+            isTip && "@[34rem]:pr-5",
             size === "xs" ? "gap-1.5 @[34rem]:gap-2" : "gap-2 @[34rem]:gap-3",
           )}
         >
-          {children}
-          <div className="flex flex-wrap gap-1.5 @[34rem]:justify-end">
-            <Button
-              variant="border"
-              color={props.color}
-              size={actionSize}
-              onClick={(event) => {
-                stopParentClick(event);
-                setDismissed(true).catch(console.error);
-                Promise.resolve(onDismiss?.()).catch(console.error);
-              }}
-              title="Dismiss message"
-            >
-              Dismiss
-            </Button>
-            {actions?.map((a) => (
-              <Button
-                key={a.label}
-                variant={a.variant ?? "border"}
-                color={a.color ?? props.color}
-                size={actionSize}
-                onClick={(event) => {
-                  stopParentClick(event);
-                  a.onClick();
-                }}
-                title={a.label}
-              >
-                {a.label}
-              </Button>
-            ))}
-          </div>
+          {isTip ? <div className="pr-5 @[34rem]:pr-0">{children}</div> : children}
+          {hasActionRow && (
+            <div className="flex flex-col gap-1.5 @[16rem]:flex-row @[16rem]:flex-wrap @[16rem]:justify-end">
+              {!isTip && (
+                <Button
+                  variant="border"
+                  color={props.color}
+                  size={actionSize}
+                  onClick={dismiss}
+                  title="Dismiss message"
+                >
+                  Dismiss
+                </Button>
+              )}
+              {actions?.map((a) => (
+                <Button
+                  key={a.label}
+                  rightSlot={a.rightSlot}
+                  variant={a.variant ?? "border"}
+                  color={a.color ?? props.color}
+                  size={actionSize}
+                  onClick={(event) => {
+                    stopParentClick(event);
+                    a.onClick();
+                  }}
+                  title={a.label}
+                >
+                  {a.label}
+                </Button>
+              ))}
+            </div>
+          )}
         </div>
       </div>
     </Banner>

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"];
 };
 
@@ -502,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, () => {
@@ -629,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 });
@@ -648,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) {
@@ -776,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>
@@ -797,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}
@@ -868,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;
 }
@@ -879,6 +900,7 @@ function MenuItem({
   onHover,
   item,
   onSelect,
+  onOpenSubmenu,
   isParentOfActiveSubmenu,
   ...props
 }: MenuItemProps) {
@@ -914,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}
@@ -947,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!",
@@ -959,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.tsx

@@ -601,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: () => {

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,28 @@ 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();
+    // 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 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 [];
+    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/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/FeatureHint.tsx

@@ -0,0 +1,78 @@
+import { platform } from "@yaakapp-internal/platform";
+import { Icon } from "@yaakapp-internal/ui";
+import type { ReactNode } from "react";
+import { setKeyValue } from "../../lib/keyValueStore";
+import { DismissibleBanner } from "./DismissibleBanner";
+
+interface Props {
+  /** Stable id; the dismissal is remembered under it. */
+  id: string;
+  children: ReactNode;
+  docsUrl?: string;
+  action?: { label: string; onClick: () => void | Promise<void> };
+  onDismiss?: () => void;
+  className?: string;
+}
+
+/**
+ * A one-time nudge toward a feature the user hasn't found yet. Dismissed once, gone for good.
+ */
+export function FeatureHint({ id, children, docsUrl, action, onDismiss, className }: Props) {
+  const actions = [
+    ...(action ? [{ ...action, variant: "solid" as const, color: "info" as const }] : []),
+    ...(action != null && docsUrl != null
+      ? [
+          {
+            label: "Docs",
+            rightSlot: <Icon icon="external_link" size="xs" className="opacity-60" />,
+            onClick: () => platform.openUrl(docsUrl).catch(console.error),
+          },
+        ]
+      : []),
+  ];
+  return (
+    <DismissibleBanner
+      id={`feature-hint:${id}`}
+      variant="tip"
+      color="info"
+      size="xs"
+      onDismiss={onDismiss}
+      className={className}
+      actions={actions}
+    >
+      <div className="flex items-start gap-2 text-xs">
+        <Icon icon="sparkles" size="xs" className="hidden @[16rem]:block mt-0.5 shrink-0" />
+        <div className="min-w-0">
+          {children}
+          {action == null && docsUrl != null && (
+            <>
+              {" "}
+              (
+              <button
+                type="button"
+                className="group inline-flex items-center gap-0.5 underline hover:text-info cursor-pointer! [&_*]:cursor-pointer!"
+                onClick={() => platform.openUrl(docsUrl).catch(console.error)}
+              >
+                docs
+                <Icon
+                  icon="external_link"
+                  size="xs"
+                  className="opacity-80 group-hover:opacity-100"
+                />
+              </button>
+              )
+            </>
+          )}
+        </div>
+      </div>
+    </DismissibleBanner>
+  );
+}
+
+export function dismissFeatureHint(id: string) {
+  return setKeyValue({
+    namespace: "global",
+    key: ["dismiss-banner", `feature-hint:${id}`],
+    value: true,
+  });
+}

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,6 +33,7 @@ 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 {
   /**
@@ -113,7 +113,15 @@ function toPairData({ commitName: _commitName, ...pair }: EditablePairWithId): P
 /** 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,
@@ -851,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",

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/core/SettingRow.tsx

@@ -2,6 +2,7 @@ import type { AnyModel } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
 import classNames from "classnames";
 import type { ReactNode } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { CopyIconButton } from "../CopyIconButton";
 import { Checkbox } from "./Checkbox";
 import { IconButton, type IconButtonProps } from "./IconButton";
@@ -19,11 +20,31 @@ type SettingRowBaseProps = {
   controlClassName?: string;
   description?: ReactNode;
   disabled?: boolean;
+  /** Matched against the surrounding `SettingsList` highlight to point this row out when it opens */
+  highlightKey?: string;
   title: ReactNode;
 };
 
-export function SettingsList({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={classNames("w-full", className)}>{children}</div>;
+const SettingsHighlightContext = createContext<string | null>(null);
+
+const FOCUSABLE =
+  "button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])";
+
+export function SettingsList({
+  children,
+  className,
+  highlight = null,
+}: {
+  children: ReactNode;
+  className?: string;
+  /** The `highlightKey` of a row to scroll to, focus, and briefly highlight */
+  highlight?: string | null;
+}) {
+  return (
+    <SettingsHighlightContext.Provider value={highlight}>
+      <div className={classNames("w-full", className)}>{children}</div>
+    </SettingsHighlightContext.Provider>
+  );
 }
 
 export function SettingsSection({
@@ -58,17 +79,37 @@ export function SettingRow({
   controlClassName,
   description,
   disabled,
+  highlightKey,
   title,
 }: {
   children: ReactNode;
 } & SettingRowBaseProps) {
+  const highlight = useContext(SettingsHighlightContext);
+  const isHighlighted = highlightKey != null && highlightKey === highlight;
+  const [flashing, setFlashing] = useState(isHighlighted);
+  const rowRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isHighlighted) return;
+    rowRef.current?.scrollIntoView({ block: "nearest" });
+    controlRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+  }, [isHighlighted]);
+
   return (
     <div
+      ref={rowRef}
       aria-disabled={disabled || undefined}
+      onAnimationEnd={(event) => {
+        if (event.target === event.currentTarget) setFlashing(false);
+      }}
       className={classNames(
         className,
         "@container border-b border-border-subtle py-4",
         disabled && "opacity-disabled",
+        // Drawn on a layer so the tint gets even padding and stops short of the row's border
+        flashing &&
+          "relative isolate before:absolute before:-inset-x-3 before:inset-y-1 before:-z-10 before:rounded-lg before:animate-settingHighlight",
       )}
     >
       <div
@@ -84,6 +125,7 @@ export function SettingRow({
           )}
         </div>
         <div
+          ref={controlRef}
           className={classNames(
             "flex min-w-0 items-center justify-start @[40rem]:justify-end",
             controlClassName,

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/GitDropdown.tsx

@@ -1,10 +1,8 @@
 import { useGitBranchInfo, useGitMutations } from "@yaakapp-internal/git";
-import type { WorkspaceMeta } from "@yaakapp-internal/models";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useMemo } from "react";
-import { openWorkspaceSettings } from "../../commands/openWorkspaceSettings";
 import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../../hooks/useActiveWorkspace";
 import { useKeyValue } from "../../hooks/useKeyValue";
 import { useRandomKey } from "../../hooks/useRandomKey";
@@ -18,6 +16,7 @@ import { showErrorToast, showToast } from "../../lib/toast";
 import type { DropdownItem } from "../core/Dropdown";
 import { Dropdown } from "../core/Dropdown";
 import { Banner, Icon, InlineCode } from "@yaakapp-internal/ui";
+import { SyncWorkspaceHint } from "../hints/SyncWorkspaceHint";
 import { useGitCallbacks } from "./callbacks";
 import { GitCommitDialog } from "./GitCommitDialog";
 import { GitRemotesDialog } from "./GitRemotesDialog";
@@ -31,7 +30,7 @@ export function GitDropdown() {
   if (workspaceMeta == null) return null;
 
   if (workspaceMeta.settingSyncDir == null) {
-    return <SetupSyncDropdown workspaceMeta={workspaceMeta} />;
+    return <SyncWorkspaceHint workspaceId={workspaceMeta.workspaceId} />;
   }
 
   return <SyncDropdownWithSyncDir syncDir={workspaceMeta.settingSyncDir} />;
@@ -567,64 +566,6 @@ const GitMenuButton = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonEle
   },
 );
 
-function SetupSyncDropdown({ workspaceMeta }: { workspaceMeta: WorkspaceMeta }) {
-  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
-    key: "setup_sync",
-    fallback: {},
-  });
-
-  if (hidden == null || hidden[workspaceMeta.workspaceId]) {
-    return null;
-  }
-
-  const banner = (
-    <Banner color="info">
-      When enabled, workspace data syncs to the chosen folder as text files, ideal for backup and
-      Git collaboration.
-    </Banner>
-  );
-
-  return (
-    <Dropdown
-      fullWidth
-      items={[
-        {
-          type: "content",
-          label: banner,
-        },
-        {
-          color: "success",
-          label: "Open Workspace Settings",
-          leftSlot: <Icon icon="settings" />,
-          onSelect: () => openWorkspaceSettings("settings"),
-        },
-        { type: "separator" },
-        {
-          label: "Hide This Message",
-          leftSlot: <Icon icon="eye_closed" />,
-          async onSelect() {
-            const confirmed = await showConfirm({
-              id: "hide-sync-menu-prompt",
-              title: "Hide Setup Message",
-              description: "You can configure filesystem sync or Git it in the workspace settings",
-            });
-            if (confirmed) {
-              await setHidden((prev) => ({ ...prev, [workspaceMeta.workspaceId]: true }));
-            }
-          },
-        },
-      ]}
-    >
-      <GitMenuButton>
-        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
-          <Icon icon="wrench" />
-          <div className="truncate">Setup FS Sync or Git</div>
-        </div>
-      </GitMenuButton>
-    </Dropdown>
-  );
-}
-
 function SetupGitDropdown({
   workspaceId,
   initRepo,

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/hints/ChainingHint.tsx

@@ -0,0 +1,29 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { httpRequestsAtom } from "@yaakapp-internal/models";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { FeatureHint } from "../core/FeatureHint";
+
+const MIN_REQUESTS = 2;
+const DOCS_URL = "https://yaak.app/docs/templating/request-chaining-scripting";
+
+interface Props {
+  response: HttpResponse;
+  mimeType: string | null;
+}
+
+/** A successful JSON response, in a workspace with somewhere to send its values. */
+export function ChainingHint({ response, mimeType }: Props) {
+  const requestCount = useAtomValue(httpRequestsAtom).length;
+  const status = response.status ?? 0;
+  const isJson = mimeType != null && /json/i.test(mimeType);
+  if (response.state !== "closed" || status < 200 || status >= 300) return null;
+  if (!isJson || requestCount < MIN_REQUESTS) return null;
+
+  return (
+    <FeatureHint id="chaining" className="mx-3 mt-1 shrink-0" docsUrl={DOCS_URL}>
+      Need a value from here in another request? Press <InlineCode>Ctrl+Space</InlineCode> in any
+      field and pick <InlineCode>response()</InlineCode> to pull it out with a JSONPath
+    </FeatureHint>
+  );
+}

apps/yaak-client/components/hints/SecretVariableHint.tsx

@@ -0,0 +1,44 @@
+import { useEnvironmentsBreakdown } from "../../hooks/useEnvironmentsBreakdown";
+import {
+  addVariableToBaseEnvironment,
+  isTemplate,
+  variableTemplate,
+} from "../../lib/addVariableToBaseEnvironment";
+import { dismissFeatureHint, FeatureHint } from "../core/FeatureHint";
+
+const HINT_ID = "secret-variable";
+const DOCS_URL = "https://yaak.app/docs/templating/environments-and-variables";
+
+interface Props {
+  /** Becomes the variable name, so it should describe the value (eg. "password", "token") */
+  name: string;
+  value: string;
+  onReplace: (template: string) => void;
+}
+
+/**
+ * A literal secret typed straight into an auth field. Offer to move it to a variable so the
+ * request references it instead of holding it.
+ */
+export function SecretVariableHint({ name, value, onReplace }: Props) {
+  const { baseEnvironment } = useEnvironmentsBreakdown();
+  if (value.trim() === "" || isTemplate(value) || baseEnvironment == null) return null;
+
+  return (
+    <FeatureHint
+      id={HINT_ID}
+      docsUrl={DOCS_URL}
+      action={{
+        label: "Move to Variable",
+        onClick: async () => {
+          const finalName = await addVariableToBaseEnvironment(baseEnvironment, name, value);
+          onReplace(variableTemplate(finalName));
+          await dismissFeatureHint(HINT_ID);
+        },
+      }}
+    >
+      Typing this in by hand? Store it in a variable to reuse it across requests and swap it per
+      environment.
+    </FeatureHint>
+  );
+}

apps/yaak-client/components/hints/SharedOriginHint.tsx

@@ -0,0 +1,73 @@
+import { httpRequestsAtom, patchModel } from "@yaakapp-internal/models";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { useEnvironmentsBreakdown } from "../../hooks/useEnvironmentsBreakdown";
+import {
+  addVariableToBaseEnvironment,
+  isTemplate,
+  variableTemplate,
+} from "../../lib/addVariableToBaseEnvironment";
+import { FeatureHint } from "../core/FeatureHint";
+
+const MIN_SHARED_REQUESTS = 3;
+const DOCS_URL = "https://yaak.app/docs/templating/environments-and-variables";
+
+/**
+ * Once a few requests spell out the same literal origin, offer to hoist it into a variable and
+ * rewrite them all at once.
+ */
+export function SharedOriginHint() {
+  const requests = useAtomValue(httpRequestsAtom);
+  const { baseEnvironment } = useEnvironmentsBreakdown();
+
+  const shared = useMemo(() => {
+    const byOrigin = new Map<string, typeof requests>();
+    for (const r of requests) {
+      if (isTemplate(r.url)) continue;
+      const origin = literalOrigin(r.url);
+      if (origin == null) continue;
+      byOrigin.set(origin, [...(byOrigin.get(origin) ?? []), r]);
+    }
+    let best: { origin: string; requests: typeof requests } | null = null;
+    for (const [origin, group] of byOrigin) {
+      if (group.length >= MIN_SHARED_REQUESTS && group.length > (best?.requests.length ?? 0)) {
+        best = { origin, requests: group };
+      }
+    }
+    return best;
+  }, [requests]);
+
+  if (shared == null || baseEnvironment == null) return null;
+
+  const { origin } = shared;
+  const count = shared.requests.length;
+
+  return (
+    <FeatureHint
+      id={`shared-origin:${origin}`}
+      className="mt-1"
+      docsUrl={DOCS_URL}
+      action={{
+        label: "Use a Variable",
+        onClick: async () => {
+          const name = await addVariableToBaseEnvironment(baseEnvironment, "base_url", origin);
+          const template = variableTemplate(name);
+          await Promise.all(
+            shared.requests.map((r) =>
+              patchModel(r, { url: template + r.url.slice(origin.length) }),
+            ),
+          );
+        },
+      }}
+    >
+      {count} requests start with <InlineCode>{origin}</InlineCode>. Put it in a variable and switch
+      hosts by switching environments.
+    </FeatureHint>
+  );
+}
+
+function literalOrigin(url: string): string | null {
+  const m = /^(https?:\/\/[^/?#\s]+)/i.exec(url.trim());
+  return m?.[1] ?? null;
+}

apps/yaak-client/components/hints/SyncWorkspaceHint.tsx

@@ -0,0 +1,44 @@
+import { VStack } from "@yaakapp-internal/ui";
+import { openWorkspaceSettings } from "../../commands/openWorkspaceSettings";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import { showToast } from "../../lib/toast";
+import { FeatureHint } from "../core/FeatureHint";
+
+const DOCS_URL = "https://yaak.app/docs/collaboration/local-directory-git-sync";
+
+/** What the sidebar's Git slot shows while the workspace only lives in the app's database. */
+export function SyncWorkspaceHint({ workspaceId }: { workspaceId: string }) {
+  // Hidden from the menu this replaced, so honor it
+  const { value: legacyHidden } = useKeyValue<Record<string, boolean>>({
+    key: "setup_sync",
+    fallback: {},
+  });
+
+  if (legacyHidden == null || legacyHidden[workspaceId]) return null;
+
+  return (
+    <FeatureHint
+      id={`sync-workspace:${workspaceId}`}
+      className="mx-2 mb-2!"
+      docsUrl={DOCS_URL}
+      action={{ label: "Configure", onClick: () => openWorkspaceSettings("settings", "sync_dir") }}
+      onDismiss={showSyncLocationToast}
+    >
+      Sync this workspace to a folder of plain files to back it up or track it with Git.
+    </FeatureHint>
+  );
+}
+
+function showSyncLocationToast() {
+  showToast({
+    id: "sync-hint-dismissed",
+    color: "info",
+    timeout: 8000,
+    message: (
+      <VStack>
+        <h2 className="font-semibold">Sync whenever you're ready</h2>
+        <p className="text-text-subtle text-sm">Directory sync and Git are in Workspace Settings</p>
+      </VStack>
+    ),
+  });
+}

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

@@ -1,29 +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, mimeType }: 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) {
       // 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 url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data, mimeType]);
+  }, [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,10 +1,10 @@
-import { convertFileSrc } from "@tauri-apps/api/core";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 
 type Props = { className?: string; mimeType?: string } & (
   | {
-      bodyPath: string;
+      /** A URL for the body the host already stored. */
+      bodyUrl: string;
     }
   | {
       data: ArrayBuffer;
@@ -13,21 +13,21 @@ type Props = { className?: string; mimeType?: string } & (
 
 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: mimeType ?? "image/png" });
-      const url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data, mimeType]);
+  }, [bodyUrl, data, mimeType]);
 
   return (
     <img

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

@@ -1,6 +1,5 @@
 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 { useMemo, useRef, useState } from "react";
@@ -18,7 +17,8 @@ fireAndForget(
 );
 
 interface Props {
-  bodyPath?: string;
+  /** A URL for the body the host already stored. */
+  bodyUrl?: string;
   data?: Uint8Array;
 }
 
@@ -27,7 +27,7 @@ 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>();
 
@@ -36,8 +36,8 @@ export function PdfViewer({ bodyPath, data }: Props) {
   // 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 (bodyPath) {
-      return convertFileSrc(bodyPath);
+    if (bodyUrl) {
+      return bodyUrl;
     }
     if (data) {
       // Create a copy to avoid "Buffer is already detached" errors
@@ -45,7 +45,7 @@ export function PdfViewer({ bodyPath, data }: Props) {
       return { data: new Uint8Array(data) };
     }
     return undefined;
-  }, [bodyPath, data]);
+  }, [bodyUrl, data]);
 
   const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy): void => {
     setNumPages(nextNumPages);

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/TextViewer.tsx

@@ -1,14 +1,15 @@
-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 { Banner, HStack, Icon, InlineCode } from "@yaakapp-internal/ui";
 import { useFormatText } from "../../hooks/useFormatText";
+import type { ResponseFilterApi } from "../../hooks/useResponseFilter";
+import { Button } from "../core/Button";
 import type { EditorProps } from "../core/Editor/Editor";
 import { hyperlink } from "../core/Editor/hyperlink/extension";
 import { Editor } from "../core/Editor/LazyEditor";
 import { IconButton } from "../core/IconButton";
 import { Input } from "../core/Input";
+import { RecentFiltersDropdown } from "./RecentFiltersDropdown";
 
 const extraExtensions = [hyperlink];
 
@@ -16,57 +17,45 @@ 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 }));
+  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 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);
+      }
     },
-    [filterKey, setFilterTextMap],
+    [filter],
   );
 
-  const isSearching = filterText != null;
-  const filteredResponse =
-    onFilter && debouncedFilterText
-      ? onFilter(debouncedFilterText)
-      : { data: null, isPending: false, error: false };
-
-  const toggleSearch = useCallback(() => {
-    if (isSearching) {
-      setFilterText(null);
-    } else {
-      setFilterText("");
-    }
-  }, [isSearching, setFilterText]);
-
-  const canFilter = onFilter && (language === "json" || language === "xml" || language === "html");
-
   const actions = useMemo<ReactNode[]>(() => {
     const nodes: ReactNode[] = isSearching ? [] : Children.toArray(footerActions);
 
@@ -76,8 +65,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 +74,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 +138,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 +155,61 @@ export function TextViewer({
   }
 
   return (
-    <Editor
-      readOnly
-      className={className}
-      defaultValue={body}
-      language={language}
-      actions={actions}
-      extraExtensions={extraExtensions}
-      stateKey={stateKey}
-    />
+    <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full w-full">
+      {appliedFilter && filter != null ? (
+        <AppliedFilterBar
+          filter={appliedFilter}
+          error={resultError}
+          onClear={() => filter.replaceFilter("")}
+        />
+      ) : (
+        <span />
+      )}
+      <Editor
+        readOnly
+        className={className}
+        defaultValue={body}
+        language={language}
+        actions={actions}
+        extraExtensions={extraExtensions}
+        stateKey={stateKey}
+      />
+    </div>
+  );
+}
+
+/**
+ * Shows what's actually filtering the body, which the filter box below can't convey
+ * once it holds an edited expression that hasn't been applied yet.
+ */
+function AppliedFilterBar({
+  filter,
+  error,
+  onClear,
+}: {
+  filter: string;
+  error: boolean;
+  onClear: () => void;
+}) {
+  return (
+    <Banner color={error ? "danger" : "info"} className="py-1! mb-2! text-sm">
+      <HStack space={2} className="min-w-0">
+        <Icon icon="filter" size="xs" className="shrink-0 opacity-70" />
+        <span className="truncate min-w-0" title={filter}>
+          Response filtered by <InlineCode>{filter}</InlineCode>
+          {error && " (invalid expression)"}
+        </span>
+        <Button
+          size="2xs"
+          variant="border"
+          color={error ? "danger" : "info"}
+          className="ml-auto shrink-0"
+          onClick={onClear}
+        >
+          Clear
+        </Button>
+      </HStack>
+    </Banner>
   );
 }
 

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

@@ -1,28 +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, mimeType }: 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) {
       // 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 url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data, mimeType]);
+  }, [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,12 +8,12 @@ function setFontSizeOnDocument(fontSize: number) {
   document.documentElement.style.fontSize = `${fontSize}px`;
 }
 
-listen<ModelPayload[]>("model_writes", async (event) => {
-  for (const payload of event.payload) {
+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);
   }
-}).catch(console.error);
+});
 
 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,12 +12,12 @@ function setFonts(settings: Settings) {
   );
 }
 
-listen<ModelPayload[]>("model_writes", async (event) => {
-  for (const payload of event.payload) {
+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);
   }
-}).catch(console.error);
+});
 
 fireAndForget(getSettings().then((settings) => setFonts(settings)));

apps/yaak-client/hooks/useCancelHttpResponse.ts

@@ -1,9 +1,9 @@
-import { event } from "@tauri-apps/api";
+import { platform } from "@yaakapp-internal/platform";
 import { useFastMutation } from "./useFastMutation";
 
 export function useCancelHttpResponse(id: string | null) {
   return useFastMutation<void>({
     mutationKey: ["cancel_http_response", id],
-    mutationFn: () => event.emit(`cancel_http_response_${id}`),
+    mutationFn: () => platform.emit(`cancel_http_response_${id}`),
   });
 }

apps/yaak-client/hooks/useCheckForUpdates.tsx

@@ -3,13 +3,13 @@ import { InlineCode } from "@yaakapp-internal/ui";
 import { showAlert } from "../lib/alert";
 import { appInfo } from "../lib/appInfo";
 import { minPromiseMillis } from "../lib/minPromiseMillis";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 
 export function useCheckForUpdates() {
   return useMutation({
     mutationKey: ["check_for_updates"],
     mutationFn: async () => {
-      const hasUpdate: boolean = await minPromiseMillis(invokeCmd("cmd_check_for_updates"), 500);
+      const hasUpdate: boolean = await minPromiseMillis(rpc("cmd_check_for_updates"), 500);
       if (!hasUpdate) {
         showAlert({
           id: "no-updates",

apps/yaak-client/hooks/useDeleteGrpcConnections.ts

@@ -1,4 +1,4 @@
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { useFastMutation } from "./useFastMutation";
 
 export function useDeleteGrpcConnections(requestId?: string) {
@@ -6,7 +6,7 @@ export function useDeleteGrpcConnections(requestId?: string) {
     mutationKey: ["delete_grpc_connections", requestId],
     mutationFn: async () => {
       if (requestId === undefined) return;
-      await invokeCmd("cmd_delete_all_grpc_connections", { requestId });
+      await rpc("cmd_delete_all_grpc_connections", { requestId });
     },
   });
 }

apps/yaak-client/hooks/useDeleteHttpResponses.ts

@@ -1,4 +1,4 @@
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { useFastMutation } from "./useFastMutation";
 
 export function useDeleteHttpResponses(requestId?: string) {
@@ -6,7 +6,7 @@ export function useDeleteHttpResponses(requestId?: string) {
     mutationKey: ["delete_http_responses", requestId],
     mutationFn: async () => {
       if (requestId === undefined) return;
-      await invokeCmd("cmd_delete_all_http_responses", { requestId });
+      await rpc("cmd_delete_all_http_responses", { requestId });
     },
   });
 }

apps/yaak-client/hooks/useDeleteSendHistory.tsx

@@ -8,7 +8,7 @@ import { showAlert } from "../lib/alert";
 import { showConfirmDelete } from "../lib/confirm";
 import { jotaiStore } from "../lib/jotai";
 import { pluralizeCount } from "../lib/pluralize";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
 import { useFastMutation } from "./useFastMutation";
 
@@ -45,7 +45,7 @@ export function useDeleteSendHistory() {
       if (!confirmed) return false;
 
       const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
-      await invokeCmd("cmd_delete_send_history", { workspaceId });
+      await rpc("cmd_delete_send_history", { workspaceId });
       return true;
     },
   });

apps/yaak-client/hooks/useFolderActions.ts

@@ -6,7 +6,7 @@ import type {
   GetFolderActionsResponse,
 } from "@yaakapp-internal/plugins";
 import { useMemo } from "react";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { usePluginsKey } from "./usePlugins";
 
 export type CallableFolderAction = Pick<FolderAction, "label" | "icon"> & {
@@ -30,7 +30,7 @@ export function useFolderActions() {
 }
 
 export async function getFolderActions() {
-  const responses = await invokeCmd<GetFolderActionsResponse[]>("cmd_folder_actions");
+  const responses = await rpc<GetFolderActionsResponse[]>("cmd_folder_actions");
   const actions = responses.flatMap((r) =>
     r.actions.map((a, i) => ({
       label: a.label,
@@ -41,7 +41,7 @@ export async function getFolderActions() {
           pluginRefId: r.pluginRefId,
           args: { folder },
         };
-        await invokeCmd("cmd_call_folder_action", { req: payload });
+        await rpc("cmd_call_folder_action", { req: payload });
       },
     })),
   );

apps/yaak-client/hooks/useGraphQLSchemaFile.ts

@@ -0,0 +1,18 @@
+import { useKeyValue } from "./useKeyValue";
+
+// The file a request's GraphQL schema is loaded from, or null when the schema
+// comes from an introspection request.
+//
+// This is the *source*, not the schema. The introspection row it produces is a
+// cache that expires on its own; this outlives it and regenerates it, the same
+// way gRPC keeps its proto file list separate from a reflection result.
+export function graphqlSchemaFileArgs(requestId: string | null) {
+  return {
+    namespace: "global" as const,
+    key: ["graphql_schema_file", requestId ?? "n/a"],
+  };
+}
+
+export function useGraphQLSchemaFile(requestId: string | null) {
+  return useKeyValue<string | null>({ ...graphqlSchemaFileArgs(requestId), fallback: null });
+}

apps/yaak-client/hooks/useGrpc.ts

@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { emit } from "@tauri-apps/api/event";
+import { platform } from "@yaakapp-internal/platform";
 import type { GrpcConnection, GrpcRequest } from "@yaakapp-internal/models";
 import { flushAllModelWrites } from "@yaakapp-internal/models";
 import { jotaiStore } from "../lib/jotai";
 import { minPromiseMillis } from "../lib/minPromiseMillis";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { activeEnvironmentIdAtom, useActiveEnvironment } from "./useActiveEnvironment";
 import { useDebouncedValue } from "@yaakapp-internal/ui";
 
@@ -25,7 +25,7 @@ export function useGrpc(
     mutationKey: ["grpc_go", conn?.id],
     mutationFn: async () => {
       await flushAllModelWrites(); // The backend reads the request from the DB
-      return invokeCmd<void>("cmd_grpc_go", {
+      return rpc<void>("cmd_grpc_go", {
         requestId,
         environmentId: environment?.id,
         protoFiles,
@@ -36,17 +36,17 @@ export function useGrpc(
   const send = useMutation({
     mutationKey: ["grpc_send", conn?.id],
     mutationFn: ({ message }: { message: string }) =>
-      emit(`grpc_client_msg_${conn?.id ?? "none"}`, { Message: message }),
+      platform.emit(`grpc_client_msg_${conn?.id ?? "none"}`, { Message: message }),
   });
 
   const cancel = useMutation({
     mutationKey: ["grpc_cancel", conn?.id ?? "n/a"],
-    mutationFn: () => emit(`grpc_client_msg_${conn?.id ?? "none"}`, "Cancel"),
+    mutationFn: () => platform.emit(`grpc_client_msg_${conn?.id ?? "none"}`, "Cancel"),
   });
 
   const commit = useMutation({
     mutationKey: ["grpc_commit", conn?.id ?? "n/a"],
-    mutationFn: () => emit(`grpc_client_msg_${conn?.id ?? "none"}`, "Commit"),
+    mutationFn: () => platform.emit(`grpc_client_msg_${conn?.id ?? "none"}`, "Commit"),
   });
 
   const debouncedUrl = useDebouncedValue<string>(req?.url ?? "", 1000);
@@ -61,7 +61,7 @@ export function useGrpc(
     queryFn: () => {
       const environmentId = jotaiStore.get(activeEnvironmentIdAtom);
       return minPromiseMillis<ReflectResponseService[]>(
-        invokeCmd("cmd_grpc_reflect", { requestId, protoFiles, environmentId }),
+        rpc("cmd_grpc_reflect", { requestId, protoFiles, environmentId }),
         300,
       );
     },

apps/yaak-client/hooks/useGrpcRequestActions.ts

@@ -6,7 +6,7 @@ import type {
   GrpcRequestAction,
 } from "@yaakapp-internal/plugins";
 import { useMemo } from "react";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { getGrpcProtoFiles } from "./useGrpcProtoFiles";
 import { usePluginsKey } from "./usePlugins";
 
@@ -33,7 +33,7 @@ export function useGrpcRequestActions() {
 }
 
 export async function getGrpcRequestActions() {
-  const responses = await invokeCmd<GetGrpcRequestActionsResponse[]>("cmd_grpc_request_actions");
+  const responses = await rpc<GetGrpcRequestActionsResponse[]>("cmd_grpc_request_actions");
 
   return responses.flatMap((r) =>
     r.actions.map((a, i) => ({
@@ -46,7 +46,7 @@ export async function getGrpcRequestActions() {
           pluginRefId: r.pluginRefId,
           args: { grpcRequest, protoFiles },
         };
-        await invokeCmd("cmd_call_grpc_request_action", { req: payload });
+        await rpc("cmd_call_grpc_request_action", { req: payload });
       },
     })),
   );

apps/yaak-client/hooks/useHotKey.ts

@@ -1,4 +1,4 @@
-import { type } from "@tauri-apps/plugin-os";
+import { platform } from "@yaakapp-internal/platform";
 import { debounce } from "@yaakapp-internal/lib";
 import { settingsAtom } from "@yaakapp-internal/models";
 import { atom, useAtomValue } from "jotai";
@@ -102,7 +102,7 @@ const defaultHotkeysOther: Record<HotkeyAction, string[]> = {
 
 /** Get the default hotkeys for the current platform */
 export const defaultHotkeys: Record<HotkeyAction, string[]> =
-  type() === "macos" ? defaultHotkeysMac : defaultHotkeysOther;
+  platform.osType() === "macos" ? defaultHotkeysMac : defaultHotkeysOther;
 
 /** Atom that provides the effective hotkeys by merging defaults with user settings */
 export const hotkeysAtom = atom((get) => {
@@ -112,9 +112,12 @@ export const hotkeysAtom = atom((get) => {
   // Merge default hotkeys with custom hotkeys from settings
   // Custom hotkeys override defaults for the same action
   // An empty array means the hotkey is intentionally disabled
-  const merged: Record<HotkeyAction, string[]> = { ...defaultHotkeys };
+  const merged: Partial<Record<HotkeyAction, string[]>> = {};
+  for (const action of hotkeyActions) {
+    merged[action] = defaultHotkeys[action];
+  }
   for (const [action, keys] of Object.entries(customHotkeys)) {
-    if (action in defaultHotkeys && Array.isArray(keys)) {
+    if (action in merged && Array.isArray(keys)) {
       merged[action as HotkeyAction] = keys;
     }
   }
@@ -122,7 +125,7 @@ export const hotkeysAtom = atom((get) => {
 });
 
 /** Helper function to get current hotkeys from the store */
-function getHotkeys(): Record<HotkeyAction, string[]> {
+function getHotkeys(): Partial<Record<HotkeyAction, string[]>> {
   return jotaiStore.get(hotkeysAtom);
 }
 
@@ -165,16 +168,25 @@ const layoutInsensitiveKeys = [
   "Space",
 ];
 
+/** Zoom is the browser's own on these keys, so the app has no such action there. */
+const ZOOM_ACTIONS: HotkeyAction[] = ["app.zoom_in", "app.zoom_out", "app.zoom_reset"];
+
+/**
+ * The actions this host actually has. An action left out of here has no keys in
+ * `hotkeysAtom`, so it never matches and never claims the keystroke.
+ */
 export const hotkeyActions: HotkeyAction[] = (
   Object.keys(defaultHotkeys) as (keyof typeof defaultHotkeys)[]
-).sort((a, b) => {
-  const scopeA = a.split(".")[0] || "";
-  const scopeB = b.split(".")[0] || "";
-  if (scopeA !== scopeB) {
-    return scopeA.localeCompare(scopeB);
-  }
-  return hotkeyLabels[a].localeCompare(hotkeyLabels[b]);
-});
+)
+  .filter((a) => platform.capabilities.interfaceZoom || !ZOOM_ACTIONS.includes(a))
+  .sort((a, b) => {
+    const scopeA = a.split(".")[0] || "";
+    const scopeB = b.split(".")[0] || "";
+    if (scopeA !== scopeB) {
+      return scopeA.localeCompare(scopeB);
+    }
+    return hotkeyLabels[a].localeCompare(hotkeyLabels[b]);
+  });
 
 export type HotKeyOptions = {
   enable?: boolean | (() => boolean);
@@ -318,7 +330,7 @@ export function getHotkeyScope(action: HotkeyAction): string {
 }
 
 export function formatHotkeyString(trigger: string): string[] {
-  const os = type();
+  const os = platform.osType();
   const parts = trigger.split("+");
   const labelParts: string[] = [];
 
@@ -333,7 +345,9 @@ export function formatHotkeyString(trigger: string): string[] {
       } else if (p === "Alt") {
         labelParts.push("⌥");
       } else if (p === "Enter") {
-        labelParts.push("↩");
+        // U+21A9 has an emoji presentation, which Chromium's font fallback picks
+        // (a blue glyph among monochrome ones). U+FE0E forces the text form.
+        labelParts.push("↩︎");
       } else if (p === "Tab") {
         labelParts.push("⇥");
       } else if (p === "Backspace") {

apps/yaak-client/hooks/useHttpAuthentication.ts

@@ -3,7 +3,7 @@ import type { GetHttpAuthenticationSummaryResponse } from "@yaakapp-internal/plu
 import { atom, useAtomValue } from "jotai";
 import { useState } from "react";
 import { jotaiStore } from "../lib/jotai";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { showErrorToast } from "../lib/toast";
 import { usePluginsKey } from "./usePlugins";
 
@@ -31,7 +31,7 @@ export function useSubscribeHttpAuthentication() {
     placeholderData: (prev) => prev, // Keep previous data on refetch
     queryFn: async () => {
       try {
-        const result = await invokeCmd<GetHttpAuthenticationSummaryResponse[]>(
+        const result = await rpc<GetHttpAuthenticationSummaryResponse[]>(
           "cmd_get_http_authentication_summaries",
         );
         setNumResults(result.length);

apps/yaak-client/hooks/useHttpAuthenticationConfig.ts

@@ -11,7 +11,7 @@ import type { GetHttpAuthenticationConfigResponse, JsonPrimitive } from "@yaakap
 import { useAtomValue } from "jotai";
 import { md5 } from "js-md5";
 import { useState } from "react";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { activeEnvironmentIdAtom } from "./useActiveEnvironment";
 import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
 
@@ -48,7 +48,7 @@ export function useHttpAuthenticationConfig(
     placeholderData: (prev) => prev, // Keep previous data on refetch
     queryFn: async () => {
       if (authName == null || authName === "inherit") return null;
-      const config = await invokeCmd<GetHttpAuthenticationConfigResponse>(
+      const config = await rpc<GetHttpAuthenticationConfigResponse>(
         "cmd_get_http_authentication_config",
         {
           authName,
@@ -65,7 +65,7 @@ export function useHttpAuthenticationConfig(
           call: async (
             model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace,
           ) => {
-            await invokeCmd("cmd_call_http_authentication_action", {
+            await rpc("cmd_call_http_authentication_action", {
               pluginRefId: config.pluginRefId,
               actionIndex: i,
               authName,

apps/yaak-client/hooks/useHttpRequestActions.ts

@@ -6,7 +6,7 @@ import type {
   HttpRequestAction,
 } from "@yaakapp-internal/plugins";
 import { useMemo } from "react";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { usePluginsKey } from "./usePlugins";
 
 export type CallableHttpRequestAction = Pick<HttpRequestAction, "label" | "icon"> & {
@@ -30,7 +30,7 @@ export function useHttpRequestActions() {
 }
 
 export async function getHttpRequestActions() {
-  const responses = await invokeCmd<GetHttpRequestActionsResponse[]>("cmd_http_request_actions");
+  const responses = await rpc<GetHttpRequestActionsResponse[]>("cmd_http_request_actions");
   const actions = responses.flatMap((r) =>
     r.actions.map((a, i) => ({
       label: a.label,
@@ -41,7 +41,7 @@ export async function getHttpRequestActions() {
           pluginRefId: r.pluginRefId,
           args: { httpRequest },
         };
-        await invokeCmd("cmd_call_http_request_action", { req: payload });
+        await rpc("cmd_call_http_request_action", { req: payload });
       },
     })),
   );

apps/yaak-client/hooks/useHttpRequestBody.ts

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { HttpResponse } from "@yaakapp-internal/models";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 
 export function useHttpRequestBody(response: HttpResponse | null) {
   return useQuery({
@@ -18,7 +18,7 @@ export async function getRequestBodyText(response: HttpResponse | null) {
     return null;
   }
 
-  const data = await invokeCmd<number[] | null>("cmd_http_request_body", {
+  const data = await rpc<number[] | null>("cmd_http_request_body", {
     responseId: response.id,
   });