Fix native TLS client certificates on Linux (#554)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

.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

Cargo.lock

@@ -11034,6 +11034,8 @@ dependencies = [
  "yaak-mac-window",
  "yaak-models",
  "yaak-plugins",
+ "yaak-rpc",
+ "yaak-rpc-schema",
  "yaak-sse",
  "yaak-sync",
  "yaak-system-appearance",
@@ -11201,6 +11203,7 @@ dependencies = [
  "tokio-stream",
  "tonic",
  "tonic-reflection",
+ "ts-rs",
  "uuid",
  "yaak-common",
  "yaak-tls",
@@ -11226,6 +11229,7 @@ dependencies = [
  "reqwest 0.12.20",
  "serde",
  "serde_json",
+ "tempfile",
  "thiserror 2.0.17",
  "tokio",
  "tokio-util",
@@ -11369,6 +11373,22 @@ dependencies = [
  "ts-rs",
 ]
 
+[[package]]
+name = "yaak-rpc-schema"
+version = "0.0.0"
+dependencies = [
+ "serde",
+ "ts-rs",
+ "yaak-git",
+ "yaak-grpc",
+ "yaak-models",
+ "yaak-plugins",
+ "yaak-sse",
+ "yaak-sync",
+ "yaak-templates",
+ "yaak-ws",
+]
+
 [[package]]
 name = "yaak-sse"
 version = "0.1.0"
@@ -11434,6 +11454,7 @@ version = "0.1.0"
 dependencies = [
  "log 0.4.29",
  "p12",
+ "pem",
  "rustls",
  "rustls-pemfile",
  "rustls-platform-verifier",
@@ -11441,6 +11462,7 @@ dependencies = [
  "thiserror 2.0.17",
  "url",
  "yaak-models",
+ "yasna",
 ]
 
 [[package]]

Cargo.toml

@@ -5,6 +5,7 @@ members = [
   # 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",
@@ -63,6 +64,7 @@ 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" }

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

@@ -3,7 +3,7 @@ import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
 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;
@@ -20,7 +20,7 @@ export const openSettings = createFastMutation<void, string, SettingsTabWithSubt
       search: { tab: (tab ?? undefined) as SettingsTab | undefined },
     });
 
-    await invokeCmd("cmd_new_child_window", {
+    await rpc("cmd_new_child_window", {
       url: location.href,
       label: "settings",
       title: "Yaak Settings",

apps/yaak-client/commands/switchWorkspace.tsx

@@ -3,7 +3,7 @@ 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,
@@ -30,7 +30,7 @@ export const switchWorkspace = createFastMutation<
         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/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/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/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";
@@ -278,7 +278,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 +298,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 +321,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
         }
       }
     },
-    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh, importCurl],
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh],
   );
   const handleSend = useCallback(
     () => sendRequest(activeRequest.id ?? null),

apps/yaak-client/components/HttpResponsePane.tsx

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

apps/yaak-client/components/ImportCurl.tsx

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

apps/yaak-client/components/ImportCurlButton.tsx

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

apps/yaak-client/components/ImportDataDialog.tsx

@@ -1,56 +1,138 @@
-import { VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
+import { platform } from "@yaakapp-internal/platform";
+import { Icon, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useEffect, useRef, useState } from "react";
 import { useLocalStorage } from "react-use";
 import { CommercialUseBanner } from "./CommercialUseBanner";
 import { Button } from "./core/Button";
-import { SelectFile } from "./SelectFile";
+import { PlainInput } from "./core/PlainInput";
 
 interface Props {
-  importData: (filePath: string) => Promise<void>;
+  importFile: (filePath: string) => Promise<void>;
+  importUrl: (url: string) => Promise<void>;
 }
 
-export function ImportDataDialog({ importData }: Props) {
+/**
+ * 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 (
+    value.startsWith("/") ||
+    value.startsWith("./") ||
+    value.startsWith("../") ||
+    value.startsWith("~/") ||
+    value.startsWith("\\\\") ||
+    /^[a-zA-Z]:[\\/]/.test(value)
+  );
+}
+
+function fileName(path: string): string {
+  return path.split(/[/\\]/).at(-1) || path;
+}
+
+export function ImportDataDialog({ importFile, importUrl }: Props) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [filePath, setFilePath] = useLocalStorage<string | null>("importFilePath", null);
+  // A file path or a URL. Both inputs write here, so there is only ever one thing to import
+  const [source, setSource] = useLocalStorage<string | null>("importPathOrUrl", 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]);
+
+  const handleSelectFile = async () => {
+    const selected = await platform.dialog.open({ title: "Select File", multiple: false });
+    if (selected == null) return;
+    selectSource(selected);
+  };
+
+  const handleImport = async () => {
+    setIsLoading(true);
+    try {
+      if (filePath != null) {
+        await importFile(filePath);
+      } else {
+        await importUrl(trimmedSource);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   return (
-    <VStack space={5} className="pb-4">
+    <VStack ref={ref} space={4} className="pb-4">
       <CommercialUseBanner source="data-import" title="Importing work data?" />
 
-      <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 && (
-          <Button
-            color="primary"
-            disabled={!filePath || isLoading}
-            isLoading={isLoading}
-            size="sm"
-            onClick={async () => {
-              setIsLoading(true);
-              try {
-                await importData(filePath);
-              } finally {
-                setIsLoading(false);
-              }
-            }}
-          >
-            {isLoading ? "Importing" : "Import"}
-          </Button>
+      <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",
         )}
+      >
+        <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>
+
+      <VStack space={2}>
+        <PlainInput
+          label="Or enter a file path or URL"
+          size="sm"
+          placeholder="https://example.com/openapi.json"
+          defaultValue={source ?? ""}
+          forceUpdateKey={String(forceUpdateKey)}
+          onChange={setSource}
+        />
+        <Button
+          color="primary"
+          disabled={trimmedSource === "" || isLoading}
+          isLoading={isLoading}
+          size="sm"
+          onClick={handleImport}
+        >
+          {isLoading ? "Importing" : "Import"}
+        </Button>
       </VStack>
     </VStack>
   );

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/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,5 @@
 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";
@@ -60,7 +59,7 @@ export default function Settings({ hide }: Props) {
       hide();
     } else {
       // It's being shown in a window, so close the window
-      await getCurrentWebviewWindow().close();
+      await platform.window.close();
     }
   });
 
@@ -75,7 +74,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,7 +84,7 @@ 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>
       )}

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

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/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/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 {
   /**
@@ -851,7 +851,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/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(

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/graphql/GraphQLEditor.tsx

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

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

@@ -1,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/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) => {
@@ -318,7 +318,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[] = [];
 

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,
   });
 

apps/yaak-client/hooks/useHttpResponseEvents.ts

@@ -1,4 +1,3 @@
-import { invoke } from "@tauri-apps/api/core";
 import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
 import {
   httpResponseEventsAtom,
@@ -8,6 +7,7 @@ import {
 import { useAtomValue } from "jotai";
 import { useEffect } from "react";
 import { fireAndForget } from "../lib/fireAndForget";
+import { rpc } from "../lib/rpc";
 
 export function useHttpResponseEvents(response: HttpResponse | null) {
   const allEvents = useAtomValue(httpResponseEventsAtom);
@@ -20,7 +20,7 @@ export function useHttpResponseEvents(response: HttpResponse | null) {
 
     // Fetch events from database, filtering out events from other responses and merging atomically
     fireAndForget(
-      invoke<HttpResponseEvent[]>("cmd_get_http_response_events", { responseId: response.id }).then(
+      rpc<HttpResponseEvent[]>("cmd_get_http_response_events", { responseId: response.id }).then(
         (events) =>
           mergeModelsInStore("http_response_event", events, (e) => e.responseId === response.id),
       ),

apps/yaak-client/hooks/useImportCurl.ts

@@ -1,52 +0,0 @@
-import type { HttpRequest } from "@yaakapp-internal/models";
-import { patchModelById } from "@yaakapp-internal/models";
-import { createRequestAndNavigate } from "../lib/createRequestAndNavigate";
-import { jotaiStore } from "../lib/jotai";
-import { invokeCmd } from "../lib/tauri";
-import { showToast } from "../lib/toast";
-import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
-import { useFastMutation } from "./useFastMutation";
-import { wasUpdatedExternally } from "./useRequestUpdateKey";
-
-export function useImportCurl() {
-  return useFastMutation({
-    mutationKey: ["import_curl"],
-    mutationFn: async ({
-      overwriteRequestId,
-      command,
-    }: {
-      overwriteRequestId?: string;
-      command: string;
-    }) => {
-      const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
-      const importedRequest: HttpRequest = await invokeCmd("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/hooks/useIntrospectGraphQL.ts

@@ -1,14 +1,16 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { invoke } from "@tauri-apps/api/core";
 import type { GraphQlIntrospection, HttpRequest } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
 import type { GraphQLSchema, IntrospectionQuery } from "graphql";
 import { buildClientSchema, getIntrospectionQuery } from "graphql";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { tryBuildIntrospectionFromFile } from "../lib/graphqlSchema";
 import { minPromiseMillis } from "../lib/minPromiseMillis";
-import { getResponseBodyText } from "../lib/responseBody";
 import { sendEphemeralRequest } from "../lib/sendEphemeralRequest";
 import { useActiveEnvironment } from "./useActiveEnvironment";
+import { useGraphQLSchemaFile } from "./useGraphQLSchemaFile";
 import { useDebouncedValue } from "@yaakapp-internal/ui";
+import { rpc } from "../lib/rpc";
 
 const introspectionRequestBody = JSON.stringify({
   query: getIntrospectionQuery(),
@@ -30,9 +32,14 @@ export function useIntrospectGraphQL(
 
   const introspection = useIntrospectionResult(baseRequest);
 
+  // The schema's source. Outlives the introspection row it produces, so a
+  // request configured with a file keeps working after the row is swept.
+  const schemaFile = useGraphQLSchemaFile(baseRequest.id);
+  const filePath = schemaFile.value ?? null;
+
   const upsertIntrospection = useCallback(
     async (content: string | null) => {
-      const v = await invoke<GraphQlIntrospection>("models_upsert_graphql_introspection", {
+      const v = await rpc<GraphQlIntrospection>("models_upsert_graphql_introspection", {
         requestId: baseRequest.id,
         workspaceId: baseRequest.workspaceId,
         content: content ?? "",
@@ -54,7 +61,7 @@ export function useIntrospectGraphQL(
         bodyType: "application/json",
         body: { text: introspectionRequestBody },
       };
-      const response = await minPromiseMillis(
+      const { response, body } = await minPromiseMillis(
         sendEphemeralRequest(args, activeEnvironment?.id ?? null),
         700,
       );
@@ -63,14 +70,16 @@ export function useIntrospectGraphQL(
         return setError(response.error);
       }
 
-      const bodyText = await getResponseBodyText({ response, filter: null });
+      // The send hands back the only copy of the body — an unsaved response has
+      // nothing on disk and no row to read it back from
+      const bodyText = new TextDecoder("utf-8").decode(new Uint8Array(body));
       if (response.status < 200 || response.status >= 300) {
         return setError(
           `Request failed with status ${response.status}.\nThe response text is:\n\n${bodyText}`,
         );
       }
 
-      if (bodyText === null) {
+      if (bodyText === "") {
         return setError("Empty body returned in response");
       }
 
@@ -90,15 +99,109 @@ export function useIntrospectGraphQL(
       return;
     }
 
-    refetch().catch(console.error);
-  }, [baseRequest.id, debouncedRequest.url, debouncedRequest.method, activeEnvironment?.id]);
+    // A request pointed at a file gets its schema from that file. Introspecting
+    // here would overwrite it on the next URL edit.
+    if (filePath != null) {
+      return;
+    }
 
+    refetch().catch(console.error);
+  }, [
+    baseRequest.id,
+    debouncedRequest.url,
+    debouncedRequest.method,
+    activeEnvironment?.id,
+    filePath,
+  ]);
+
+  // Clears the schema, not the source. Removing a file source is a separate
+  // action, because the source is what would rebuild this a moment later.
   const clear = useCallback(async () => {
     setError("");
     setSchema(null);
     await upsertIntrospection(null);
   }, [upsertIntrospection]);
 
+  // Reads a schema file and produces an introspection row from it, the same way
+  // `refetch` produces one from a server. Does not touch the stored source.
+  const introspectFromFile = useCallback(
+    async (path: string): Promise<{ ok: true } | { ok: false; error: string }> => {
+      try {
+        setIsLoading(true);
+        setError(undefined);
+
+        const fileContent = await platform.files.readText(path);
+        const result = tryBuildIntrospectionFromFile(fileContent);
+
+        if ("error" in result) {
+          setError(result.error);
+          return { ok: false, error: result.error };
+        }
+
+        await upsertIntrospection(result.content);
+        return { ok: true };
+      } catch (err) {
+        // The host rejects with a bare string for a missing or unreadable path,
+        // so this can't assume an Error.
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        return { ok: false, error: message };
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [upsertIntrospection],
+  );
+
+  // Points the request at a file and immediately builds its schema from it.
+  const loadFromFile = useCallback(
+    async (path: string) => {
+      const result = await introspectFromFile(path);
+      if (result.ok) await schemaFile.set(path);
+      return result;
+    },
+    [introspectFromFile, schemaFile],
+  );
+
+  const reloadFromFile = useCallback(async () => {
+    if (filePath == null) return { ok: false as const, error: "No schema file to reload" };
+    return introspectFromFile(filePath);
+  }, [filePath, introspectFromFile]);
+
+  // The file-source counterpart of automatic introspection: re-read the file
+  // when the request is opened, so an edited schema is picked up without asking.
+  //
+  // A missing row is repaired even with the setting off — that is recovering
+  // from the 7-day sweep, not keeping the schema fresh, and skipping it would
+  // make the schema disappear with no visible cause.
+  const reloadedFor = useRef<string | null>(null);
+  useEffect(() => {
+    if (filePath == null || introspection.isLoading) return;
+    // Only attempt once per path, so an unreadable file doesn't spin.
+    if (reloadedFor.current === filePath) return;
+
+    const hasContent = (introspection.data?.content ?? "") !== "";
+    if (hasContent && options.disabled) return;
+
+    reloadedFor.current = filePath;
+    introspectFromFile(filePath).catch(console.error);
+  }, [
+    filePath,
+    introspection.data?.content,
+    introspection.isLoading,
+    introspectFromFile,
+    options.disabled,
+  ]);
+
+  // Stops using the file. The schema goes with it, since the file is what
+  // produced it; introspection repopulates if it's set to run automatically.
+  const removeSchemaFile = useCallback(async () => {
+    setError("");
+    setSchema(null);
+    await schemaFile.set(null);
+    await upsertIntrospection(null);
+  }, [schemaFile, upsertIntrospection]);
+
   useEffect(() => {
     if (introspection.data?.content == null || introspection.data.content === "") {
       return;
@@ -112,14 +215,24 @@ export function useIntrospectGraphQL(
     }
   }, [introspection.data?.content]);
 
-  return { schema, isLoading, error, refetch, clear };
+  return {
+    schema,
+    isLoading,
+    error,
+    refetch,
+    clear,
+    loadFromFile,
+    reloadFromFile,
+    removeSchemaFile,
+    filePath,
+  };
 }
 
 function useIntrospectionResult(request: HttpRequest) {
   return useQuery({
     queryKey: ["introspection", request.id],
     queryFn: async () =>
-      invoke<GraphQlIntrospection | null>("models_get_graphql_introspection", {
+      rpc<GraphQlIntrospection | null>("models_get_graphql_introspection", {
         requestId: request.id,
       }),
   });

apps/yaak-client/hooks/useListenToTauriEvent.ts

@@ -1,28 +0,0 @@
-import type { EventCallback, EventName } from "@tauri-apps/api/event";
-import { listen } from "@tauri-apps/api/event";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { useEffect, useRef } from "react";
-
-export function useListenToTauriEvent<T>(event: EventName, fn: EventCallback<T>) {
-  const handlerRef = useRef(fn);
-  useEffect(() => {
-    handlerRef.current = fn;
-  }, [fn]);
-
-  useEffect(() => {
-    return listenToTauriEvent<T>(event, (p) => handlerRef.current(p));
-  }, [event]);
-}
-
-export function listenToTauriEvent<T>(event: EventName, fn: EventCallback<T>) {
-  const unsubPromise = listen<T>(
-    event,
-    fn,
-    // Listen to `emit_all()` events or events specific to the current window
-    { target: { label: getCurrentWebviewWindow().label, kind: "Window" } },
-  );
-
-  return () => {
-    unsubPromise.then((unsub) => unsub()).catch(console.error);
-  };
-}

apps/yaak-client/hooks/usePinnedGrpcConnection.ts

@@ -1,4 +1,3 @@
-import { invoke } from "@tauri-apps/api/core";
 import type { GrpcConnection, GrpcEvent } from "@yaakapp-internal/models";
 import {
   grpcConnectionsAtom,
@@ -11,6 +10,7 @@ import { useEffect, useMemo } from "react";
 import { fireAndForget } from "../lib/fireAndForget";
 import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
 import { activeRequestIdAtom } from "./useActiveRequestId";
+import { rpc } from "../lib/rpc";
 
 const pinnedGrpcConnectionIdsAtom = atomWithKVStorage<Record<string, string | null>>(
   "pinned-grpc-connection-ids",
@@ -71,7 +71,7 @@ export function useGrpcEvents(connectionId: string | null) {
 
     // Fetch events from database, filtering out events from other connections and merging atomically
     fireAndForget(
-      invoke<GrpcEvent[]>("models_grpc_events", { connectionId }).then((events) =>
+      rpc<GrpcEvent[]>("models_grpc_events", { connectionId }).then((events) =>
         mergeModelsInStore("grpc_event", events, (e) => e.connectionId === connectionId),
       ),
     );

apps/yaak-client/hooks/usePinnedWebsocketConnection.ts

@@ -1,4 +1,3 @@
-import { invoke } from "@tauri-apps/api/core";
 import type { WebsocketConnection, WebsocketEvent } from "@yaakapp-internal/models";
 import {
   mergeModelsInStore,
@@ -12,6 +11,7 @@ import { fireAndForget } from "../lib/fireAndForget";
 import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
 import { jotaiStore } from "../lib/jotai";
 import { activeRequestIdAtom } from "./useActiveRequestId";
+import { rpc } from "../lib/rpc";
 
 const pinnedWebsocketConnectionIdAtom = atomWithKVStorage<Record<string, string | null>>(
   "pinned-websocket-connection-ids",
@@ -58,7 +58,7 @@ export function useWebsocketEvents(connectionId: string | null) {
 
     // Fetch events from database, filtering out events from other connections and merging atomically
     fireAndForget(
-      invoke<WebsocketEvent[]>("models_websocket_events", { connectionId }).then((events) =>
+      rpc<WebsocketEvent[]>("models_websocket_events", { connectionId }).then((events) =>
         mergeModelsInStore("websocket_event", events, (e) => e.connectionId === connectionId),
       ),
     );

apps/yaak-client/hooks/usePlatformEvent.ts

@@ -0,0 +1,12 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useEffect, useRef } from "react";
+
+/** Subscribe to a backend event for the lifetime of the component. */
+export function usePlatformEvent<T>(event: string, fn: (payload: T) => void) {
+  const handlerRef = useRef(fn);
+  useEffect(() => {
+    handlerRef.current = fn;
+  }, [fn]);
+
+  useEffect(() => platform.listen<T>(event, (payload) => handlerRef.current(payload)), [event]);
+}

apps/yaak-client/hooks/usePluginInfo.ts

@@ -4,7 +4,7 @@ import { pluginsAtom } from "@yaakapp-internal/models";
 import type { PluginMetadata } from "@yaakapp-internal/plugins";
 import { useAtomValue } from "jotai";
 import { queryClient } from "../lib/queryClient";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 
 function pluginInfoKey(id: string | null, plugin: Plugin | null) {
   return ["plugin_info", id ?? "n/a", plugin?.updatedAt ?? "n/a"];
@@ -19,7 +19,7 @@ export function usePluginInfo(id: string | null) {
     placeholderData: (prev) => prev, // Keep previous data on refetch
     queryFn: () => {
       if (id == null) return null;
-      return invokeCmd<PluginMetadata>("cmd_plugin_info", { id });
+      return rpc<PluginMetadata>("cmd_plugin_info", { id });
     },
   });
 }

apps/yaak-client/hooks/usePlugins.ts

@@ -3,7 +3,7 @@ import { changeModelStoreWorkspace, pluginsAtom } from "@yaakapp-internal/models
 import { useAtomValue } from "jotai";
 import { jotaiStore } from "../lib/jotai";
 import { minPromiseMillis } from "../lib/minPromiseMillis";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
 import { useDebouncedValue } from "@yaakapp-internal/ui";
 import { invalidateAllPluginInfo } from "./usePluginInfo";
@@ -26,7 +26,7 @@ export function useRefreshPlugins() {
     mutationFn: async () => {
       await minPromiseMillis(
         (async () => {
-          await invokeCmd("cmd_reload_plugins");
+          await rpc("cmd_reload_plugins");
           const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
           await changeModelStoreWorkspace(workspaceId); // Force refresh models
           invalidateAllPluginInfo();

apps/yaak-client/hooks/usePreferredAppearance.ts

@@ -1,9 +1,15 @@
 import { useEffect, useState } from "react";
 import type { Appearance } from "@yaakapp-internal/theme";
-import { getCSSAppearance, subscribeToPreferredAppearance } from "@yaakapp-internal/theme";
+import {
+  getCSSAppearance,
+  getSystemAppearance,
+  subscribeToPreferredAppearance,
+} from "@yaakapp-internal/theme";
 
 export function usePreferredAppearance() {
-  const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(getCSSAppearance());
+  const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(
+    getSystemAppearance() ?? getCSSAppearance(),
+  );
   useEffect(() => subscribeToPreferredAppearance(setPreferredAppearance), []);
   return preferredAppearance;
 }

apps/yaak-client/hooks/useRecentFilters.ts

@@ -0,0 +1,67 @@
+import { useCallback } from "react";
+import { useKeyValue } from "./useKeyValue";
+
+export interface RecentFilter {
+  value: string;
+  pinned?: boolean;
+}
+
+const MAX_RECENT_FILTERS = 20;
+const kvKey = (filterStateKey: string) => `recent_filters::${filterStateKey}`;
+const namespace = "global";
+const fallback: RecentFilter[] = [];
+
+export function useRecentFilters(filterStateKey: string | null) {
+  const { value, set } = useKeyValue<RecentFilter[]>({
+    key: kvKey(filterStateKey ?? "n/a"),
+    namespace,
+    fallback,
+  });
+
+  const addFilter = useCallback(
+    async (rawValue: string) => {
+      const value = rawValue.trim();
+      if (filterStateKey == null || value === "") return;
+      await set((prev) => {
+        // Returning the same reference skips the write, so re-committing the
+        // expression already at the top (on every blur) costs nothing
+        if (prev[0]?.value === value) return prev;
+        const existing = prev.find((f) => f.value === value);
+        const rest = prev.filter((f) => f.value !== value);
+        return trim([{ value, pinned: existing?.pinned }, ...rest]);
+      });
+    },
+    [filterStateKey, set],
+  );
+
+  const removeFilter = useCallback(
+    async (value: string) => set((prev) => prev.filter((f) => f.value !== value)),
+    [set],
+  );
+
+  const togglePin = useCallback(
+    async (value: string) =>
+      set((prev) => prev.map((f) => (f.value === value ? { ...f, pinned: !f.pinned } : f))),
+    [set],
+  );
+
+  const clearFilters = useCallback(async () => set([]), [set]);
+
+  return { recentFilters: value ?? fallback, addFilter, removeFilter, togglePin, clearFilters };
+}
+
+/** Bound the list, evicting the oldest unpinned entries before any pinned ones */
+function trim(filters: RecentFilter[]): RecentFilter[] {
+  const excess = filters.length - MAX_RECENT_FILTERS;
+  if (excess <= 0) return filters;
+
+  const evicted = new Set<number>();
+  for (let i = filters.length - 1; i >= 0 && evicted.size < excess; i--) {
+    if (!filters[i]?.pinned) evicted.add(i);
+  }
+  for (let i = filters.length - 1; i >= 0 && evicted.size < excess; i--) {
+    evicted.add(i);
+  }
+
+  return filters.filter((_, i) => !evicted.has(i));
+}

apps/yaak-client/hooks/useRenderTemplate.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import type { RenderPurpose } from "@yaakapp-internal/plugins";
 import { useAtomValue } from "jotai";
 import { minPromiseMillis } from "../lib/minPromiseMillis";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { useActiveEnvironment } from "./useActiveEnvironment";
 import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
 
@@ -49,7 +49,7 @@ export async function renderTemplate({
   purpose: RenderPurpose;
   ignoreError?: boolean;
 }): Promise<string> {
-  return invokeCmd("cmd_render_template", {
+  return rpc("cmd_render_template", {
     template,
     workspaceId,
     environmentId,
@@ -67,5 +67,5 @@ export async function decryptTemplate({
   workspaceId: string;
   environmentId: string | null;
 }): Promise<string> {
-  return invokeCmd("cmd_decrypt_template", { template, workspaceId, environmentId });
+  return rpc("cmd_decrypt_template", { template, workspaceId, environmentId });
 }

apps/yaak-client/hooks/useRequestUpdateKey.ts

@@ -1,4 +1,4 @@
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { platform } from "@yaakapp-internal/platform";
 import type { ModelPayload } from "@yaakapp-internal/models";
 import { atom, useAtomValue } from "jotai";
 import { generateId } from "../lib/generateId";
@@ -6,26 +6,24 @@ import { jotaiStore } from "../lib/jotai";
 
 const requestUpdateKeyAtom = atom<Record<string, string>>({});
 
-getCurrentWebviewWindow()
-  .listen<ModelPayload[]>("model_writes", ({ payload: payloads }) => {
-    const changedIds: string[] = [];
-    for (const payload of payloads) {
-      if (payload.change.type !== "upsert") continue;
+platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+  const changedIds: string[] = [];
+  for (const payload of payloads) {
+    if (payload.change.type !== "upsert") continue;
 
-      if (
-        (payload.model.model === "http_request" ||
-          payload.model.model === "grpc_request" ||
-          payload.model.model === "websocket_request") &&
-        ((payload.updateSource.type === "window" &&
-          payload.updateSource.label !== getCurrentWebviewWindow().label) ||
-          payload.updateSource.type !== "window")
-      ) {
-        changedIds.push(payload.model.id);
-      }
+    if (
+      (payload.model.model === "http_request" ||
+        payload.model.model === "grpc_request" ||
+        payload.model.model === "websocket_request") &&
+      ((payload.updateSource.type === "window" &&
+        payload.updateSource.label !== platform.window.label) ||
+        payload.updateSource.type !== "window")
+    ) {
+      changedIds.push(payload.model.id);
     }
-    if (changedIds.length > 0) wasUpdatedExternally(changedIds);
-  })
-  .catch(console.error);
+  }
+  if (changedIds.length > 0) wasUpdatedExternally(changedIds);
+});
 
 export function wasUpdatedExternally(changedRequestIds: string | string[]) {
   const ids = Array.isArray(changedRequestIds) ? changedRequestIds : [changedRequestIds];

apps/yaak-client/hooks/useResponseBodyText.ts

@@ -2,6 +2,25 @@ import { useQuery } from "@tanstack/react-query";
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { getResponseBodyBytes, getResponseBodyText } from "../lib/responseBody";
 
+export function responseBodyTextQuery({
+  response,
+  filter,
+}: {
+  response: HttpResponse;
+  filter: string | null;
+}) {
+  return {
+    queryKey: [
+      "response_body_text",
+      response.id,
+      response.updatedAt,
+      response.contentLength,
+      filter ?? "",
+    ],
+    queryFn: () => getResponseBodyText({ response, filter }),
+  };
+}
+
 export function useResponseBodyText({
   response,
   filter,
@@ -11,14 +30,7 @@ export function useResponseBodyText({
 }) {
   return useQuery({
     placeholderData: (prev) => prev, // Keep previous data on refetch
-    queryKey: [
-      "response_body_text",
-      response.id,
-      response.updatedAt,
-      response.contentLength,
-      filter ?? "",
-    ],
-    queryFn: () => getResponseBodyText({ response, filter }),
+    ...responseBodyTextQuery({ response, filter }),
   });
 }
 

apps/yaak-client/hooks/useResponseBodyUrl.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
+
+/**
+ * A URL for a stored response body, for the viewers that hand one to an element
+ * instead of reading the bytes themselves.
+ *
+ * Resolved once here rather than inside each viewer: the host may have to ask
+ * the backend where the body is, and a viewer that computes its source during
+ * render (the PDF one, deliberately) needs it settled before it mounts.
+ *
+ * Null data means the response has no stored body.
+ */
+export function useResponseBodyUrl(response: HttpResponse | null) {
+  const responseId = response?.id ?? null;
+
+  return useQuery({
+    queryKey: ["response_body_url", responseId, response?.updatedAt ?? ""],
+    enabled: responseId != null,
+    // A response body is stored under the response's own id
+    queryFn: () => (responseId == null ? null : platform.blobs.url(responseId)),
+  });
+}

apps/yaak-client/hooks/useResponseFilter.ts

@@ -0,0 +1,129 @@
+import { useCallback, useState } from "react";
+import { createGlobalState } from "react-use";
+import type { RecentFilter } from "./useRecentFilters";
+import { useRecentFilters } from "./useRecentFilters";
+
+/** What's typed in the filter box. `null` means the filter box is closed */
+const useFilterTextMap = createGlobalState<Record<string, string | null>>({});
+
+/** What's actually applied to the response. Only changes on an explicit apply */
+const useAppliedFilterMap = createGlobalState<Record<string, string | null>>({});
+
+export interface ResponseFilterApi {
+  stateKey: string | null;
+  /** Draft text in the filter box, or `null` when the box is closed */
+  filterText: string | null;
+  /** The expression currently filtering the response */
+  appliedFilter: string | null;
+  isSearching: boolean;
+  /** The box holds an expression that isn't the one currently applied */
+  isDirty: boolean;
+  /** Bumped when the (uncontrolled) filter input must re-read its defaultValue */
+  filterUpdateKey: number;
+  setFilterText: (value: string | null) => void;
+  /** Apply the expression to the response, recording it if the filter accepts it */
+  applyFilter: (value: string) => void;
+  /** Like applyFilter, but also replaces what's shown in the filter box */
+  replaceFilter: (value: string) => void;
+  toggleSearch: () => void;
+  recentFilters: RecentFilter[];
+  removeRecentFilter: (value: string) => void;
+  togglePinRecentFilter: (value: string) => void;
+  clearRecentFilters: () => void;
+}
+
+/**
+ * Draft/applied state and history for a response filter (JSONPath/XPath).
+ *
+ * History records at most one entry per apply gesture, and only after `runFilter`
+ * confirms the plugin accepts the expression — the plugin is the sole judge of
+ * validity. Because nothing but the gesture ever writes, refetches can't resurrect
+ * deleted entries and a gesture can't record into another request's history.
+ */
+export function useResponseFilter({
+  stateKey,
+  runFilter,
+}: {
+  stateKey: string | null;
+  /** Evaluate an expression, rejecting if the filter plugin reports an error */
+  runFilter: (filter: string) => Promise<unknown>;
+}): ResponseFilterApi {
+  const [filterTextMap, setFilterTextMap] = useFilterTextMap();
+  const [appliedFilterMap, setAppliedFilterMap] = useAppliedFilterMap();
+  const filterText = stateKey ? (filterTextMap[stateKey] ?? null) : null;
+  const appliedFilter = stateKey ? (appliedFilterMap[stateKey] ?? null) : null;
+
+  const setFilterText = useCallback(
+    (v: string | null) => {
+      if (!stateKey) return;
+      setFilterTextMap((m) => ({ ...m, [stateKey]: v }));
+    },
+    [stateKey, setFilterTextMap],
+  );
+
+  const setAppliedFilter = useCallback(
+    (v: string | null) => {
+      if (!stateKey) return;
+      setAppliedFilterMap((m) => ({ ...m, [stateKey]: v }));
+    },
+    [stateKey, setAppliedFilterMap],
+  );
+
+  const {
+    recentFilters,
+    addFilter,
+    removeFilter: removeRecentFilter,
+    togglePin: togglePinRecentFilter,
+    clearFilters: clearRecentFilters,
+  } = useRecentFilters(stateKey);
+
+  const applyFilter = useCallback(
+    (value: string) => {
+      setFilterText(value);
+      const applied = value.trim() === "" ? null : value.trim();
+      setAppliedFilter(applied);
+      if (applied == null) return;
+      runFilter(applied).then(
+        () => addFilter(applied),
+        () => {}, // Rejected by the filter plugin — don't record
+      );
+    },
+    [setFilterText, setAppliedFilter, runFilter, addFilter],
+  );
+
+  const [filterUpdateKey, setFilterUpdateKey] = useState(0);
+  const replaceFilter = useCallback(
+    (value: string) => {
+      applyFilter(value);
+      setFilterUpdateKey((k) => k + 1);
+    },
+    [applyFilter],
+  );
+
+  const isSearching = filterText != null;
+  const toggleSearch = useCallback(() => {
+    if (isSearching) {
+      setFilterText(null);
+      setAppliedFilter(null);
+    } else {
+      setFilterText("");
+    }
+  }, [isSearching, setFilterText, setAppliedFilter]);
+
+  return {
+    stateKey,
+    filterText,
+    appliedFilter,
+    isSearching,
+    isDirty: filterText != null && filterText.trim() !== (appliedFilter ?? ""),
+    filterUpdateKey,
+    setFilterText,
+    applyFilter,
+    replaceFilter,
+    toggleSearch,
+    recentFilters,
+    removeRecentFilter,
+    togglePinRecentFilter,
+    clearRecentFilters,
+  };
+}

apps/yaak-client/hooks/useSaveResponse.tsx

@@ -1,13 +1,13 @@
-import { save } from "@tauri-apps/plugin-dialog";
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { getModel } from "@yaakapp-internal/models";
 import mime from "mime";
 import slugify from "slugify";
 import { InlineCode } from "@yaakapp-internal/ui";
 import { getContentTypeFromHeaders } from "../lib/model_util";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { showToast } from "../lib/toast";
 import { useFastMutation } from "./useFastMutation";
+import { platform } from "@yaakapp-internal/platform";
 
 export function useSaveResponse(response: HttpResponse | null) {
   return useFastMutation({
@@ -21,11 +21,15 @@ export function useSaveResponse(response: HttpResponse | null) {
       const contentType = getContentTypeFromHeaders(response.headers) ?? "unknown";
       const ext = mime.getExtension(contentType);
       const slug = slugify(request.name || "response", { lower: true });
-      const filepath = await save({
+      const filepath = await platform.dialog.save({
         defaultPath: ext ? `${slug}.${ext}` : slug,
         title: "Save Response",
       });
-      await invokeCmd("cmd_save_response", { responseId: response.id, filepath });
+      if (filepath == null) {
+        return; // Cancelled
+      }
+
+      await rpc("cmd_save_response", { responseId: response.id, filepath });
       showToast({
         message: (
           <>

apps/yaak-client/hooks/useSendAnyHttpRequest.ts

@@ -1,6 +1,6 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { flushAllModelWrites } from "@yaakapp-internal/models";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { getActiveCookieJar } from "./useActiveCookieJar";
 import { getActiveEnvironment } from "./useActiveEnvironment";
 import { createFastMutation, useFastMutation } from "./useFastMutation";
@@ -12,7 +12,7 @@ async function sendAnyHttpRequestById(id: string | null): Promise<HttpResponse |
 
   await flushAllModelWrites();
 
-  return invokeCmd("cmd_send_http_request", {
+  return rpc("cmd_send_http_request", {
     requestId: id,
     environmentId: getActiveEnvironment()?.id,
     cookieJarId: getActiveCookieJar()?.id,

apps/yaak-client/hooks/useStoplightsVisible.ts

@@ -1,8 +1,8 @@
-import { type } from "@tauri-apps/plugin-os";
+import { platform } from "@yaakapp-internal/platform";
 import { useIsFullscreen } from "@yaakapp-internal/ui";
 
 export function useStoplightsVisible() {
   const fullscreen = useIsFullscreen();
-  const stoplightsVisible = type() === "macos" && !fullscreen;
+  const stoplightsVisible = platform.osType() === "macos" && !fullscreen;
   return stoplightsVisible;
 }

apps/yaak-client/hooks/useSyncFontSizeSetting.ts

@@ -1,4 +1,4 @@
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { platform } from "@yaakapp-internal/platform";
 import { settingsAtom } from "@yaakapp-internal/models";
 import { useAtomValue } from "jotai";
 import { useEffect } from "react";
@@ -11,7 +11,7 @@ export function useSyncFontSizeSetting() {
     }
 
     const { interfaceScale, editorFontSize } = settings;
-    getCurrentWebviewWindow().setZoom(interfaceScale).catch(console.error);
+    platform.window.setZoom(interfaceScale).catch(console.error);
     document.documentElement.style.setProperty("--editor-font-size", `${editorFontSize}px`);
   }, [settings]);
 }

apps/yaak-client/hooks/useSyncZoomSetting.ts

@@ -1,5 +1,5 @@
 import { useHotKey } from "./useHotKey";
-import { useListenToTauriEvent } from "./useListenToTauriEvent";
+import { usePlatformEvent } from "./usePlatformEvent";
 import { useZoom } from "./useZoom";
 
 export function useSyncZoomSetting() {
@@ -8,9 +8,9 @@ export function useSyncZoomSetting() {
   // shortcuts for Windows/Linux
   const zoom = useZoom();
   useHotKey("app.zoom_in", zoom.zoomIn);
-  useListenToTauriEvent("zoom_in", zoom.zoomIn);
+  usePlatformEvent("zoom_in", zoom.zoomIn);
   useHotKey("app.zoom_out", zoom.zoomOut);
-  useListenToTauriEvent("zoom_out", zoom.zoomOut);
+  usePlatformEvent("zoom_out", zoom.zoomOut);
   useHotKey("app.zoom_reset", zoom.zoomReset);
-  useListenToTauriEvent("zoom_reset", zoom.zoomReset);
+  usePlatformEvent("zoom_reset", zoom.zoomReset);
 }

apps/yaak-client/hooks/useTemplateFunctionConfig.ts

@@ -12,7 +12,7 @@ import {
 import type { GetTemplateFunctionConfigResponse, JsonPrimitive } from "@yaakapp-internal/plugins";
 import { useAtomValue } from "jotai";
 import { md5 } from "js-md5";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { activeEnvironmentIdAtom } from "./useActiveEnvironment";
 import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
 
@@ -63,7 +63,7 @@ export async function getTemplateFunctionConfig(
   model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace,
   environmentId: string | undefined,
 ) {
-  const config = await invokeCmd<GetTemplateFunctionConfigResponse>(
+  const config = await rpc<GetTemplateFunctionConfigResponse>(
     "cmd_template_function_config",
     {
       functionName,

apps/yaak-client/hooks/useTemplateFunctions.tsx

@@ -6,7 +6,7 @@ import type {
 import { atom, useAtomValue, useSetAtom } from "jotai";
 import { useMemo, useState } from "react";
 import type { TwigCompletionOption } from "../components/core/Editor/twig/completion";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { usePluginsKey } from "./usePlugins";
 
 const templateFunctionsAtom = atom<TemplateFunction[]>([]);
@@ -49,7 +49,7 @@ export function useSubscribeTemplateFunctions() {
     refetchInterval: numFns > 0 ? Number.POSITIVE_INFINITY : 1000,
     refetchOnMount: true,
     queryFn: async () => {
-      const result = await invokeCmd<GetTemplateFunctionSummaryResponse[]>(
+      const result = await rpc<GetTemplateFunctionSummaryResponse[]>(
         "cmd_template_function_summaries",
       );
       setNumFns(result.length);

apps/yaak-client/hooks/useTemplateTokensToString.ts

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { Tokens } from "@yaakapp-internal/templates";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 
 export function useTemplateTokensToString(tokens: Tokens) {
   return useQuery<string>({
@@ -11,5 +11,5 @@ export function useTemplateTokensToString(tokens: Tokens) {
 }
 
 export async function templateTokensToString(tokens: Tokens): Promise<string> {
-  return invokeCmd("cmd_template_tokens_to_string", { tokens });
+  return rpc("cmd_template_tokens_to_string", { tokens });
 }

apps/yaak-client/hooks/useWebsocketRequestActions.ts

@@ -6,7 +6,7 @@ import type {
   WebsocketRequestAction,
 } from "@yaakapp-internal/plugins";
 import { useMemo } from "react";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { usePluginsKey } from "./usePlugins";
 
 export type CallableWebSocketRequestAction = Pick<WebsocketRequestAction, "label" | "icon"> & {
@@ -30,7 +30,7 @@ export function useWebsocketRequestActions() {
 }
 
 export async function getWebsocketRequestActions() {
-  const responses = await invokeCmd<GetWebsocketRequestActionsResponse[]>(
+  const responses = await rpc<GetWebsocketRequestActionsResponse[]>(
     "cmd_websocket_request_actions",
   );
   const actions = responses.flatMap((r) =>
@@ -43,7 +43,7 @@ export async function getWebsocketRequestActions() {
           pluginRefId: r.pluginRefId,
           args: { websocketRequest },
         };
-        await invokeCmd("cmd_call_websocket_request_action", { req: payload });
+        await rpc("cmd_call_websocket_request_action", { req: payload });
       },
     })),
   );

apps/yaak-client/hooks/useWindowFocus.ts

@@ -1,18 +1,11 @@
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { platform } from "@yaakapp-internal/platform";
 import { useEffect, useState } from "react";
-import { fireAndForget } from "../lib/fireAndForget";
 
 export function useWindowFocus() {
   const [visible, setVisible] = useState(true);
 
   useEffect(() => {
-    const unlisten = getCurrentWebviewWindow().onFocusChanged((e) => {
-      setVisible(e.payload);
-    });
-
-    return () => {
-      fireAndForget(unlisten.then((fn) => fn()));
-    };
+    return platform.window.onFocusChanged(setVisible);
   }, []);
 
   return visible;

apps/yaak-client/hooks/useWorkspaceActions.ts

@@ -6,7 +6,7 @@ import type {
   WorkspaceAction,
 } from "@yaakapp-internal/plugins";
 import { useMemo } from "react";
-import { invokeCmd } from "../lib/tauri";
+import { rpc } from "../lib/rpc";
 import { usePluginsKey } from "./usePlugins";
 
 export type CallableWorkspaceAction = Pick<WorkspaceAction, "label" | "icon"> & {
@@ -30,7 +30,7 @@ export function useWorkspaceActions() {
 }
 
 export async function getWorkspaceActions() {
-  const responses = await invokeCmd<GetWorkspaceActionsResponse[]>("cmd_workspace_actions");
+  const responses = await rpc<GetWorkspaceActionsResponse[]>("cmd_workspace_actions");
   const actions = responses.flatMap((r) =>
     r.actions.map((a, i) => ({
       label: a.label,
@@ -41,7 +41,7 @@ export async function getWorkspaceActions() {
           pluginRefId: r.pluginRefId,
           args: { workspace },
         };
-        await invokeCmd("cmd_call_workspace_action", { req: payload });
+        await rpc("cmd_call_workspace_action", { req: payload });
       },
     })),
   );

apps/yaak-client/init/sync.ts

@@ -3,7 +3,7 @@ import type { AnyModel, ModelPayload } from "@yaakapp-internal/models";
 import { watchWorkspaceFiles } from "@yaakapp-internal/sync";
 import { syncWorkspace } from "../commands/commands";
 import { activeWorkspaceIdAtom, activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
-import { listenToTauriEvent } from "../hooks/useListenToTauriEvent";
+import { platform } from "@yaakapp-internal/platform";
 import { jotaiStore } from "../lib/jotai";
 
 export function initSync() {
@@ -33,8 +33,8 @@ const syncAfterModelWrite = eagerDebounceAsync(sync, 1000);
  * simply add long-lived subscribers for the lifetime of the app.
  */
 function initModelListeners() {
-  listenToTauriEvent<ModelPayload[]>("model_writes", (p) => {
-    if (p.payload.some((payload) => isModelRelevant(payload.model))) syncAfterModelWrite();
+  platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+    if (payloads.some((payload) => isModelRelevant(payload.model))) syncAfterModelWrite();
   });
 }
 

apps/yaak-client/lib/appInfo.ts

@@ -1,5 +1,5 @@
-import { getIdentifier } from "@tauri-apps/api/app";
-import { invokeCmd } from "./tauri";
+import { platform } from "@yaakapp-internal/platform";
+import { rpc } from "./rpc";
 
 export interface AppInfo {
   isDev: boolean;
@@ -16,8 +16,8 @@ export interface AppInfo {
 }
 
 export const appInfo = {
-  ...(await invokeCmd("cmd_metadata")),
-  identifier: await getIdentifier(),
+  ...(await rpc("cmd_metadata")),
+  identifier: await platform.appIdentifier(),
 } as AppInfo;
 
 console.log("App info", appInfo);

apps/yaak-client/lib/copy.ts

@@ -1,14 +1,14 @@
-import { clear, writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { showToast } from "./toast";
+import { platform } from "@yaakapp-internal/platform";
 
 export function copyToClipboard(
   text: string | null,
   { disableToast }: { disableToast?: boolean } = {},
 ) {
   if (text == null) {
-    clear().catch(console.error);
+    platform.clipboard.clear().catch(console.error);
   } else {
-    writeText(text).catch(console.error);
+    platform.clipboard.writeText(text).catch(console.error);
   }
 
   if (text !== "" && !disableToast) {

apps/yaak-client/lib/defaultHeaders.ts

@@ -1,8 +1,8 @@
 import type { HttpRequestHeader } from "@yaakapp-internal/models";
-import { invokeCmd } from "./tauri";
+import { rpc } from "./rpc";
 
 /**
  * Global default headers fetched from the backend.
  * These are static and fetched once on module load.
  */
-export const defaultHeaders: HttpRequestHeader[] = await invokeCmd("cmd_default_headers");
+export const defaultHeaders: HttpRequestHeader[] = await rpc("cmd_default_headers");

apps/yaak-client/lib/encryption.ts

@@ -2,7 +2,7 @@ import { parseTemplate } from "@yaakapp-internal/templates";
 import { activeEnvironmentIdAtom } from "../hooks/useActiveEnvironment";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { jotaiStore } from "./jotai";
-import { invokeCmd } from "./tauri";
+import { rpc } from "./rpc";
 
 export function analyzeTemplate(template: string): "global_secured" | "local_secured" | "insecure" {
   let secureTags = 0;
@@ -39,7 +39,7 @@ export async function convertTemplateToInsecure(template: string) {
 
   const workspaceId = jotaiStore.get(activeWorkspaceIdAtom) ?? "n/a";
   const environmentId = jotaiStore.get(activeEnvironmentIdAtom) ?? null;
-  return invokeCmd<string>("cmd_decrypt_template", { template, workspaceId, environmentId });
+  return rpc<string>("cmd_decrypt_template", { template, workspaceId, environmentId });
 }
 
 export async function convertTemplateToSecure(template: string): Promise<string> {
@@ -53,5 +53,5 @@ export async function convertTemplateToSecure(template: string): Promise<string>
 
   const workspaceId = jotaiStore.get(activeWorkspaceIdAtom) ?? "n/a";
   const environmentId = jotaiStore.get(activeEnvironmentIdAtom) ?? null;
-  return invokeCmd<string>("cmd_secure_template", { template, workspaceId, environmentId });
+  return rpc<string>("cmd_secure_template", { template, workspaceId, environmentId });
 }

apps/yaak-client/lib/formatters.ts

@@ -1,11 +1,11 @@
 import vkBeautify from "vkbeautify";
-import { invokeCmd } from "./tauri";
+import { rpc } from "./rpc";
 
 export async function tryFormatJson(text: string): Promise<string> {
   if (text === "") return text;
 
   try {
-    const result = await invokeCmd<string>("cmd_format_json", { text });
+    const result = await rpc<string>("cmd_format_json", { text });
     return result;
   } catch (err) {
     console.warn("Failed to format JSON", err);
@@ -24,7 +24,7 @@ export async function tryFormatGraphql(text: string): Promise<string> {
   if (text === "") return text;
 
   try {
-    return await invokeCmd<string>("cmd_format_graphql", { text });
+    return await rpc<string>("cmd_format_graphql", { text });
   } catch (err) {
     console.warn("Failed to format GraphQL", err);
   }

apps/yaak-client/lib/graphqlSchema.test.ts

@@ -0,0 +1,85 @@
+import { buildSchema, introspectionFromSchema } from "graphql";
+import { describe, expect, test } from "vite-plus/test";
+import { tryBuildIntrospectionFromFile } from "./graphqlSchema";
+
+const sdl = `
+  type Query {
+    hello: String!
+    user(id: ID!): User
+  }
+
+  type User {
+    id: ID!
+    name: String
+  }
+`;
+
+const introspection = introspectionFromSchema(buildSchema(sdl));
+
+describe("tryBuildIntrospectionFromFile", () => {
+  test("accepts introspection JSON wrapped in { data: ... }", () => {
+    const input = JSON.stringify({ data: introspection });
+    const result = tryBuildIntrospectionFromFile(input);
+
+    expect("schema" in result).toBe(true);
+    if ("schema" in result) {
+      expect(result.schema.getQueryType()?.getFields()).toHaveProperty("hello");
+      // Output content is the normalized, persistable shape.
+      expect(JSON.parse(result.content)).toHaveProperty("data.__schema");
+    }
+  });
+
+  test("accepts bare introspection JSON without a data wrapper", () => {
+    const input = JSON.stringify(introspection);
+    const result = tryBuildIntrospectionFromFile(input);
+
+    expect("schema" in result).toBe(true);
+    if ("schema" in result) {
+      expect(result.schema.getQueryType()?.getFields()).toHaveProperty("user");
+      // Bare input is wrapped on the way out.
+      expect(JSON.parse(result.content)).toHaveProperty("data.__schema");
+    }
+  });
+
+  test("accepts a GraphQL SDL string", () => {
+    const result = tryBuildIntrospectionFromFile(sdl);
+
+    expect("schema" in result).toBe(true);
+    if ("schema" in result) {
+      const fields = result.schema.getQueryType()?.getFields() ?? {};
+      expect(fields).toHaveProperty("hello");
+      expect(fields).toHaveProperty("user");
+      // SDL is converted to introspection JSON for storage.
+      expect(JSON.parse(result.content)).toHaveProperty("data.__schema");
+    }
+  });
+
+  test("returns an error for JSON that is neither introspection nor SDL", () => {
+    const result = tryBuildIntrospectionFromFile('{"unrelated":"value"}');
+
+    expect("error" in result).toBe(true);
+    if ("error" in result) {
+      expect(result.error).toMatch(/Could not parse file as introspection JSON or GraphQL SDL/);
+    }
+  });
+
+  test("returns an error for content that is neither valid JSON nor valid SDL", () => {
+    const result = tryBuildIntrospectionFromFile("not a schema!@#$");
+
+    expect("error" in result).toBe(true);
+    if ("error" in result) {
+      expect(result.error).toMatch(/Could not parse file as introspection JSON or GraphQL SDL/);
+    }
+  });
+
+  test("returns an error when introspection JSON has a malformed __schema", () => {
+    // Has the data.__schema shape but the contents are invalid for buildClientSchema.
+    const input = JSON.stringify({ data: { __schema: { broken: true } } });
+    const result = tryBuildIntrospectionFromFile(input);
+
+    expect("error" in result).toBe(true);
+    if ("error" in result) {
+      expect(result.error).toMatch(/Failed to build schema from introspection JSON/);
+    }
+  });
+});

apps/yaak-client/lib/graphqlSchema.ts

@@ -0,0 +1,51 @@
+import type { GraphQLSchema, IntrospectionQuery } from "graphql";
+import { buildClientSchema, buildSchema, introspectionFromSchema } from "graphql";
+
+// Accepts either a GraphQL introspection JSON ({ data: { __schema } } or
+// { __schema }) or an SDL string and normalizes both into the wrapped
+// { data: <introspection> } JSON shape used by the introspection store.
+export function tryBuildIntrospectionFromFile(
+  fileContent: string,
+): { schema: GraphQLSchema; content: string } | { error: string } {
+  let parsedJson: unknown;
+  try {
+    parsedJson = JSON.parse(fileContent);
+  } catch {
+    parsedJson = undefined;
+  }
+
+  if (parsedJson != null && typeof parsedJson === "object") {
+    const candidates: unknown[] = [(parsedJson as { data?: unknown }).data, parsedJson];
+
+    for (const candidate of candidates) {
+      if (
+        candidate != null &&
+        typeof candidate === "object" &&
+        "__schema" in (candidate as Record<string, unknown>)
+      ) {
+        try {
+          const schema = buildClientSchema(candidate as IntrospectionQuery, {});
+          return { schema, content: JSON.stringify({ data: candidate }) };
+        } catch (e) {
+          return {
+            error: `Failed to build schema from introspection JSON: ${errorMessage(e)}`,
+          };
+        }
+      }
+    }
+  }
+
+  try {
+    const schema = buildSchema(fileContent);
+    const introspection = introspectionFromSchema(schema);
+    return { schema, content: JSON.stringify({ data: introspection }) };
+  } catch (e) {
+    return {
+      error: `Could not parse file as introspection JSON or GraphQL SDL: ${errorMessage(e)}`,
+    };
+  }
+}
+
+function errorMessage(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}

apps/yaak-client/lib/importData.tsx

@@ -2,14 +2,12 @@ import type { BatchUpsertResult } from "@yaakapp-internal/models";
 import { FormattedError, VStack } from "@yaakapp-internal/ui";
 import { Button } from "../components/core/Button";
 import { ImportDataDialog } from "../components/ImportDataDialog";
-import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
 import { showAlert } from "./alert";
 import { showDialog } from "./dialog";
-import { jotaiStore } from "./jotai";
 import { pluralizeCount } from "./pluralize";
 import { router } from "./router";
-import { invokeCmd } from "./tauri";
+import { rpc } from "./rpc";
 
 export const importData = createFastMutation({
   mutationKey: ["import_data"],
@@ -28,12 +26,9 @@ export const importData = createFastMutation({
         title: "Import Data",
         size: "sm",
         render: ({ hide }) => {
-          const importAndHide = async (filePath: string) => {
+          const importAndHide = async (runImport: () => Promise<BatchUpsertResult>) => {
             try {
-              const didImport = await performImport(filePath);
-              if (!didImport) {
-                return;
-              }
+              await finishImport(await runImport());
               resolve();
             } catch (err) {
               reject(err);
@@ -41,20 +36,23 @@ export const importData = createFastMutation({
               hide();
             }
           };
-          return <ImportDataDialog importData={importAndHide} />;
+          return (
+            <ImportDataDialog
+              importFile={(filePath) =>
+                importAndHide(() => rpc<BatchUpsertResult>("cmd_import_data", { filePath }))
+              }
+              importUrl={(url) =>
+                importAndHide(() => rpc<BatchUpsertResult>("cmd_import_url", { url }))
+              }
+            />
+          );
         },
       });
     });
   },
 });
 
-async function performImport(filePath: string): Promise<boolean> {
-  const activeWorkspace = jotaiStore.get(activeWorkspaceAtom);
-  const imported = await invokeCmd<BatchUpsertResult>("cmd_import_data", {
-    filePath,
-    workspaceId: activeWorkspace?.id,
-  });
-
+async function finishImport(imported: BatchUpsertResult): Promise<void> {
   const importedWorkspace = imported.workspaces[0];
 
   showDialog({
@@ -103,6 +101,4 @@ async function performImport(filePath: string): Promise<boolean> {
       search: { environment_id: environmentId },
     });
   }
-
-  return true;
 }

apps/yaak-client/lib/initGlobalListeners.tsx

@@ -1,5 +1,3 @@
-import { emit } from "@tauri-apps/api/event";
-import { openUrl } from "@tauri-apps/plugin-opener";
 import { debounce } from "@yaakapp-internal/lib";
 import type {
   FormInput,
@@ -20,23 +18,23 @@ import { Button } from "../components/core/Button";
 import { ButtonInfiniteLoading } from "../components/core/ButtonInfiniteLoading";
 
 // Listen for toasts
-import { listenToTauriEvent } from "../hooks/useListenToTauriEvent";
+import { platform } from "@yaakapp-internal/platform";
 import { updateAvailableAtom } from "./atoms";
 import { stringToColor } from "./color";
 import { generateId } from "./generateId";
 import { jotaiStore } from "./jotai";
 import { showPrompt } from "./prompt";
 import { showPromptForm } from "./prompt-form";
-import { invokeCmd } from "./tauri";
+import { rpc } from "./rpc";
 import { showToast } from "./toast";
 
 export function initGlobalListeners() {
-  listenToTauriEvent<ShowToastRequest>("show_toast", (event) => {
-    showToast({ ...event.payload });
+  platform.listen<ShowToastRequest>("show_toast", (payload) => {
+    showToast({ ...payload });
   });
 
   // Show errors for any plugins that failed to load during startup
-  void invokeCmd<[string, string][]>("cmd_plugin_init_errors").then((errors) => {
+  void rpc<[string, string][]>("cmd_plugin_init_errors").then((errors) => {
     for (const [dir, err] of errors) {
       const name = dir.split(/[/\\]/).pop() ?? dir;
       showToast({
@@ -61,13 +59,13 @@ export function initGlobalListeners() {
     }
   });
 
-  listenToTauriEvent("settings", () => openSettings.mutate(null));
+  platform.listen("settings", () => openSettings.mutate(null));
 
   // Track active dynamic form dialogs so follow-up input updates can reach them
   const activeForms = new Map<string, (inputs: FormInput[]) => void>();
 
   // Listen for plugin events
-  listenToTauriEvent<InternalEvent>("plugin_event", async ({ payload: event }) => {
+  platform.listen<InternalEvent>("plugin_event", async (event) => {
     if (event.payload.type === "prompt_text_request") {
       const value = await showPrompt(event.payload);
       const result: InternalEvent = {
@@ -81,7 +79,7 @@ export function initGlobalListeners() {
           value,
         },
       };
-      await emit(event.id, result);
+      await platform.emit(event.id, result);
     } else if (event.payload.type === "prompt_form_request") {
       if (event.replyId != null) {
         // Follow-up update from plugin runtime — update the active dialog's inputs
@@ -106,7 +104,7 @@ export function initGlobalListeners() {
             done,
           },
         };
-        void emit(event.id, result);
+        void platform.emit(event.id, result);
       };
 
       const values = await showPromptForm({
@@ -127,24 +125,24 @@ export function initGlobalListeners() {
     }
   });
 
-  listenToTauriEvent<string>("update_installed", async ({ payload: version }) => {
+  platform.listen<string>("update_installed", async (version) => {
     console.log("Got update installed event", version);
     showUpdateInstalledToast(version);
   });
 
   // Listen for update events
-  listenToTauriEvent<UpdateInfo>("update_available", async ({ payload }) => {
+  platform.listen<UpdateInfo>("update_available", async (payload) => {
     console.log("Got update available", payload);
     void showUpdateAvailableToast(payload);
   });
 
-  listenToTauriEvent<YaakNotification>("notification", ({ payload }) => {
+  platform.listen<YaakNotification>("notification", (payload) => {
     console.log("Got notification event", payload);
     showNotificationToast(payload);
   });
 
   // Listen for plugin update events
-  listenToTauriEvent<PluginUpdateNotification>("plugin_updates_available", ({ payload }) => {
+  platform.listen<PluginUpdateNotification>("plugin_updates_available", (payload) => {
     console.log("Got plugin updates event", payload);
     showPluginUpdatesToast(payload);
   });
@@ -171,7 +169,7 @@ function showUpdateInstalledToast(version: string) {
         loadingChildren="Restarting..."
         onClick={() => {
           hide();
-          setTimeout(() => invokeCmd("cmd_restart", {}), 200);
+          setTimeout(() => rpc("cmd_restart", {}), 200);
         }}
       >
         Relaunch Yaak
@@ -187,7 +185,7 @@ async function showUpdateAvailableToast(updateInfo: UpdateInfo) {
   jotaiStore.set(updateAvailableAtom, { version, downloaded });
 
   // Acknowledge the event, so we don't time out and try the fallback update logic
-  await emit<UpdateResponse>(replyEventId, { type: "ack" });
+  await platform.emit(replyEventId, { type: "ack" } satisfies UpdateResponse);
 
   showToast({
     id: UPDATE_TOAST_ID,
@@ -209,10 +207,10 @@ async function showUpdateAvailableToast(updateInfo: UpdateInfo) {
           className="min-w-40"
           loadingChildren={downloaded ? "Installing..." : "Downloading..."}
           onClick={async () => {
-            await emit<UpdateResponse>(replyEventId, {
+            await platform.emit(replyEventId, {
               type: "action",
               action: "install",
-            });
+            } satisfies UpdateResponse);
           }}
         >
           {downloaded ? "Install Now" : "Download and Install"}
@@ -223,7 +221,7 @@ async function showUpdateAvailableToast(updateInfo: UpdateInfo) {
           variant="border"
           rightSlot={<Icon icon="external_link" />}
           onClick={async () => {
-            await openUrl(`https://yaak.app/changelog/${version}`);
+            await platform.openUrl(`https://yaak.app/changelog/${version}`);
           }}
         >
           What&apos;s New
@@ -304,7 +302,7 @@ function showNotificationToast(n: YaakNotification) {
       </VStack>
     ),
     onClose: () => {
-      invokeCmd("cmd_dismiss_notification", { notificationId: n.id }).catch(console.error);
+      rpc("cmd_dismiss_notification", { notificationId: n.id }).catch(console.error);
     },
     action: ({ hide }) => {
       return actionLabel && actionUrl ? (
@@ -315,7 +313,7 @@ function showNotificationToast(n: YaakNotification) {
           rightSlot={<Icon icon="external_link" />}
           onClick={() => {
             hide();
-            return openUrl(actionUrl);
+            return platform.openUrl(actionUrl);
           }}
         >
           {actionLabel}

apps/yaak-client/lib/largeValue.ts

@@ -1,4 +1,3 @@
-import { save } from "@tauri-apps/plugin-dialog";
 import { Icon } from "@yaakapp-internal/ui";
 import mime from "mime";
 import { createElement } from "react";
@@ -7,8 +6,9 @@ import type { SniffedValue } from "../components/core/Editor/sniffValue";
 import { isEncodedRun } from "../components/core/Editor/sniffValue";
 import { copyToClipboard } from "./copy";
 import { fireAndForget } from "./fireAndForget";
-import { invokeCmd } from "./tauri";
+import { rpc } from "./rpc";
 import { showToast } from "./toast";
+import { platform } from "@yaakapp-internal/platform";
 
 /**
  * How the value is written, which is the thing worth knowing about it — that it is base64
@@ -229,7 +229,7 @@ function toBase64(bytes: Uint8Array): string {
  */
 export async function saveValue(text: string, sniffed: SniffedValue | null, name: string) {
   const ext = sniffed == null ? "txt" : (mime.getExtension(sniffed.mime) ?? "bin");
-  const filepath = await save({ defaultPath: `${name}.${ext}`, title: "Save Value" });
+  const filepath = await platform.dialog.save({ defaultPath: `${name}.${ext}`, title: "Save Value" });
   if (filepath == null) {
     return; // Cancelled
   }
@@ -241,6 +241,6 @@ export async function saveValue(text: string, sniffed: SniffedValue | null, name
         ? normalizeBase64(payloadOf(text, sniffed))
         : toBase64(decodeValue(text, sniffed));
 
-  await invokeCmd("cmd_save_base64_to_binary", { filepath, data });
+  await rpc("cmd_save_base64_to_binary", { filepath, data });
   showToast({ message: `Saved to ${filepath}` });
 }

apps/yaak-client/lib/responseBody.ts

@@ -1,9 +1,15 @@
-import { readFile } from "@tauri-apps/plugin-fs";
 import type { HttpResponse } from "@yaakapp-internal/models";
 import type { FilterResponse } from "@yaakapp-internal/plugins";
 import type { ServerSentEvent, SseSummary } from "@yaakapp-internal/sse";
 import { candidateJsonPayloadsFromSseText, computeSseSummary } from "@yaakapp-internal/sse";
-import { invokeCmd } from "./tauri";
+import { rpc } from "./rpc";
+import { platform } from "@yaakapp-internal/platform";
+
+/**
+ * Reading a response body means naming the response, never the file it lives
+ * in: the backend resolves an id against its own records, so nothing the UI
+ * says can point a read somewhere else.
+ */
 
 export async function getResponseBodyText({
   response,
@@ -12,8 +18,8 @@ export async function getResponseBodyText({
   response: HttpResponse;
   filter: string | null;
 }): Promise<string | null> {
-  const result = await invokeCmd<FilterResponse>("cmd_http_response_body", {
-    response,
+  const result = await rpc<FilterResponse>("cmd_http_response_body", {
+    responseId: response.id,
     filter,
   });
 
@@ -27,10 +33,9 @@ export async function getResponseBodyText({
 export async function getResponseBodyEventSource(
   response: HttpResponse,
 ): Promise<ServerSentEvent[]> {
-  if (!response.bodyPath) return [];
   try {
-    const events = await invokeCmd<ServerSentEvent[]>("cmd_get_sse_events", {
-      filePath: response.bodyPath,
+    const events = await rpc<ServerSentEvent[]>("cmd_get_sse_events", {
+      responseId: response.id,
     });
     if (events.length > 0) {
       return events;
@@ -39,8 +44,9 @@ export async function getResponseBodyEventSource(
     // Fall back to raw JSON frame parsing for non-standard SSE-like responses.
   }
 
-  const bytes = await readFile(response.bodyPath);
-  const text = new TextDecoder("utf-8").decode(bytes);
+  const text = await getResponseBodyDecoded(response);
+  if (text == null) return [];
+
   return candidateJsonPayloadsFromSseText(text).map((data, index) => ({
     data,
     eventType: "",
@@ -53,16 +59,20 @@ export async function getResponseBodySseSummary(
   response: HttpResponse,
   resultKeyPath: string,
 ): Promise<SseSummary> {
-  if (!response.bodyPath) return { fragmentCount: 0, summary: "" };
+  const text = await getResponseBodyDecoded(response);
+  if (text == null) return { fragmentCount: 0, summary: "" };
 
-  const bytes = await readFile(response.bodyPath);
-  const text = new TextDecoder("utf-8").decode(bytes);
   return computeSseSummary(text, resultKeyPath);
 }
 
 export async function getResponseBodyBytes(
   response: HttpResponse,
 ): Promise<Uint8Array<ArrayBuffer> | null> {
-  if (!response.bodyPath) return null;
-  return readFile(response.bodyPath);
+  // A response body is stored under the response's own id
+  return platform.blobs.read(response.id);
+}
+
+async function getResponseBodyDecoded(response: HttpResponse): Promise<string | null> {
+  const bytes = await getResponseBodyBytes(response);
+  return bytes == null ? null : new TextDecoder("utf-8").decode(bytes);
 }