Prevent sync data loss from incomplete tracked files (#725)

Co-authored-by: Zhizhen He <hezhizhen.yi@gmail.com>

.github/dependabot.yml

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

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

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

.github/workflows/release-app.yml

@@ -70,7 +70,7 @@ jobs:
             runtime: "wry"
             targets: "aarch64-pc-windows-msvc"
     runs-on: ${{ matrix.platform }}
-    timeout-minutes: 60
+    timeout-minutes: 360
     steps:
       - name: Checkout yaakapp/app
         uses: actions/checkout@v4
@@ -172,7 +172,8 @@ jobs:
           codesign --force --options runtime --entitlements crates-tauri/yaak-app-client/macos/entitlements.yaakprotoc.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app-client/vendored/protoc/yaakprotoc || true
           codesign --force --options runtime --entitlements crates-tauri/yaak-app-client/macos/entitlements.yaaknode.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app-client/vendored/node/yaaknode || true
 
-      - uses: tauri-apps/tauri-action@v0
+      - name: Build and upload Tauri bundles
+        uses: tauri-apps/tauri-action@v0
         env:
           YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
 
@@ -194,6 +195,8 @@ jobs:
           AZURE_CLIENT_SECRET: ${{ matrix.os == 'windows' && secrets.AZURE_CLIENT_SECRET }}
           AZURE_TENANT_ID: ${{ matrix.os == 'windows' && secrets.AZURE_TENANT_ID }}
         with:
+          # Also retries builds; upload retries alone cannot clean up starter assets.
+          retryAttempts: 3
           tauriScript: "node ../../node_modules/@tauri-apps/cli/tauri.js"
           tagName: "v__VERSION__"
           releaseName: "Release __VERSION__"
@@ -203,6 +206,17 @@ jobs:
           projectPath: ./crates-tauri/yaak-app-client
           args: "${{ matrix.args }}"
 
+      # Snapshot before the per-machine build overwrites the regular NSIS bundle/signature.
+      - name: Snapshot Tauri bundles
+        if: ${{ !cancelled() }}
+        run: node .github/scripts/preserve-release-artifacts.mjs
+        env:
+          RELEASE_TARGET: ${{ matrix.targets }}
+          RELEASE_PLATFORM: ${{ matrix.platform }}
+          RELEASE_RUNTIME: ${{ matrix.runtime }}
+          RELEASE_ARCH: ${{ matrix.yaak_arch }}
+          RELEASE_ARGS: ${{ matrix.args }}
+
       - name: Build and upload CEF tarball from deb (Linux only)
         if: matrix.os == 'ubuntu' && matrix.runtime == 'cef'
         env:
@@ -217,7 +231,13 @@ jobs:
           mkdir -p "$extract_dir"
           dpkg-deb -x "$deb" "$extract_dir"
           tar -C "$extract_dir" -czf "$tarball" .
-          gh release upload "${{ github.ref_name }}" "$tarball" --clobber
+          for attempt in 1 2 3 4; do
+            if gh release upload "$GITHUB_REF_NAME" "$tarball" --clobber; then
+              break
+            fi
+            if [ "$attempt" -eq 4 ]; then exit 1; fi
+            sleep 10
+          done
 
       # Build a per-machine NSIS installer for enterprise deployment (PDQ, SCCM, Intune)
       - name: Build and upload machine-wide installer (Windows only)
@@ -235,6 +255,7 @@ jobs:
           Get-ChildItem -Recurse -Path target -File -Filter "*.exe.sig" | Remove-Item -Force
           Push-Location crates-tauri/yaak-app-client
           npx tauri bundle ${{ matrix.args }} --bundles nsis --config '{"bundle":{"createUpdaterArtifacts":true,"windows":{"nsis":{"installMode":"perMachine"}}}}'
+          if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
           Pop-Location
           $setup = Get-ChildItem -Recurse -Path target -Filter "*setup*.exe" | Select-Object -First 1
           $setupSig = "$($setup.FullName).sig"
@@ -242,5 +263,30 @@ jobs:
           $destSig = "$dest.sig"
           Copy-Item $setup.FullName $dest
           Copy-Item $setupSig $destSig
-          gh release upload "${{ github.ref_name }}" "$dest" --clobber
-          gh release upload "${{ github.ref_name }}" "$destSig" --clobber
+          foreach ($asset in @($dest, $destSig)) {
+            for ($attempt = 1; $attempt -le 4; $attempt++) {
+              gh release upload "$env:GITHUB_REF_NAME" "$asset" --clobber
+              if ($LASTEXITCODE -eq 0) { break }
+              if ($attempt -eq 4) { exit $LASTEXITCODE }
+              Start-Sleep -Seconds 10
+            }
+          }
+
+      - name: Snapshot additional release bundles
+        if: ${{ !cancelled() }}
+        run: node .github/scripts/preserve-release-artifacts.mjs
+        env:
+          RELEASE_TARGET: ${{ matrix.targets }}
+          RELEASE_PLATFORM: ${{ matrix.platform }}
+          RELEASE_RUNTIME: ${{ matrix.runtime }}
+          RELEASE_ARCH: ${{ matrix.yaak_arch }}
+          RELEASE_ARGS: ${{ matrix.args }}
+
+      - name: Retain release bundles for recovery
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: release-${{ github.ref_name }}-${{ matrix.platform }}-${{ matrix.runtime }}-${{ matrix.yaak_arch }}-${{ github.run_id }}-attempt-${{ github.run_attempt }}
+          path: ${{ runner.temp }}/yaak-release-artifacts/
+          retention-days: 7
+          if-no-files-found: warn

.oxfmtrc.json

@@ -3,6 +3,7 @@
   "ignorePatterns": [
     "**/bindings/**",
     "crates/yaak-templates/pkg/**",
-    "apps/yaak-client/routeTree.gen.ts"
+    "apps/yaak-client/routeTree.gen.ts",
+    "plugins/importer-bruno/tests/fixtures/upstream/**"
   ]
 }

Cargo.toml

@@ -29,6 +29,7 @@ members = [
   "crates-proxy/yaak-proxy-lib",
   # Server crates (the browser tier's hosted send executor)
   "crates-server/yaak-web",
+  "crates-server/yaak-playground",
   # CLI crates
   "crates-cli/yaak-cli",
   # Tauri-specific crates
@@ -47,7 +48,14 @@ chrono = "0.4.42"
 hex = "0.4.3"
 keyring = "3.6.3"
 log = "0.4.29"
-reqwest = "0.12.20"
+reqwest = { version = "0.13.5", default-features = false, features = [
+  # reqwest 0.13 switched `default-tls` from native-tls to rustls; keep the
+  # rest of the old default set and stay on native-tls.
+  "charset",
+  "http2",
+  "system-proxy",
+  "native-tls",
+] }
 rustls = { version = "0.23.34", default-features = false }
 rustls-platform-verifier = "0.6.2"
 schemars = { version = "0.8.22", features = ["chrono"] }

Dockerfile.playground

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

Dockerfile.web

@@ -38,7 +38,10 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     ca-certificates libssl3 && rm -rf /var/lib/apt/lists/*
 COPY --from=server /app/target/release/yaak-web /usr/local/bin/yaak-web
 COPY --from=web /app/dist/apps/yaak-client /srv
-ENV YAAK_WEB_BIND=0.0.0.0:8080
+# 0.0.0.0 so the port is reachable from outside the container. PORT is the variable a
+# platform-as-a-service assigns, so a deploy that sets it needs nothing else changed.
+ENV HOST=0.0.0.0
+ENV PORT=8080
 EXPOSE 8080
 USER nobody
 # Overriding the command (dropping --serve) leaves the stateless send executor:

apps/yaak-client/commands/createEnvironment.tsx

@@ -6,11 +6,12 @@ import { showDialog } from "../lib/dialog";
 import { jotaiStore } from "../lib/jotai";
 import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
 
-export const createSubEnvironmentAndActivate = createFastMutation<
-  string | null,
-  unknown,
-  Environment | null
->({
+/**
+ * Prompt for and create a sub-environment of the given base environment, resolving with the new
+ * environment's ID (or null if the dialog was dismissed). This does not change the workspace's
+ * active environment.
+ */
+export const createSubEnvironment = createFastMutation<string | null, unknown, Environment | null>({
   mutationKey: ["create_environment"],
   mutationFn: async (baseEnvironment) => {
     if (baseEnvironment == null) {
@@ -41,6 +42,17 @@ export const createSubEnvironmentAndActivate = createFastMutation<
       });
     });
   },
+});
+
+/** Same as {@link createSubEnvironment}, but also makes the new environment the active one. */
+export const createSubEnvironmentAndActivate = createFastMutation<
+  string | null,
+  unknown,
+  Environment | null
+>({
+  mutationKey: ["create_environment_and_activate"],
+  mutationFn: (baseEnvironment) => createSubEnvironment.mutateAsync(baseEnvironment),
+  disableToastError: true, // Already shown by createSubEnvironment
   onSuccess: async (environmentId) => {
     if (environmentId == null) {
       return; // Was not created

apps/yaak-client/components/CloneGitRepositoryDialog.tsx

@@ -1,12 +1,12 @@
 import { gitClone } from "@yaakapp-internal/git";
 import { Banner, VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
 import { appInfo } from "../lib/appInfo";
 import { CommercialUseBanner } from "./CommercialUseBanner";
 import { showErrorToast } from "../lib/toast";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
 import { promptCredentials } from "./git/credentials";
@@ -29,6 +29,7 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
   const [subdirectory, setSubdirectory] = useState<string>("");
   const [isCloning, setIsCloning] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const formId = useId();
 
   const repoName = extractRepoName(url);
   const sep = getPathSeparator(baseDirectory);
@@ -83,7 +84,7 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
   };
 
   return (
-    <VStack as="form" space={3} alignItems="start" className="pb-3" onSubmit={handleClone}>
+    <VStack as="form" id={formId} space={3} alignItems="start" onSubmit={handleClone}>
       {error && (
         <Banner color="danger" className="w-full">
           {error}
@@ -132,15 +133,17 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
         />
       )}
 
-      <Button
-        type="submit"
-        color="primary"
-        className="w-full mt-3"
-        disabled={!url || !directory || isCloning}
-        isLoading={isCloning}
-      >
-        {isCloning ? "Cloning..." : "Clone Repository"}
-      </Button>
+      <DialogFooter
+        actions={[
+          {
+            label: isCloning ? "Cloning..." : "Clone Repository",
+            color: "primary",
+            form: formId,
+            disabled: !url || !directory || isCloning,
+            isLoading: isCloning,
+          },
+        ]}
+      />
     </VStack>
   );
 }

apps/yaak-client/components/CreateEnvironmentDialog.tsx

@@ -1,10 +1,10 @@
 import { createWorkspaceModel } from "@yaakapp-internal/models";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { useToggle } from "../hooks/useToggle";
 import { ColorIndicator } from "./ColorIndicator";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
 import { ColorPickerWithThemeColors } from "./core/ColorPicker";
+import { DialogFooter } from "./core/Dialog";
 import { Label } from "./core/Label";
 import { PlainInput } from "./core/PlainInput";
 
@@ -18,9 +18,11 @@ export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props)
   const [name, setName] = useState<string>("");
   const [color, setColor] = useState<string | null>(null);
   const [sharable, toggleSharable] = useToggle(false);
+  const formId = useId();
   return (
     <form
-      className="pb-3 flex flex-col gap-3"
+      id={formId}
+      className="flex flex-col gap-3"
       onSubmit={async (e) => {
         e.preventDefault();
         const id = await createWorkspaceModel({
@@ -59,10 +61,17 @@ export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props)
         </Label>
         <ColorPickerWithThemeColors onChange={setColor} color={color} />
       </div>
-      <Button type="submit" color="secondary" className="mt-3">
-        {color != null && <ColorIndicator color={color} />}
-        Create Environment
-      </Button>
+      <DialogFooter
+        inline
+        actions={[
+          {
+            label: "Create Environment",
+            color: "secondary",
+            form: formId,
+            leftSlot: color != null ? <ColorIndicator color={color} /> : undefined,
+          },
+        ]}
+      />
     </form>
   );
 }

apps/yaak-client/components/CreateWorkspaceDialog.tsx

@@ -2,13 +2,13 @@ import { gitMutations } from "@yaakapp-internal/git";
 import type { WorkspaceMeta } from "@yaakapp-internal/models";
 import { createGlobalModel, updateModel } from "@yaakapp-internal/models";
 import { VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { router } from "../lib/router";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
 import { rpc } from "../lib/rpc";
 import { showErrorToast } from "../lib/toast";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";
 import { Label } from "./core/Label";
 import { PlainInput } from "./core/PlainInput";
 import { EncryptionHelp } from "./EncryptionHelp";
@@ -26,12 +26,13 @@ export function CreateWorkspaceDialog({ hide }: Props) {
     initGit?: boolean;
   }>({ filePath: null, initGit: false });
   const [setupEncryption, setSetupEncryption] = useState<boolean>(false);
+  const formId = useId();
   return (
     <VStack
       as="form"
+      id={formId}
       space={3}
       alignItems="start"
-      className="pb-3"
       onSubmit={async (e) => {
         e.preventDefault();
         const workspaceId = await createGlobalModel({ model: "workspace", name });
@@ -89,9 +90,7 @@ export function CreateWorkspaceDialog({ hide }: Props) {
           title="Enable Encryption"
         />
       </div>
-      <Button type="submit" color="primary" className="w-full mt-3">
-        Create Workspace
-      </Button>
+      <DialogFooter actions={[{ label: "Create Workspace", color: "primary", form: formId }]} />
     </VStack>
   );
 }

apps/yaak-client/components/EnvironmentEditDialog.tsx

@@ -4,8 +4,16 @@ import type { TreeHandle, TreeNode, TreeProps } from "@yaakapp-internal/ui";
 import { Banner, Icon, InlineCode, SplitLayout, Tree } from "@yaakapp-internal/ui";
 import { atom, useAtomValue } from "jotai";
 import { atomFamily } from "jotai-family";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { createSubEnvironmentAndActivate } from "../commands/createEnvironment";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { createSubEnvironment } from "../commands/createEnvironment";
 import { activeWorkspaceAtom, activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import {
   environmentsBreakdownAtom,
@@ -40,6 +48,9 @@ interface Props {
 
 type TreeModel = Environment | Workspace;
 
+/** Lets tree row slots create a sub-environment and select it in the editor. */
+const CreateSubEnvironmentContext = createContext<() => Promise<void>>(async () => {});
+
 export function EnvironmentEditDialog({ initialEnvironmentId, setRef }: Props) {
   const { allEnvironments, baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
   const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string | null>(
@@ -115,7 +126,7 @@ function EnvironmentEditDialogSidebar({
   const activeWorkspaceId = useAtomValue(activeWorkspaceIdAtom) ?? "";
   const treeId = `environment.${activeWorkspaceId}.sidebar`;
   const treeRef = useRef<TreeHandle>(null);
-  const { baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
+  const { allEnvironments, baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
 
   // oxlint-disable-next-line react-hooks/exhaustive-deps -- none
   useLayoutEffect(() => {
@@ -124,6 +135,31 @@ function EnvironmentEditDialogSidebar({
     treeRef.current?.focus();
   }, []);
 
+  // A just-created environment to select once it reaches the model store. Selecting it before
+  // then would show a "failed to find" error in the editor, and the tree would drop the
+  // selection of an item it doesn't have yet.
+  const [pendingSelectionId, setPendingSelectionId] = useState<string | null>(null);
+  const tree = useAtomValue(treeAtom);
+  useEffect(() => {
+    if (pendingSelectionId == null) return;
+    if (!allEnvironments.some((e) => e.id === pendingSelectionId)) return;
+
+    setPendingSelectionId(null);
+    setSelectedEnvironmentId(pendingSelectionId);
+
+    // The tree leaves out sub-environments while there are multiple base environments
+    const node = tree == null ? null : findTreeNode(tree, pendingSelectionId);
+    if (node == null) return;
+    if (node.parent != null) {
+      // Expand the parent so the new item is visible to be selected
+      const parentId = node.parent.item.id;
+      jotaiStore.set(collapsedFamily(treeId), (prev) => ({ ...prev, [parentId]: false }));
+    }
+    // Wait a frame so the tree's own pending selection fixups, which may have been scheduled
+    // before the new item arrived, don't reset this selection
+    requestAnimationFrame(() => treeRef.current?.selectItem(pendingSelectionId));
+  }, [allEnvironments, pendingSelectionId, setSelectedEnvironmentId, tree, treeId]);
+
   const handleDeleteEnvironment = useCallback(
     async (environment: Environment) => {
       await deleteModelWithConfirm(environment);
@@ -134,6 +170,14 @@ function EnvironmentEditDialogSidebar({
     [baseEnvironment?.id, selectedEnvironmentId, setSelectedEnvironmentId],
   );
 
+  const handleCreateSubEnvironment = useCallback(async () => {
+    const { baseEnvironment } = jotaiStore.get(environmentsBreakdownAtom);
+    if (baseEnvironment == null) return;
+    const id = await createSubEnvironment.mutateAsync(baseEnvironment);
+    // Show the new environment in the editor without changing the workspace's active environment
+    if (id != null) setPendingSelectionId(id);
+  }, []);
+
   const treeHasFocus = useCallback(() => treeRef.current?.hasFocus() ?? false, []);
 
   const getSelectedTreeModels = useCallback(
@@ -195,13 +239,14 @@ function EnvironmentEditDialogSidebar({
       const addEnvironmentItem: DropdownItem = {
         label: "Create Sub Environment",
         leftSlot: <Icon icon="plus" />,
-        onSelect: async () => {
-          await createSubEnvironment();
-        },
+        onSelect: handleCreateSubEnvironment,
       };
+      // Sub-environments aren't shown while there are multiple base environments, same as the
+      // plus button on the base environment row
+      const canCreateSubEnvironment = baseEnvironments.length <= 1;
 
       if (environment == null || environment.model !== "environment") {
-        return [addEnvironmentItem];
+        return canCreateSubEnvironment ? [addEnvironmentItem] : [];
       }
 
       const singleEnvironment = items.length === 1;
@@ -257,7 +302,7 @@ function EnvironmentEditDialogSidebar({
       ];
 
       // Add sub environment to base environment
-      if (isBaseEnvironment(environment) && singleEnvironment) {
+      if (isBaseEnvironment(environment) && singleEnvironment && canCreateSubEnvironment) {
         menuItems.push({ type: "separator" });
         menuItems.push(addEnvironmentItem);
       }
@@ -266,6 +311,7 @@ function EnvironmentEditDialogSidebar({
     },
     [
       baseEnvironments.length,
+      handleCreateSubEnvironment,
       handleDeleteEnvironment,
       handleDuplicateSelected,
       handleRenameSelected,
@@ -317,34 +363,37 @@ function EnvironmentEditDialogSidebar({
   );
 
   const renderContextMenuFn = useCallback<NonNullable<TreeProps<TreeModel>["renderContextMenu"]>>(
-    ({ items, position, onClose }) => (
-      <ContextMenu items={items as DropdownItem[]} triggerPosition={position} onClose={onClose} />
-    ),
+    ({ items, position, onClose }) =>
+      // Right-clicking empty space has nothing to offer while there are multiple base environments
+      items.length === 0 ? null : (
+        <ContextMenu items={items as DropdownItem[]} triggerPosition={position} onClose={onClose} />
+      ),
     [],
   );
 
-  const tree = useAtomValue(treeAtom);
   return (
     <aside className="x-theme-sidebar h-full w-full min-w-0 grid overflow-y-auto border-r border-border-subtle ">
       {tree != null && (
-        <div className="pt-2">
-          <Tree
-            ref={treeRef}
-            treeId={treeId}
-            collapsedAtom={collapsedFamily(treeId)}
-            className="px-2 pb-10"
-            root={tree}
-            getContextMenu={getContextMenu}
-            renderContextMenu={renderContextMenuFn}
-            onDragEnd={handleDragEnd}
-            getItemKey={(i) => `${i.id}::${i.name}`}
-            ItemLeftSlotInner={ItemLeftSlotInner}
-            ItemRightSlot={ItemRightSlot}
-            ItemInner={ItemInner}
-            onActivate={handleActivate}
-            getEditOptions={getEditOptions}
-          />
-        </div>
+        <CreateSubEnvironmentContext.Provider value={handleCreateSubEnvironment}>
+          <div className="pt-2">
+            <Tree
+              ref={treeRef}
+              treeId={treeId}
+              collapsedAtom={collapsedFamily(treeId)}
+              className="px-2 pb-10"
+              root={tree}
+              getContextMenu={getContextMenu}
+              renderContextMenu={renderContextMenuFn}
+              onDragEnd={handleDragEnd}
+              getItemKey={(i) => `${i.id}::${i.name}`}
+              ItemLeftSlotInner={ItemLeftSlotInner}
+              ItemRightSlot={ItemRightSlot}
+              ItemInner={ItemInner}
+              onActivate={handleActivate}
+              getEditOptions={getEditOptions}
+            />
+          </div>
+        </CreateSubEnvironmentContext.Provider>
       )}
     </aside>
   );
@@ -384,6 +433,15 @@ const treeAtom = atom<TreeNode<TreeModel> | null>((get) => {
   return root;
 });
 
+function findTreeNode(node: TreeNode<TreeModel>, id: string): TreeNode<TreeModel> | null {
+  if (node.item.id === id) return node;
+  for (const child of node.children ?? []) {
+    const found = findTreeNode(child, id);
+    if (found != null) return found;
+  }
+  return null;
+}
+
 function ItemLeftSlotInner({ item }: { item: TreeModel }) {
   const { baseEnvironments } = useEnvironmentsBreakdown();
   return baseEnvironments.length > 1 ? (
@@ -395,6 +453,7 @@ function ItemLeftSlotInner({ item }: { item: TreeModel }) {
 
 function ItemRightSlot({ item }: { item: TreeModel }) {
   const { baseEnvironments } = useEnvironmentsBreakdown();
+  const handleCreateSubEnvironment = useContext(CreateSubEnvironmentContext);
   return (
     <>
       {item.model === "environment" && baseEnvironments.length <= 1 && isBaseEnvironment(item) && (
@@ -405,7 +464,7 @@ function ItemRightSlot({ item }: { item: TreeModel }) {
           icon="plus_circle"
           className="opacity-50 hover:opacity-100"
           title="Add Sub-Environment"
-          onClick={createSubEnvironment}
+          onClick={handleCreateSubEnvironment}
         />
       )}
     </>
@@ -425,13 +484,6 @@ function ItemInner({ item }: { item: TreeModel }) {
   );
 }
 
-async function createSubEnvironment() {
-  const { baseEnvironment } = jotaiStore.get(environmentsBreakdownAtom);
-  if (baseEnvironment == null) return;
-  const id = await createSubEnvironmentAndActivate.mutateAsync(baseEnvironment);
-  return id;
-}
-
 function getEditOptions(item: TreeModel) {
   const options: ReturnType<NonNullable<TreeProps<TreeModel>["getEditOptions"]>> = {
     defaultValue: item.name,

apps/yaak-client/components/ExportDataDialog.tsx

@@ -1,6 +1,6 @@
 import type { Workspace } from "@yaakapp-internal/models";
 import { workspacesAtom } from "@yaakapp-internal/models";
-import { HStack, VStack } from "@yaakapp-internal/ui";
+import { VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useCallback, useMemo, useState } from "react";
 import slugify from "slugify";
@@ -8,9 +8,9 @@ import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { pluralizeCount } from "../lib/pluralize";
 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 { DialogFooter } from "./core/Dialog";
 import { Link } from "./core/Link";
 import { platform } from "@yaakapp-internal/platform";
 
@@ -65,29 +65,30 @@ 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 platform.dialog.save({
-      title: "Export Data",
-      defaultPath: `yaak.${slug}.json`,
-    });
-    if (exportPath == null) {
-      return;
-    }
-
-    await rpc("cmd_export_data", {
+    const document = await rpc<string>("cmd_export_data", {
       workspaceIds: ids,
-      exportPath,
       includePrivateEnvironments: includePrivateEnvironments,
     });
+
+    const savedTo = await platform.files.save(
+      `yaak.${slug}.json`,
+      new TextEncoder().encode(document),
+      [{ name: "JSON", extensions: ["json"] }],
+    );
+    if (savedTo == null) {
+      return; // Cancelled
+    }
+
     onHide();
-    onSuccess(exportPath);
+    onSuccess(savedTo);
   }, [includePrivateEnvironments, onHide, onSuccess, selectedWorkspaces, workspaces]);
 
   const allSelected = workspaces.every((w) => selectedWorkspaces[w.id]);
   const numSelected = Object.values(selectedWorkspaces).filter(Boolean).length;
   const noneSelected = numSelected === 0;
   return (
-    <div className="h-full w-full grid grid-rows-[minmax(0,1fr)_auto] overflow-hidden rounded-b-lg">
-      <VStack space={3} className="overflow-auto px-5 pb-6">
+    <>
+      <VStack space={3} className="pb-4">
         <CommercialUseBanner source="data-export" title="Exporting work data?" />
 
         <table className="w-full mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
@@ -140,29 +141,22 @@ function ExportDataDialogContent({
           />
         </DetailsBanner>
       </VStack>
-      <footer className="px-5 grid grid-cols-[1fr_auto] items-center bg-surface py-3 border-t border-border-subtle">
-        <div>
+      <DialogFooter
+        leftSlot={
           <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtlest">
             Create Run Button
           </Link>
-        </div>
-        <HStack space={2} justifyContent="end">
-          <Button size="sm" className="focus" variant="border" onClick={onHide}>
-            Cancel
-          </Button>
-          <Button
-            size="sm"
-            type="submit"
-            className="focus"
-            color="primary"
-            disabled={noneSelected}
-            onClick={() => handleExport()}
-          >
-            Export{" "}
-            {pluralizeCount("Workspace", numSelected, { omitSingle: true, noneWord: "Nothing" })}
-          </Button>
-        </HStack>
-      </footer>
-    </div>
+        }
+        actions={[
+          { label: "Cancel", onClick: onHide },
+          {
+            label: `Export ${pluralizeCount("Workspace", numSelected, { omitSingle: true, noneWord: "Nothing" })}`,
+            color: "primary",
+            disabled: noneSelected,
+            onClick: () => handleExport(),
+          },
+        ]}
+      />
+    </>
   );
 }

apps/yaak-client/components/GlobalHooks.tsx

@@ -1,3 +1,4 @@
+import type { NavigateWorkspace } from "@yaakapp-internal/tauri-client";
 import { activeRequestAtom } from "../hooks/useActiveRequest";
 import { useSubscribeActiveWorkspaceId } from "../hooks/useActiveWorkspace";
 import { useActiveWorkspaceChangedToast } from "../hooks/useActiveWorkspaceChangedToast";
@@ -5,10 +6,13 @@ import { useHotKey, useSubscribeHotKeys } from "../hooks/useHotKey";
 import { useSubscribeHttpAuthentication } from "../hooks/useHttpAuthentication";
 import { useSyncFontSizeSetting } from "../hooks/useSyncFontSizeSetting";
 import { useSyncWorkspaceChildModels } from "../hooks/useSyncWorkspaceChildModels";
+import { usePlatformEvent } from "../hooks/usePlatformEvent";
 import { useSyncZoomSetting } from "../hooks/useSyncZoomSetting";
 import { useSubscribeTemplateFunctions } from "../hooks/useTemplateFunctions";
+import { fireAndForget } from "../lib/fireAndForget";
 import { jotaiStore } from "../lib/jotai";
 import { renameModelWithPrompt } from "../lib/renameModelWithPrompt";
+import { router } from "../lib/router";
 
 export function GlobalHooks() {
   useSyncZoomSetting();
@@ -24,6 +28,20 @@ export function GlobalHooks() {
   useActiveWorkspaceChangedToast();
   useSubscribeHotKeys();
 
+  usePlatformEvent("show_home", () => {
+    fireAndForget(router.navigate({ to: "/", search: { home: true } }));
+  });
+
+  usePlatformEvent<NavigateWorkspace>("navigate_workspace", ({ workspaceId, environmentId }) => {
+    fireAndForget(
+      router.navigate({
+        to: "/workspaces/$workspaceId",
+        params: { workspaceId },
+        search: { environment_id: environmentId },
+      }),
+    );
+  });
+
   useHotKey(
     "request.rename",
     async () => {

apps/yaak-client/components/GrpcEditor.tsx

@@ -239,6 +239,7 @@ export function GrpcEditor({
                 showDialog({
                   title: "Configure Schema",
                   size: "md",
+                  className: "h-[30rem]",
                   id: "grpc-configure-schema",
                   render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
                 });

apps/yaak-client/components/GrpcProtoSelectionDialog.tsx

@@ -1,11 +1,11 @@
 import type { GrpcRequest } from "@yaakapp-internal/models";
-import { Banner, HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { Banner, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useActiveRequest } from "../hooks/useActiveRequest";
 import { useGrpc } from "../hooks/useGrpc";
 import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
 import { pluralizeCount } from "../lib/pluralize";
-import { Button } from "./core/Button";
-import { IconButton } from "./core/IconButton";
+import { DialogFooter } from "./core/Dialog";
+import { PathList } from "./core/PathList";
 import { Link } from "./core/Link";
 import { platform } from "@yaakapp-internal/platform";
 
@@ -20,7 +20,10 @@ export function GrpcProtoSelectionDialog(props: Props) {
   return <GrpcProtoSelectionDialogWithRequest request={request} {...props} />;
 }
 
-function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: GrpcRequest }) {
+function GrpcProtoSelectionDialogWithRequest({
+  request,
+  onDone,
+}: Props & { request: GrpcRequest }) {
   const protoFilesKv = useGrpcProtoFiles(request.id);
   const protoFiles = protoFilesKv.value ?? [];
   const grpc = useGrpc(request, null, protoFiles);
@@ -38,54 +41,8 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
   }
 
   return (
-    <VStack className="flex-col-reverse mb-3" space={3}>
-      {/* Buttons on top so they get focus first */}
-      <HStack space={2} justifyContent="start" className="flex-row-reverse mt-3">
-        <Button
-          color="primary"
-          variant="border"
-          onClick={async () => {
-            const selected = await platform.dialog.open({
-              title: "Select Proto Files",
-              multiple: true,
-              filters: [{ name: "Proto Files", extensions: ["proto"] }],
-            });
-            if (selected == null) return;
-
-            const newFiles = selected.filter((p) => !protoFiles.includes(p));
-            await protoFilesKv.set([...protoFiles, ...newFiles]);
-            await grpc.reflect.refetch();
-          }}
-        >
-          Add Proto Files
-        </Button>
-        <Button
-          variant="border"
-          color="primary"
-          onClick={async () => {
-            const selected = await platform.dialog.open({
-              title: "Select Proto Directory",
-              directory: true,
-            });
-            if (selected == null) return;
-
-            await protoFilesKv.set([...protoFiles.filter((f) => f !== selected), selected]);
-            await grpc.reflect.refetch();
-          }}
-        >
-          Add Import Folders
-        </Button>
-        <Button
-          isLoading={grpc.reflect.isFetching}
-          disabled={grpc.reflect.isFetching}
-          variant="border"
-          color="secondary"
-          onClick={() => grpc.reflect.refetch()}
-        >
-          Refresh Schema
-        </Button>
-      </HStack>
-      <VStack space={5}>
+    <>
+      <VStack space={5} className="pb-4">
         {reflectError && (
           <Banner color="warning">
             <h1 className="font-bold">
@@ -128,46 +85,47 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
           </Banner>
         )}
 
-        {protoFiles.length > 0 && (
-          <table className="w-full divide-y divide-surface-highlight">
-            <thead>
-              <tr>
-                <th className="text-text-subtlest" colSpan={3}>
-                  Added File Paths
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-surface-highlight">
-              {protoFiles.map((f, i) => {
-                const parts = f.split("/");
-                // oxlint-disable-next-line no-array-index-key -- none
-                return (
-                  <tr key={f + i} className="group">
-                    <td>
-                      <Icon icon={f.endsWith(".proto") ? "file_code" : "folder_code"} />
-                    </td>
-                    <td className="pl-1 font-mono text-sm" title={f}>
-                      {parts.length > 3 && ".../"}
-                      {parts.slice(-3).join("/")}
-                    </td>
-                    <td className="w-0 py-0.5">
-                      <IconButton
-                        title="Remove file"
-                        variant="border"
-                        size="xs"
-                        icon="trash"
-                        className="my-0.5 ml-auto opacity-50 transition-opacity group-hover:opacity-100"
-                        onClick={async () => {
-                          await protoFilesKv.set(protoFiles.filter((p) => p !== f));
-                        }}
-                      />
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        )}
+        <PathList
+          items={protoFiles.map((path) => ({
+            path,
+            icon: path.endsWith(".proto") ? "file_code" : "folder_code",
+          }))}
+          onRemove={async (path) => {
+            await protoFilesKv.set(protoFiles.filter((p) => p !== path));
+            await grpc.reflect.refetch();
+          }}
+          addLabel="Add proto files or an import folder"
+          addItems={[
+            {
+              label: "Proto files",
+              icon: "file_code",
+              onSelect: async () => {
+                const selected = await platform.dialog.open({
+                  title: "Select Proto Files",
+                  multiple: true,
+                  filters: [{ name: "Proto Files", extensions: ["proto"] }],
+                });
+                if (selected == null) return;
+                const newFiles = selected.filter((p) => !protoFiles.includes(p));
+                await protoFilesKv.set([...protoFiles, ...newFiles]);
+                await grpc.reflect.refetch();
+              },
+            },
+            {
+              label: "Import folder",
+              icon: "folder_code",
+              onSelect: async () => {
+                const selected = await platform.dialog.open({
+                  title: "Select Proto Directory",
+                  directory: true,
+                });
+                if (selected == null) return;
+                await protoFilesKv.set([...protoFiles.filter((f) => f !== selected), selected]);
+                await grpc.reflect.refetch();
+              },
+            },
+          ]}
+        />
         {reflectionUnimplemented && protoFiles.length === 0 && (
           <Banner>
             <InlineCode>{request.url}</InlineCode> doesn&apos;t implement{" "}
@@ -178,6 +136,17 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
           </Banner>
         )}
       </VStack>
-    </VStack>
+      <DialogFooter
+        actions={[
+          {
+            label: "Refresh Schema",
+            isLoading: grpc.reflect.isFetching,
+            disabled: grpc.reflect.isFetching,
+            onClick: () => grpc.reflect.refetch(),
+          },
+          { label: "Done", color: "primary", onClick: onDone },
+        ]}
+      />
+    </>
   );
 }

apps/yaak-client/components/HeadersEditor.tsx

@@ -9,6 +9,7 @@ import type { HeaderValuePreset } from "../lib/data/headerValuePresets";
 import { headerNames } from "../lib/data/headerNames";
 import { mimeTypes } from "../lib/data/mimetypes";
 import { userAgents } from "../lib/data/userAgents";
+import { validateHttpHeader } from "../lib/validateHttpHeader";
 import { CountBadge } from "./core/CountBadge";
 import { DetailsBanner } from "./core/DetailsBanner";
 import type { GenericCompletion, GenericCompletionConfig } from "./core/Editor/genericCompletion";
@@ -178,13 +179,3 @@ const nameAutocomplete: PairEditorProps["nameAutocomplete"] = {
         },
   ),
 };
-
-const validateHttpHeader = (v: string) => {
-  if (v === "") {
-    return true;
-  }
-
-  // Template strings are not allowed so we replace them with a valid example string
-  const withoutTemplateStrings = v.replace(/\$\{\[\s*[^\]\s]+\s*]}/gi, "123");
-  return withoutTemplateStrings.match(/^[a-zA-Z0-9-_]+$/) !== null;
-};

apps/yaak-client/components/ImportDataDialog.tsx

@@ -1,33 +1,36 @@
 import {
-  type Folder,
   type ImportDestination,
   type ImportPlan,
   type ImportPlanItem,
   type ImportSource,
   type Workspace,
 } from "@yaakapp-internal/models";
-import { Banner, HStack, Icon, type IconProps, InlineCode, VStack } from "@yaakapp-internal/ui";
-import { platform } from "@yaakapp-internal/platform";
+import { Banner, FormattedError, HStack, Icon, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import { formatDistanceToNowStrict } from "date-fns";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { errorMessage } from "../lib/errorMessage";
 import { pluralize } from "../lib/pluralize";
 import { CommercialUseBanner } from "./CommercialUseBanner";
-import { Button } from "./core/Button";
-import { Checkbox } from "./core/Checkbox";
+import {
+  ImportSourceList,
+  type ImportSourceDetection,
+  type ImportSourcePath,
+  InlineButton,
+  toSourcePath,
+} from "./ImportSourceList";
 import type { CheckboxTreeNode } from "./core/CheckboxTree";
 import { CheckboxTree } from "./core/CheckboxTree";
+import { Chip } from "./core/Chip";
+import { DialogFooter } from "./core/Dialog";
 import { IconTooltip } from "./core/IconTooltip";
-import { PlainInput } from "./core/PlainInput";
 import { Select } from "./core/Select";
 import { SegmentedControl } from "./core/SegmentedControl";
 
 interface Props {
   currentWorkspace: Workspace | null;
   workspaces: Workspace[];
-  selectedFolder: Folder | null;
-  planFile: (filePath: string, destination: ImportDestination) => Promise<ImportPlan>;
-  planUrl: (url: string, destination: ImportDestination) => Promise<ImportPlan>;
+  planSources: (sources: ImportSourcePath[], destination: ImportDestination) => Promise<ImportPlan>;
+  detectSource: (source: ImportSourcePath) => Promise<string>;
   listSources: (workspaceId: string) => Promise<ImportSource[]>;
   findSourcesForOrigin: (args: { filePath?: string; url?: string }) => Promise<ImportSource[]>;
   commit: (plan: ImportPlan) => Promise<void>;
@@ -35,25 +38,6 @@ interface Props {
   onError: (err: unknown) => void;
 }
 
-/**
- * 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;
-}
-
 /**
  * Loads the current workspace's linked sources before rendering the dialog, so the inner
  * component can construct its initial state (prefilled path, destination) in one pass instead of
@@ -82,30 +66,19 @@ export function ImportDataDialog(props: Props) {
   return <LoadedImportDataDialog {...props} initialSources={initialSources} />;
 }
 
-function latestSource(sources: ImportSource[]): ImportSource | null {
-  return sources.reduce<ImportSource | null>(
-    (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
-    null,
-  );
-}
-
 function LoadedImportDataDialog({
   currentWorkspace,
   workspaces,
-  selectedFolder,
-  planFile,
-  planUrl,
-  listSources,
+  planSources,
+  detectSource,
   findSourcesForOrigin,
   commit,
   cancel,
   onError,
   initialSources,
 }: Props & { initialSources: ImportSource[] }) {
-  // A workspace with a linked source is probably being re-imported, so start from that source
-  const prefill = latestSource(initialSources);
-
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [sourceError, setSourceError] = useState<unknown>(null);
   const [plan, setPlan] = useState<ImportPlan | null>(null);
   const [items, setItems] = useState<ImportPlanItem[]>([]);
   // null means no explicit choice yet, so the default below applies
@@ -113,65 +86,82 @@ function LoadedImportDataDialog({
     null,
   );
   const [otherWorkspaceId, setOtherWorkspaceId] = useState<string | null>(null);
-  const [targetSelectedFolder, setTargetSelectedFolder] = useState(selectedFolder != null);
-  const [linkedSources, setLinkedSources] = useState<ImportSource[]>(
-    prefill != null ? initialSources : [],
+  const [originSources, setOriginSources] = useState<ImportSource[]>(initialSources);
+  const initialPaths = useMemo(
+    () => [...new Set(initialSources.map((source) => source.origin))].map(toSourcePath),
+    [initialSources],
   );
-  const [originSources, setOriginSources] = useState<ImportSource[]>(
-    prefill != null ? [prefill] : [],
+  const [sources, setSources] = useState<ImportSourcePath[]>(initialPaths);
+  const knownPaths = useRef(new Set(initialPaths.map((source) => source.path)));
+  const [detections, setDetections] = useState<Record<string, ImportSourceDetection>>({});
+  const detect = useCallback(
+    (added: ImportSourcePath[]) => {
+      setDetections((prev) => ({
+        ...prev,
+        ...Object.fromEntries(added.map((s) => [s.path, { status: "loading" as const }])),
+      }));
+      for (const source of added) {
+        const settle = (detection: ImportSourceDetection) =>
+          setDetections((prev) =>
+            source.path in prev ? { ...prev, [source.path]: detection } : prev,
+          );
+        detectSource(source).then(
+          (importer) => settle({ status: "ok", importer }),
+          (err) => settle({ status: "error", message: errorMessage(err) }),
+        );
+      }
+    },
+    [detectSource],
   );
-  // A file path or a URL. Both inputs write here, so there is only ever one thing to import
-  const [source, setSource] = useState<string | null>(prefill?.origin ?? null);
-  const [forceUpdateKey, setForceUpdateKey] = useState<number>(0);
-  const [isHovering, setIsHovering] = useState<boolean>(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const trimmedSource = source?.trim() ?? "";
-  const filePath = isFilePath(trimmedSource) ? trimmedSource : null;
+  const allDetected = sources.every((source) => detections[source.path]?.status === "ok");
+  useEffect(() => {
+    detect(initialPaths);
+  }, [detect, initialPaths]);
 
-  const selectSource = (value: string) => {
-    setSource(value);
-    // Remount the input so it shows the path of the newly-picked file
-    setForceUpdateKey((k) => k + 1);
+  const addSources = useCallback(
+    (added: ImportSourcePath[]) => {
+      setSourceError(null);
+      const fresh = added.filter(({ path }) => {
+        if (knownPaths.current.has(path)) return false;
+        knownPaths.current.add(path);
+        return true;
+      });
+      if (fresh.length === 0) return;
+      setSources((existing) => [...existing, ...fresh]);
+      detect(fresh);
+    },
+    [detect],
+  );
+  const removeSource = (path: string) => {
+    setSourceError(null);
+    knownPaths.current.delete(path);
+    setSources((current) => current.filter((source) => source.path !== path));
+    setDetections(({ [path]: _removed, ...rest }) => rest);
   };
 
-  // Accept a file dropped anywhere on the dialog, the way SelectFile does for its button
   useEffect(() => {
-    return platform.window.onDragDrop((event) => {
-      if (event.type === "over") {
-        const p = event.position;
-        const r = ref.current?.getBoundingClientRect();
-        if (r == null) return;
-        setIsHovering(p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom);
-      } else if (event.type === "drop" && isHovering) {
-        const p = event.paths[0];
-        if (p) selectSource(p);
-        setIsHovering(false);
-      } else {
-        setIsHovering(false);
-      }
-    });
-  }, [isHovering, setSource]);
-
-  useEffect(() => {
-    if (trimmedSource === "") {
+    let cancelled = false;
+    if (sources.length === 0) {
       setOriginSources([]);
       return;
     }
-    let cancelled = false;
-    const timeout = setTimeout(() => {
-      findSourcesForOrigin(filePath != null ? { filePath } : { url: trimmedSource })
-        .then((sources) => {
-          if (!cancelled) setOriginSources(sources);
-        })
-        .catch(() => setOriginSources([]));
-    }, 300);
+    Promise.all(
+      sources.map(({ path, kind }) =>
+        findSourcesForOrigin(kind === "url" ? { url: path } : { filePath: path }),
+      ),
+    )
+      .then((found) => {
+        if (!cancelled) setOriginSources(found.flat());
+      })
+      .catch(() => {
+        if (!cancelled) setOriginSources([]);
+      });
     return () => {
       cancelled = true;
-      clearTimeout(timeout);
     };
-  }, [trimmedSource, filePath, findSourcesForOrigin]);
+  }, [sources, findSourcesForOrigin]);
 
-  // The one workspace this file is linked to, if there is exactly one.
+  // The one workspace these sources are linked to, if there is exactly one.
   const linkedWorkspace = useMemo(() => {
     const ids = [...new Set(originSources.map((s) => s.workspaceId))];
     if (ids.length !== 1) return null;
@@ -193,32 +183,6 @@ function LoadedImportDataDialog({
         ? otherWorkspaceId
         : null;
 
-  useEffect(() => {
-    if (destinationWorkspaceId == null) {
-      setLinkedSources([]);
-      return;
-    }
-    let cancelled = false;
-    listSources(destinationWorkspaceId)
-      .then((sources) => {
-        if (!cancelled) setLinkedSources(sources);
-      })
-      .catch(() => setLinkedSources([]));
-    return () => {
-      cancelled = true;
-    };
-  }, [destinationWorkspaceId, listSources]);
-
-  const handleSelectFile = async () => {
-    const selected = await platform.dialog.open({ title: "Select File", multiple: false });
-    if (selected == null) return;
-    selectSource(selected);
-  };
-
-  // The selected folder belongs to the workspace being viewed, so it is only offerable when that
-  // is also the destination.
-  const canTargetSelectedFolder = selectedFolder != null && destinationKind === "current";
-
   const destination = (): ImportDestination => {
     if (destinationWorkspaceId == null) {
       return { type: "new_workspace" };
@@ -226,21 +190,18 @@ function LoadedImportDataDialog({
     return {
       type: "existing_workspace",
       workspaceId: destinationWorkspaceId,
-      folderId: canTargetSelectedFolder && targetSelectedFolder ? selectedFolder.id : undefined,
     };
   };
 
   const handlePreview = async () => {
     setIsLoading(true);
+    setSourceError(null);
     try {
-      const nextPlan =
-        filePath != null
-          ? await planFile(filePath, destination())
-          : await planUrl(trimmedSource, destination());
+      const nextPlan = await planSources(sources, destination());
       setPlan(nextPlan);
       setItems(nextPlan.items);
     } catch (err) {
-      onError(err);
+      setSourceError(err);
     } finally {
       setIsLoading(false);
     }
@@ -258,8 +219,6 @@ function LoadedImportDataDialog({
     }
   };
 
-  const itemTree = useMemo(() => buildItemTree(items), [items]);
-
   // A folder row's checkbox carries everything beneath it, deletions included — the row labels
   // say which of those are destructive. Checking anything also brings back the folders it needs
   // to live in.
@@ -313,196 +272,215 @@ function LoadedImportDataDialog({
       if (plan.destination.type === "new_workspace") {
         const names = plan.resources.workspaces.map((w) => w.name).filter((n) => n !== "");
         if (names.length === 0) return ["New workspace", "Untitled"];
-        return [pluralize("New workspace", names.length), names.join(", ")];
+        return [
+          names.length === 1 ? "New workspace" : `${names.length} new workspaces`,
+          names.join(", "),
+        ];
       }
-      const { workspaceId, folderId } = plan.destination;
+      const { workspaceId } = plan.destination;
       const name = workspaces.find((w) => w.id === workspaceId)?.name ?? "Unknown workspace";
-      return [
-        "Destination",
-        folderId != null && folderId === selectedFolder?.id
-          ? `${name} / ${selectedFolder.name}`
-          : name,
-      ];
+      return ["Destination", name];
     })();
 
     // The destination workspace roots the tree. It is not a plan item — commit always applies
     // it — so its checkbox only aggregates the subtree.
-    const workspaceRoot: CheckboxTreeNode<TreeRow> = (() => {
-      const planned = plan.resources.workspaces[0];
+    const workspaceRoots: CheckboxTreeNode<TreeRow>[] = (() => {
       const planDestination = plan.destination;
       const existing =
         planDestination.type === "existing_workspace"
           ? workspaces.find((w) => w.id === planDestination.workspaceId)
           : null;
-      return {
-        key: existing?.id ?? planned?.id ?? "workspace",
+      const destinations = existing ? [existing] : plan.resources.workspaces;
+      if (destinations.length === 1) {
+        const workspace = destinations[0]!;
+        return [
+          {
+            key: workspace.id,
+            data: {
+              kind: "destination",
+              label: workspace.name,
+              isNew: planDestination.type === "new_workspace",
+            },
+            children: buildItemTree(items),
+          },
+        ];
+      }
+      const workspaceById = new Map(
+        [
+          ...plan.resources.environments,
+          ...plan.resources.folders,
+          ...plan.resources.httpRequests,
+          ...plan.resources.grpcRequests,
+          ...plan.resources.websocketRequests,
+        ].map((resource) => [resource.id, resource.workspaceId]),
+      );
+      return destinations.map((workspace) => ({
+        key: workspace.id,
         data: {
           kind: "destination",
-          label: existing?.name ?? planned?.name ?? "New workspace",
+          label: workspace.name,
           isNew: planDestination.type === "new_workspace",
         },
-        children: itemTree,
-      };
+        children: buildItemTree(
+          items.filter((item) => workspaceById.get(item.modelId) === workspace.id),
+        ),
+      }));
     })();
 
     return (
-      <VStack space={4} className="pb-4">
-        <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
-          <PreviewRow label="Detected format" value={plan.importer} />
-          <PreviewRow label={destinationLabel} value={destinationValue} />
-        </div>
+      <>
+        <VStack space={4} className="pb-4">
+          <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
+            <PreviewRow label="Detected format" value={plan.importer} />
+            <PreviewRow label={destinationLabel} value={destinationValue} />
+          </div>
 
-        {plan.warnings.map((warning) => (
-          <Banner
-            key={`${warning.title}:${warning.detail}`}
-            color={warning.level === "warning" ? "warning" : "info"}
-            className="flex items-start gap-2.5"
-          >
-            <Icon
-              icon={warning.level === "warning" ? "alert_triangle" : "info"}
-              size="sm"
-              className="mt-0.5"
-            />
-            <div className="min-w-0">
-              <div className="text-sm font-medium">{warning.title}</div>
-              <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
+          {plan.warnings
+            .filter(
+              (warning, index, warnings) =>
+                warnings.findIndex(
+                  (other) =>
+                    other.title === warning.title &&
+                    other.detail === warning.detail &&
+                    other.level === warning.level,
+                ) === index,
+            )
+            .map((warning) => (
+              <Banner
+                key={`${warning.level}:${warning.title}:${warning.detail}`}
+                color={warning.level === "warning" ? "warning" : "info"}
+                className="flex items-start gap-2.5"
+              >
+                <Icon
+                  icon={warning.level === "warning" ? "alert_triangle" : "info"}
+                  size="sm"
+                  className="mt-0.5"
+                />
+                <div className="min-w-0">
+                  <div className="text-sm font-medium">{warning.title}</div>
+                  <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
+                </div>
+              </Banner>
+            ))}
+
+          {workspaceRoots.map((root) => (
+            <div key={root.key} className="rounded-lg border border-border-subtle px-3 py-2">
+              <CheckboxTree
+                node={root}
+                checked={nodeCheckedStatus}
+                onCheck={toggleNode}
+                isCheckboxDisabled={(n) => disabledIds.has(n.key)}
+                isCollapsedByDefault={(n) =>
+                  (n.data.kind === "destination" && workspaceRoots.length > 1) ||
+                  (n.data.kind === "item" && n.data.item.action === "ignored")
+                }
+                isRelevant={(n) =>
+                  n.data.kind === "destination" ||
+                  (n.data.kind === "item" && n.data.item.action !== "unchanged")
+                }
+                renderRow={(n) => (
+                  <ImportTreeRow row={n.data} onResolveConflict={resolveConflict} />
+                )}
+              />
             </div>
-          </Banner>
-        ))}
-
-        <div className="rounded-lg border border-border-subtle px-3 py-2 overflow-y-auto max-h-[40vh]">
-          <CheckboxTree
-            node={workspaceRoot}
-            checked={nodeCheckedStatus}
-            onCheck={toggleNode}
-            isCheckboxDisabled={(n) => disabledIds.has(n.key)}
-            isCollapsedByDefault={(n) => n.data.kind === "item" && n.data.item.action === "ignored"}
-            isRelevant={(n) =>
-              n.data.kind === "destination" ||
-              (n.data.kind === "item" && n.data.item.action !== "unchanged")
-            }
-            renderRow={(n) => <ImportTreeRow row={n.data} onResolveConflict={resolveConflict} />}
-          />
-        </div>
-
-        <HStack space={2} alignItems="center" className="mt-3">
-          {footerNote !== "" && <div className="text-xs text-text-subtle">{footerNote}</div>}
-          <Button
-            className="ml-auto"
-            color="secondary"
-            variant="border"
-            disabled={isLoading}
-            onClick={() => {
-              setPlan(null);
-              setItems([]);
-            }}
-          >
-            Back
-          </Button>
-          <Button color="primary" isLoading={isLoading} onClick={handleCommit}>
-            {isLoading
-              ? "Importing"
-              : changeCount > 0
-                ? `Apply ${changeCount} ${changeCount === 1 ? "Change" : "Changes"}`
-                : "Done"}
-          </Button>
-        </HStack>
-      </VStack>
+          ))}
+        </VStack>
+        <DialogFooter
+          leftSlot={
+            footerNote !== "" ? (
+              <div className="text-xs text-text-subtle">{footerNote}</div>
+            ) : undefined
+          }
+          actions={[
+            {
+              label: "Back",
+              disabled: isLoading,
+              onClick: () => {
+                setPlan(null);
+                setItems([]);
+              },
+            },
+            {
+              label: isLoading
+                ? "Importing"
+                : changeCount > 0
+                  ? `Apply ${changeCount} ${changeCount === 1 ? "Change" : "Changes"}`
+                  : "Done",
+              color: "primary",
+              isLoading,
+              onClick: handleCommit,
+            },
+          ]}
+        />
+      </>
     );
   }
 
-  const lastImported =
-    originSources.find((s) => s.workspaceId === destinationWorkspaceId) ??
-    linkedSources.reduce<ImportSource | null>(
-      (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
-      null,
-    );
-
-  return (
-    <VStack ref={ref} space={4} className="pb-4">
-      <CommercialUseBanner source="data-import" title="Importing work data?" />
-
-      <button
-        type="button"
-        onClick={handleSelectFile}
-        className={classNames(
-          "w-full rounded-lg border border-dashed px-4 py-6",
-          "flex flex-col items-center gap-1 text-center",
-          isHovering
-            ? "border-notice bg-surface-highlight"
-            : "border-border hover:border-text-subtle",
-        )}
-      >
-        <Icon icon="folder_input" className="text-text-subtlest w-8! h-8! mb-2" />
-        {/* Fixed height so the region doesn't resize between the empty and selected states */}
-        <div className="h-6 w-full flex items-center justify-center">
-          {filePath == null ? (
-            <div className="text-text">
-              <strong className="font-semibold">Choose a file</strong> or drag it here
-            </div>
-          ) : (
-            <div className="text-text font-mono text-xs max-w-full truncate" title={filePath}>
-              {fileName(filePath)}
-            </div>
-          )}
-        </div>
-        <div className="text-xs text-text-subtlest">
-          Supports OpenAPI, Swagger, Postman, Insomnia, and curl
-        </div>
-      </button>
-
-      <PlainInput
-        label="Or enter a file path or URL"
+  const destinationPicker = (
+    <HStack
+      space={2}
+      alignItems="center"
+      className={classNames(workspaces.length === 0 && "hidden")}
+    >
+      <Select
+        name="import-destination-kind"
+        label="Import into"
+        labelPosition="left"
         size="sm"
-        placeholder="https://example.com/openapi.json"
-        defaultValue={source ?? ""}
-        forceUpdateKey={String(forceUpdateKey)}
-        onChange={setSource}
+        value={destinationKind}
+        onChange={setDestinationChoice}
+        options={[
+          { value: "new", label: "New Workspace" },
+          ...(currentWorkspace != null
+            ? [{ value: "current" as const, label: "Current Workspace" }]
+            : []),
+          { value: "other", label: "Other Workspace" },
+        ]}
       />
-
-      <VStack space={2}>
+      {destinationKind === "other" && (
         <Select
-          name="import-destination-kind"
-          label="Import location"
+          name="import-destination-workspace"
+          label="Workspace"
+          hideLabel
           size="sm"
-          value={destinationKind}
-          onChange={setDestinationChoice}
+          value={otherWorkspaceId ?? ""}
+          onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
+          filterable
           options={[
-            { value: "new", label: "New Workspace" },
-            ...(currentWorkspace != null
-              ? [{ value: "current" as const, label: "Current Workspace" }]
-              : []),
-            { value: "other", label: "Other Workspace" },
+            { value: "", label: "Select a workspace" },
+            ...workspaces
+              .filter((w) => w.id !== currentWorkspace?.id)
+              .map((w) => ({ value: w.id, label: w.name })),
           ]}
         />
-        {destinationKind === "other" && (
-          <Select
-            name="import-destination-workspace"
-            label="Workspace"
-            hideLabel
-            size="sm"
-            value={otherWorkspaceId ?? ""}
-            onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
-            filterable
-            options={[
-              { value: "", label: "Select a workspace" },
-              ...workspaces
-                .filter((w) => w.id !== currentWorkspace?.id)
-                .map((w) => ({ value: w.id, label: w.name })),
-            ]}
-          />
+      )}
+    </HStack>
+  );
+
+  return (
+    <>
+      <VStack space={4} className="h-full pb-4">
+        <CommercialUseBanner source="data-import" title="Importing work data?" />
+
+        <ImportSourceList
+          sources={sources}
+          detections={detections}
+          disabled={isLoading}
+          onAdd={addSources}
+          onRemove={removeSource}
+          onError={setSourceError}
+        />
+
+        {sourceError != null && (
+          <Banner color="warning">
+            <FormattedError>{errorMessage(sourceError)}</FormattedError>
+          </Banner>
         )}
-        {lastImported != null && destinationWorkspaceId != null ? (
+
+        {linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId && (
           <div className="text-xs text-text-subtle">
-            Last imported from {lastImported.originLabel} ·{" "}
-            {formatDistanceToNowStrict(`${lastImported.lastImportedAt}Z`, { addSuffix: true })}
-          </div>
-        ) : linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId ? (
-          <div className="text-xs text-text-subtle">
-            This file was last imported into{" "}
-            <button
-              type="button"
-              className="underline hocus:text-text"
+            {sources.length === 1 ? "This source was" : "These sources were"} last imported into{" "}
+            <InlineButton
               onClick={() => {
                 if (linkedWorkspace.id === currentWorkspace?.id) {
                   setDestinationChoice("current");
@@ -513,36 +491,28 @@ function LoadedImportDataDialog({
               }}
             >
               {linkedWorkspace.name}
-            </button>
+            </InlineButton>
           </div>
-        ) : null}
-        {canTargetSelectedFolder && (
-          <Checkbox
-            checked={targetSelectedFolder}
-            title={`Place root resources in selected folder “${selectedFolder.name}”`}
-            onChange={setTargetSelectedFolder}
-          />
         )}
       </VStack>
-
-      <HStack space={2} justifyContent="end">
-        <Button color="secondary" variant="border" disabled={isLoading} onClick={cancel}>
-          Cancel
-        </Button>
-        <Button
-          color="primary"
-          disabled={
-            trimmedSource === "" ||
-            isLoading ||
-            (destinationKind === "other" && otherWorkspaceId == null)
-          }
-          isLoading={isLoading}
-          onClick={handlePreview}
-        >
-          {isLoading ? "Analyzing" : "Preview Import"}
-        </Button>
-      </HStack>
-    </VStack>
+      <DialogFooter
+        leftSlot={destinationPicker}
+        actions={[
+          { label: "Cancel", disabled: isLoading, onClick: cancel },
+          {
+            label: isLoading ? "Analyzing" : "Preview Import",
+            color: "primary",
+            disabled:
+              sources.length === 0 ||
+              !allDetected ||
+              isLoading ||
+              (destinationKind === "other" && otherWorkspaceId == null),
+            isLoading,
+            onClick: handlePreview,
+          },
+        ]}
+      />
+    </>
   );
 }
 
@@ -556,10 +526,12 @@ function ImportTreeRow({
   if (row.kind !== "item") {
     return (
       <>
-        <Icon color="secondary" icon={row.kind === "destination" ? "house" : row.icon} />
+        {row.kind === "destination" && (
+          <Icon icon="box" size="sm" className="shrink-0 text-text-subtle" />
+        )}
         <div className="truncate flex-1">{row.label}</div>
         {row.kind === "destination" && row.isNew && (
-          <ActionChip label="new" help="Created by this import" className="text-success" />
+          <ActionChip label="new" help="Created by this import" color="success" />
         )}
       </>
     );
@@ -569,11 +541,6 @@ function ImportTreeRow({
   const label = actionLabel(item);
   return (
     <>
-      {item.model === "folder" || item.model === "environment" ? (
-        <Icon color="secondary" icon={item.model === "folder" ? "folder" : "variable"} />
-      ) : (
-        <span aria-hidden className="w-4" />
-      )}
       <div className="truncate flex-1">{item.name}</div>
       {item.action === "conflict" ? (
         <div className="shrink-0">
@@ -593,17 +560,7 @@ function ImportTreeRow({
         </div>
       ) : (
         label != null && (
-          <ActionChip
-            label={label}
-            help={actionHelp(item)}
-            className={classNames(
-              item.action === "create" && "text-success",
-              item.action === "update" && "text-info",
-              item.action === "delete" && "text-danger",
-              item.action === "keep_local" && item.selected && "text-warning",
-              item.action === "ignored" && "text-text-subtlest",
-            )}
-          />
+          <ActionChip label={label} help={actionHelp(item)} color={actionColor(item)} />
         )
       )}
     </>
@@ -613,26 +570,37 @@ function ImportTreeRow({
 function ActionChip({
   label,
   help,
-  className,
+  color,
 }: {
   label: string;
   help: string | null;
-  className?: string;
+  color: ComponentProps<typeof Chip>["color"];
 }) {
   return (
-    <InlineCode
-      className={classNames(
-        "py-0 bg-transparent w-32 shrink-0 whitespace-nowrap text-xs",
-        "inline-flex items-center justify-center gap-1.5",
-        className,
-      )}
-    >
+    <Chip color={color}>
       {label}
       {help != null && <IconTooltip content={help} iconSize="xs" />}
-    </InlineCode>
+    </Chip>
   );
 }
 
+function actionColor(item: ImportPlanItem): ComponentProps<typeof Chip>["color"] {
+  switch (item.action) {
+    case "create":
+      return "success";
+    case "update":
+      return "info";
+    case "delete":
+      return "danger";
+    case "keep_local":
+      return item.selected ? "warning" : "default";
+    case "unchanged":
+    case "conflict":
+    case "ignored":
+      return "default";
+  }
+}
+
 function actionLabel(item: ImportPlanItem): string | null {
   switch (item.action) {
     case "create":
@@ -701,7 +669,7 @@ function ancestorsOf(item: ImportPlanItem, byId: Map<string, ImportPlanItem>): I
  */
 type TreeRow =
   | { kind: "destination"; label: string; isNew: boolean }
-  | { kind: "group"; label: string; icon: IconProps["icon"] }
+  | { kind: "group"; label: string }
   | { kind: "item"; item: ImportPlanItem };
 
 function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
@@ -743,7 +711,7 @@ function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
   return [
     {
       key: "group:environments",
-      data: { kind: "group", label: "Variables", icon: "variable" },
+      data: { kind: "group", label: "Variables" },
       children: environments.map((e) => toNode(e, new Set())),
     },
     ...nodes,

apps/yaak-client/components/ImportSourceList.tsx

@@ -0,0 +1,271 @@
+import { platform } from "@yaakapp-internal/platform";
+import { Icon, LoadingIcon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
+import { PathList, splitPath } from "./core/PathList";
+import { PlainInput } from "./core/PlainInput";
+
+export interface ImportSourcePath {
+  path: string;
+  kind?: "file" | "folder" | "url";
+}
+
+export type ImportSourceDetection =
+  | { status: "loading" }
+  | { status: "ok"; importer: string }
+  | { status: "error"; message: string };
+
+interface Props {
+  sources: ImportSourcePath[];
+  detections: Record<string, ImportSourceDetection>;
+  disabled?: boolean;
+  onAdd: (sources: ImportSourcePath[]) => void;
+  onRemove: (path: string) => void;
+  onError: (err: unknown) => void;
+}
+
+/** A bare hostname is a URL; local paths need an absolute or explicit relative prefix. */
+export function isImportFilePath(value: string): boolean {
+  return (
+    value.startsWith("/") ||
+    value.startsWith("./") ||
+    value.startsWith("../") ||
+    value.startsWith("~/") ||
+    value.startsWith("\\\\") ||
+    /^[a-zA-Z]:[\\/]/.test(value)
+  );
+}
+
+/** A typed or prefilled path is a URL unless it looks like a local path; kind is left for the host */
+export function toSourcePath(path: string): ImportSourcePath {
+  return { path, kind: isImportFilePath(path) ? undefined : "url" };
+}
+
+export function ImportSourceList({
+  sources,
+  detections,
+  disabled,
+  onAdd,
+  onRemove,
+  onError,
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const [pathInput, setPathInput] = useState("");
+  const [showPathInput, setShowPathInput] = useState(false);
+  const pathInputRef = useRef<{ focus: () => void }>(null);
+  const trimmedPath = pathInput.trim();
+
+  const openPathInput = () => {
+    setShowPathInput(true);
+    // The add-row menu hands focus back to its trigger as it closes, on a timer, so focus after it
+    setTimeout(() => pathInputRef.current?.focus(), 50);
+  };
+
+  const closePathInput = () => {
+    setPathInput("");
+    setShowPathInput(false);
+  };
+
+  const addPath = () => {
+    if (!trimmedPath || disabled) return;
+    onAdd([toSourcePath(trimmedPath)]);
+    closePathInput();
+  };
+
+  useEffect(() => {
+    if (disabled) return;
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "leave") {
+        setIsHovering(false);
+        return;
+      }
+      const rect = ref.current?.getBoundingClientRect();
+      const { x, y } = event.position;
+      const isOver =
+        rect != null && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+      if (event.type === "drop") {
+        if (isOver) onAdd(event.paths.map((path) => ({ path })));
+        setIsHovering(false);
+      } else {
+        setIsHovering(isOver);
+      }
+    });
+  }, [disabled, onAdd]);
+
+  const pick = async (directory: boolean) => {
+    try {
+      const selected = await platform.dialog.open({
+        title: directory ? "Select Import Folder" : "Select Import Files",
+        multiple: true,
+        directory,
+      });
+      if (selected == null) return;
+      onAdd(selected.map((path) => ({ path, kind: directory ? "folder" : "file" })));
+    } catch (err) {
+      onError(err);
+    }
+  };
+
+  const handlePathKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      addPath();
+    } else if (event.key === "Escape") {
+      event.stopPropagation();
+      closePathInput();
+    }
+  };
+
+  const pathInputEl = (
+    <PlainInput
+      ref={pathInputRef}
+      label="URL or file path"
+      hideLabel
+      size="sm"
+      autoFocus
+      disabled={disabled}
+      placeholder="Paste a URL or a file path"
+      onChange={setPathInput}
+      onKeyDownCapture={handlePathKeyDown}
+      rightSlot={
+        <div className="flex items-center gap-1 my-1 mr-1">
+          {trimmedPath !== "" && (
+            <Button size="xs" variant="border" onClick={addPath}>
+              Add
+            </Button>
+          )}
+          <IconButton size="xs" icon="x" title="Cancel" onClick={closePathInput} />
+        </div>
+      }
+    />
+  );
+
+  if (sources.length === 0) {
+    return (
+      <div className="flex-1 flex flex-col gap-2">
+        <div
+          ref={ref}
+          className={classNames(
+            "flex-1 rounded-lg border min-h-28 flex flex-col items-center justify-center gap-2 px-4 py-5 text-center text-text-subtle",
+            isHovering ? "border-notice bg-surface-highlight" : "border-dashed border-border",
+          )}
+        >
+          <Icon icon="folder_input" className="text-text-subtlest w-10! h-10! mb-1" />
+          {isHovering ? (
+            <span>Drop to add</span>
+          ) : (
+            <span>
+              Choose{" "}
+              <InlineButton disabled={disabled} onClick={() => pick(false)}>
+                files
+              </InlineButton>
+              , a{" "}
+              <InlineButton disabled={disabled} onClick={() => pick(true)}>
+                folder
+              </InlineButton>
+              , or a{" "}
+              <InlineButton disabled={disabled} onClick={openPathInput}>
+                URL
+              </InlineButton>
+              , or drag them here
+            </span>
+          )}
+          <span className="text-xs text-text-subtlest">
+            Supports OpenAPI, Swagger, Postman, Insomnia, Bruno, curl, and Yaak exports
+          </span>
+        </div>
+        {showPathInput && pathInputEl}
+      </div>
+    );
+  }
+
+  return (
+    <PathList
+      ref={ref}
+      hovering={isHovering}
+      disabled={disabled}
+      onRemove={onRemove}
+      addLabel="Add files, a folder, or a URL"
+      addHint="or drop them here"
+      addItems={[
+        { label: "Files", icon: "file", onSelect: () => pick(false) },
+        { label: "Folder", icon: "folder", onSelect: () => pick(true) },
+        { label: "URL or file path", icon: "globe", onSelect: openPathInput },
+      ]}
+      items={sources.map((source) => {
+        const detection = detections[source.path];
+        return {
+          path: source.path,
+          icon: sourceIcon(source),
+          failed: detection?.status === "error",
+          subtitle: <DetectionSubtitle path={source.path} detection={detection} />,
+        };
+      })}
+    >
+      {showPathInput && pathInputEl}
+    </PathList>
+  );
+}
+
+function DetectionSubtitle({
+  path,
+  detection,
+}: {
+  path: string;
+  detection: ImportSourceDetection | undefined;
+}) {
+  const { parent } = splitPath(path);
+  if (detection?.status === "loading") {
+    return (
+      <>
+        <LoadingIcon size="xs" />
+        Detecting format
+      </>
+    );
+  }
+  if (detection?.status === "error") return detection.message;
+  return (
+    <>
+      {detection?.status === "ok" && <span>{detection.importer}</span>}
+      {detection?.status === "ok" && parent !== "" && <span>·</span>}
+      {parent !== "" && <span className="truncate font-mono">{parent}</span>}
+    </>
+  );
+}
+
+function sourceIcon({ kind }: ImportSourcePath) {
+  switch (kind) {
+    case "url":
+      return "globe";
+    case "folder":
+      return "folder";
+    case "file":
+      return "file";
+    case undefined:
+      return "import";
+  }
+}
+
+export function InlineButton({
+  children,
+  disabled,
+  onClick,
+}: {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      className="underline decoration-current/40 underline-offset-3 hocus:decoration-current disabled:opacity-disabled"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

apps/yaak-client/components/Onboarding.tsx

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

apps/yaak-client/components/RedirectToLatestWorkspace.tsx

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

apps/yaak-client/components/Sidebar.tsx

@@ -941,10 +941,14 @@ const sidebarTreeAtom = atom<
 
     if (node.children != null) {
       childItems.sort((a, b) => {
-        if (a.sortPriority === b.sortPriority) {
-          return a.updatedAt > b.updatedAt ? 1 : -1;
+        if (a.sortPriority !== b.sortPriority) {
+          return a.sortPriority - b.sortPriority;
         }
-        return a.sortPriority - b.sortPriority;
+        // Keep equal-priority items in a stable order when they are edited.
+        if (a.createdAt !== b.createdAt) {
+          return a.createdAt > b.createdAt ? 1 : -1;
+        }
+        return a.id === b.id ? 0 : a.id > b.id ? 1 : -1;
       });
 
       for (const item of childItems) {

apps/yaak-client/components/SwitchWorkspaceDialog.tsx

@@ -1,11 +1,11 @@
 import type { Workspace } from "@yaakapp-internal/models";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useState } from "react";
 import { switchWorkspace } from "../commands/switchWorkspace";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";
 
 interface Props {
   hide: () => void;
@@ -16,45 +16,33 @@ export function SwitchWorkspaceDialog({ hide, workspace }: Props) {
   const settings = useAtomValue(settingsAtom);
   const [remember, setRemember] = useState<boolean>(false);
 
+  const open = async (inNewWindow: boolean) => {
+    hide();
+    switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow });
+    if (remember) {
+      await patchModel(settings, { openWorkspaceNewWindow: inNewWindow });
+    }
+  };
+
   return (
     <VStack space={3}>
       <p>
         Where would you like to open <InlineCode>{workspace.name}</InlineCode>?
       </p>
-      <HStack space={2} justifyContent="start" className="flex-row-reverse">
-        <Button
-          className="focus"
-          color="primary"
-          onClick={async () => {
-            hide();
-            switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow: false });
-            if (remember) {
-              await patchModel(settings, { openWorkspaceNewWindow: false });
-            }
-          }}
-        >
-          This Window
-        </Button>
-        <Button
-          className="focus"
-          color="secondary"
-          rightSlot={<Icon icon="external_link" />}
-          onClick={async () => {
-            hide();
-            switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow: true });
-            if (remember) {
-              await patchModel(settings, { openWorkspaceNewWindow: true });
-            }
-          }}
-        >
-          New Window
-        </Button>
-      </HStack>
       {settings && (
-        <HStack justifyContent="end">
-          <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
-        </HStack>
+        <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
       )}
+      <DialogFooter
+        inline
+        actions={[
+          {
+            label: "New Window",
+            rightSlot: <Icon icon="external_link" />,
+            onClick: () => open(true),
+          },
+          { label: "This Window", color: "primary", autoFocus: true, onClick: () => open(false) },
+        ]}
+      />
     </VStack>
   );
 }

apps/yaak-client/components/TemplateFunctionDialog.tsx

@@ -11,7 +11,7 @@ import type { FnArg, Tokens } from "@yaakapp-internal/templates";
 import { parseTemplate } from "@yaakapp-internal/templates";
 import { HStack, InlineCode, LoadingIcon, useDebouncedValue } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { useRenderTemplate } from "../hooks/useRenderTemplate";
 import { useTemplateFunctionConfig } from "../hooks/useTemplateFunctionConfig";
@@ -24,7 +24,7 @@ import { showDialog } from "../lib/dialog";
 import { convertTemplateToInsecure } from "../lib/encryption";
 import { jotaiStore } from "../lib/jotai";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
-import { Button } from "./core/Button";
+import { DialogFooter } from "./core/Dialog";
 import { collectArgumentValues } from "./core/Editor/twig/util";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
@@ -91,6 +91,7 @@ function InitializedTemplateFunctionDialog({
   const previewType = ogPreviewType == null ? "live" : ogPreviewType;
   const [showSecretsInPreview, toggleShowSecretsInPreview] = useToggle(false);
   const [argValues, setArgValues] = useState<Record<string, string | boolean>>(initialArgValues);
+  const formId = useId();
 
   const tokens: Tokens = useMemo(() => {
     const argTokens: FnArg[] = Object.keys(argValues).map((name) => ({
@@ -160,13 +161,14 @@ function InitializedTemplateFunctionDialog({
 
   return (
     <form
-      className="grid grid-rows-[minmax(0,1fr)_auto_auto] h-full max-h-[90vh]"
+      id={formId}
+      className="grid grid-rows-[minmax(0,1fr)_auto] h-full"
       onSubmit={(e) => {
         e.preventDefault();
         handleDone();
       }}
     >
-      <div className="overflow-y-auto h-full px-6">
+      <div className="overflow-y-auto h-full">
         {name === "secure" ? (
           <PlainInput
             required
@@ -188,75 +190,71 @@ function InitializedTemplateFunctionDialog({
           />
         )}
       </div>
-      <div className="px-6 border-t border-t-border pt-3 pb-6 bg-surface-highlight w-full flex flex-col gap-4">
-        {previewType !== "none" ? (
-          <div className="w-full grid grid-cols-1 grid-rows-[auto_auto]">
-            <HStack space={0.5}>
-              <HStack className="text-sm text-text-subtle" space={1.5}>
-                Rendered Preview
-                {rendered.isLoading && <LoadingIcon size="xs" />}
-              </HStack>
+      {previewType !== "none" ? (
+        <div className="w-full grid grid-cols-1 grid-rows-[auto_auto] border-t border-t-border pt-3">
+          <HStack space={0.5}>
+            <HStack className="text-sm text-text-subtle" space={1.5}>
+              Rendered Preview
+              {rendered.isLoading && <LoadingIcon size="xs" />}
+            </HStack>
+            <IconButton
+              size="xs"
+              iconSize="sm"
+              icon={showSecretsInPreview ? "lock" : "lock_open"}
+              title={showSecretsInPreview ? "Show preview" : "Hide preview"}
+              onClick={toggleShowSecretsInPreview}
+              className={classNames(
+                "ml-auto text-text-subtlest",
+                !dataContainsSecrets && "invisible",
+              )}
+            />
+          </HStack>
+          <div className="relative w-full max-h-40">
+            <InlineCode
+              className={classNames(
+                "block whitespace-pre-wrap select-text! cursor-text max-h-40 overflow-auto hide-scrollbars border-text-subtlest!",
+                tooLarge && "italic text-danger",
+              )}
+            >
+              {rendered.error || tagText.error ? (
+                <em className="text-danger">
+                  {`${rendered.error || tagText.error}`.replace(/^Render Error: /, "")}
+                </em>
+              ) : dataContainsSecrets && !showSecretsInPreview ? (
+                <span className="italic text-text-subtle">
+                  ------ sensitive values hidden ------
+                </span>
+              ) : tooLarge ? (
+                "too large to preview"
+              ) : (
+                rendered.data || <>&nbsp;</>
+              )}
+            </InlineCode>
+            <div className="absolute right-0.5 top-0 bottom-0 flex items-center">
               <IconButton
                 size="xs"
-                iconSize="sm"
-                icon={showSecretsInPreview ? "lock" : "lock_open"}
-                title={showSecretsInPreview ? "Show preview" : "Hide preview"}
-                onClick={toggleShowSecretsInPreview}
-                className={classNames(
-                  "ml-auto text-text-subtlest",
-                  !dataContainsSecrets && "invisible",
-                )}
+                icon="refresh"
+                className="text-text-subtle"
+                title="Refresh preview"
+                spin={rendered.isPending}
+                onClick={() => {
+                  setRenderKey(new Date().toISOString());
+                }}
               />
-            </HStack>
-            <div className="relative w-full max-h-40">
-              <InlineCode
-                className={classNames(
-                  "block whitespace-pre-wrap select-text! cursor-text max-h-40 overflow-auto hide-scrollbars border-text-subtlest!",
-                  tooLarge && "italic text-danger",
-                )}
-              >
-                {rendered.error || tagText.error ? (
-                  <em className="text-danger">
-                    {`${rendered.error || tagText.error}`.replace(/^Render Error: /, "")}
-                  </em>
-                ) : dataContainsSecrets && !showSecretsInPreview ? (
-                  <span className="italic text-text-subtle">
-                    ------ sensitive values hidden ------
-                  </span>
-                ) : tooLarge ? (
-                  "too large to preview"
-                ) : (
-                  rendered.data || <>&nbsp;</>
-                )}
-              </InlineCode>
-              <div className="absolute right-0.5 top-0 bottom-0 flex items-center">
-                <IconButton
-                  size="xs"
-                  icon="refresh"
-                  className="text-text-subtle"
-                  title="Refresh preview"
-                  spin={rendered.isPending}
-                  onClick={() => {
-                    setRenderKey(new Date().toISOString());
-                  }}
-                />
-              </div>
             </div>
           </div>
-        ) : (
-          <span />
-        )}
-        <div className="flex justify-stretch w-full grow gap-2 *:flex-1">
-          {templateFunction.data.name === "secure" && (
-            <Button variant="border" color="secondary" onClick={setupOrConfigureEncryption}>
-              Reveal Encryption Key
-            </Button>
-          )}
-          <Button type="submit" color="primary">
-            Save
-          </Button>
         </div>
-      </div>
+      ) : (
+        <span />
+      )}
+      <DialogFooter
+        actions={[
+          ...(templateFunction.data.name === "secure"
+            ? [{ label: "Reveal Encryption Key", onClick: setupOrConfigureEncryption }]
+            : []),
+          { label: "Save", color: "primary", form: formId },
+        ]}
+      />
     </form>
   );
 }
@@ -272,7 +270,6 @@ TemplateFunctionDialog.show = (
     id: `template-function-${Math.random()}`, // Allow multiple at once
     size: "md",
     className: "h-240",
-    noPadding: true,
     title: <InlineCode>{fn.name}(…)</InlineCode>,
     description: fn.description,
     render: ({ hide }) => {

apps/yaak-client/components/Workspace.tsx

@@ -40,6 +40,7 @@ import { ErrorBoundary } from "./ErrorBoundary";
 import { FolderLayout } from "./FolderLayout";
 import { GrpcConnectionLayout } from "./GrpcConnectionLayout";
 import { HttpRequestLayout } from "./HttpRequestLayout";
+import { RedirectToLatestWorkspace } from "./RedirectToLatestWorkspace";
 import Sidebar from "./Sidebar";
 import { SidebarActions } from "./SidebarActions";
 import { WebsocketRequestLayout } from "./WebsocketRequestLayout";
@@ -66,9 +67,8 @@ export function Workspace() {
     return { background };
   }, [activeEnvironment?.color]);
 
-  // We're loading still
   if (workspaces.length === 0) {
-    return null;
+    return <RedirectToLatestWorkspace />;
   }
 
   const header = (

apps/yaak-client/components/core/BulkPairEditor.test.ts

@@ -1,5 +1,10 @@
 import { describe, expect, test } from "vite-plus/test";
-import { parseBulkPairLine } from "./BulkPairEditor";
+import {
+  formatBulkPairLine,
+  formatBulkPairs,
+  parseBulkPairLine,
+  parseBulkPairs,
+} from "./BulkPairEditor";
 
 describe("parseBulkPairLine", () => {
   test("parses colon-space pairs as name and value", () => {
@@ -33,4 +38,130 @@ describe("parseBulkPairLine", () => {
       value: "bar\nbaz",
     });
   });
+
+  test("parses commented-out pairs as disabled", () => {
+    expect(parseBulkPairLine("# foo: bar")).toMatchObject({
+      enabled: false,
+      name: "foo",
+      value: "bar",
+    });
+  });
+
+  test("allows any whitespace after the comment marker", () => {
+    expect(parseBulkPairLine("#   foo: bar")).toMatchObject({
+      enabled: false,
+      name: "foo",
+      value: "bar",
+    });
+    expect(parseBulkPairLine("#\tfoo: bar")).toMatchObject({
+      enabled: false,
+      name: "foo",
+      value: "bar",
+    });
+  });
+
+  test("treats a # without whitespace after it as part of the name", () => {
+    expect(parseBulkPairLine("#foo: bar")).toMatchObject({
+      enabled: true,
+      name: "#foo",
+      value: "bar",
+    });
+  });
+
+  test("parses commented-out pairs with an empty value as disabled", () => {
+    expect(parseBulkPairLine("# token:")).toMatchObject({
+      enabled: false,
+      name: "token",
+      value: "",
+    });
+    expect(parseBulkPairLine("# token: ")).toMatchObject({
+      enabled: false,
+      name: "token",
+      value: "",
+    });
+  });
+
+  test("drops comments that are not pairs", () => {
+    expect(parseBulkPairLine("# just a comment")).toBeNull();
+    expect(parseBulkPairLine("# see http://example.com")).toBeNull();
+    expect(parseBulkPairLine("#")).toBeNull();
+  });
+
+  test("leaves values that start with # alone", () => {
+    expect(parseBulkPairLine("color: #fff")).toMatchObject({
+      enabled: true,
+      name: "color",
+      value: "#fff",
+    });
+  });
+});
+
+describe("formatBulkPairLine", () => {
+  test("formats enabled pairs as name and value", () => {
+    expect(formatBulkPairLine({ enabled: true, name: "foo", value: "bar" })).toBe("foo: bar");
+  });
+
+  test("treats pairs without an enabled flag as enabled", () => {
+    expect(formatBulkPairLine({ name: "foo", value: "bar" })).toBe("foo: bar");
+  });
+
+  test("comments out disabled pairs", () => {
+    expect(formatBulkPairLine({ enabled: false, name: "foo", value: "bar" })).toBe("# foo: bar");
+  });
+
+  test("escapes newlines in values", () => {
+    expect(formatBulkPairLine({ enabled: false, name: "foo", value: "a\nb" })).toBe("# foo: a\\nb");
+  });
+});
+
+describe("bulk pair round trip", () => {
+  test("preserves order and enabled state", () => {
+    const pairs = [
+      { enabled: true, name: "host", value: "example.com" },
+      { enabled: false, name: "token", value: "old" },
+      { enabled: true, name: "color", value: "#fff" },
+      { enabled: false, name: "multi", value: "a\nb" },
+      { enabled: true, name: "token", value: "new" },
+    ];
+
+    const text = formatBulkPairs(pairs);
+    expect(text).toBe(
+      ["host: example.com", "# token: old", "color: #fff", "# multi: a\\nb", "token: new"].join(
+        "\n",
+      ),
+    );
+
+    const parsed = parseBulkPairs(text);
+    expect(parsed.map(({ enabled, name, value }) => ({ enabled, name, value }))).toEqual(pairs);
+  });
+
+  test("preserves enabled pairs whose name starts with #", () => {
+    const pairs = [{ enabled: true, name: "#foo", value: "bar" }];
+    const text = formatBulkPairs(pairs);
+    expect(text).toBe("#foo: bar");
+    const parsed = parseBulkPairs(text);
+    expect(parsed.map(({ enabled, name, value }) => ({ enabled, name, value }))).toEqual(pairs);
+  });
+
+  test("preserves disabled pairs whose name starts with #", () => {
+    const pairs = [{ enabled: false, name: "#foo", value: "bar" }];
+    const text = formatBulkPairs(pairs);
+    expect(text).toBe("# #foo: bar");
+    const parsed = parseBulkPairs(text);
+    expect(parsed.map(({ enabled, name, value }) => ({ enabled, name, value }))).toEqual(pairs);
+  });
+
+  test("preserves disabled pairs with empty values", () => {
+    const pairs = [{ enabled: false, name: "token", value: "" }];
+    const parsed = parseBulkPairs(formatBulkPairs(pairs));
+    expect(parsed.map(({ enabled, name, value }) => ({ enabled, name, value }))).toEqual(pairs);
+  });
+
+  test("drops free-text comments and blank lines between pairs", () => {
+    const parsed = parseBulkPairs("# Auth\nfoo: bar\n\n# baz: qux\n# see the docs");
+    expect(parsed.map(({ enabled, name, value }) => ({ enabled, name, value }))).toEqual([
+      { enabled: true, name: "foo", value: "bar" },
+      { enabled: false, name: "baz", value: "qux" },
+    ]);
+  });
 });

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

@@ -14,20 +14,11 @@ export function BulkPairEditor({
   forcedEnvironmentId,
   stateKey,
 }: Props) {
-  const pairsText = useMemo(() => {
-    return pairs
-      .filter((p) => !(p.name.trim() === "" && p.value.trim() === ""))
-      .map(formatBulkPairLine)
-      .join("\n");
-  }, [pairs]);
+  const pairsText = useMemo(() => formatBulkPairs(pairs), [pairs]);
 
   const handleChange = useCallback(
     (text: string) => {
-      const pairs = text
-        .split("\n")
-        .filter((l: string) => l.trim())
-        .map(parseBulkPairLine);
-      onChange(pairs);
+      onChange(parseBulkPairs(text));
     },
     [onChange],
   );
@@ -47,13 +38,57 @@ export function BulkPairEditor({
   );
 }
 
-export function formatBulkPairLine(pair: Pair) {
-  const value = pair.value.replaceAll("\n", "\\n");
-  return `${pair.name}: ${value}`;
+export function formatBulkPairs(pairs: Pair[]): string {
+  return pairs
+    .filter((p) => !(p.name.trim() === "" && p.value.trim() === ""))
+    .map(formatBulkPairLine)
+    .join("\n");
 }
 
-export function parseBulkPairLine(line: string): PairWithId {
-  const [, name, value] = line.match(/^([^:]+):\s+(.*)$/) ?? [];
+export function parseBulkPairs(text: string): PairWithId[] {
+  return text
+    .split("\n")
+    .filter((l: string) => l.trim())
+    .map(parseBulkPairLine)
+    .filter((p) => p != null);
+}
+
+/**
+ * Format a pair as a `name: value` line. Disabled pairs are commented out dotenv-style, as
+ * `# name: value`, so the enabled state survives a round trip through {@link parseBulkPairLine}.
+ */
+export function formatBulkPairLine(pair: Pair) {
+  const value = pair.value.replaceAll("\n", "\\n");
+  const line = `${pair.name}: ${value}`;
+  return pair.enabled === false ? `# ${line}` : line;
+}
+
+const PAIR_REGEX = /^([^:]+):\s+(.*)$/;
+// Commented-out pairs may also end at the colon, so a hand-typed `# name:` isn't dropped
+const COMMENTED_PAIR_REGEX = /^([^:]+):(?:\s+(.*))?$/;
+// A # only marks a comment when followed by whitespace (or nothing), so `#foo: bar` stays an
+// enabled pair named `#foo`
+const COMMENT_PREFIX_REGEX = /^\s*#(?:\s+|$)/;
+
+/**
+ * Parse a `name: value` line into an enabled pair. A line starting with `# ` is a disabled pair
+ * if the rest of it parses as `name: value`, otherwise it's a free-text comment and `null` is
+ * returned so it can be dropped.
+ */
+export function parseBulkPairLine(line: string): PairWithId | null {
+  const commentPrefix = line.match(COMMENT_PREFIX_REGEX);
+  if (commentPrefix != null) {
+    const uncommented = line.slice(commentPrefix[0].length);
+    const match = uncommented.match(COMMENTED_PAIR_REGEX);
+    if (match == null) return null;
+    return { ...pairFromMatch(uncommented, match), enabled: false };
+  }
+
+  return pairFromMatch(line, line.match(PAIR_REGEX));
+}
+
+function pairFromMatch(line: string, match: RegExpMatchArray | null): PairWithId {
+  const [, name, value] = match ?? [];
   return {
     enabled: true,
     name: (name ?? line).trim(),

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

@@ -0,0 +1,32 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+interface Props {
+  color?: Color | "default";
+  className?: string;
+  children: ReactNode;
+}
+
+/** A small tinted label, like a Gmail or Trello label */
+export function Chip({ color = "default", className, children }: Props) {
+  return (
+    <span
+      className={classNames(
+        className,
+        "text-xs font-medium rounded-md px-2 py-0.5 bg-current/10 border border-current/10 shrink-0 whitespace-nowrap",
+        "inline-flex items-center gap-1",
+        color === "default" && "text-text-subtle",
+        color === "primary" && "text-primary",
+        color === "secondary" && "text-secondary",
+        color === "info" && "text-info",
+        color === "success" && "text-success",
+        color === "notice" && "text-notice",
+        color === "warning" && "text-warning",
+        color === "danger" && "text-danger",
+      )}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -1,9 +1,8 @@
 import type { Color } from "@yaakapp-internal/plugins";
-import { HStack } from "@yaakapp-internal/ui";
 import type { FormEvent } from "react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { CopyIconButton } from "../CopyIconButton";
-import { Button } from "./Button";
+import { DialogFooter } from "./Dialog";
 import { PlainInput } from "./PlainInput";
 
 export interface ConfirmProps {
@@ -22,6 +21,7 @@ export function Confirm({
   color = "primary",
 }: ConfirmProps) {
   const [confirm, setConfirm] = useState<string>("");
+  const formId = useId();
   const handleHide = () => {
     onResult(false);
     onHide();
@@ -38,7 +38,7 @@ export function Confirm({
   };
 
   return (
-    <form className="flex flex-col" onSubmit={handleSuccess}>
+    <form id={formId} className="flex flex-col" onSubmit={handleSuccess}>
       {requireTyping && (
         <PlainInput
           autoFocus
@@ -61,14 +61,19 @@ export function Confirm({
           }
         />
       )}
-      <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
-        <Button type="submit" color={color} disabled={!didConfirm}>
-          {confirmText ?? "Confirm"}
-        </Button>
-        <Button onClick={handleHide} variant="border">
-          Cancel
-        </Button>
-      </HStack>
+      <DialogFooter
+        inline
+        actions={[
+          { label: "Cancel", onClick: handleHide },
+          {
+            label: confirmText ?? "Confirm",
+            color,
+            form: formId,
+            disabled: !didConfirm,
+            autoFocus: !requireTyping,
+          },
+        ]}
+      />
     </form>
   );
 }

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

@@ -1,9 +1,11 @@
 import type { DialogSize } from "@yaakapp-internal/plugins";
-import { Heading, Overlay } from "@yaakapp-internal/ui";
+import { Heading, HStack, Overlay } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import * as m from "motion/react-m";
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button, type ButtonProps } from "./Button";
 import { IconButton } from "./IconButton";
 
 export interface DialogProps {
@@ -38,6 +40,7 @@ export function Dialog({
   vAlign = "center",
 }: DialogProps) {
   const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
+  const [footerEl, setFooterEl] = useState<HTMLDivElement | null>(null);
   const descriptionId = useMemo(
     () => (description ? Math.random().toString(36).slice(2) : undefined),
     [description],
@@ -71,7 +74,7 @@ export function Dialog({
           animate={{ top: 0, scale: 1 }}
           className={classNames(
             className,
-            "grid grid-rows-[auto_auto_minmax(0,1fr)]",
+            "grid grid-rows-[auto_auto_minmax(0,1fr)_auto]",
             "grid-cols-1", // must be here for inline code blocks to correctly break words
             "relative bg-surface pointer-events-auto",
             "rounded-lg",
@@ -108,9 +111,11 @@ export function Dialog({
               !noScroll && "overflow-y-auto overflow-x-hidden",
             )}
           >
-            {children}
+            <DialogFooterSlot.Provider value={footerEl}>{children}</DialogFooterSlot.Provider>
           </div>
 
+          <div ref={setFooterEl} className="contents" />
+
           {/*Put close at the end so that it's the last thing to be tabbed to*/}
           {!disableClose && !hideX && (
             <div className="ml-auto absolute right-1 top-1">
@@ -129,3 +134,67 @@ export function Dialog({
     </Overlay>
   );
 }
+
+const DialogFooterSlot = createContext<HTMLDivElement | null>(null);
+
+export interface DialogFooterAction {
+  label: string;
+  onClick?: () => void;
+  /** Submit the form with this id, which can be anywhere in the dialog body */
+  form?: string;
+  color?: ButtonProps["color"];
+  variant?: ButtonProps["variant"];
+  disabled?: boolean;
+  isLoading?: boolean;
+  autoFocus?: boolean;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+}
+
+/**
+ * The action row at the bottom of a dialog. Render it anywhere in the dialog's content and it is
+ * placed below the scrolling body, outside its padding. `inline` drops the divider for small
+ * dialogs whose body never scrolls.
+ */
+export function DialogFooter({
+  actions,
+  leftSlot,
+  inline,
+}: {
+  actions: DialogFooterAction[];
+  leftSlot?: ReactNode;
+  inline?: boolean;
+}) {
+  const slot = useContext(DialogFooterSlot);
+  const footer = (
+    <footer
+      className={classNames(
+        "px-6 flex items-center gap-3",
+        inline ? "pt-1 pb-4" : "py-3 border-t border-border-subtle",
+      )}
+    >
+      {leftSlot != null && <div className="mr-auto min-w-0">{leftSlot}</div>}
+      <HStack space={2} justifyContent="end" className="ml-auto shrink-0">
+        {actions.map((action, i) => (
+          <Button
+            // Labels change with state ("Cloning...", "Apply 3 Changes"), so they can't be keys
+            key={i}
+            type={action.form != null ? "submit" : "button"}
+            form={action.form}
+            color={action.color ?? "secondary"}
+            variant={action.variant ?? (action.color == null ? "border" : "solid")}
+            disabled={action.disabled}
+            isLoading={action.isLoading}
+            autoFocus={action.autoFocus}
+            leftSlot={action.leftSlot}
+            rightSlot={action.rightSlot}
+            onClick={action.onClick}
+          >
+            {action.label}
+          </Button>
+        ))}
+      </HStack>
+    </footer>
+  );
+  return slot == null ? footer : createPortal(footer, slot);
+}

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

@@ -442,7 +442,21 @@ function EditorInner({
           ? EditorState.fromJSON(cachedJsonState, config, stateFields)
           : EditorState.create(config);
 
-        const view = new EditorView({ state, parent: container });
+        // PERF: Built detached and attached in a microtask, rather than passing `parent` and
+        // letting the constructor attach it first.
+        //
+        // The constructor sets `contenteditable` on the content element and then reads
+        // `document.fonts.ready`. Both force the browser to flush style and layout when the
+        // element is already in the document, and whatever the previous editor attached has
+        // just dirtied it again — so mounting n editors in one commit costs n forced layouts.
+        // The environment editor mounts two per variable row (~60 of them), which is where its
+        // half-second open went.
+        //
+        // Building detached moves that work off the live document, and deferring the attach to
+        // a microtask means every editor in the commit is built before any of them is inserted:
+        // one forced layout for the batch instead of one each. The microtask still runs before
+        // paint, so nothing is visible in the meantime.
+        const view = new EditorView({ state });
 
         // For large documents, the parser may parse the max number of lines and fail to add
         // things like fold markers because of it.
@@ -450,12 +464,26 @@ function EditorInner({
         forceParsing(view, 9e6, 100);
 
         cm.current = { view, languageCompartment };
-        if (autoFocus) {
-          view.focus();
-        }
-        if (autoSelect) {
-          view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
-        }
+        queueMicrotask(() => {
+          // The editor was torn down (or replaced) before we got here
+          if (cm.current?.view !== view) return;
+
+          // Runs after the surrounding try/catch has returned, so it needs its own
+          try {
+            container.appendChild(view.dom);
+            // Everything the constructor measured, it measured detached
+            view.requestMeasure();
+
+            if (autoFocus) {
+              view.focus();
+            }
+            if (autoSelect) {
+              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
+            }
+          } catch (e) {
+            console.log("Failed to attach Codemirror", e);
+          }
+        });
         setRef?.(view);
       } catch (e) {
         console.log("Failed to initialize Codemirror", e);

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

@@ -0,0 +1,46 @@
+import type { EditorView } from "@codemirror/view";
+import { describe, expect, test } from "vite-plus/test";
+import { jsonParseLinter } from "./json-lint";
+
+// The linter only reads the document text off the view
+function view(doc: string): EditorView {
+  return { state: { doc: { toString: () => doc } } } as EditorView;
+}
+
+const lint = jsonParseLinter();
+
+describe("jsonParseLinter", () => {
+  test("reports nothing for an empty document", () => {
+    expect(lint(view("  "))).toEqual([]);
+  });
+
+  test("reports nothing for valid JSON", () => {
+    expect(lint(view('{"a": 1}'))).toEqual([]);
+  });
+
+  test("reports a message for invalid JSON", () => {
+    expect(lint(view('{"a": }'))).toHaveLength(1);
+  });
+
+  test("ignores a template tag standing in for a value", () => {
+    expect(lint(view('{"a": "${[ my_var ]}"}'))).toEqual([]);
+  });
+
+  test("ignores a tag whose quoted argument contains `]}`", () => {
+    expect(lint(view(`{"a": "\${[ fn(arg='x]}y') ]}"}`))).toEqual([]);
+  });
+
+  test("ignores a tag whose quoted argument contains an escaped quote", () => {
+    expect(lint(view(`{"a": "\${[ fn(arg='it\\'s ]}') ]}"}`))).toEqual([]);
+  });
+
+  test("still reports errors around a tag with a quoted `]}`", () => {
+    expect(lint(view(`{"a": "\${[ fn(arg='x]}y') ]}",}`))).toHaveLength(1);
+  });
+
+  test("keeps the tag's length so error offsets stay correct", () => {
+    const doc = `{"a" "\${[ fn(arg='x]}y') ]}"}`;
+    const [error] = lint(view(doc));
+    expect(error?.from).toEqual(doc.indexOf('"${['));
+  });
+});

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

@@ -1,8 +1,7 @@
 import type { Diagnostic } from "@codemirror/lint";
 import type { EditorView } from "@codemirror/view";
 import { type ParseError, parse, printParseErrorCode } from "jsonc-parser";
-
-const TEMPLATE_SYNTAX_REGEX = /\$\{\[[\s\S]*?]}/g;
+import { replaceTemplateTags } from "../../../lib/templateTags";
 
 // jsonc-parser reports error codes, so these are the words the editor shows for them
 const MESSAGES: Record<string, string> = {
@@ -32,9 +31,11 @@ interface JsonLintOptions {
 export function jsonParseLinter(options?: JsonLintOptions) {
   return (view: EditorView): Diagnostic[] => {
     const doc = view.state.doc.toString();
+    if (doc.trim() === "") return [];
+
     // We need lint to not break on stuff like {"foo:" ${[ ... ]}} so we'll replace all template
     // syntax with repeating `1` characters, so it's valid JSON and the position is still correct.
-    const escapedDoc = doc.replace(TEMPLATE_SYNTAX_REGEX, (m) => "1".repeat(m.length));
+    const escapedDoc = replaceTemplateTags(doc, (m) => "1".repeat(m.end - m.start));
 
     const errors: ParseError[] = [];
     parse(escapedDoc, errors, {

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

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

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

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

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

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

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

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

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

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

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

@@ -4,4 +4,6 @@ export const highlight = styleTags({
   TagOpen: t.bracket,
   TagClose: t.bracket,
   TagContent: t.keyword,
+  // Strings are part of the tag body, so they get the same color as the rest of it
+  TagString: t.keyword,
 });

apps/yaak-client/components/core/Editor/twig/twig.grammar

@@ -1,13 +1,17 @@
 @top Template { (Tag | Text)* }
 
+// `TagString` keeps a quoted argument from closing the tag, so `${[ fn(a='x]}y') ]}` stays a
+// single Tag. Only a terminated string matches, so a half-typed `'` degrades to TagContent and
+// the tag still closes at the next `]}`.
 @local tokens {
   TagClose { "]}" }
+  TagString { "'" (![\\'] | "\\" _)* "'" }
   @else TagContent
 }
 
 @skip { } {
   TagOpen { "${[" }
-  Tag { TagOpen (TagContent)+ TagClose }
+  Tag { TagOpen (TagContent | TagString)+ TagClose }
 }
 
 @tokens {

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

@@ -3,5 +3,6 @@ export const Template = 1,
   Tag = 2,
   TagOpen = 3,
   TagContent = 4,
-  TagClose = 5,
-  Text = 6;
+  TagString = 5,
+  TagClose = 6,
+  Text = 7;

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

@@ -23,6 +23,10 @@ function hasError(input: string): boolean {
   return getNodeNames(input).includes("⚠");
 }
 
+function countTags(input: string): number {
+  return getNodeNames(input).filter((n) => n === "Tag").length;
+}
+
 describe("twig grammar", () => {
   describe("${[var]} format (valid template tags)", () => {
     test("parses simple variable as Tag", () => {
@@ -83,6 +87,50 @@ describe("twig grammar", () => {
     });
   });
 
+  describe("quoted strings inside tags", () => {
+    test("keeps a quoted `]}` inside the tag", () => {
+      const input = "${[ fn(a='x]}y') ]}";
+      expect(countTags(input)).toBe(1);
+      expect(hasError(input)).toBe(false);
+    });
+
+    test("keeps an escaped quote inside the string", () => {
+      const input = "${[ fn(a='it\\'s ]}') ]}";
+      expect(countTags(input)).toBe(1);
+      expect(hasError(input)).toBe(false);
+    });
+
+    test("parses a b64 string as one Tag", () => {
+      const input = "${[ b64'Zm9v' ]}";
+      expect(countTags(input)).toBe(1);
+      expect(hasError(input)).toBe(false);
+    });
+
+    test("closes at the first `]}` when a quote is left unterminated", () => {
+      // Half-typed strings must not swallow the rest of the document
+      const input = "${[ fn(a='unterminated ]} after";
+      expect(countTags(input)).toBe(1);
+      expect(hasError(input)).toBe(false);
+      const tag = parser.parse(input).topNode.getChild("Tag");
+      expect(input.slice(tag?.from ?? 0, tag?.to ?? 0)).toBe("${[ fn(a='unterminated ]}");
+    });
+
+    test("handles two tags with quoted `]}` in the same string", () => {
+      const input = "${[ a(x='1]}') ]} and ${[ b(y='2]}') ]}";
+      expect(countTags(input)).toBe(2);
+      expect(hasError(input)).toBe(false);
+    });
+
+    test("keeps JSON around a tag with a quoted `]}` intact", () => {
+      const tag = "${[ fn(a='x]}y') ]}";
+      const json = '{"a": "' + tag + '"}';
+      expect(countTags(json)).toBe(1);
+      expect(hasError(json)).toBe(false);
+      const node = parser.parse(json).topNode.getChild("Tag");
+      expect(json.slice(node?.from ?? 0, node?.to ?? 0)).toBe(tag);
+    });
+  });
+
   describe("edge cases", () => {
     test("handles $ at end of string", () => {
       expect(hasError("hello$")).toBe(false);

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

@@ -4,17 +4,24 @@ import { highlight } from "./highlight";
 export const parser = LRParser.deserialize({
   version: 14,
   states:
-    "!^QQOPOOOOOO'#C_'#C_OYOQO'#C^OOOO'#Cc'#CcQQOPOOOOOO'#Cd'#CdO_OQO,58xOOOO-E6a-E6aOOOO-E6b-E6bOOOO1G.d1G.d",
-  stateData: "g~OUROYPO~OSTO~OSTOTXO~O",
-  goto: "nXPPY^PPPbhTROSTQOSQSORVSQUQRWU",
-  nodeNames: "⚠ Template Tag TagOpen TagContent TagClose Text",
-  maxTerm: 10,
+    "!^QQOPOOOOOO'#C_'#C_OYOQO'#C^OOOO'#Cd'#CdQQOPOOOOOO'#Ce'#CeObOQO,58xOOOO-E6b-E6bOOOO-E6c-E6cOOOO1G.d1G.d",
+  stateData: "m~OVROZPO~OSTOTTO~OSTOTTOUXO~O",
+  goto: "oYPPZ_PPPPciTROSTQOSQSORVSQUQRWU",
+  nodeNames: "⚠ Template Tag TagOpen TagContent TagString TagClose Text",
+  maxTerm: 11,
   propSources: [highlight],
   skippedNodes: [0],
   repeatNodeCount: 2,
   tokenData:
-    "#{~RTOtbtu!zu;'Sb;'S;=`!o<%lOb~gTU~Otbtuvu;'Sb;'S;=`!o<%lOb~yVO#ob#o#p!`#p;'Sb;'S;=`!o<%l~b~Ob~~!u~!cSO!}b#O;'Sb;'S;=`!o<%lOb~!rP;=`<%lb~!zOU~~!}VO#ob#o#p#d#p;'Sb;'S;=`!o<%l~b~Ob~~!u~#gTO!}b!}#O#v#O;'Sb;'S;=`!o<%lOb~#{OY~",
-  tokenizers: [1, new LocalTokenGroup("b~RP#P#QU~XP#q#r[~aOT~~", 17, 4)],
+    "#{~RTOtbtu!zu;'Sb;'S;=`!o<%lOb~gTV~Otbtuvu;'Sb;'S;=`!o<%lOb~yVO#ob#o#p!`#p;'Sb;'S;=`!o<%l~b~Ob~~!u~!cSO!}b#O;'Sb;'S;=`!o<%lOb~!rP;=`<%lb~!zOV~~!}VO#ob#o#p#d#p;'Sb;'S;=`!o<%l~b~Ob~~!u~#gTO!}b!}#O#v#O;'Sb;'S;=`!o<%lOb~#{OZ~",
+  tokenizers: [
+    1,
+    new LocalTokenGroup(
+      "#R~RQwxX#P#Q!u~[VOwXwxqx#OX#O#Pv#P;'SX;'S;=`!o<%lOX~vOT~~yRO;'SX;'S;=`!S;=`OX~!VWOwXwxqx#OX#O#Pv#P;'SX;'S;=`!o;=`<%lX<%lOX~!rP;=`<%lX~!xP#q#r!{~#QOU~~",
+      94,
+      4,
+    ),
+  ],
   topRules: { Template: [0, 1] },
   tokenPrec: 0,
 });

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

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

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

@@ -0,0 +1,124 @@
+import { Icon, type IconProps } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { forwardRef, type ReactNode } from "react";
+import { Dropdown, type DropdownItem } from "./Dropdown";
+import { IconButton } from "./IconButton";
+
+export interface PathListItem {
+  path: string;
+  icon: IconProps["icon"];
+  /** Replaces the parent-path line under the name */
+  subtitle?: ReactNode;
+  failed?: boolean;
+}
+
+interface Props {
+  items: PathListItem[];
+  disabled?: boolean;
+  onRemove: (path: string) => void;
+  addItems: DropdownItem[];
+  addLabel: string;
+  addHint?: string;
+  hovering?: boolean;
+  /** Rows rendered between the items and the add row, such as an inline input */
+  children?: ReactNode;
+}
+
+/** Selected files, folders, or URLs as cards, with a dashed add row that opens a menu. */
+export const PathList = forwardRef<HTMLDivElement, Props>(function PathList(
+  { items, disabled, onRemove, addItems, addLabel, addHint, hovering, children },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        "flex flex-col gap-1.5 rounded-lg -m-1.5 p-1.5",
+        hovering && "bg-surface-highlight",
+      )}
+    >
+      {items.map((item) => {
+        const { name, parent } = splitPath(item.path);
+        return (
+          <div
+            key={item.path}
+            className={classNames(
+              "flex items-center gap-3 rounded-md pl-3 pr-1.5 py-2",
+              item.failed ? "bg-danger/10" : "bg-surface-highlight/50",
+            )}
+          >
+            <Icon
+              icon={item.icon}
+              className={classNames("shrink-0", item.failed ? "text-danger" : "text-text-subtle")}
+            />
+            <div className="min-w-0 flex-1" title={item.path}>
+              <div className="truncate text-sm font-semibold">{name}</div>
+              <div
+                className={classNames(
+                  "flex items-center gap-1.5 truncate text-xs",
+                  item.failed ? "text-danger" : "text-text-subtlest",
+                )}
+              >
+                {item.subtitle ??
+                  (parent !== "" && <span className="truncate font-mono">{parent}</span>)}
+              </div>
+            </div>
+            <IconButton
+              size="xs"
+              icon="trash"
+              iconColor="secondary"
+              title={`Remove ${name}`}
+              disabled={disabled}
+              className="shrink-0"
+              onClick={() => onRemove(item.path)}
+            />
+          </div>
+        );
+      })}
+      {children}
+      <Dropdown items={addItems}>
+        <button
+          type="button"
+          disabled={disabled}
+          className={classNames(
+            "h-sm w-full flex items-center gap-2 rounded-md border border-dashed px-3 text-sm text-text-subtle",
+            "hocus:border-border-focus hocus:text-text disabled:opacity-disabled",
+            hovering ? "border-notice" : "border-border",
+          )}
+        >
+          <Icon icon="plus" size="sm" className="text-text-subtlest" />
+          {hovering ? (
+            "Drop to add"
+          ) : (
+            <>
+              <span>{addLabel}</span>
+              {addHint != null && (
+                <span className="ml-auto text-xs text-text-subtlest">{addHint}</span>
+              )}
+            </>
+          )}
+        </button>
+      </Dropdown>
+    </div>
+  );
+});
+
+/** The last segment as the name and everything before it, shortened, as the parent. */
+export function splitPath(path: string): { name: string; parent: string } {
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(path)) {
+    try {
+      const url = new URL(path);
+      const segments = url.pathname.split("/").filter(Boolean);
+      const name = segments.at(-1) ?? url.host;
+      const parent = segments.length > 0 ? `${url.host}/${segments.slice(0, -1).join("/")}` : "";
+      return { name, parent: parent.replace(/\/$/, "") };
+    } catch {
+      return { name: path, parent: "" };
+    }
+  }
+  const parts = path.split(/[/\\]/).filter(Boolean);
+  const name = parts.at(-1) ?? path;
+  const dirs = parts.slice(0, -1);
+  const parent = dirs.length > 3 ? `…/${dirs.slice(-3).join("/")}` : dirs.join("/");
+  return { name, parent };
+}

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

@@ -1,10 +1,9 @@
 import type { FormInput, JsonPrimitive } from "@yaakapp-internal/plugins";
-import { HStack } from "@yaakapp-internal/ui";
 import type { FormEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { generateId } from "../../lib/generateId";
 import { DynamicForm } from "../DynamicForm";
-import { Button } from "./Button";
+import { DialogFooter } from "./Dialog";
 
 export interface PromptProps {
   inputs: FormInput[];
@@ -48,19 +47,15 @@ export function Prompt({
   const id = `prompt.form.${useRef(generateId()).current}`;
 
   return (
-    <form
-      className="grid grid-rows-[auto_auto] grid-cols-[minmax(0,1fr)] gap-4 mb-4"
-      onSubmit={handleSubmit}
-    >
+    <form id={id} className="grid grid-cols-[minmax(0,1fr)] mb-2" onSubmit={handleSubmit}>
       <DynamicForm inputs={inputs} onChange={setValue} data={value} stateKey={id} />
-      <HStack space={2} justifyContent="end">
-        <Button onClick={onCancel} variant="border" color="secondary">
-          {cancelText || "Cancel"}
-        </Button>
-        <Button type="submit" color="primary">
-          {confirmText || "Done"}
-        </Button>
-      </HStack>
+      <DialogFooter
+        inline
+        actions={[
+          { label: cancelText || "Cancel", onClick: onCancel },
+          { label: confirmText || "Done", color: "primary", form: id },
+        ]}
+      />
     </form>
   );
 }

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

@@ -1,43 +0,0 @@
-import { HStack, VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
-import { Button } from "../core/Button";
-import { Select } from "../core/Select";
-
-interface Props {
-  branches: string[];
-  onCancel: () => void;
-  onSelect: (branch: string) => void;
-  selectText: string;
-}
-
-export function BranchSelectionDialog({ branches, onCancel, onSelect, selectText }: Props) {
-  const [branch, setBranch] = useState<string>("__NONE__");
-  return (
-    <VStack
-      className="mb-4"
-      as="form"
-      space={4}
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSelect(branch);
-      }}
-    >
-      <Select
-        name="branch"
-        hideLabel
-        label="Branch"
-        value={branch}
-        options={branches.map((b) => ({ label: b, value: b }))}
-        onChange={setBranch}
-      />
-      <HStack space={2} justifyContent="end">
-        <Button onClick={onCancel} variant="border" color="secondary">
-          Cancel
-        </Button>
-        <Button type="submit" color="primary">
-          {selectText}
-        </Button>
-      </HStack>
-    </VStack>
-  );
-}

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

@@ -1,4 +1,4 @@
-import type { GitStatusEntry } from "@yaakapp-internal/git";
+import type { GitStatus, GitStatusEntry } from "@yaakapp-internal/git";
 import { useGit } from "@yaakapp-internal/git";
 import type {
   Environment,
@@ -9,8 +9,7 @@ import type {
   Workspace,
 } from "@yaakapp-internal/models";
 import { Banner, HStack, Icon, InlineCode, SplitLayout } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { useCallback, useMemo, useState } from "react";
+import { type ComponentProps, useCallback, useMemo, useState } from "react";
 import { modelToYaml } from "../../lib/diffYaml";
 import { trackFeatureUsage } from "../../lib/featureFeedback";
 import { resolvedModelName } from "../../lib/resolvedModelName";
@@ -19,6 +18,7 @@ import { showErrorToast } from "../../lib/toast";
 import { sync } from "../../init/sync";
 import { CommercialUseBanner } from "../CommercialUseBanner";
 import { Button } from "../core/Button";
+import { Chip } from "../core/Chip";
 import type { CheckboxProps } from "../core/Checkbox";
 import { Checkbox } from "../core/Checkbox";
 import type { CheckboxTreeNode } from "../core/CheckboxTree";
@@ -333,16 +333,7 @@ function CommitTreeRow({ node }: { node: CommitTreeNode }) {
       )}
       <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
       {node.status.status !== "current" && (
-        <InlineCode
-          className={classNames(
-            "py-0 bg-transparent w-24 text-center shrink-0",
-            node.status.status === "modified" && "text-info",
-            node.status.status === "untracked" && "text-success",
-            node.status.status === "removed" && "text-danger",
-          )}
-        >
-          {node.status.status}
-        </InlineCode>
+        <Chip color={statusColor(node.status.status)}>{node.status.status}</Chip>
       )}
     </>
   );
@@ -376,16 +367,9 @@ function ExternalTreeNode({
         <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
           <Icon color="secondary" icon="file_code" />
           <div className="truncate">{displayPath}</div>
-          <InlineCode
-            className={classNames(
-              "py-0 ml-auto bg-transparent w-24 text-center",
-              entry.status === "modified" && "text-info",
-              entry.status === "untracked" && "text-success",
-              entry.status === "removed" && "text-danger",
-            )}
-          >
+          <Chip className="ml-auto" color={statusColor(entry.status)}>
             {entry.status}
-          </InlineCode>
+          </Chip>
         </div>
       }
     />
@@ -479,3 +463,20 @@ function DiffPanel({
     </div>
   );
 }
+
+function statusColor(status: GitStatus): ComponentProps<typeof Chip>["color"] {
+  switch (status) {
+    case "modified":
+      return "info";
+    case "untracked":
+      return "success";
+    case "removed":
+      return "danger";
+    case "conflict":
+      return "warning";
+    case "current":
+    case "renamed":
+    case "type_change":
+      return "default";
+  }
+}

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

@@ -1,8 +1,8 @@
 import type { DivergedStrategy } from "@yaakapp-internal/git";
-import { HStack, InlineCode } from "@yaakapp-internal/ui";
+import { InlineCode } from "@yaakapp-internal/ui";
 import { useState } from "react";
 import { showDialog } from "../../lib/dialog";
-import { Button } from "../core/Button";
+import { DialogFooter } from "../core/Dialog";
 import { RadioCards } from "../core/RadioCards";
 
 type Resolution = "force_reset" | "merge";
@@ -34,7 +34,7 @@ function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProp
   };
 
   return (
-    <div className="flex flex-col gap-4 mb-4">
+    <div className="flex flex-col gap-4">
       <p className="text-text-subtle">
         Your local branch has diverged from{" "}
         <InlineCode>
@@ -59,18 +59,18 @@ function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProp
           },
         ]}
       />
-      <HStack space={2} justifyContent="start" className="flex-row-reverse">
-        <Button
-          color={selected === "force_reset" ? "danger" : "primary"}
-          disabled={selected == null}
-          onClick={handleSubmit}
-        >
-          {selected != null ? resolutionLabel[selected] : "Select an option"}
-        </Button>
-        <Button variant="border" onClick={handleCancel}>
-          Cancel
-        </Button>
-      </HStack>
+      <DialogFooter
+        inline
+        actions={[
+          { label: "Cancel", onClick: handleCancel },
+          {
+            label: selected != null ? resolutionLabel[selected] : "Select an option",
+            color: selected === "force_reset" ? "danger" : "primary",
+            disabled: selected == null,
+            onClick: handleSubmit,
+          },
+        ]}
+      />
     </div>
   );
 }

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

@@ -3,18 +3,13 @@ import "react-pdf/dist/Page/AnnotationLayer.css";
 import "./PdfViewer.css";
 import type { PDFDocumentProxy } from "pdfjs-dist";
 import { useMemo, useRef, useState } from "react";
-import { Document, Page } from "react-pdf";
+import { Document, Page, pdfjs } from "react-pdf";
 import { useContainerSize } from "@yaakapp-internal/ui";
-import { fireAndForget } from "../../lib/fireAndForget";
+import pdfWorkerUrl from "./pdfWorker?worker&url";
 
-fireAndForget(
-  import("react-pdf").then(({ pdfjs }) => {
-    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-      "pdfjs-dist/build/pdf.worker.min.mjs",
-      import.meta.url,
-    ).toString();
-  }),
-);
+// Document can start loading during render, so configure its worker synchronously.
+// Vite bundles the installed PDF.js worker as a local asset, including offline builds.
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(pdfWorkerUrl, import.meta.url).toString();
 
 interface Props {
   /** A URL for the body the host already stored. */
@@ -59,6 +54,8 @@ export function PdfViewer({ bodyUrl, data }: Props) {
   return (
     <div ref={containerRef} className="w-full h-full overflow-y-auto">
       <Document
+        // Keep the copied data stable: suspending the initial mount discards useMemo.
+        suspense={false}
         file={src}
         options={options}
         onLoadSuccess={onDocumentLoadSuccess}

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

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

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

@@ -1,18 +1,18 @@
 import type { ReactNode } from "react";
-import { Children, useCallback, useMemo } from "react";
-import { Banner, HStack, Icon, InlineCode } from "@yaakapp-internal/ui";
+import { Children, useCallback, useMemo, useState } from "react";
 import { useFormatText } from "../../hooks/useFormatText";
 import type { ResponseFilterApi } from "../../hooks/useResponseFilter";
-import { Button } from "../core/Button";
 import type { EditorProps } from "../core/Editor/Editor";
+import { jsonBreadcrumbExtension } from "../core/Editor/json/breadcrumbExtension";
+import type { JsonPathSegment } from "../core/Editor/json/jsonPath";
+import { jsonPathToSegments, segmentsToJsonPath } from "../core/Editor/json/jsonPath";
 import { hyperlink } from "../core/Editor/hyperlink/extension";
 import { Editor } from "../core/Editor/LazyEditor";
 import { IconButton } from "../core/IconButton";
 import { Input } from "../core/Input";
+import { ResponseBreadcrumbBar } from "./ResponseBreadcrumbBar";
 import { RecentFiltersDropdown } from "./RecentFiltersDropdown";
 
-const extraExtensions = [hyperlink];
-
 interface Props {
   text: string;
   language: EditorProps["language"];
@@ -38,12 +38,43 @@ export function TextViewer({
   filter,
   filterResult,
 }: Props) {
+  // Track the JSON path under the cursor to drive the breadcrumb bar. Selection
+  // works even in this read-only editor, so it updates as the user clicks around.
+  const [breadcrumbSegments, setBreadcrumbSegments] = useState<JsonPathSegment[]>([]);
+  const handleBreadcrumbUpdate = useCallback(
+    ({ segments }: { segments: JsonPathSegment[] | null }) =>
+      setBreadcrumbSegments((prev) => {
+        const next = segments ?? [];
+        return segmentsToJsonPath(prev) === segmentsToJsonPath(next) ? prev : next;
+      }),
+    [],
+  );
+  const extraExtensions = useMemo(
+    () =>
+      language === "json"
+        ? [hyperlink, jsonBreadcrumbExtension(handleBreadcrumbUpdate)]
+        : [hyperlink],
+    [language, handleBreadcrumbUpdate],
+  );
+
   const canFilter =
     filter != null && (language === "json" || language === "xml" || language === "html");
   const isSearching = filter?.isSearching ?? false;
   const appliedFilter = filter?.appliedFilter ?? null;
   const resultError = filterResult?.error ?? false;
 
+  // Filter output is always an array of matches, so under a plain-path filter the
+  // cursor's leading index is that single match and the rest extends the filter.
+  const appliedSegments =
+    appliedFilter != null && language === "json" ? jsonPathToSegments(appliedFilter) : null;
+  const pathSegments =
+    appliedSegments != null
+      ? [...appliedSegments, ...breadcrumbSegments.slice(1)]
+      : breadcrumbSegments;
+  const showBreadcrumbs =
+    filter != null &&
+    (appliedFilter != null || (language === "json" && breadcrumbSegments.length > 0));
+
   const handleFilterKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (filter == null) return;
@@ -155,16 +186,7 @@ export function TextViewer({
   }
 
   return (
-    <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 />
-      )}
+    <div className="relative h-full w-full">
       <Editor
         readOnly
         className={className}
@@ -174,45 +196,23 @@ export function TextViewer({
         extraExtensions={extraExtensions}
         stateKey={stateKey}
       />
+      {showBreadcrumbs && (
+        <div className="absolute top-0 right-3 max-w-[70%] pointer-events-none">
+          <ResponseBreadcrumbBar
+            segments={language === "json" ? pathSegments : []}
+            appliedFilter={appliedFilter}
+            appliedDepth={appliedSegments?.length ?? null}
+            filterError={resultError}
+            onSelect={(count) =>
+              filter.replaceFilter(count === 0 ? "" : segmentsToJsonPath(pathSegments, count))
+            }
+          />
+        </div>
+      )}
     </div>
   );
 }
 
-/**
- * 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>
-  );
-}
-
 /** Convert \uXXXX to actual Unicode characters */
 function decodeUnicodeLiterals(text: string): string {
   return text.replace(/\\u([0-9a-fA-F]{4})/g, (_, hex) => {

apps/yaak-client/components/responseViewers/pdfWorker.ts

@@ -0,0 +1,3 @@
+// The worker has its own globals, so it needs the polyfills before PDF.js evaluates
+import "../../polyfills";
+import "pdfjs-dist/build/pdf.worker.min.mjs";

apps/yaak-client/hooks/useExportData.tsx

@@ -23,7 +23,6 @@ export function useExportData() {
         id: "export-data",
         title: "Export Data",
         size: "md",
-        noPadding: true,
         render: ({ hide }) => (
           <ExportDataDialog
             onHide={hide}

apps/yaak-client/hooks/useSendAnyHttpRequest.test.ts

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+const mocks = vi.hoisted(() => ({
+  platform: { httpProxyUrl: "https://web.yaak.test" as string | null },
+  showConfirm: vi.fn<() => Promise<boolean>>(),
+  flushAllModelWrites: vi.fn(),
+  rpc: vi.fn(),
+}));
+
+vi.mock("@yaakapp-internal/platform", () => ({ platform: mocks.platform }));
+vi.mock("@yaakapp-internal/models", () => ({ flushAllModelWrites: mocks.flushAllModelWrites }));
+vi.mock("../lib/confirm", () => ({ showConfirm: mocks.showConfirm }));
+vi.mock("../lib/appInfo", () => ({ appInfo: { identifier: "app.yaak.web" } }));
+vi.mock("../lib/rpc", () => ({ rpc: mocks.rpc }));
+vi.mock("../lib/toast", () => ({ showToast: vi.fn() }));
+vi.mock("./useActiveCookieJar", () => ({ getActiveCookieJar: () => ({ id: "cj_test" }) }));
+vi.mock("./useActiveEnvironment", () => ({ getActiveEnvironment: () => ({ id: "ev_test" }) }));
+
+async function sender() {
+  return (await import("./useSendAnyHttpRequest")).sendAnyHttpRequest;
+}
+
+describe("web proxy confirmation before sending", () => {
+  let stored: Map<string, string>;
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+    mocks.platform.httpProxyUrl = "https://web.yaak.test";
+    mocks.rpc.mockResolvedValue({ id: "rs_test" });
+    stored = new Map();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => stored.get(key) ?? null,
+      setItem: (key: string, value: string) => stored.set(key, value),
+    });
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  test("blocks all pending sends until one shared confirmation is accepted", async () => {
+    let decide!: (accepted: boolean) => void;
+    mocks.showConfirm.mockReturnValue(
+      new Promise((resolve) => {
+        decide = resolve;
+      }),
+    );
+    const send = await sender();
+    const first = send.mutateAsync("rq_one");
+    const second = send.mutateAsync("rq_two");
+
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.flushAllModelWrites).not.toHaveBeenCalled();
+    expect(mocks.rpc).not.toHaveBeenCalled();
+    decide(true);
+    await Promise.all([first, second]);
+
+    expect(mocks.rpc).toHaveBeenCalledTimes(2);
+    expect(mocks.rpc).toHaveBeenCalledWith("cmd_send_http_request", {
+      requestId: "rq_one",
+      environmentId: "ev_test",
+      cookieJarId: "cj_test",
+    });
+    expect(stored.size).toBe(1);
+  });
+
+  test("cancel sends nothing, remembers nothing, and asks again next time", async () => {
+    mocks.showConfirm.mockResolvedValue(false);
+    const send = await sender();
+    expect(await send.mutateAsync("rq_one")).toBeNull();
+    expect(await send.mutateAsync("rq_one")).toBeNull();
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(2);
+    expect(mocks.flushAllModelWrites).not.toHaveBeenCalled();
+    expect(mocks.rpc).not.toHaveBeenCalled();
+    expect(stored.size).toBe(0);
+  });
+
+  test("cancel applies to every send waiting on the dialog", async () => {
+    mocks.showConfirm.mockResolvedValue(false);
+    const send = await sender();
+    expect(await Promise.all([send.mutateAsync("rq_one"), send.mutateAsync("rq_two")])).toEqual([
+      null,
+      null,
+    ]);
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.rpc).not.toHaveBeenCalled();
+  });
+
+  test("remembers acceptance across module reloads for the same proxy", async () => {
+    mocks.showConfirm.mockResolvedValue(true);
+    await (await sender()).mutateAsync("rq_one");
+    vi.resetModules();
+    await (await sender()).mutateAsync("rq_two");
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.rpc).toHaveBeenCalledTimes(2);
+  });
+
+  test("requires a new decision when the proxy changes", async () => {
+    mocks.showConfirm.mockResolvedValueOnce(true).mockResolvedValueOnce(false);
+    const send = await sender();
+    await send.mutateAsync("rq_one");
+    mocks.platform.httpProxyUrl = "https://another-proxy.test";
+    expect(await send.mutateAsync("rq_two")).toBeNull();
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(2);
+    expect(mocks.rpc).toHaveBeenCalledTimes(1);
+  });
+
+  test("still asks and remembers in this tab if browser storage is unavailable", async () => {
+    const unavailable = () => {
+      throw new Error("Storage unavailable");
+    };
+    vi.stubGlobal("localStorage", { getItem: unavailable, setItem: unavailable });
+    mocks.showConfirm.mockResolvedValue(true);
+    const send = await sender();
+    await send.mutateAsync("rq_one");
+    await send.mutateAsync("rq_two");
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.rpc).toHaveBeenCalledTimes(2);
+  });
+
+  test("desktop sends directly without confirmation", async () => {
+    mocks.platform.httpProxyUrl = null;
+    await (await sender()).mutateAsync("rq_one");
+    expect(mocks.showConfirm).not.toHaveBeenCalled();
+    expect(mocks.rpc).toHaveBeenCalledTimes(1);
+    expect(stored.size).toBe(0);
+  });
+
+  test("an empty selection does not prompt or send", async () => {
+    expect(await (await sender()).mutateAsync(null)).toBeNull();
+    expect(mocks.showConfirm).not.toHaveBeenCalled();
+    expect(mocks.rpc).not.toHaveBeenCalled();
+  });
+});

apps/yaak-client/hooks/useSendAnyHttpRequest.ts

@@ -1,5 +1,6 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { flushAllModelWrites } from "@yaakapp-internal/models";
+import { confirmWebProxy } from "../lib/confirmWebProxy";
 import { rpc } from "../lib/rpc";
 import { getActiveCookieJar } from "./useActiveCookieJar";
 import { getActiveEnvironment } from "./useActiveEnvironment";
@@ -10,6 +11,10 @@ async function sendAnyHttpRequestById(id: string | null): Promise<HttpResponse |
     return null;
   }
 
+  if (!(await confirmWebProxy())) {
+    return null;
+  }
+
   await flushAllModelWrites();
 
   return rpc("cmd_send_http_request", {

apps/yaak-client/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/png" href="/icon-128.png" sizes="128x128" />
+    <link rel="apple-touch-icon" href="/icon-128.png" />
     <title>Yaak App</title>
     <!--  <script src="http://localhost:8097"></script>-->
 
@@ -28,6 +31,7 @@
     <div id="cm-portal" class="cm-portal"></div>
     <div id="react-portal"></div>
     <div id="radix-portal" class="cm-portal"></div>
+    <script type="module" src="/polyfills.ts"></script>
     <script type="module" src="/theme.ts"></script>
     <script type="module" src="/font-size.ts"></script>
     <script type="module" src="/font.ts"></script>

apps/yaak-client/lib/confirmWebProxy.test.tsx

@@ -0,0 +1,64 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
+import type { DialogInstance } from "../components/Dialogs";
+
+const mocks = vi.hoisted(() => ({
+  platform: { httpProxyUrl: "https://web.yaak.app" },
+  showDialog: vi.fn<(dialog: DialogInstance) => void>(),
+}));
+
+vi.mock("@yaakapp-internal/platform", () => ({ platform: mocks.platform }));
+vi.mock("./appInfo", () => ({ appInfo: { identifier: "app.yaak.web" } }));
+vi.mock("./dialog", () => ({ showDialog: mocks.showDialog }));
+vi.mock("../hooks/useHotKey", () => ({
+  useHotKey: vi.fn(),
+  useFormattedHotkey: () => null,
+}));
+
+describe("proxy consent disclosure", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+    vi.stubGlobal("localStorage", { getItem: () => null });
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  test.each([
+    ["Yaak-hosted", "https://web.yaak.app"],
+    ["self-hosted", "https://yaak.example.com"],
+    ["local", "http://localhost:8080"],
+    ["split deployment", "https://send.example.com/relay"],
+  ])("identifies the %s proxy and requires an explicit decision", async (_, proxyUrl) => {
+    mocks.platform.httpProxyUrl = proxyUrl;
+    const { confirmWebProxy } = await import("./confirmWebProxy");
+    void confirmWebProxy();
+
+    const dialog = mocks.showDialog.mock.calls[0]?.[0];
+    expect(dialog).toMatchObject({
+      id: "web-proxy-consent",
+      title: "Requests in Yaak Web use a proxy",
+      size: "sm",
+      disableClose: true,
+    });
+    if (dialog == null) throw new Error("Expected the proxy consent dialog");
+
+    const disclosure = renderToStaticMarkup(<>{dialog.description}</>);
+    expect(disclosure).toContain(`>${proxyUrl}</code>`);
+    expect(disclosure).toMatch(/request and response data/i);
+    expect(disclosure).toContain("credentials");
+    expect(disclosure).toContain("server shown below");
+    expect(disclosure).not.toContain("Yaak’s servers");
+    expect(disclosure).toContain(
+      'href="https://yaak.app/docs/getting-started/web-proxy?ref=app.yaak.web"',
+    );
+    expect(disclosure).toContain('target="_blank"');
+    expect(disclosure).toContain("how the proxy works");
+
+    const Actions = dialog.render;
+    const actions = renderToStaticMarkup(<Actions hide={vi.fn()} />);
+    expect(actions).toMatch(/<button[^>]*type="submit"/);
+    expect(actions).toContain(">Send via Proxy<");
+    expect(actions).toContain(">Cancel<");
+  });
+});

apps/yaak-client/lib/confirmWebProxy.tsx

@@ -0,0 +1,60 @@
+import { platform } from "@yaakapp-internal/platform";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { Link } from "../components/core/Link";
+import { showConfirm } from "./confirm";
+
+const acceptedProxies = new Set<string>();
+const pendingConfirmations = new Map<string, Promise<boolean>>();
+
+/** One decision for all pending sends; only acceptance is remembered. */
+export function confirmWebProxy(): Promise<boolean> {
+  const proxyUrl = platform.httpProxyUrl;
+  if (proxyUrl == null) return Promise.resolve(true);
+
+  const key = `yaak.webProxyConsent.v1:${proxyUrl}`;
+  try {
+    if (localStorage.getItem(key) === "accepted") return Promise.resolve(true);
+  } catch {
+    // Storage can be unavailable in private or restricted browsing.
+  }
+  if (acceptedProxies.has(proxyUrl)) return Promise.resolve(true);
+
+  const pending = pendingConfirmations.get(proxyUrl);
+  if (pending != null) return pending;
+
+  const confirmation = showConfirm({
+    id: "web-proxy-consent",
+    title: "Requests in Yaak Web use a proxy",
+    confirmText: "Send via Proxy",
+    description: (
+      <div className="space-y-3">
+        <p>
+          Yaak Web sends requests through a hosted proxy. Request and response data, including
+          credentials, pass through the server shown below.
+        </p>
+        <p>
+          <InlineCode className="break-all">{proxyUrl}</InlineCode>
+        </p>
+        <p>
+          Learn more about{" "}
+          <Link href="https://yaak.app/docs/getting-started/web-proxy">how the proxy works</Link>.
+        </p>
+      </div>
+    ),
+  })
+    .then((accepted) => {
+      if (accepted) {
+        acceptedProxies.add(proxyUrl);
+        try {
+          localStorage.setItem(key, "accepted");
+        } catch {
+          // Keep acceptance for this tab if it cannot be persisted.
+        }
+      }
+      return accepted;
+    })
+    .finally(() => pendingConfirmations.delete(proxyUrl));
+
+  pendingConfirmations.set(proxyUrl, confirmation);
+  return confirmation;
+}

apps/yaak-client/lib/contentType.ts

@@ -1,4 +1,4 @@
-import MimeType from "whatwg-mimetype";
+import { MIMEType } from "whatwg-mimetype";
 import type { EditorProps } from "../components/core/Editor/Editor";
 
 export function languageFromContentType(
@@ -90,10 +90,10 @@ export function isProbablyTextContentType(contentType: string | null): boolean {
   ].some((textType) => normalized === textType || normalized.endsWith(textType));
 }
 
-export function getMimeTypeFromContentType(contentType: string): MimeType {
+export function getMimeTypeFromContentType(contentType: string): MIMEType {
   try {
-    return new MimeType(contentType);
+    return new MIMEType(contentType);
   } catch {
-    return new MimeType("text/plain");
+    return new MIMEType("text/plain");
   }
 }

apps/yaak-client/lib/errorMessage.ts

@@ -0,0 +1,3 @@
+export function errorMessage(err: unknown): string {
+  return err instanceof Error ? err.message : String(err);
+}

apps/yaak-client/lib/graphqlSchema.ts

@@ -1,4 +1,5 @@
 import type { GraphQLSchema, IntrospectionQuery } from "graphql";
+import { errorMessage } from "./errorMessage";
 import { buildClientSchema, buildSchema, introspectionFromSchema } from "graphql";
 
 // Accepts either a GraphQL introspection JSON ({ data: { __schema } } or
@@ -45,7 +46,3 @@ export function tryBuildIntrospectionFromFile(
     };
   }
 }
-
-function errorMessage(e: unknown): string {
-  return e instanceof Error ? e.message : String(e);
-}

apps/yaak-client/lib/importData.tsx

@@ -8,7 +8,7 @@ import {
 import { FormattedError, VStack } from "@yaakapp-internal/ui";
 import { Button } from "../components/core/Button";
 import { ImportDataDialog } from "../components/ImportDataDialog";
-import { activeFolderAtom } from "../hooks/useActiveFolder";
+import type { ImportSourcePath } from "../components/ImportSourceList";
 import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
 import { showAlert } from "./alert";
@@ -20,10 +20,17 @@ import { rpc } from "./rpc";
 
 // Stable identities so the dialog's effects don't re-run (and cancel in-flight
 // fetches) every time the dialog container re-renders.
-const planFile = (filePath: string, destination: ImportDestination) =>
-  rpc<ImportPlan>("cmd_import_data", { filePath, destination });
-const planUrl = (url: string, destination: ImportDestination) =>
-  rpc<ImportPlan>("cmd_import_url", { url, destination });
+const planSources = (sources: ImportSourcePath[], destination: ImportDestination) =>
+  rpc<ImportPlan>("cmd_import_data", {
+    filePaths: sources.filter((source) => source.kind !== "url").map((source) => source.path),
+    urls: sources.filter((source) => source.kind === "url").map((source) => source.path),
+    destination,
+  });
+const detectSource = (source: ImportSourcePath) =>
+  rpc<string>(
+    "cmd_detect_import_source",
+    source.kind === "url" ? { url: source.path } : { filePath: source.path },
+  );
 const listSources = (workspaceId: string) =>
   rpc<ImportSource[]>("cmd_list_import_sources", { workspaceId });
 const findSourcesForOrigin = (args: { filePath?: string; url?: string }) =>
@@ -43,11 +50,11 @@ export const importData = createFastMutation({
     return new Promise<void>((resolve, reject) => {
       const currentWorkspace = jotaiStore.get(activeWorkspaceAtom);
       const workspaces = jotaiStore.get(workspacesAtom);
-      const selectedFolder = jotaiStore.get(activeFolderAtom);
       showDialog({
         id: "import",
         title: "Import Data",
         size: "lg",
+        className: "h-[36rem]",
         disableClose: true,
         render: ({ hide }) => {
           const cancel = () => {
@@ -68,9 +75,8 @@ export const importData = createFastMutation({
             <ImportDataDialog
               currentWorkspace={currentWorkspace}
               workspaces={workspaces}
-              selectedFolder={selectedFolder}
-              planFile={planFile}
-              planUrl={planUrl}
+              planSources={planSources}
+              detectSource={detectSource}
               listSources={listSources}
               findSourcesForOrigin={findSourcesForOrigin}
               commit={commit}

apps/yaak-client/lib/largeValue.ts

@@ -6,7 +6,6 @@ import type { SniffedValue } from "../components/core/Editor/sniffValue";
 import { isEncodedRun } from "../components/core/Editor/sniffValue";
 import { copyToClipboard } from "./copy";
 import { fireAndForget } from "./fireAndForget";
-import { rpc } from "./rpc";
 import { showToast } from "./toast";
 import { platform } from "@yaakapp-internal/platform";
 
@@ -212,35 +211,26 @@ export function copyImage(text: string, sniffed: SniffedValue, fallback: string)
     });
 }
 
-/** Base64 of a byte array, in chunks so a few megabytes don't blow the argument limit. */
-function toBase64(bytes: Uint8Array): string {
-  let binary = "";
-  for (let i = 0; i < bytes.length; i += 0x8000) {
-    binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
-  }
-  return btoa(binary);
-}
-
 /**
  * Writes a collapsed value to a file the user picks.
  *
- * A value that is already base64 goes straight to the backend as-is — decoding it here only to
+ * A value that is already base64 is handed over as base64. These are the values
+ * the editor collapsed for being large, so decoding one here only for a host to
  * encode it again would walk megabytes twice for nothing.
  */
 export async function saveValue(text: string, sniffed: SniffedValue | null, name: string) {
   const ext = sniffed == null ? "txt" : (mime.getExtension(sniffed.mime) ?? "bin");
-  const filepath = await platform.dialog.save({ defaultPath: `${name}.${ext}`, title: "Save Value" });
-  if (filepath == null) {
+  const content =
+    sniffed == null
+      ? new TextEncoder().encode(text)
+      : sniffed.encoding === "base64"
+        ? { base64: normalizeBase64(payloadOf(text, sniffed)) }
+        : decodeValue(text, sniffed);
+
+  const savedTo = await platform.files.save(`${name}.${ext}`, content);
+  if (savedTo == null) {
     return; // Cancelled
   }
 
-  const data =
-    sniffed == null
-      ? toBase64(new TextEncoder().encode(text))
-      : sniffed.encoding === "base64"
-        ? normalizeBase64(payloadOf(text, sniffed))
-        : toBase64(decodeValue(text, sniffed));
-
-  await rpc("cmd_save_base64_to_binary", { filepath, data });
-  showToast({ message: `Saved to ${filepath}` });
+  showToast({ message: `Saved to ${savedTo}` });
 }

apps/yaak-client/lib/onboarding.ts

@@ -0,0 +1,44 @@
+import type { BatchUpsertResult } from "@yaakapp-internal/models";
+import { createGlobalModel } from "@yaakapp-internal/models";
+import { router } from "./router";
+import { rpc } from "./rpc";
+import { setKeyValue } from "./keyValueStore";
+
+export type OnboardingChoice =
+  | "import"
+  | "import_yaak"
+  | "example"
+  | "fresh"
+  | "open_folder"
+  | "clone_git";
+
+const NEW_WORKSPACE_NAME = "My Workspace";
+
+/**
+ * Remembered so later surfaces can lean toward what the user came for (an importer, the
+ * example, or a blank slate). Nothing reads it yet.
+ */
+export function recordOnboardingChoice(choice: OnboardingChoice) {
+  setKeyValue({
+    namespace: "global",
+    key: "onboarding",
+    value: { choice, at: new Date().toISOString() },
+  }).catch(console.error);
+}
+
+export async function createFreshWorkspace() {
+  const workspaceId = await createGlobalModel({ model: "workspace", name: NEW_WORKSPACE_NAME });
+  await router.navigate({ to: "/workspaces/$workspaceId", params: { workspaceId } });
+}
+
+export async function createExampleWorkspace() {
+  const created = await rpc<BatchUpsertResult>("cmd_create_example_workspace", {});
+  const workspace = created.workspaces[0];
+  if (workspace == null) throw new Error("Example workspace was not created");
+  const firstRequest = created.httpRequests.find((r) => r.name === "List posts");
+  await router.navigate({
+    to: "/workspaces/$workspaceId",
+    params: { workspaceId: workspace.id },
+    search: firstRequest ? { request_id: firstRequest.id } : {},
+  });
+}

apps/yaak-client/lib/resolvedModelName.cases.ts

@@ -0,0 +1,79 @@
+/* oxlint-disable no-template-curly-in-string */
+
+/*
+ * Shared expectations for `resolvedModelName`.
+ *
+ * The request template function plugin carries a hand-copied `resolvedModelName` and template-tag
+ * scanner, because importing this module into the plugin bundle fails to build on Windows in CI.
+ * Both `resolvedModelName.test.ts` here and `plugins/template-function-request/tests/
+ * resolvedModelName.test.ts` iterate these cases, so changing an expectation on this side
+ * automatically exercises the plugin's copy and a drifting copy fails its own suite.
+ *
+ * Keep this file dependency-free — the plugin test imports it by relative path, so anything it
+ * pulls in would have to resolve from both packages.
+ */
+
+export interface ResolvedModelNameCase {
+  /** Test name, used as the `test.each` title on both sides. */
+  name: string;
+  /** `url` of the `http_request` under test. */
+  url: string;
+  /** `name` of the `http_request`, when the case is about an explicit name. */
+  requestName?: string;
+  /** What `resolvedModelName` must return. */
+  expected: string;
+}
+
+export const resolvedModelNameCases: ResolvedModelNameCase[] = [
+  {
+    name: "returns the name when there is one",
+    url: "https://example.com",
+    requestName: "My Request",
+    expected: "My Request",
+  },
+  {
+    name: "replaces a simple tag with its contents",
+    url: "${[ base_url ]}/users",
+    expected: "base_url/users",
+  },
+  {
+    name: "replaces a tag containing a quoted argument with a space",
+    url: "${[ fn(arg='my key') ]}/users",
+    expected: "fn(arg='my key')/users",
+  },
+  {
+    name: "replaces each tag in a multi-tag string",
+    url: "${[ fn(arg='my key') ]}/a/${[ other(b='x y') ]}/b",
+    expected: "fn(arg='my key')/a/other(b='x y')/b",
+  },
+  {
+    name: "keeps a quoted `]}` inside the tag",
+    url: "${[ fn(arg='x]}y') ]}/users",
+    expected: "fn(arg='x]}y')/users",
+  },
+  {
+    name: "keeps an escaped quote inside the tag",
+    url: "${[ fn(arg='it\\'s ]}') ]}/users",
+    expected: "fn(arg='it\\'s ]}')/users",
+  },
+  {
+    name: "closes at the first `]}` when a quote is left unterminated",
+    url: "${[ fn(arg='oops ]}/users",
+    expected: "fn(arg='oops/users",
+  },
+  {
+    name: "stops each tag at its first closing bracket",
+    url: "${[ a ]}${[ b ]}",
+    expected: "ab",
+  },
+  {
+    name: "strips the protocol",
+    url: "https://example.com/${[ path ]}",
+    expected: "example.com/path",
+  },
+  {
+    name: "falls back to a generic name when the url is empty",
+    url: "",
+    expected: "HTTP Request",
+  },
+];

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

@@ -0,0 +1,21 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { describe, expect, test, vi } from "vite-plus/test";
+import { resolvedModelNameCases } from "./resolvedModelName.cases";
+
+// resolvedModelName only reads plain model fields, but its module imports pull in the
+// platform singleton, which needs a browser. Stub them out to keep this a pure unit test.
+vi.mock("@yaakapp-internal/models", () => ({ foldersAtom: {} }));
+vi.mock("./jotai", () => ({ jotaiStore: { get: () => [] } }));
+
+const { resolvedModelName } = await import("./resolvedModelName");
+
+function httpRequest(url: string, name = ""): HttpRequest {
+  return { id: "rq_test", model: "http_request", name, url } as HttpRequest;
+}
+
+describe("resolvedModelName", () => {
+  // Shared with the plugin's hand-copied scanner. See `resolvedModelName.cases.ts`.
+  test.each(resolvedModelNameCases)("$name", ({ url, requestName, expected }) => {
+    expect(resolvedModelName(httpRequest(url, requestName))).toEqual(expected);
+  });
+});

apps/yaak-client/lib/resolvedModelName.ts

@@ -1,6 +1,7 @@
 import type { AnyModel } from "@yaakapp-internal/models";
 import { foldersAtom } from "@yaakapp-internal/models";
 import { jotaiStore } from "./jotai";
+import { replaceTemplateTags } from "./templateTags";
 
 export function resolvedModelName(r: AnyModel | null): string {
   if (r == null) return "";
@@ -15,7 +16,7 @@ export function resolvedModelName(r: AnyModel | null): string {
   }
 
   // Replace variable syntax with variable name
-  const withoutVariables = r.url.replace(/\$\{\[\s*([^\]\s]+)\s*]}/g, "$1");
+  const withoutVariables = replaceTemplateTags(r.url, (m) => m.inner.trim());
   if (withoutVariables.trim() === "") {
     return r.model === "http_request"
       ? r.bodyType && r.bodyType === "graphql"

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

@@ -0,0 +1,176 @@
+/* oxlint-disable no-template-curly-in-string */
+
+import { describe, expect, test } from "vite-plus/test";
+import { findTemplateTags, replaceTemplateTags } from "./templateTags";
+
+/** Seeded so a fuzz failure reproduces. */
+function random(seed: number): () => number {
+  let state = seed;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function millis(run: () => void): number {
+  const started = performance.now();
+  run();
+  return performance.now() - started;
+}
+
+describe("findTemplateTags", () => {
+  test("finds a simple tag", () => {
+    expect(findTemplateTags("${[ my_var ]}")).toEqual([{ start: 0, end: 13, inner: " my_var " }]);
+  });
+
+  test("finds a tag surrounded by text", () => {
+    const text = 'a="${[ my_var ]}"';
+    expect(findTemplateTags(text)).toEqual([{ start: 3, end: 16, inner: " my_var " }]);
+    expect(text.slice(3, 16)).toEqual("${[ my_var ]}");
+  });
+
+  test("finds an empty tag", () => {
+    expect(findTemplateTags("${[]}")).toEqual([{ start: 0, end: 5, inner: "" }]);
+  });
+
+  test("keeps a quoted `]}` inside the tag", () => {
+    const text = "${[ fn(a='x]}y') ]}";
+    expect(findTemplateTags(text)).toEqual([
+      { start: 0, end: text.length, inner: " fn(a='x]}y') " },
+    ]);
+  });
+
+  test("keeps an escaped quote inside the string", () => {
+    const text = "${[ fn(a='it\\'s ]}') ]}";
+    expect(findTemplateTags(text)).toEqual([
+      { start: 0, end: text.length, inner: " fn(a='it\\'s ]}') " },
+    ]);
+  });
+
+  test("keeps a b64 string in one tag", () => {
+    const text = "${[ b64'Zm9v' ]}";
+    expect(findTemplateTags(text)).toEqual([{ start: 0, end: text.length, inner: " b64'Zm9v' " }]);
+  });
+
+  test("closes at the first `]}` when a quote is left unterminated", () => {
+    const text = "${[ fn(a='unterminated ]} rest";
+    expect(findTemplateTags(text)).toEqual([{ start: 0, end: 25, inner: " fn(a='unterminated " }]);
+    expect(text.slice(0, 25)).toEqual("${[ fn(a='unterminated ]}");
+  });
+
+  test("finds two tags with text between them", () => {
+    expect(findTemplateTags("one ${[ a ]} two ${[ b ]} three")).toEqual([
+      { start: 4, end: 12, inner: " a " },
+      { start: 17, end: 25, inner: " b " },
+    ]);
+  });
+
+  test("finds two adjacent tags", () => {
+    expect(findTemplateTags("${[ a ]} ${[ b ]}")).toEqual([
+      { start: 0, end: 8, inner: " a " },
+      { start: 9, end: 17, inner: " b " },
+    ]);
+  });
+
+  test("finds two tags that each quote a `]}`", () => {
+    const text = "${[ a(x='1]}') ]} and ${[ b(y='2]}') ]}";
+    expect(findTemplateTags(text)).toEqual([
+      { start: 0, end: 17, inner: " a(x='1]}') " },
+      { start: 22, end: 39, inner: " b(y='2]}') " },
+    ]);
+  });
+
+  test("finds nothing in an unclosed tag", () => {
+    expect(findTemplateTags("${[ no close")).toEqual([]);
+  });
+
+  test("finds nothing in text without tags", () => {
+    expect(findTemplateTags('{"a": "${b}", "c": 1}')).toEqual([]);
+  });
+
+  test("treats a nested `${[` as ordinary content", () => {
+    expect(findTemplateTags("${[ a ${[ b ]}")).toEqual([{ start: 0, end: 14, inner: " a ${[ b " }]);
+  });
+
+  test("finishes fast on a long run of quotes", () => {
+    const text = `\${[${"'".repeat(20_000)} ]}`;
+    let matches: unknown;
+    const elapsed = millis(() => {
+      matches = findTemplateTags(text);
+    });
+    expect(matches).toEqual([{ start: 0, end: text.length, inner: `${"'".repeat(20_000)} ` }]);
+    expect(elapsed).toBeLessThan(200);
+  });
+
+  test("finishes fast on a long run of unpairable quotes", () => {
+    // Every quote is escaped, so none of them opens a string that closes
+    const text = `\${[${"\\'".repeat(20_000)} ]}`;
+    let matches: unknown;
+    const elapsed = millis(() => {
+      matches = findTemplateTags(text);
+    });
+    expect(matches).toHaveLength(1);
+    expect(elapsed).toBeLessThan(200);
+  });
+
+  test("finishes fast on a long run of openers that never close", () => {
+    const text = "${[".repeat(20_000);
+    let matches: unknown;
+    const elapsed = millis(() => {
+      matches = findTemplateTags(text);
+    });
+    expect(matches).toEqual([]);
+    expect(elapsed).toBeLessThan(200);
+  });
+
+  test("never throws, and always reports real bounds", () => {
+    const alphabet = ["$", "{", "[", "]", "}", "'", "\\", "a", "b"];
+    const next = random(0x5eed);
+
+    for (let n = 0; n < 2_000; n++) {
+      let text = "";
+      const length = Math.floor(next() * 31);
+      for (let i = 0; i < length; i++) {
+        text += alphabet[Math.floor(next() * alphabet.length)];
+      }
+
+      let matches: ReturnType<typeof findTemplateTags> = [];
+      expect(() => {
+        matches = findTemplateTags(text);
+      }, text).not.toThrow();
+
+      let previousEnd = 0;
+      for (const match of matches) {
+        expect(text.slice(match.start, match.start + 3), text).toEqual("${[");
+        expect(text.slice(match.end - 2, match.end), text).toEqual("]}");
+        expect(text.slice(match.start + 3, match.end - 2), text).toEqual(match.inner);
+        expect(match.start, text).toBeGreaterThanOrEqual(previousEnd);
+        previousEnd = match.end;
+      }
+    }
+  });
+});
+
+describe("replaceTemplateTags", () => {
+  test("leaves text without tags alone", () => {
+    expect(replaceTemplateTags('{"a": 1}', () => "x")).toEqual('{"a": 1}');
+  });
+
+  test("replaces each tag with its trimmed contents", () => {
+    expect(replaceTemplateTags("${[ a ]}/x/${[ b ]}", (m) => m.inner.trim())).toEqual("a/x/b");
+  });
+
+  test("keeps the replaced length when padding", () => {
+    const tag = "${[ fn(arg='x]}y') ]}";
+    const text = `{"a": "${tag}"}`;
+    const replaced = replaceTemplateTags(text, (m) => "1".repeat(m.end - m.start));
+    expect(replaced).toEqual(`{"a": "${"1".repeat(tag.length)}"}`);
+    expect(replaced).toHaveLength(text.length);
+  });
+
+  test("leaves an unclosed tag in place", () => {
+    expect(replaceTemplateTags("${[ oops", () => "x")).toEqual("${[ oops");
+  });
+});

apps/yaak-client/lib/templateTags.ts

@@ -0,0 +1,137 @@
+/*
+ * Finding template tags in text.
+ *
+ * A tag closes at `]}`, but a quoted argument is allowed to contain `]}` of its own — the
+ * printer in `crates/yaak-templates` emits `${[ fn(a='x]}y') ]}` verbatim — so the scan has to
+ * step over quoted strings. It mirrors the Lezer grammar in
+ * `components/core/Editor/twig/twig.grammar`: a terminated `'…'` (where `\` escapes whatever
+ * follows it) is consumed whole, and an unterminated quote is just another character, so a
+ * half-typed tag still closes at the next `]}` instead of swallowing the rest of the document.
+ *
+ * This was a regex until CodeQL flagged it (js/polynomial-redos): matching an unterminated
+ * quote needed a negative lookahead that rescanned to the end of the input at every unpaired
+ * quote, which is quadratic on text an attacker picks. The scan below is linear instead — see
+ * the notes on `closingQuoteTable` and on the dead-end set in `findTemplateTags` for why.
+ */
+
+const QUOTE = 0x27; // '
+const BACKSLASH = 0x5c; // \
+const CLOSE_BRACKET = 0x5d; // ]
+const CLOSE_BRACE = 0x7d; // }
+
+/** The `${[`…`]}` bounds of one tag, and what sits between them. */
+export interface TemplateTagMatch {
+  /** Index of the `$` that opens the tag. */
+  start: number;
+  /** Index just past the closing `]}`. */
+  end: number;
+  /** Everything between `${[` and `]}`, not trimmed. */
+  inner: string;
+}
+
+/**
+ * For every index `i`, the index of the `'` that closes a string whose body starts at `i`, or
+ * `-1` when nothing does.
+ *
+ * Built right to left in a single pass, which is the trick that replaces the regex lookahead:
+ * whether a quote opens a terminated string depends only on the text after it, so the answer
+ * can be computed once for every position instead of re-derived at each quote. Skipping a
+ * string of any length then costs one lookup.
+ */
+function closingQuoteTable(text: string): Int32Array {
+  // Two extra slots so a `\` in the last position can read past the end and find `-1`
+  const table = new Int32Array(text.length + 2).fill(-1);
+  for (let i = text.length - 1; i >= 0; i--) {
+    const c = text.charCodeAt(i);
+    // A backslash escapes whatever follows it, including a quote
+    const next = c === BACKSLASH ? table[i + 2] : table[i + 1];
+    table[i] = c === QUOTE ? i : (next ?? -1);
+  }
+  return table;
+}
+
+/**
+ * Finds every template tag in `text`, in order and without overlaps.
+ *
+ * A `${[` with no `]}` after it isn't a tag, and neither is a `${[` nested inside a tag body —
+ * both are ordinary content, same as the regex this replaced treated them.
+ */
+export function findTemplateTags(text: string): TemplateTagMatch[] {
+  const matches: TemplateTagMatch[] = [];
+
+  // Both built only once a scan actually needs them, so short values allocate nothing
+  let closingQuotes: Int32Array | null = null;
+
+  /*
+   * Body positions a previous scan already ran off the end of the text from. Where a scan ends
+   * up depends only on where it starts, so a scan that walks into one of these would repeat
+   * that same walk and fail the same way, and can stop right there.
+   *
+   * That bound is what keeps the whole pass linear: every position enters this set at most
+   * once, and every step of every scan either visits a position for the first time or ends
+   * that scan.
+   */
+  let deadEnds: Set<number> | null = null;
+
+  let searchFrom = 0;
+  while (searchFrom < text.length) {
+    const start = text.indexOf("${[", searchFrom);
+    if (start < 0) break;
+
+    const visited: number[] = [];
+    let end = -1;
+    let i = start + 3;
+    while (i < text.length) {
+      if (deadEnds?.has(i)) break;
+      visited.push(i);
+
+      const c = text.charCodeAt(i);
+      if (c === QUOTE) {
+        closingQuotes ??= closingQuoteTable(text);
+        const close = closingQuotes[i + 1] ?? -1;
+        // An unterminated quote is an ordinary character, so only step over a closed string
+        i = close < 0 ? i + 1 : close + 1;
+        continue;
+      }
+
+      if (c === CLOSE_BRACKET && text.charCodeAt(i + 1) === CLOSE_BRACE) {
+        end = i + 2;
+        break;
+      }
+
+      i += 1;
+    }
+
+    if (end < 0) {
+      // Not a tag. Resume past the opener: a real tag may start inside a string this scan
+      // stepped over.
+      deadEnds ??= new Set();
+      for (const position of visited) deadEnds.add(position);
+      searchFrom = start + 3;
+      continue;
+    }
+
+    matches.push({ start, end, inner: text.slice(start + 3, end - 2) });
+    searchFrom = end;
+  }
+
+  return matches;
+}
+
+/** Rewrites every template tag in `text` with whatever `replace` returns for it. */
+export function replaceTemplateTags(
+  text: string,
+  replace: (match: TemplateTagMatch) => string,
+): string {
+  const matches = findTemplateTags(text);
+  if (matches.length === 0) return text;
+
+  let result = "";
+  let copiedTo = 0;
+  for (const match of matches) {
+    result += text.slice(copiedTo, match.start) + replace(match);
+    copiedTo = match.end;
+  }
+
+  return result + text.slice(copiedTo);
+}

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

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "vite-plus/test";
+import { validateHttpHeader } from "./validateHttpHeader";
+
+describe("validateHttpHeader", () => {
+  test("allows an empty value", () => {
+    expect(validateHttpHeader("")).toEqual(true);
+  });
+
+  test("allows a plain header name", () => {
+    expect(validateHttpHeader("X-Api-Key")).toEqual(true);
+  });
+
+  test("rejects a header name with a space", () => {
+    expect(validateHttpHeader("X Api Key")).toEqual(false);
+  });
+
+  test("allows a simple template tag", () => {
+    expect(validateHttpHeader("${[ my_var ]}")).toEqual(true);
+  });
+
+  test("allows a tag containing a quoted argument with a space", () => {
+    expect(validateHttpHeader("${[ fn(arg='my key') ]}")).toEqual(true);
+  });
+
+  test("allows a multi-tag value", () => {
+    expect(validateHttpHeader("${[ fn(arg='my key') ]}-${[ other(b='x y') ]}")).toEqual(true);
+  });
+
+  test("allows a tag whose quoted argument contains `]}`", () => {
+    expect(validateHttpHeader("${[ fn(arg='x]}y') ]}")).toEqual(true);
+  });
+
+  test("allows a tag whose quoted argument contains an escaped quote", () => {
+    expect(validateHttpHeader("${[ fn(arg='it\\'s ]}') ]}")).toEqual(true);
+  });
+
+  test("rejects a tag with a quoted `]}` followed by an invalid character", () => {
+    expect(validateHttpHeader("${[ fn(arg='x]}y') ]} oops")).toEqual(false);
+  });
+
+  test("rejects a tag followed by an invalid character", () => {
+    expect(validateHttpHeader("${[ my_var ]} oops")).toEqual(false);
+  });
+});

apps/yaak-client/lib/validateHttpHeader.ts

@@ -0,0 +1,11 @@
+import { replaceTemplateTags } from "./templateTags";
+
+export function validateHttpHeader(v: string): boolean {
+  if (v === "") {
+    return true;
+  }
+
+  // Template strings are not allowed so we replace them with a valid example string
+  const withoutTemplateStrings = replaceTemplateTags(v, () => "123");
+  return withoutTemplateStrings.match(/^[a-zA-Z0-9-_]+$/) !== null;
+}

apps/yaak-client/package.json

@@ -9,7 +9,7 @@
     "lint": "tsc --noEmit"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.8.1",
+    "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.3.2",
@@ -19,7 +19,7 @@
     "@codemirror/merge": "^6.11.2",
     "@codemirror/search": "^6.5.11",
     "@dnd-kit/core": "^6.3.1",
-    "@gilbarbara/deep-equal": "^0.3.1",
+    "@gilbarbara/deep-equal": "^0.4.1",
     "@lezer/highlight": "^1.1.3",
     "@lezer/lr": "^1.3.3",
     "@mjackson/multipart-parser": "^0.10.1",
@@ -27,14 +27,14 @@
     "@replit/codemirror-vim": "^6.3.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@shopify/lang-jsonc": "^1.0.1",
-    "@tanstack/react-query": "^5.90.5",
-    "@tanstack/react-router": "^1.133.13",
-    "@tanstack/react-virtual": "^3.14.9",
+    "@tanstack/react-query": "^5.103.2",
+    "@tanstack/react-router": "^1.170.38",
+    "@tanstack/react-virtual": "^3.14.13",
     "@tauri-apps/api": "^2.11.0",
     "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
     "@tauri-apps/plugin-dialog": "^2.7.1",
     "@tauri-apps/plugin-fs": "^2.5.1",
-    "@tauri-apps/plugin-log": "^2.8.0",
+    "@tauri-apps/plugin-log": "^2.9.2",
     "@tauri-apps/plugin-opener": "^2.5.4",
     "@tauri-apps/plugin-os": "^2.3.2",
     "@tauri-apps/plugin-shell": "^2.3.5",
@@ -45,26 +45,26 @@
     "date-fns": "^4.1.0",
     "deep-equal": "^2.2.3",
     "eventemitter3": "^5.0.1",
-    "focus-trap-react": "^11.0.4",
+    "focus-trap-react": "^12.0.3",
     "fuzzbunny": "^1.0.1",
-    "graphql": "^16.13.1",
-    "hexy": "^0.3.5",
+    "graphql": "^17.0.2",
+    "hexy": "^0.4.0",
     "history": "^5.3.0",
     "jotai": "^2.18.0",
     "jotai-family": "^1.0.1",
-    "js-md5": "^0.8.3",
+    "js-md5": "^0.9.2",
     "jsonc-parser": "^3.3.1",
-    "lucide-react": "^0.525.0",
+    "lucide-react": "^1.47.0",
     "mime": "^4.0.4",
-    "motion": "^12.4.7",
-    "nanoid": "^5.1.16",
+    "motion": "^13.4.0",
+    "nanoid": "^6.0.1",
     "papaparse": "^5.4.1",
     "parse-color": "^1.0.0",
     "react": "^19.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
-    "react-pdf": "^10.0.1",
+    "react-pdf": "^11.0.0",
     "react-syntax-highlighter": "^16.1.0",
     "react-use": "^17.6.1",
     "rehype-stringify": "^10.0.1",
@@ -73,32 +73,30 @@
     "slugify": "^1.6.6",
     "uuid": "^14.0.0",
     "vkbeautify": "^0.99.3",
-    "whatwg-mimetype": "^4.0.0",
+    "whatwg-mimetype": "^5.0.0",
     "yaml": "^2.8.3"
   },
   "devDependencies": {
     "@lezer/generator": "^1.8.0",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@tanstack/router-plugin": "^1.127.5",
+    "@tanstack/router-plugin": "^1.168.40",
     "@types/babel__core": "^7.20.5",
-    "@types/node": "^24.0.13",
+    "@types/node": "^22.20.4",
     "@types/papaparse": "^5.3.16",
     "@types/parse-color": "^1.0.3",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^10.0.0",
-    "@types/whatwg-mimetype": "^3.0.2",
+    "@types/whatwg-mimetype": "^5.0.0",
     "@vitejs/plugin-react": "^6.0.1",
     "@yaakapp-internal/theme": "^1.0.0",
     "@yaakapp-internal/ui": "^1.0.0",
     "babel-plugin-react-compiler": "^1.0.0",
-    "internal-ip": "^8.0.0",
-    "rollup": "^4.60.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@^0.2.9",
-    "vite-plugin-static-copy": "^3.3.0",
-    "vite-plugin-svgr": "^4.5.0",
+    "rollup": "^4.63.4",
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.3.3",
+    "vite-plugin-static-copy": "^4.1.1",
     "vite-plugin-wasm": "^3.5.0",
-    "vite-plus": "^0.3.0"
+    "vite-plus": "^0.3.3"
   }
 }

apps/yaak-client/polyfills.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, test, vi } from "vite-plus/test";
+import { getOrInsert, getOrInsertComputed, readableStreamValues, sumPrecise } from "./polyfills";
+
+describe("getOrInsert", () => {
+  test("returns the existing value without replacing it", () => {
+    const map = new Map([["a", 1]]);
+    expect(getOrInsert.call(map, "a", 2)).toBe(1);
+    expect(map.get("a")).toBe(1);
+  });
+
+  test("inserts and returns the value for a missing key", () => {
+    const map = new Map<string, number>();
+    expect(getOrInsert.call(map, "a", 2)).toBe(2);
+    expect(map.get("a")).toBe(2);
+  });
+
+  test("works on a WeakMap", () => {
+    const key = {};
+    const map = new WeakMap<object, number>();
+    expect(getOrInsert.call(map, key, 1)).toBe(1);
+    expect(getOrInsert.call(map, key, 2)).toBe(1);
+  });
+});
+
+describe("getOrInsertComputed", () => {
+  test("returns the existing value without calling the callback", () => {
+    const map = new Map([["a", 1]]);
+    const callback = vi.fn(() => 2);
+    expect(getOrInsertComputed.call(map, "a", callback)).toBe(1);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  test("calls the callback with the key and inserts its result", () => {
+    const map = new Map<string, string>();
+    expect(getOrInsertComputed.call(map, "a", (key) => `${String(key)}!`)).toBe("a!");
+    expect(map.get("a")).toBe("a!");
+  });
+
+  test("stores what the callback returns even if the callback set the key", () => {
+    const map = new Map<string, number>();
+    const result = getOrInsertComputed.call(map, "a", () => {
+      map.set("a", 1);
+      return 2;
+    });
+    expect(result).toBe(2);
+    expect(map.get("a")).toBe(2);
+  });
+
+  test("canonicalizes -0 to +0", () => {
+    const map = new Map<number, number>();
+    getOrInsertComputed.call(map, -0, (key) => {
+      expect(Object.is(key, 0)).toBe(true);
+      return 1;
+    });
+    expect(Object.is([...map.keys()][0], 0)).toBe(true);
+  });
+
+  test("throws when the callback is not a function, even for an existing key", () => {
+    const map = new Map([["a", 1]]);
+    // @ts-expect-error testing a non-callable callback
+    expect(() => getOrInsertComputed.call(map, "a", 1)).toThrow(TypeError);
+  });
+
+  test("is installed on Map and WeakMap", () => {
+    const map = new Map<string, number[]>();
+    map.getOrInsertComputed("a", () => []).push(1);
+    map.getOrInsertComputed("a", () => []).push(2);
+    expect(map.get("a")).toEqual([1, 2]);
+
+    const key = {};
+    const weakMap = new WeakMap<object, number>();
+    expect(weakMap.getOrInsertComputed(key, () => 1)).toBe(1);
+    expect(weakMap.getOrInsert(key, 2)).toBe(1);
+  });
+});
+
+describe("sumPrecise", () => {
+  test("sums without intermediate rounding", () => {
+    expect(sumPrecise([1e20, 0.1, -1e20])).toBe(0.1);
+    expect(sumPrecise([0.1, 0.2, 0.3])).toBe(0.6);
+    expect(sumPrecise(Array.from({ length: 10 }, () => 0.1))).toBe(1);
+  });
+
+  test("rounds half to even on the final step", () => {
+    expect(sumPrecise([1, 1e-16, 1e-16])).toBe(1.0000000000000002);
+    expect(sumPrecise([1, 2 ** -53])).toBe(1);
+  });
+
+  test("handles zeroes, infinities and NaN like the spec", () => {
+    expect(Object.is(sumPrecise([]), -0)).toBe(true);
+    expect(Object.is(sumPrecise([-0, -0]), -0)).toBe(true);
+    expect(Object.is(sumPrecise([-0, 0]), 0)).toBe(true);
+    expect(Object.is(sumPrecise([1, -1]), 0)).toBe(true);
+    expect(sumPrecise([1, Infinity])).toBe(Infinity);
+    expect(sumPrecise([1, -Infinity])).toBe(-Infinity);
+    expect(sumPrecise([Infinity, -Infinity])).toBeNaN();
+    expect(sumPrecise([1, NaN])).toBeNaN();
+  });
+
+  test("accepts any iterable and rejects non-numbers", () => {
+    expect(sumPrecise(new Set([1, 2, 3]))).toBe(6);
+    // @ts-expect-error testing a non-number item
+    expect(() => sumPrecise([1, "2"])).toThrow(TypeError);
+  });
+
+  test("is installed on Math", () => {
+    expect(Math.sumPrecise([1, 2, 3])).toBe(6);
+  });
+});
+
+describe("readableStreamValues", () => {
+  const values = readableStreamValues<number>;
+
+  function streamOf(chunks: number[], onCancel?: () => void) {
+    return new ReadableStream<number>({
+      start(controller) {
+        for (const chunk of chunks) controller.enqueue(chunk);
+        controller.close();
+      },
+      cancel: onCancel,
+    });
+  }
+
+  test("yields every chunk and releases the lock", async () => {
+    const stream = streamOf([1, 2, 3]);
+    const seen: number[] = [];
+    for await (const chunk of values.call(stream)) seen.push(chunk);
+    expect(seen).toEqual([1, 2, 3]);
+    expect(stream.locked).toBe(false);
+  });
+
+  test("cancels the stream when the loop exits early", async () => {
+    const onCancel = vi.fn();
+    const stream = new ReadableStream<number>({
+      pull(controller) {
+        controller.enqueue(1);
+      },
+      cancel: onCancel,
+    });
+    for await (const _ of values.call(stream)) break;
+    expect(onCancel).toHaveBeenCalled();
+    expect(stream.locked).toBe(false);
+  });
+
+  test("leaves the stream open with preventCancel", async () => {
+    const onCancel = vi.fn();
+    const stream = streamOf([1, 2], onCancel);
+    for await (const _ of values.call(stream, { preventCancel: true })) break;
+    expect(onCancel).not.toHaveBeenCalled();
+    expect(stream.locked).toBe(false);
+  });
+
+  test("releases the lock and rethrows when cancelling rejects", async () => {
+    const stream = new ReadableStream<number>({
+      pull(controller) {
+        controller.enqueue(1);
+      },
+      cancel() {
+        throw new Error("cancel failed");
+      },
+    });
+    await expect(async () => {
+      for await (const _ of values.call(stream)) break;
+    }).rejects.toThrow("cancel failed");
+    expect(stream.locked).toBe(false);
+  });
+});

apps/yaak-client/polyfills.ts

@@ -0,0 +1,172 @@
+/**
+ * Built-ins that PDF.js's modern build calls unconditionally but the system WebKit on
+ * older macOS lacks: the upsert methods and `Math.sumPrecise` arrived in Safari 26.2,
+ * and async iteration of `ReadableStream` in Safari 27. Without them the PDF viewer
+ * throws as soon as it renders. Loaded first by `index.html`, and by `pdfWorker.ts`
+ * because the worker has its own globals.
+ *
+ * Each is defined only when missing, so newer engines keep their native versions.
+ */
+
+type KeyedCollection<K, V> = {
+  has(key: K): boolean;
+  get(key: K): V | undefined;
+  set(key: K, value: V): unknown;
+};
+
+/** https://tc39.es/proposal-upsert/#sec-map.prototype.getOrInsert */
+export function getOrInsert<K, V>(this: KeyedCollection<K, V>, key: K, value: V): V {
+  if (this.has(key)) return this.get(key) as V;
+  this.set(key, value);
+  return value;
+}
+
+/** https://tc39.es/proposal-upsert/#sec-map.prototype.getOrInsertComputed */
+export function getOrInsertComputed<K, V>(
+  this: KeyedCollection<K, V>,
+  key: K,
+  callbackfn: (key: K) => V,
+): V {
+  if (typeof callbackfn !== "function") {
+    throw new TypeError("getOrInsertComputed callback is not a function");
+  }
+  if (this.has(key)) return this.get(key) as V;
+  // Map keys are canonicalized, so -0 is stored and passed on as +0
+  const k = (Object.is(key, -0) ? 0 : key) as K;
+  const value = callbackfn(k);
+  // The spec sets after the callback even if the callback inserted the key itself
+  this.set(k, value);
+  return value;
+}
+
+/**
+ * https://tc39.es/proposal-math-sum/
+ *
+ * Shewchuk's exact summation with round-half-even on the final step (the algorithm
+ * behind Python's `math.fsum`). A finite input set whose running sum overflows
+ * partway through is not handled exactly, which PDF.js's byte lengths and widths
+ * never come near.
+ */
+export function sumPrecise(items: Iterable<number>): number {
+  const partials: number[] = [];
+  let allNegativeZero = true;
+  let sawNaN = false;
+  let sawPositiveInfinity = false;
+  let sawNegativeInfinity = false;
+
+  for (const item of items) {
+    if (typeof item !== "number") {
+      throw new TypeError("Math.sumPrecise requires an iterable of numbers");
+    }
+    if (!Object.is(item, -0)) allNegativeZero = false;
+    if (Number.isNaN(item)) {
+      sawNaN = true;
+    } else if (item === Infinity) {
+      sawPositiveInfinity = true;
+    } else if (item === -Infinity) {
+      sawNegativeInfinity = true;
+    } else {
+      let x = item;
+      let i = 0;
+      for (let y of partials) {
+        if (Math.abs(x) < Math.abs(y)) [x, y] = [y, x];
+        const hi = x + y;
+        const lo = y - (hi - x);
+        if (lo !== 0) partials[i++] = lo;
+        x = hi;
+      }
+      partials.length = i;
+      partials.push(x);
+    }
+  }
+
+  if (sawNaN || (sawPositiveInfinity && sawNegativeInfinity)) return NaN;
+  if (sawPositiveInfinity) return Infinity;
+  if (sawNegativeInfinity) return -Infinity;
+  if (allNegativeZero) return -0;
+
+  let n = partials.length;
+  let hi = 0;
+  let lo = 0;
+  if (n > 0) {
+    hi = partials[--n] as number;
+    while (n > 0) {
+      const x = hi;
+      const y = partials[--n] as number;
+      hi = x + y;
+      lo = y - (hi - x);
+      if (lo !== 0) break;
+    }
+    const next = partials[n - 1];
+    if (n > 0 && next != null && ((lo < 0 && next < 0) || (lo > 0 && next > 0))) {
+      const y = lo * 2;
+      const x = hi + y;
+      if (y === x - hi) hi = x;
+    }
+  }
+  return hi === 0 ? 0 : hi;
+}
+
+/** https://streams.spec.whatwg.org/#rs-asynciterator */
+export async function* readableStreamValues<R>(
+  this: ReadableStream<R>,
+  { preventCancel = false }: { preventCancel?: boolean } = {},
+): AsyncGenerator<R, undefined, undefined> {
+  const reader = this.getReader();
+  let finished = false;
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        finished = true;
+        return;
+      }
+      yield value;
+    }
+  } catch (err) {
+    finished = true;
+    throw err;
+  } finally {
+    // Leaving the loop early (break, return, throw in the body) cancels the stream. The
+    // lock is released even if cancelling rejects, which then propagates as in the spec.
+    try {
+      if (!finished && !preventCancel) await reader.cancel();
+    } finally {
+      reader.releaseLock();
+    }
+  }
+}
+
+function define(target: object, key: PropertyKey, value: unknown) {
+  if (key in target) return;
+  Object.defineProperty(target, key, { value, writable: true, configurable: true });
+}
+
+define(Map.prototype, "getOrInsert", getOrInsert);
+define(Map.prototype, "getOrInsertComputed", getOrInsertComputed);
+define(WeakMap.prototype, "getOrInsert", getOrInsert);
+define(WeakMap.prototype, "getOrInsertComputed", getOrInsertComputed);
+define(Math, "sumPrecise", sumPrecise);
+if (typeof ReadableStream !== "undefined") {
+  define(ReadableStream.prototype, "values", readableStreamValues);
+  define(
+    ReadableStream.prototype,
+    Symbol.asyncIterator,
+    Reflect.get(ReadableStream.prototype, "values"),
+  );
+}
+
+// TypeScript's lib does not describe these yet
+declare global {
+  interface Map<K, V> {
+    getOrInsert(key: K, value: V): V;
+    getOrInsertComputed(key: K, callbackfn: (key: K) => V): V;
+  }
+  interface WeakMap<K extends WeakKey, V> {
+    getOrInsert(key: K, value: V): V;
+    getOrInsertComputed(key: K, callbackfn: (key: K) => V): V;
+  }
+  interface Math {
+    sumPrecise(items: Iterable<number>): number;
+  }
+}

apps/yaak-client/routes/index.tsx

@@ -1,10 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Onboarding } from "../components/Onboarding";
 import { RedirectToLatestWorkspace } from "../components/RedirectToLatestWorkspace";
 
+type IndexSearchSchema = {
+  /** Show the home screen even when workspaces exist. Set by the dev menu. */
+  home?: true;
+};
+
 export const Route = createFileRoute("/")({
   component: RouteComponent,
+  validateSearch: (search: Record<string, unknown>): IndexSearchSchema =>
+    search.home === true ? { home: true } : {},
 });
 
 function RouteComponent() {
-  return <RedirectToLatestWorkspace />;
+  const { home } = Route.useSearch();
+  return home ? <Onboarding /> : <RedirectToLatestWorkspace />;
 }

apps/yaak-client/vite.config.ts

@@ -1,11 +1,11 @@
 // @ts-ignore
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
+import fs from "node:fs";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { defineConfig, normalizePath } from "vite-plus";
 import { viteStaticCopy } from "vite-plugin-static-copy";
-import svgr from "vite-plugin-svgr";
 import wasm from "vite-plugin-wasm";
 
 const require = createRequire(import.meta.url);
@@ -16,6 +16,12 @@ const standardFontsDir = normalizePath(
   path.join(path.dirname(require.resolve("pdfjs-dist/package.json")), "standard_fonts"),
 );
 
+// The app's own icons, served as the page icon rather than copied into the client:
+// the bundled app and the tab should not be able to disagree about what Yaak looks like.
+const iconsDir = normalizePath(
+  path.join(import.meta.dirname, "../../crates-tauri/yaak-app-client/icons/release"),
+);
+
 /**
  * Which host the platform package installs. `web` builds Yaak to run in a plain
  * browser tab, with its own IndexedDB store instead of the Rust engine; anything
@@ -23,6 +29,84 @@ const standardFontsDir = normalizePath(
  */
 const yaakTarget = process.env.YAAK_TARGET === "web" ? "web" : "desktop";
 
+const webUrl = "https://web.yaak.app";
+const webDir = normalizePath(path.join(import.meta.dirname, "web"));
+
+/** Link previews for the hosted web app. Meaningless inside the desktop window. */
+function webHead() {
+  return {
+    name: "web-head",
+    transformIndexHtml() {
+      const title = "Yaak in your browser";
+      const description = "No download, no setup. Open a tab and send your first request.";
+      return [
+        { tag: "meta", attrs: { name: "description", content: description } },
+        { tag: "meta", attrs: { property: "og:type", content: "website" } },
+        { tag: "meta", attrs: { property: "og:url", content: webUrl } },
+        { tag: "meta", attrs: { property: "og:title", content: title } },
+        { tag: "meta", attrs: { property: "og:description", content: description } },
+        { tag: "meta", attrs: { property: "og:image", content: `${webUrl}/og.png` } },
+        { tag: "meta", attrs: { property: "og:image:width", content: "1200" } },
+        { tag: "meta", attrs: { property: "og:image:height", content: "630" } },
+        { tag: "meta", attrs: { name: "twitter:card", content: "summary_large_image" } },
+        { tag: "meta", attrs: { name: "twitter:site", content: "@yaakapp" } },
+        { tag: "meta", attrs: { name: "twitter:title", content: title } },
+        { tag: "meta", attrs: { name: "twitter:description", content: description } },
+        { tag: "meta", attrs: { name: "twitter:image", content: `${webUrl}/og.png` } },
+      ];
+    },
+  };
+}
+
+/**
+ * Where `yaak-web` is listening, taken from the same variables that put it there.
+ *
+ * `HOST` is an instruction about what the server accepts rather than an address to
+ * dial, so a wildcard becomes loopback: the dev server and the send server share a
+ * machine.
+ */
+function sendServerUrl(): string {
+  const host = process.env.HOST?.trim();
+  const port = process.env.PORT?.trim() || "9227";
+  const wildcard = !host || host === "0.0.0.0" || host === "::" || host === "[::]";
+  return `http://${wildcard ? "127.0.0.1" : host}:${port}`;
+}
+
+/**
+ * Fails the build when a copied asset is not where the app fetches it from.
+ *
+ * `PdfViewer` and the page head address these by URL, but nothing ties those
+ * URLs to the copy targets below, and a target that mirrors its source path
+ * instead of landing at the root still builds cleanly — the miss only shows up
+ * as a 404 once the app runs.
+ */
+function verifyServedAssets(expected: string[]) {
+  let outDir = "";
+  return {
+    name: "verify-served-assets",
+    apply: "build" as const,
+    configResolved(config: { root: string; build: { outDir: string } }) {
+      outDir = path.resolve(config.root, config.build.outDir);
+    },
+    // After viteStaticCopy, which writes on `writeBundle`.
+    closeBundle() {
+      const missing = expected.filter((asset) => {
+        const full = path.join(outDir, asset);
+        if (!fs.existsSync(full)) return true;
+        const stat = fs.statSync(full);
+        return stat.isDirectory() && fs.readdirSync(full).length === 0;
+      });
+      if (missing.length > 0) {
+        throw new Error(
+          `Copied assets missing from ${outDir}: ${missing.join(", ")}. ` +
+            `Every viteStaticCopy target needs to strip its base path, or it lands ` +
+            `under a copy of the directories it came from instead.`,
+        );
+      }
+    },
+  };
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(async () => {
   return {
@@ -56,14 +140,44 @@ export default defineConfig(async () => {
         generatedRouteTree: "./routeTree.gen.ts",
         autoCodeSplitting: true,
       }),
-      svgr(),
       react(),
       viteStaticCopy({
+        // v4 matches only files and always mirrors the source tree into the
+        // output, so every target here needs stripBase to land where it is
+        // actually served from — without it these end up under a copy of the
+        // path they came from, and nothing fails until the request 404s.
         targets: [
-          { src: cMapsDir, dest: "" },
-          { src: standardFontsDir, dest: "" },
+          { src: `${cMapsDir}/*`, dest: "cmaps", rename: { stripBase: true } },
+          {
+            src: `${standardFontsDir}/*`,
+            dest: "standard_fonts",
+            rename: { stripBase: true },
+          },
+          // `/favicon.ico` is requested by browsers whether or not anything links to it,
+          // so it is served under that name to keep a 404 out of every console.
+          {
+            src: `${iconsDir}/icon.ico`,
+            dest: "",
+            rename: { name: "favicon.ico", stripBase: true },
+          },
+          {
+            src: `${iconsDir}/128x128.png`,
+            dest: "",
+            rename: { name: "icon-128.png", stripBase: true },
+          },
+          ...(yaakTarget === "web"
+            ? [{ src: `${webDir}/og.png`, dest: "", rename: { stripBase: true } }]
+            : []),
         ],
       }),
+      ...(yaakTarget === "web" ? [webHead()] : []),
+      verifyServedAssets([
+        "cmaps",
+        "standard_fonts",
+        "favicon.ico",
+        "icon-128.png",
+        ...(yaakTarget === "web" ? ["og.png"] : []),
+      ]),
     ],
     build: {
       target: "esnext",
@@ -84,8 +198,28 @@ export default defineConfig(async () => {
     },
     clearScreen: false,
     server: {
+      // `HOST` names the interface, as it does most places: unset leaves Vite on
+      // loopback, `0.0.0.0` exposes it for reaching the dev server from another
+      // device.
+      host: process.env.HOST,
+      // Vite refuses a `Host` it does not recognise, which stops a page on a name the
+      // attacker controls from rebinding that name here and driving `/v1` as its own
+      // origin. Addresses are allowed already; only names need listing, so reaching
+      // this as `dev-box.example` means naming it. Deliberately not widened to "any
+      // host when exposed": the proxy below leads to an unauthenticated sender.
+      allowedHosts: process.env.ALLOWED_HOSTS?.split(",")
+        .map((h) => h.trim())
+        .filter(Boolean),
       port: parseInt(process.env.YAAK_CLIENT_DEV_PORT ?? process.env.YAAK_DEV_PORT ?? "1420", 10),
       strictPort: true,
+      // A web dev server is one origin, the way the built app is: `/v1` is passed
+      // through to `yaak-web` rather than the tab being told to call it directly.
+      // That is one address to open instead of two, no CORS in the loop, and a
+      // dev build that sends exactly the way a production build does.
+      proxy:
+        yaakTarget === "web"
+          ? { "/v1": { target: sendServerUrl(), changeOrigin: true } }
+          : undefined,
     },
     envPrefix: ["VITE_", "TAURI_"],
   };

apps/yaak-client/web/og.html

@@ -0,0 +1,129 @@
+<!doctype html>
+<!--
+  Source for og.png (1200x630). Re-render after editing:
+  cd apps/yaak-client/web && "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu --hide-scrollbars --window-size=1200,630 --force-device-scale-factor=1 --virtual-time-budget=10000 --screenshot=og.png "file://$PWD/og.html"
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;800&family=JetBrains+Mono:wght@400;500&display=block"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1200px;
+        height: 630px;
+        overflow: hidden;
+      }
+      body {
+        font-family: Inter, sans-serif;
+        color: hsl(245, 23%, 85%);
+        background:
+          radial-gradient(900px 600px at 0% 100%, hsl(160, 40%, 16%) 0%, transparent 60%),
+          radial-gradient(900px 600px at 100% 0%, hsl(275, 40%, 20%) 0%, transparent 60%),
+          linear-gradient(135deg, hsl(244, 23%, 12%) 0%, hsl(244, 23%, 15%) 100%);
+        -webkit-font-smoothing: antialiased;
+      }
+      .dots {
+        position: absolute;
+        inset: 0;
+        background-image: radial-gradient(hsla(245, 23%, 85%, 0.07) 1.2px, transparent 1.2px);
+        background-size: 28px 28px;
+        mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
+      }
+      .page {
+        position: relative;
+        height: 100%;
+        padding: 56px 64px;
+        display: flex;
+        flex-direction: column;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        font-weight: 600;
+        font-size: 26px;
+      }
+      .brand img {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+      }
+      h1 {
+        margin-top: 52px;
+        font-size: 84px;
+        line-height: 1.05;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: hsl(245, 23%, 92%);
+      }
+      h1 em {
+        font-style: normal;
+        color: hsl(48, 80%, 63%);
+      }
+      p {
+        margin-top: 28px;
+        font-size: 34px;
+        line-height: 1.4;
+        font-weight: 500;
+        color: hsl(245, 18%, 68%);
+        max-width: 1040px;
+      }
+      .bar {
+        margin-top: auto;
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        height: 72px;
+        padding: 0 28px;
+        border-radius: 12px;
+        background: hsla(244, 23%, 22%, 0.6);
+        border: 1px solid hsl(244, 23%, 28%);
+        font-family: "JetBrains Mono", monospace;
+        font-size: 28px;
+        box-shadow: 0 10px 40px hsla(244, 40%, 5%, 0.4);
+      }
+      .method {
+        color: hsl(245, 18%, 62%);
+        font-weight: 500;
+      }
+      .url .scheme {
+        color: hsl(245, 18%, 55%);
+      }
+      .url .host {
+        color: hsl(245, 23%, 92%);
+      }
+      .status {
+        margin-left: auto;
+        color: hsl(150, 99%, 44%);
+        font-weight: 500;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dots"></div>
+    <div class="page">
+      <div class="brand">
+        <img src="../../../crates-tauri/yaak-app-client/icons/release/128x128@2x.png" alt="" />
+        <span>Yaak</span>
+      </div>
+      <h1>Your favorite API client<br /><em>in your browser</em></h1>
+      <p>No download, no setup. Open a tab and send your first request.</p>
+      <div class="bar">
+        <span class="method">GET</span>
+        <span class="url"><span class="scheme">https://</span><span class="host">web.yaak.app</span></span>
+        <span class="status">200 OK</span>
+      </div>
+    </div>
+  </body>
+</html>

apps/yaak-proxy/package.json

@@ -9,7 +9,7 @@
     "lint": "tsc --noEmit"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.90.5",
+    "@tanstack/react-query": "^5.103.2",
     "@tauri-apps/api": "^2.11.0",
     "@tauri-apps/plugin-os": "^2.3.2",
     "@yaakapp-internal/model-store": "^1.0.0",
@@ -19,7 +19,7 @@
     "classnames": "^2.5.1",
     "jotai": "^2.18.0",
     "jotai-family": "^1.0.1",
-    "motion": "^12.4.7",
+    "motion": "^13.4.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -31,7 +31,7 @@
     "@vitejs/plugin-react": "^6.0.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "typescript": "^5.8.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@^0.2.9",
-    "vite-plus": "^0.3.0"
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.3.3",
+    "vite-plus": "^0.3.3"
   }
 }

crates-cli/yaak-cli/Cargo.toml

@@ -22,8 +22,11 @@ include_dir = "0.7"
 keyring = { workspace = true, features = ["apple-native", "windows-native", "sync-secret-service"] }
 log = { workspace = true }
 rand = "0.8"
-reqwest = { workspace = true }
+reqwest = { workspace = true, features = ["form"] }
 rolldown = "0.1.0"
+# Pinned exactly: rolldown_resolver takes `oxc_resolver = "^11"`, so cargo
+# drifts it forward and breaks on 11.11 (TsconfigOptions became
+# TsconfigDiscovery). This dep exists only to hold that resolution.
 oxc_resolver = "=11.10.0"
 schemars = { workspace = true }
 serde = { workspace = true }

crates-cli/yaak-cli/skills/use-yaak/SKILL.md

@@ -4,7 +4,7 @@ description: >
   Use when the user mentions Yaak, a Yaak workspace, or the `yaak` command, or
   asks to call, hit, or smoke test HTTP/REST endpoints, save or organize API
   requests for reuse or manual testing, configure auth on saved requests, import
-  an OpenAPI spec, a Postman or Insomnia collection, or a cURL command, or run
+  an OpenAPI spec, a Postman, Insomnia, or Bruno collection, or a cURL command, or run
   saved requests across environments. Prefer over one-off `curl` when requests
   should be saved, reused, shared, or run as a set.
 allowed-tools: Bash(yaak:*), Bash(which:*), Bash(command:*), Bash(npm:*), Bash(npx:*)
@@ -98,9 +98,9 @@ re-run it after acting.
 
 ## Core workflows
 
-**Start from a spec when one exists.** `yaak import <file>` auto-detects OpenAPI,
-Swagger, Postman, Insomnia, cURL, and Yaak exports, and beats authoring requests
-by hand every time.
+**Start from a spec when one exists.** `yaak import <path>` auto-detects OpenAPI,
+Swagger, Postman, Insomnia, Bruno, cURL, and Yaak exports, and beats authoring requests
+by hand every time. Bruno collections can also be imported from a ZIP or directory.
 
 **Make the host swappable.** Put the base URL in a base-environment variable,
 reference it as `${[ base_url ]}`, then add a sub-environment per deployment

crates-cli/yaak-cli/src/cli.rs

@@ -45,7 +45,7 @@ pub enum Commands {
     /// Authentication commands
     Auth(AuthArgs),
 
-    /// Import API data from Yaak, OpenAPI, Postman, Insomnia, Swagger, or cURL
+    /// Import API data from Yaak, OpenAPI, Postman, Insomnia, Bruno, Swagger, or cURL
     Import(ImportArgs),
 
     /// Export Yaak workspace data
@@ -202,7 +202,7 @@ pub struct SendArgs {
 
 #[derive(Args)]
 pub struct ImportArgs {
-    /// Path to the file to import
+    /// Path to the file, ZIP archive, or directory to import
     pub file: PathBuf,
 
     /// Existing workspace ID to import into when supported by the importer

crates-cli/yaak-cli/src/commands/import_export.rs

@@ -2,13 +2,12 @@ use crate::cli::{ExportArgs, ImportArgs};
 use crate::context::CliContext;
 use crate::utils::workspace::resolve_workspace_id;
 use std::fs;
-use std::io::ErrorKind;
-use yaak::export::{self, ExportDataParams};
 use yaak::import;
+use yaak_models::export::{self, ExportDataParams};
 use yaak_models::util::{
     BatchUpsertResult, ImportDestination, ImportOrigin, ImportPlanAction, ImportPlanItem,
 };
-use yaak_plugins::events::{ImportResources, PluginContext};
+use yaak_plugins::events::{ImportRequest, ImportResources, PluginContext};
 
 type CommandResult<T = ()> = std::result::Result<T, String>;
 
@@ -51,11 +50,12 @@ async fn import(
             .map_err(|e| format!("Failed to get workspace '{workspace_id}': {e}"))?;
     }
 
-    let file_contents = read_import_file(&args.file)?;
+    let input = ImportRequest::from_path(&args.file)
+        .map_err(|err| format!("Unable to read import source {}: {err}", args.file.display()))?;
     let plugin_context = PluginContext::new(None, args.workspace_id.clone());
     let plugin_manager = ctx.plugin_manager();
     let import_result = plugin_manager
-        .import_data(&plugin_context, &file_contents)
+        .import_input(&plugin_context, &input)
         .await
         .map_err(|e| format!("Failed to import data: {e}"))?;
     let importer = import_result.importer;
@@ -127,17 +127,61 @@ fn format_skipped(items: &[ImportPlanItem]) -> Option<String> {
     if parts.is_empty() { None } else { Some(parts.join(", ")) }
 }
 
+/// Write a file so that afterwards it is either the old one or the whole new one.
+///
+/// Writing in place would truncate the previous export before the new one existed, so an
+/// interrupted run loses both. Instead the bytes go to a neighbouring file, are flushed, and
+/// take the target's name in one step. The directory is flushed too: `sync_all` on a file
+/// promises its contents, not that the name it just gained will survive a power cut.
+fn write_durably(path: &std::path::Path, bytes: &[u8]) -> std::io::Result<()> {
+    use std::io::Write;
+
+    let dir = match path.parent() {
+        Some(p) if !p.as_os_str().is_empty() => p,
+        _ => std::path::Path::new("."),
+    };
+    // Alongside the target, because a rename is only atomic within one filesystem.
+    let mut name = path.file_name().unwrap_or_default().to_os_string();
+    name.push(format!(".tmp{}", std::process::id()));
+    let tmp = dir.join(name);
+
+    let write = |tmp: &std::path::Path| -> std::io::Result<()> {
+        let mut file = std::fs::File::create(tmp)?;
+        file.write_all(bytes)?;
+        file.sync_all()
+    };
+    if let Err(e) = write(&tmp) {
+        let _ = std::fs::remove_file(&tmp);
+        return Err(e);
+    }
+    if let Err(e) = std::fs::rename(&tmp, path) {
+        let _ = std::fs::remove_file(&tmp);
+        return Err(e);
+    }
+
+    // Only Unix lets a directory be opened for this. Elsewhere the rename is as much as
+    // the platform offers, and the file itself is already flushed.
+    #[cfg(unix)]
+    std::fs::File::open(dir)?.sync_all()?;
+
+    Ok(())
+}
+
 fn export(ctx: &CliContext, args: ExportArgs) -> CommandResult<usize> {
     let workspace_ids = resolve_export_workspace_ids(ctx, args.workspace_ids, args.all)?;
     let workspace_id_refs: Vec<&str> = workspace_ids.iter().map(String::as_str).collect();
-    export::export_data(ExportDataParams {
+    let document = export::export_data(ExportDataParams {
         query_manager: ctx.query_manager(),
         yaak_version: env!("CARGO_PKG_VERSION"),
-        export_path: &args.file,
         workspace_ids: workspace_id_refs,
         include_private_environments: args.include_private_environments,
     })
     .map_err(|e| format!("Failed to export data: {e}"))?;
+    // Flushed before reporting success: an export is a backup, and a backup that the
+    // command called done while it was still only in the page cache is the one case
+    // where saying nothing went wrong is worst.
+    write_durably(&args.file, document.as_bytes())
+        .map_err(|e| format!("Failed to write {}: {e}", args.file.display()))?;
 
     Ok(workspace_ids.len())
 }
@@ -168,19 +212,6 @@ fn resolve_export_workspace_ids(
     Ok(workspace_ids)
 }
 
-fn read_import_file(path: &std::path::Path) -> CommandResult<String> {
-    fs::read_to_string(path).map_err(|err| {
-        if err.kind() == ErrorKind::InvalidData {
-            format!(
-                "Import file must be UTF-8 text; binary files are not supported: {}",
-                path.display()
-            )
-        } else {
-            format!("Unable to read import file {}: {err}", path.display())
-        }
-    })
-}
-
 fn resources_need_current_workspace(resources: &ImportResources) -> bool {
     resources.workspaces.iter().any(|w| w.id == "CURRENT_WORKSPACE")
         || resources.environments.iter().any(|e| {

crates-cli/yaak-cli/src/plugin_events.rs

@@ -182,6 +182,31 @@ async fn build_plugin_reply(
                     http_request.workspace_id = workspace_id;
                 }
 
+                let environment_id = if let Some(environment_id) =
+                    send_http_request_request.environment_id.as_deref()
+                {
+                    if shared_workspace_id.is_some_and(|id| id != http_request.workspace_id) {
+                        return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: "HTTP request does not belong to the selected workspace"
+                                .to_string(),
+                        }));
+                    }
+                    match host_context
+                        .query_manager
+                        .connect()
+                        .get_environment_for_workspace(&http_request.workspace_id, environment_id)
+                    {
+                        Ok(environment) => Some(environment.id),
+                        Err(err) => {
+                            return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: err.to_string(),
+                            }));
+                        }
+                    }
+                } else {
+                    execution_context.environment_id.clone()
+                };
+
                 let cookie_jar_id =
                     if let Some(cookie_jar_id) = execution_context.cookie_jar_id.clone() {
                         Some(cookie_jar_id)
@@ -211,7 +236,7 @@ async fn build_plugin_reply(
                     query_manager: &host_context.query_manager,
                     blob_manager: &host_context.blob_manager,
                     request: http_request,
-                    environment_id: execution_context.environment_id.as_deref(),
+                    environment_id: environment_id.as_deref(),
                     update_source: UpdateSource::Plugin,
                     cookie_jar_id,
                     response_dir: &host_context.response_dir,
@@ -1003,3 +1028,184 @@ fn prompt_label_for_base(base: &yaak_plugins::events::FormInputBase) -> String {
     }
     base.name.clone()
 }
+
+#[cfg(test)]
+mod environment_tests {
+    use super::*;
+    use serde_json::json;
+    use tempfile::TempDir;
+    use tokio::io::{AsyncReadExt, AsyncWriteExt};
+    use tokio::net::TcpListener;
+    use tokio::time::{Duration, timeout};
+    use yaak_models::models::{EnvironmentVariable, HttpRequest, HttpRequestHeader, Workspace};
+
+    #[tokio::test]
+    async fn plugin_send_uses_override_and_fallback_and_rejects_invalid_ids_before_sending() {
+        let dir = TempDir::new().unwrap();
+        let listener = TcpListener::bind("127.0.0.1:0").await.unwrap();
+        let address = listener.local_addr().unwrap();
+        let (received_tx, mut received_rx) = tokio::sync::mpsc::unbounded_channel();
+        let server = tokio::spawn(async move {
+            loop {
+                let (mut socket, _) = listener.accept().await.unwrap();
+                let mut request = Vec::new();
+                loop {
+                    let mut chunk = [0u8; 1024];
+                    let n = socket.read(&mut chunk).await.unwrap();
+                    if n == 0 {
+                        break;
+                    }
+                    request.extend_from_slice(&chunk[..n]);
+                    if request.windows(4).any(|w| w == b"\r\n\r\n") {
+                        break;
+                    }
+                }
+                let request = String::from_utf8(request).unwrap();
+                eprintln!("Local HTTP test received on {address}:\n{request}");
+                received_tx.send(request).unwrap();
+                socket
+                    .write_all(
+                        b"HTTP/1.1 200 OK\r\nContent-Length: 2\r\nConnection: close\r\n\r\nok",
+                    )
+                    .await
+                    .unwrap();
+            }
+        });
+        let (query_manager, blob_manager, _rx) = yaak_models::init_standalone(
+            &dir.path().join("db.sqlite"),
+            &dir.path().join("blobs.sqlite"),
+        )
+        .unwrap();
+        let (base, a, b, request) = query_manager
+            .with_tx(|db| {
+                let source = &UpdateSource::Background;
+                // Fresh databases no longer come with a workspace, so make one
+                let workspace = db.upsert_workspace(
+                    &Workspace { name: "Test".into(), ..Default::default() },
+                    source,
+                )?;
+                let vars = |value: &str| {
+                    vec![EnvironmentVariable {
+                        enabled: true,
+                        name: "marker".into(),
+                        value: value.into(),
+                        ..Default::default()
+                    }]
+                };
+                let base = db.ensure_base_environment(&workspace.id)?;
+                let base = db.upsert_environment(
+                    &Environment { variables: vars("global"), ..base },
+                    source,
+                )?;
+                let sub = |name: &str| {
+                    db.upsert_environment(
+                        &Environment {
+                            name: name.into(),
+                            workspace_id: workspace.id.clone(),
+                            parent_model: "environment".into(),
+                            parent_id: Some(base.id.clone()),
+                            variables: vars(name),
+                            ..Default::default()
+                        },
+                        source,
+                    )
+                };
+                let a = sub("a")?;
+                let b = sub("b")?;
+                let request = db.upsert_http_request(
+                    &HttpRequest {
+                        workspace_id: workspace.id,
+                        url: format!("http://{address}/echo"),
+                        method: "GET".into(),
+                        headers: vec![HttpRequestHeader {
+                            enabled: true,
+                            name: "X-Environment".into(),
+                            value: "${[ marker ]}".into(),
+                            ..Default::default()
+                        }],
+                        ..Default::default()
+                    },
+                    source,
+                )?;
+                Ok::<_, yaak_models::error::Error>((base, a, b, request))
+            })
+            .unwrap();
+        let plugin_dir = dir.path().join("plugins");
+        std::fs::create_dir_all(&plugin_dir).unwrap();
+        let plugin_manager = Arc::new(
+            PluginManager::new(
+                plugin_dir.clone(),
+                plugin_dir,
+                PathBuf::from("node"),
+                PathBuf::from(env!("CARGO_MANIFEST_DIR"))
+                    .join("../../crates-tauri/yaak-app-client/vendored/plugin-runtime/index.cjs"),
+                &query_manager,
+                &PluginContext::new_empty(),
+                false,
+            )
+            .await
+            .unwrap(),
+        );
+        let host = CliHostContext {
+            encryption_manager: Arc::new(EncryptionManager::new(
+                query_manager.clone(),
+                "yaak-test",
+            )),
+            query_manager,
+            blob_manager,
+            plugin_manager: plugin_manager.clone(),
+            connection_manager: Arc::new(HttpConnectionManager::new()),
+            response_dir: dir.path().join("responses"),
+            execution_context: CliExecutionContext {
+                workspace_id: Some(base.workspace_id.clone()),
+                environment_id: Some(a.id.clone()),
+                ..Default::default()
+            },
+        };
+        std::fs::create_dir_all(&host.response_dir).unwrap();
+        let event = |environment_id: Option<&str>| -> InternalEvent {
+            let mut payload =
+                json!({ "type": "send_http_request_request", "httpRequest": request });
+            if let Some(id) = environment_id {
+                payload["environmentId"] = json!(id);
+            }
+            serde_json::from_value(json!({
+                "id": "test", "pluginRefId": "test", "pluginName": "test", "replyId": null,
+                "context": PluginContext::new_empty(), "payload": payload
+            }))
+            .unwrap()
+        };
+        for (id, marker) in [
+            (Some(b.id.as_str()), "b"),
+            (None, "a"),
+            (Some(base.id.as_str()), "global"),
+        ] {
+            let reply =
+                timeout(Duration::from_secs(10), build_plugin_reply(&host, &event(id), "test"))
+                    .await
+                    .unwrap();
+            assert!(
+                matches!(reply, Some(InternalEventPayload::SendHttpRequestResponse(ref r)) if r.http_response.status == 200),
+                "{reply:?}"
+            );
+            let received = received_rx.recv().await.unwrap().to_lowercase();
+            assert!(received.contains(&format!("x-environment: {marker}\r\n")), "{received}");
+            assert_eq!(host.execution_context.environment_id.as_deref(), Some(a.id.as_str()));
+        }
+        for id in ["", "ev_missing"] {
+            let reply = build_plugin_reply(&host, &event(Some(id)), "test").await;
+            assert!(matches!(reply, Some(InternalEventPayload::ErrorResponse(_))), "{reply:?}");
+        }
+        assert!(received_rx.try_recv().is_err());
+        assert_eq!(
+            host.query_manager
+                .connect()
+                .list_http_responses_for_request(&request.id, None)
+                .unwrap()
+                .len(),
+            3
+        );
+        plugin_manager.terminate().await;
+        server.abort();
+    }
+}

crates-cli/yaak-cli/tests/common/http_server.rs

@@ -27,6 +27,10 @@ impl TestHttpServer {
             while !shutdown_signal.load(Ordering::Relaxed) {
                 match listener.accept() {
                     Ok((mut stream, _)) => {
+                        // macOS and the BSDs hand back accepted sockets carrying the
+                        // listener's non-blocking flag, which leaves the read timeout
+                        // below with nothing to govern.
+                        let _ = stream.set_nonblocking(false);
                         let _ = stream.set_read_timeout(Some(Duration::from_secs(1)));
                         let mut request = Vec::new();
                         let mut request_buf = [0u8; 4096];

crates-server/yaak-playground/Cargo.toml

@@ -0,0 +1,25 @@
+[package]
+name = "yaak-playground"
+version = "0.1.0"
+edition = "2024"
+publish = false
+description = "A small, disposable API for trying Yaak against (yaak.run)"
+
+[[bin]]
+name = "yaak-playground"
+path = "src/main.rs"
+
+[dependencies]
+axum = "0.7"
+bytes = "1.11.1"
+clap = { version = "4.5", features = ["derive", "env"] }
+env_logger = "0.11"
+log = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+tokio = { workspace = true, features = ["rt-multi-thread", "macros", "signal", "net"] }
+tower-http = { version = "0.6", features = ["cors"] }
+uuid = { version = "1", features = ["v4"] }
+
+[dev-dependencies]
+tower = { version = "0.5", features = ["util"] }

crates-server/yaak-playground/README.md

@@ -0,0 +1,21 @@
+# yaak-playground
+
+The API behind [yaak.run](https://yaak.run), for trying Yaak without bringing your own.
+
+- Users and todos are fixed sample data.
+- Posts can be created, changed, and deleted. Each client IP gets its own copy, which goes back
+  to the sample data `YAAK_PLAYGROUND_RESET_AFTER_SECS` after its first write.
+- `POST /auth/token` returns a bearer token for `GET /auth/me`. `POST /auth/session` sets a
+  session cookie for `GET /auth/session`. Any username with the password `yaak` logs in.
+- `GET /` lists every endpoint and `GET /openapi.json` describes them.
+
+Nothing is written to disk, so a restart resets everything.
+
+```sh
+cargo run -p yaak-playground   # http://127.0.0.1:9228
+```
+
+Run `yaak-playground --help` for the limits. Behind a load balancer that sets
+`X-Forwarded-For`, set `YAAK_PLAYGROUND_TRUST_FORWARDED_FOR=true`.
+
+The image is `Dockerfile.playground` at the repo root.

crates-server/yaak-playground/src/auth.rs

@@ -0,0 +1,185 @@
+use crate::AppState;
+use crate::data::{self, User};
+use crate::error::{ApiError, ApiResult, parse_json};
+use axum::extract::State;
+use axum::extract::rejection::BytesRejection;
+use axum::http::{HeaderMap, HeaderValue, StatusCode, header};
+use axum::response::{IntoResponse, Json, Response};
+use bytes::Bytes;
+use serde::Deserialize;
+use serde_json::{Value, json};
+use std::collections::HashMap;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+
+pub const PASSWORD: &str = "yaak";
+const SESSION_COOKIE: &str = "session";
+const TTL: Duration = Duration::from_secs(60 * 60);
+const MAX_CREDENTIALS: usize = 10_000;
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum Kind {
+    Bearer,
+    Session,
+}
+
+/// Issued tokens and session IDs, kept apart so a token can't be sent as a cookie or the
+/// other way around.
+pub struct Credentials {
+    entries: Mutex<HashMap<String, Entry>>,
+}
+
+struct Entry {
+    user_id: u64,
+    kind: Kind,
+    expires: Instant,
+}
+
+impl Credentials {
+    pub fn new() -> Self {
+        Self { entries: Mutex::new(HashMap::new()) }
+    }
+
+    fn issue(&self, user_id: u64, kind: Kind) -> String {
+        let value = uuid::Uuid::new_v4().simple().to_string();
+        let now = Instant::now();
+        let mut entries = self.entries.lock().unwrap_or_else(|e| e.into_inner());
+        if entries.len() >= MAX_CREDENTIALS {
+            entries.retain(|_, e| e.expires > now);
+        }
+        if entries.len() >= MAX_CREDENTIALS
+            && let Some(oldest) =
+                entries.iter().min_by_key(|(_, e)| e.expires).map(|(k, _)| k.clone())
+        {
+            entries.remove(&oldest);
+        }
+        entries.insert(value.clone(), Entry { user_id, kind, expires: now + TTL });
+        value
+    }
+
+    fn lookup(&self, value: &str, kind: Kind) -> Option<&'static User> {
+        let entries = self.entries.lock().unwrap_or_else(|e| e.into_inner());
+        let entry = entries.get(value)?;
+        if entry.kind != kind || entry.expires <= Instant::now() {
+            return None;
+        }
+        data::user(entry.user_id)
+    }
+
+    fn revoke(&self, value: &str) {
+        self.entries.lock().unwrap_or_else(|e| e.into_inner()).remove(value);
+    }
+}
+
+#[derive(Deserialize)]
+struct Login {
+    username: String,
+    password: String,
+}
+
+fn log_in(body: Result<Bytes, BytesRejection>) -> ApiResult<&'static User> {
+    let login: Login = parse_json(body)?;
+    data::user_by_username(&login.username)
+        .filter(|_| login.password == PASSWORD)
+        .ok_or_else(|| ApiError::unauthorized("Invalid username or password", None))
+}
+
+pub async fn create_token(
+    State(state): State<AppState>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Json<Value>> {
+    let user = log_in(body)?;
+    let token = state.credentials.issue(user.id, Kind::Bearer);
+    Ok(Json(json!({
+        "accessToken": token,
+        "tokenType": "Bearer",
+        "expiresIn": TTL.as_secs(),
+    })))
+}
+
+pub async fn me(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+) -> ApiResult<Json<&'static User>> {
+    let Some(authorization) = headers.get(header::AUTHORIZATION).and_then(|v| v.to_str().ok())
+    else {
+        return Err(ApiError::unauthorized("Missing Authorization header", Some("Bearer")));
+    };
+    let token = match authorization.split_once(' ') {
+        Some((scheme, token)) if scheme.eq_ignore_ascii_case("bearer") => token.trim(),
+        _ => {
+            return Err(ApiError::unauthorized(
+                "Authorization header must be \"Bearer <token>\"",
+                Some("Bearer"),
+            ));
+        }
+    };
+    state.credentials.lookup(token, Kind::Bearer).map(Json).ok_or_else(|| {
+        ApiError::unauthorized("Invalid or expired token", Some("Bearer error=\"invalid_token\""))
+    })
+}
+
+pub async fn create_session(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Response> {
+    let user = log_in(body)?;
+    let id = state.credentials.issue(user.id, Kind::Session);
+    let cookie = format!(
+        "{SESSION_COOKIE}={id}; Path=/; Max-Age={}; HttpOnly; SameSite=Lax{}",
+        TTL.as_secs(),
+        secure_attribute(&headers)
+    );
+    let mut res = Json(user).into_response();
+    res.headers_mut().insert(header::SET_COOKIE, HeaderValue::from_str(&cookie).expect("ascii"));
+    Ok(res)
+}
+
+pub async fn session(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+) -> ApiResult<Json<&'static User>> {
+    let Some(id) = session_cookie(&headers) else {
+        return Err(ApiError::unauthorized("Missing session cookie", None));
+    };
+    state
+        .credentials
+        .lookup(id, Kind::Session)
+        .map(Json)
+        .ok_or_else(|| ApiError::unauthorized("Invalid or expired session", None))
+}
+
+pub async fn delete_session(State(state): State<AppState>, headers: HeaderMap) -> Response {
+    if let Some(id) = session_cookie(&headers) {
+        state.credentials.revoke(id);
+    }
+    let cookie = format!(
+        "{SESSION_COOKIE}=; Path=/; Max-Age=0; HttpOnly; SameSite=Lax{}",
+        secure_attribute(&headers)
+    );
+    let mut res = StatusCode::NO_CONTENT.into_response();
+    res.headers_mut().insert(header::SET_COOKIE, HeaderValue::from_str(&cookie).expect("ascii"));
+    res
+}
+
+fn session_cookie(headers: &HeaderMap) -> Option<&str> {
+    headers
+        .get_all(header::COOKIE)
+        .iter()
+        .filter_map(|v| v.to_str().ok())
+        .flat_map(|v| v.split(';'))
+        .filter_map(|pair| pair.trim().split_once('='))
+        .find(|(name, _)| *name == SESSION_COOKIE)
+        .map(|(_, value)| value)
+}
+
+/// `Secure` only when the request reached the proxy over HTTPS, so the cookie still works
+/// against a local instance on plain HTTP.
+fn secure_attribute(headers: &HeaderMap) -> &'static str {
+    let https = headers
+        .get("x-forwarded-proto")
+        .and_then(|v| v.to_str().ok())
+        .is_some_and(|v| v.eq_ignore_ascii_case("https"));
+    if https { "; Secure" } else { "" }
+}

crates-server/yaak-playground/src/config.rs

@@ -0,0 +1,59 @@
+use clap::Parser;
+use std::net::{SocketAddr, ToSocketAddrs};
+
+/// A small, disposable API for trying Yaak against.
+#[derive(Parser, Debug, Clone)]
+#[command(name = "yaak-playground", version, about, long_about = None)]
+pub struct Config {
+    /// Interface to listen on. 0.0.0.0 inside a container.
+    #[arg(long, env = "HOST", default_value = "127.0.0.1")]
+    pub host: String,
+
+    #[arg(long, env = "PORT", default_value_t = 9228)]
+    pub port: u16,
+
+    /// Requests allowed per client IP per minute. 0 disables the limit.
+    #[arg(
+        long,
+        env = "YAAK_PLAYGROUND_RATE_LIMIT_PER_MINUTE",
+        default_value_t = 300
+    )]
+    pub rate_limit_per_minute: u32,
+
+    /// Take the client IP from `X-Forwarded-For` (first hop) instead of the socket. Only behind
+    /// a load balancer that sets the header.
+    #[arg(
+        long,
+        env = "YAAK_PLAYGROUND_TRUST_FORWARDED_FOR",
+        default_value_t = false
+    )]
+    pub trust_forwarded_for: bool,
+
+    /// Seconds after a client's first write before its posts go back to the sample data.
+    #[arg(long, env = "YAAK_PLAYGROUND_RESET_AFTER_SECS", default_value_t = 3600)]
+    pub reset_after_secs: u64,
+
+    /// Clients whose writes are kept at once. The oldest is reset early to make room.
+    #[arg(long, env = "YAAK_PLAYGROUND_MAX_CLIENTS", default_value_t = 2000)]
+    pub max_clients: usize,
+
+    #[arg(
+        long,
+        env = "YAAK_PLAYGROUND_MAX_POSTS_PER_CLIENT",
+        default_value_t = 100
+    )]
+    pub max_posts_per_client: usize,
+
+    #[arg(long, env = "YAAK_PLAYGROUND_MAX_REQUEST_BYTES", default_value_t = 64 * 1024)]
+    pub max_request_bytes: usize,
+}
+
+impl Config {
+    pub fn listen_addr(&self) -> Result<SocketAddr, String> {
+        (self.host.as_str(), self.port)
+            .to_socket_addrs()
+            .map_err(|e| format!("Invalid HOST {:?}: {e}", self.host))?
+            .next()
+            .ok_or_else(|| format!("HOST {:?} resolved to no address", self.host))
+    }
+}

crates-server/yaak-playground/src/data.rs

@@ -0,0 +1,59 @@
+use serde::{Deserialize, Serialize};
+use std::sync::LazyLock;
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct User {
+    pub id: u64,
+    pub name: String,
+    pub username: String,
+    pub email: String,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Post {
+    pub id: u64,
+    pub user_id: u64,
+    pub title: String,
+    pub body: String,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Todo {
+    pub id: u64,
+    pub user_id: u64,
+    pub title: String,
+    pub completed: bool,
+}
+
+#[derive(Deserialize)]
+struct Seed {
+    users: Vec<User>,
+    posts: Vec<Post>,
+    todos: Vec<Todo>,
+}
+
+static SEED: LazyLock<Seed> =
+    LazyLock::new(|| serde_json::from_str(include_str!("seed.json")).expect("valid seed.json"));
+
+pub fn users() -> &'static [User] {
+    &SEED.users
+}
+
+pub fn posts() -> &'static [Post] {
+    &SEED.posts
+}
+
+pub fn todos() -> &'static [Todo] {
+    &SEED.todos
+}
+
+pub fn user(id: u64) -> Option<&'static User> {
+    users().iter().find(|u| u.id == id)
+}
+
+pub fn user_by_username(username: &str) -> Option<&'static User> {
+    users().iter().find(|u| u.username == username)
+}

crates-server/yaak-playground/src/error.rs

@@ -0,0 +1,57 @@
+use axum::extract::rejection::BytesRejection;
+use axum::http::{HeaderValue, StatusCode, header};
+use axum::response::{IntoResponse, Json, Response};
+use bytes::Bytes;
+use serde::de::DeserializeOwned;
+use serde_json::json;
+
+pub type ApiResult<T> = Result<T, ApiError>;
+
+pub struct ApiError {
+    status: StatusCode,
+    message: String,
+    challenge: Option<&'static str>,
+}
+
+impl ApiError {
+    pub fn new(status: StatusCode, message: impl Into<String>) -> Self {
+        Self { status, message: message.into(), challenge: None }
+    }
+
+    pub fn bad_request(message: impl Into<String>) -> Self {
+        Self::new(StatusCode::BAD_REQUEST, message)
+    }
+
+    pub fn not_found(message: impl Into<String>) -> Self {
+        Self::new(StatusCode::NOT_FOUND, message)
+    }
+
+    /// `challenge` becomes the `WWW-Authenticate` header.
+    pub fn unauthorized(message: impl Into<String>, challenge: Option<&'static str>) -> Self {
+        Self { status: StatusCode::UNAUTHORIZED, message: message.into(), challenge }
+    }
+}
+
+impl IntoResponse for ApiError {
+    fn into_response(self) -> Response {
+        let mut res = (self.status, Json(json!({ "error": self.message }))).into_response();
+        if let Some(challenge) = self.challenge {
+            res.headers_mut().insert(header::WWW_AUTHENTICATE, HeaderValue::from_static(challenge));
+        }
+        res
+    }
+}
+
+pub fn parse_id(raw: &str, noun: &str) -> ApiResult<u64> {
+    raw.parse().map_err(|_| ApiError::not_found(format!("No {noun} with ID {raw}")))
+}
+
+/// Taken as a `Result` so an oversized body gets a JSON error like everything else.
+pub fn parse_json<T: DeserializeOwned>(body: Result<Bytes, BytesRejection>) -> ApiResult<T> {
+    let body = body.map_err(|e| ApiError::new(e.status(), e.body_text()))?;
+    if body.is_empty() {
+        return Err(ApiError::bad_request("Request body must be JSON"));
+    }
+    serde_json::from_slice(&body)
+        .map_err(|e| ApiError::bad_request(format!("Request body is not valid: {e}")))
+}

crates-server/yaak-playground/src/lib.rs

@@ -0,0 +1,170 @@
+//! yaak-playground: the API behind yaak.run, for trying Yaak without bringing your own.
+//!
+//! Reads come from fixed sample data. Writes are kept per client IP and reset after a while,
+//! so nothing one caller sends is ever served to another. Nothing touches disk.
+
+mod auth;
+mod config;
+mod data;
+mod error;
+mod limits;
+mod resources;
+mod store;
+
+use axum::Router;
+use axum::extract::{ConnectInfo, DefaultBodyLimit, Request, State};
+use axum::http::{HeaderMap, HeaderValue, Method, StatusCode, header};
+use axum::middleware::{self, Next};
+use axum::response::{IntoResponse, Json, Response};
+use axum::routing::{get, post};
+pub use config::Config;
+use error::ApiError;
+use limits::RateLimiter;
+use serde_json::{Value, json};
+use std::net::{IpAddr, SocketAddr};
+use std::sync::Arc;
+use std::time::Duration;
+use store::PostStore;
+use tower_http::cors::{AllowOrigin, CorsLayer};
+
+const OPENAPI: &str = include_str!("openapi.json");
+
+#[derive(Clone)]
+struct AppState {
+    config: Arc<Config>,
+    rate_limiter: Arc<RateLimiter>,
+    posts: Arc<PostStore>,
+    credentials: Arc<auth::Credentials>,
+}
+
+#[derive(Clone, Copy)]
+struct ClientIp(IpAddr);
+
+/// Serve with `into_make_service_with_connect_info::<SocketAddr>()`; the client's address
+/// keys both the rate limit and its private copy of the posts.
+pub fn router(config: Config) -> Router {
+    let state = AppState {
+        rate_limiter: Arc::new(RateLimiter::new(config.rate_limit_per_minute)),
+        posts: Arc::new(PostStore::new(
+            Duration::from_secs(config.reset_after_secs),
+            config.max_clients,
+            config.max_posts_per_client,
+        )),
+        credentials: Arc::new(auth::Credentials::new()),
+        config: Arc::new(config),
+    };
+
+    let cors = CorsLayer::new()
+        .allow_origin(AllowOrigin::any())
+        .allow_methods([
+            Method::GET,
+            Method::POST,
+            Method::PUT,
+            Method::PATCH,
+            Method::DELETE,
+            Method::OPTIONS,
+        ])
+        .allow_headers([header::CONTENT_TYPE, header::AUTHORIZATION])
+        .expose_headers([
+            header::LOCATION,
+            header::RETRY_AFTER,
+            header::WWW_AUTHENTICATE,
+        ]);
+
+    Router::new()
+        .route("/", get(index))
+        .route("/health", get(health))
+        .route("/openapi.json", get(openapi))
+        .route("/users", get(resources::list_users))
+        .route("/users/:id", get(resources::get_user))
+        .route("/users/:id/todos", get(resources::list_user_todos))
+        .route("/todos", get(resources::list_todos))
+        .route("/posts", get(resources::list_posts).post(resources::create_post))
+        .route(
+            "/posts/:id",
+            get(resources::get_post)
+                .put(resources::replace_post)
+                .patch(resources::update_post)
+                .delete(resources::delete_post),
+        )
+        .route("/auth/token", post(auth::create_token))
+        .route("/auth/me", get(auth::me))
+        .route(
+            "/auth/session",
+            post(auth::create_session).get(auth::session).delete(auth::delete_session),
+        )
+        .fallback(not_found)
+        .layer(middleware::from_fn_with_state(state.clone(), identify_client))
+        .layer(DefaultBodyLimit::max(state.config.max_request_bytes))
+        .layer(cors)
+        .with_state(state)
+}
+
+async fn identify_client(
+    State(state): State<AppState>,
+    ConnectInfo(peer): ConnectInfo<SocketAddr>,
+    mut req: Request,
+    next: Next,
+) -> Response {
+    let ip = client_ip(&state.config, req.headers(), peer);
+    if let Err(wait) = state.rate_limiter.check(ip) {
+        let secs = wait.as_secs().max(1);
+        let mut res = ApiError::new(
+            StatusCode::TOO_MANY_REQUESTS,
+            format!("Rate limit reached. Try again in {secs}s"),
+        )
+        .into_response();
+        res.headers_mut().insert(header::RETRY_AFTER, HeaderValue::from(secs));
+        return res;
+    }
+    req.extensions_mut().insert(ClientIp(ip));
+    next.run(req).await
+}
+
+fn client_ip(config: &Config, headers: &HeaderMap, peer: SocketAddr) -> IpAddr {
+    if config.trust_forwarded_for
+        && let Some(forwarded) = headers.get("x-forwarded-for").and_then(|v| v.to_str().ok())
+        && let Some(first) = forwarded.split(',').next()
+        && let Ok(ip) = first.trim().parse::<IpAddr>()
+    {
+        return ip;
+    }
+    peer.ip()
+}
+
+async fn index(State(state): State<AppState>) -> Json<Value> {
+    let spec: Value = serde_json::from_str(OPENAPI).expect("valid openapi.json");
+    Json(json!({
+        "name": "Yaak Playground",
+        "description": "A small API for trying out Yaak. Posts you create, change, or delete are only visible to you, and go back to the sample data after a while.",
+        "resetAfterSeconds": state.config.reset_after_secs,
+        "login": { "username": "ada", "password": auth::PASSWORD },
+        "openapi": "/openapi.json",
+        "endpoints": operations(&spec),
+    }))
+}
+
+/// Every `METHOD /path` the spec documents.
+fn operations(spec: &Value) -> Vec<String> {
+    let mut ops = Vec::new();
+    for (path, item) in spec["paths"].as_object().into_iter().flatten() {
+        for method in ["get", "post", "put", "patch", "delete"] {
+            if item.get(method).is_some() {
+                ops.push(format!("{} {path}", method.to_uppercase()));
+            }
+        }
+    }
+    ops
+}
+
+async fn health() -> Json<Value> {
+    Json(json!({ "ok": true, "version": env!("CARGO_PKG_VERSION") }))
+}
+
+async fn openapi() -> Response {
+    ([(header::CONTENT_TYPE, "application/json")], OPENAPI).into_response()
+}
+
+async fn not_found() -> ApiError {
+    ApiError::not_found("Not found. GET / lists every endpoint")
+}

crates-server/yaak-playground/src/limits.rs

@@ -0,0 +1,50 @@
+use std::collections::HashMap;
+use std::net::IpAddr;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+
+/// One token bucket per client IP, refilled continuously.
+pub struct RateLimiter {
+    per_minute: u32,
+    buckets: Mutex<HashMap<IpAddr, Bucket>>,
+}
+
+struct Bucket {
+    tokens: f64,
+    last: Instant,
+}
+
+impl RateLimiter {
+    /// `per_minute == 0` disables limiting.
+    pub fn new(per_minute: u32) -> Self {
+        Self { per_minute, buckets: Mutex::new(HashMap::new()) }
+    }
+
+    /// Take one token for `client`, or say how long until one is available.
+    pub fn check(&self, client: IpAddr) -> Result<(), Duration> {
+        if self.per_minute == 0 {
+            return Ok(());
+        }
+        let capacity = self.per_minute as f64;
+        let per_second = capacity / 60.0;
+        let now = Instant::now();
+
+        let mut buckets = self.buckets.lock().unwrap_or_else(|e| e.into_inner());
+        if buckets.len() > 1024 {
+            buckets.retain(|_, b| now.duration_since(b.last).as_secs_f64() * per_second < capacity);
+        }
+
+        let bucket = buckets.entry(client).or_insert(Bucket { tokens: capacity, last: now });
+        let elapsed = now.duration_since(bucket.last).as_secs_f64();
+        bucket.tokens = (bucket.tokens + elapsed * per_second).min(capacity);
+        bucket.last = now;
+
+        if bucket.tokens >= 1.0 {
+            bucket.tokens -= 1.0;
+            Ok(())
+        } else {
+            let wait = (1.0 - bucket.tokens) / per_second;
+            Err(Duration::from_secs_f64(wait.max(0.001)))
+        }
+    }
+}

crates-server/yaak-playground/src/main.rs

@@ -0,0 +1,29 @@
+use clap::Parser;
+use log::info;
+use std::net::SocketAddr;
+use yaak_playground::{Config, router};
+
+#[tokio::main]
+async fn main() {
+    env_logger::Builder::from_env(env_logger::Env::default().default_filter_or("info")).init();
+    let config = Config::parse();
+    let bind = config.listen_addr().unwrap_or_else(|e| {
+        eprintln!("{e}");
+        std::process::exit(1);
+    });
+    let app = router(config);
+
+    let listener = tokio::net::TcpListener::bind(bind).await.unwrap_or_else(|e| {
+        eprintln!("Failed to bind {bind}: {e}");
+        std::process::exit(1);
+    });
+    info!("yaak-playground listening on http://{bind}");
+
+    axum::serve(listener, app.into_make_service_with_connect_info::<SocketAddr>())
+        .with_graceful_shutdown(async {
+            let _ = tokio::signal::ctrl_c().await;
+            info!("Shutting down");
+        })
+        .await
+        .expect("server error");
+}

crates-server/yaak-playground/src/openapi.json

@@ -0,0 +1,396 @@
+{
+  "openapi": "3.1.0",
+  "info": {
+    "title": "Yaak Playground",
+    "version": "1.0.0",
+    "description": "A small API for trying out Yaak. Users and todos are fixed sample data. Posts you create, change, or delete are only visible to you, and go back to the sample data after a while.\n\nLog in with any username (like `ada`) and the password `yaak`."
+  },
+  "servers": [{ "url": "https://yaak.run" }],
+  "tags": [
+    { "name": "Users" },
+    { "name": "Posts" },
+    { "name": "Todos" },
+    { "name": "Auth", "description": "Two ways to stay logged in: a bearer token you send yourself, or a session cookie the cookie jar sends for you." }
+  ],
+  "paths": {
+    "/users": {
+      "get": {
+        "tags": ["Users"],
+        "operationId": "listUsers",
+        "summary": "List users",
+        "responses": {
+          "200": {
+            "description": "Every user",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/User" } }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/users/{id}": {
+      "get": {
+        "tags": ["Users"],
+        "operationId": "getUser",
+        "summary": "Get a user",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "responses": {
+          "200": {
+            "description": "The user",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      }
+    },
+    "/users/{id}/todos": {
+      "get": {
+        "tags": ["Users", "Todos"],
+        "operationId": "listUserTodos",
+        "summary": "List a user's todos",
+        "parameters": [
+          { "$ref": "#/components/parameters/Id" },
+          { "$ref": "#/components/parameters/Completed" },
+          { "$ref": "#/components/parameters/Limit" }
+        ],
+        "responses": {
+          "200": {
+            "description": "The user's todos",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/Todo" } }
+              }
+            }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      }
+    },
+    "/todos": {
+      "get": {
+        "tags": ["Todos"],
+        "operationId": "listTodos",
+        "summary": "List todos",
+        "parameters": [
+          { "$ref": "#/components/parameters/UserId" },
+          { "$ref": "#/components/parameters/Completed" },
+          { "$ref": "#/components/parameters/Limit" }
+        ],
+        "responses": {
+          "200": {
+            "description": "Matching todos",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/Todo" } }
+              }
+            }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" }
+        }
+      }
+    },
+    "/posts": {
+      "get": {
+        "tags": ["Posts"],
+        "operationId": "listPosts",
+        "summary": "List posts",
+        "parameters": [
+          { "$ref": "#/components/parameters/UserId" },
+          { "$ref": "#/components/parameters/Limit" }
+        ],
+        "responses": {
+          "200": {
+            "description": "Matching posts",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/Post" } }
+              }
+            }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" }
+        }
+      },
+      "post": {
+        "tags": ["Posts"],
+        "operationId": "createPost",
+        "summary": "Create a post",
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/PostInput" } } }
+        },
+        "responses": {
+          "201": {
+            "description": "The new post",
+            "headers": {
+              "Location": { "description": "Where to fetch the new post", "schema": { "type": "string" } }
+            },
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "409": {
+            "description": "You already have the most posts allowed",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    },
+    "/posts/{id}": {
+      "get": {
+        "tags": ["Posts"],
+        "operationId": "getPost",
+        "summary": "Get a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "responses": {
+          "200": {
+            "description": "The post",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      },
+      "put": {
+        "tags": ["Posts"],
+        "operationId": "replacePost",
+        "summary": "Replace a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/PostInput" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "The updated post",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      },
+      "patch": {
+        "tags": ["Posts"],
+        "operationId": "updatePost",
+        "summary": "Update part of a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/PostPatch" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "The updated post",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      },
+      "delete": {
+        "tags": ["Posts"],
+        "operationId": "deletePost",
+        "summary": "Delete a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "responses": {
+          "204": { "description": "Deleted" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      }
+    },
+    "/auth/token": {
+      "post": {
+        "tags": ["Auth"],
+        "operationId": "createToken",
+        "summary": "Log in for a bearer token",
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Login" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "A token to send as `Authorization: Bearer <token>`",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Token" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      }
+    },
+    "/auth/me": {
+      "get": {
+        "tags": ["Auth"],
+        "operationId": "getMe",
+        "summary": "Get the user a bearer token belongs to",
+        "security": [{ "bearerAuth": [] }],
+        "responses": {
+          "200": {
+            "description": "The logged-in user",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      }
+    },
+    "/auth/session": {
+      "post": {
+        "tags": ["Auth"],
+        "operationId": "createSession",
+        "summary": "Log in with a session cookie",
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Login" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "The logged-in user. The session cookie comes back in `Set-Cookie`.",
+            "headers": {
+              "Set-Cookie": { "description": "The `session` cookie", "schema": { "type": "string" } }
+            },
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      },
+      "get": {
+        "tags": ["Auth"],
+        "operationId": "getSession",
+        "summary": "Get the user a session cookie belongs to",
+        "security": [{ "cookieAuth": [] }],
+        "responses": {
+          "200": {
+            "description": "The logged-in user",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      },
+      "delete": {
+        "tags": ["Auth"],
+        "operationId": "deleteSession",
+        "summary": "Log out",
+        "responses": {
+          "204": { "description": "Logged out, and the cookie is cleared" }
+        }
+      }
+    }
+  },
+  "components": {
+    "parameters": {
+      "Id": {
+        "name": "id",
+        "in": "path",
+        "required": true,
+        "schema": { "type": "integer", "minimum": 1 },
+        "example": 1
+      },
+      "UserId": {
+        "name": "userId",
+        "in": "query",
+        "description": "Only return items belonging to this user",
+        "schema": { "type": "integer", "minimum": 1 }
+      },
+      "Completed": {
+        "name": "completed",
+        "in": "query",
+        "schema": { "type": "boolean" }
+      },
+      "Limit": {
+        "name": "limit",
+        "in": "query",
+        "description": "Return at most this many items",
+        "schema": { "type": "integer", "minimum": 0 }
+      }
+    },
+    "responses": {
+      "BadRequest": {
+        "description": "Something in the request is invalid",
+        "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+      },
+      "NotFound": {
+        "description": "Nothing has that ID",
+        "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+      },
+      "Unauthorized": {
+        "description": "Missing or invalid credentials",
+        "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+      }
+    },
+    "schemas": {
+      "User": {
+        "type": "object",
+        "required": ["id", "name", "username", "email"],
+        "properties": {
+          "id": { "type": "integer", "example": 1 },
+          "name": { "type": "string", "example": "Ada Lovelace" },
+          "username": { "type": "string", "example": "ada" },
+          "email": { "type": "string", "format": "email", "example": "ada@example.com" }
+        }
+      },
+      "Post": {
+        "type": "object",
+        "required": ["id", "userId", "title", "body"],
+        "properties": {
+          "id": { "type": "integer", "example": 1 },
+          "userId": { "type": "integer", "example": 1 },
+          "title": { "type": "string" },
+          "body": { "type": "string" }
+        }
+      },
+      "PostInput": {
+        "type": "object",
+        "required": ["userId", "title", "body"],
+        "properties": {
+          "userId": { "type": "integer", "example": 1 },
+          "title": { "type": "string", "maxLength": 200, "example": "Hello from Yaak" },
+          "body": { "type": "string", "maxLength": 2000, "example": "My first post" }
+        }
+      },
+      "PostPatch": {
+        "type": "object",
+        "properties": {
+          "userId": { "type": "integer" },
+          "title": { "type": "string", "maxLength": 200 },
+          "body": { "type": "string", "maxLength": 2000 }
+        }
+      },
+      "Todo": {
+        "type": "object",
+        "required": ["id", "userId", "title", "completed"],
+        "properties": {
+          "id": { "type": "integer", "example": 1 },
+          "userId": { "type": "integer", "example": 1 },
+          "title": { "type": "string" },
+          "completed": { "type": "boolean" }
+        }
+      },
+      "Login": {
+        "type": "object",
+        "required": ["username", "password"],
+        "properties": {
+          "username": { "type": "string", "example": "ada" },
+          "password": { "type": "string", "example": "yaak" }
+        }
+      },
+      "Token": {
+        "type": "object",
+        "required": ["accessToken", "tokenType", "expiresIn"],
+        "properties": {
+          "accessToken": { "type": "string" },
+          "tokenType": { "type": "string", "const": "Bearer" },
+          "expiresIn": { "type": "integer", "description": "Seconds until the token expires", "example": 3600 }
+        }
+      },
+      "Error": {
+        "type": "object",
+        "required": ["error"],
+        "properties": { "error": { "type": "string" } }
+      }
+    },
+    "securitySchemes": {
+      "bearerAuth": { "type": "http", "scheme": "bearer" },
+      "cookieAuth": { "type": "apiKey", "in": "cookie", "name": "session" }
+    }
+  }
+}

crates-server/yaak-playground/src/resources.rs

@@ -0,0 +1,229 @@
+use crate::data::{self, Post, Todo, User};
+use crate::error::{ApiError, ApiResult, parse_id, parse_json};
+use crate::{AppState, ClientIp};
+use axum::extract::rejection::BytesRejection;
+use axum::extract::{Extension, Path, Query, State};
+use axum::http::{HeaderValue, StatusCode, header};
+use axum::response::{IntoResponse, Json, Response};
+use bytes::Bytes;
+use serde::Deserialize;
+use std::collections::HashMap;
+
+const MAX_TITLE_CHARS: usize = 200;
+const MAX_BODY_CHARS: usize = 2000;
+
+type Params = Query<HashMap<String, String>>;
+
+struct Filters {
+    user_id: Option<u64>,
+    completed: Option<bool>,
+    limit: Option<usize>,
+}
+
+fn filters(params: &HashMap<String, String>) -> ApiResult<Filters> {
+    fn parse<T: std::str::FromStr>(
+        params: &HashMap<String, String>,
+        name: &str,
+        expected: &str,
+    ) -> ApiResult<Option<T>> {
+        params
+            .get(name)
+            .map(|v| {
+                v.parse().map_err(|_| {
+                    ApiError::bad_request(format!("Query parameter `{name}` must be {expected}"))
+                })
+            })
+            .transpose()
+    }
+    Ok(Filters {
+        user_id: parse(params, "userId", "a user ID")?,
+        completed: parse(params, "completed", "true or false")?,
+        limit: parse(params, "limit", "a number")?,
+    })
+}
+
+pub async fn list_users() -> Json<&'static [User]> {
+    Json(data::users())
+}
+
+pub async fn get_user(Path(id): Path<String>) -> ApiResult<Json<&'static User>> {
+    let user_id = parse_id(&id, "user")?;
+    data::user(user_id)
+        .map(Json)
+        .ok_or_else(|| ApiError::not_found(format!("No user with ID {id}")))
+}
+
+pub async fn list_todos(Query(params): Params) -> ApiResult<Json<Vec<&'static Todo>>> {
+    let f = filters(&params)?;
+    Ok(Json(select_todos(f.user_id, f.completed, f.limit)))
+}
+
+pub async fn list_user_todos(
+    Path(id): Path<String>,
+    Query(params): Params,
+) -> ApiResult<Json<Vec<&'static Todo>>> {
+    let user = get_user(Path(id)).await?;
+    let f = filters(&params)?;
+    Ok(Json(select_todos(Some(user.id), f.completed, f.limit)))
+}
+
+fn select_todos(
+    user_id: Option<u64>,
+    completed: Option<bool>,
+    limit: Option<usize>,
+) -> Vec<&'static Todo> {
+    data::todos()
+        .iter()
+        .filter(|t| user_id.is_none_or(|id| t.user_id == id))
+        .filter(|t| completed.is_none_or(|c| t.completed == c))
+        .take(limit.unwrap_or(usize::MAX))
+        .collect()
+}
+
+pub async fn list_posts(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Query(params): Params,
+) -> ApiResult<Json<Vec<Post>>> {
+    let f = filters(&params)?;
+    let posts = state.posts.read(ip, |posts| {
+        posts
+            .iter()
+            .filter(|p| f.user_id.is_none_or(|id| p.user_id == id))
+            .take(f.limit.unwrap_or(usize::MAX))
+            .cloned()
+            .collect()
+    });
+    Ok(Json(posts))
+}
+
+pub async fn get_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+) -> ApiResult<Json<Post>> {
+    let post_id = parse_id(&id, "post")?;
+    state
+        .posts
+        .read(ip, |posts| posts.iter().find(|p| p.id == post_id).cloned())
+        .map(Json)
+        .ok_or_else(|| post_not_found(&id))
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct NewPost {
+    user_id: u64,
+    title: String,
+    body: String,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct PostPatch {
+    user_id: Option<u64>,
+    title: Option<String>,
+    body: Option<String>,
+}
+
+pub async fn create_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Response> {
+    let input: NewPost = parse_json(body)?;
+    validate(input.user_id, &input.title, &input.body)?;
+    let max = state.posts.max_posts;
+    let post = state.posts.write(ip, |client| {
+        if client.posts.len() >= max {
+            return Err(ApiError::new(
+                StatusCode::CONFLICT,
+                format!(
+                    "You can have at most {max} posts. Delete one first, or wait for the reset"
+                ),
+            ));
+        }
+        Ok(client.insert(input.user_id, input.title, input.body))
+    })?;
+    let location = HeaderValue::from_str(&format!("/posts/{}", post.id)).expect("ascii");
+    Ok((StatusCode::CREATED, [(header::LOCATION, location)], Json(post)).into_response())
+}
+
+pub async fn replace_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Json<Post>> {
+    let post_id = parse_id(&id, "post")?;
+    let input: NewPost = parse_json(body)?;
+    validate(input.user_id, &input.title, &input.body)?;
+    state.posts.write(ip, |client| {
+        let post =
+            client.posts.iter_mut().find(|p| p.id == post_id).ok_or_else(|| post_not_found(&id))?;
+        post.user_id = input.user_id;
+        post.title = input.title;
+        post.body = input.body;
+        Ok(Json(post.clone()))
+    })
+}
+
+pub async fn update_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Json<Post>> {
+    let post_id = parse_id(&id, "post")?;
+    let patch: PostPatch = parse_json(body)?;
+    state.posts.write(ip, |client| {
+        let post =
+            client.posts.iter_mut().find(|p| p.id == post_id).ok_or_else(|| post_not_found(&id))?;
+        let user_id = patch.user_id.unwrap_or(post.user_id);
+        let title = patch.title.unwrap_or_else(|| post.title.clone());
+        let body = patch.body.unwrap_or_else(|| post.body.clone());
+        validate(user_id, &title, &body)?;
+        post.user_id = user_id;
+        post.title = title;
+        post.body = body;
+        Ok(Json(post.clone()))
+    })
+}
+
+pub async fn delete_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+) -> ApiResult<StatusCode> {
+    let post_id = parse_id(&id, "post")?;
+    state.posts.write(ip, |client| {
+        let index =
+            client.posts.iter().position(|p| p.id == post_id).ok_or_else(|| post_not_found(&id))?;
+        client.posts.remove(index);
+        Ok(StatusCode::NO_CONTENT)
+    })
+}
+
+fn post_not_found(id: &str) -> ApiError {
+    ApiError::not_found(format!("No post with ID {id}"))
+}
+
+fn validate(user_id: u64, title: &str, body: &str) -> ApiResult<()> {
+    if data::user(user_id).is_none() {
+        return Err(ApiError::bad_request(format!("No user with ID {user_id}")));
+    }
+    if title.trim().is_empty() {
+        return Err(ApiError::bad_request("`title` can't be empty"));
+    }
+    if title.chars().count() > MAX_TITLE_CHARS {
+        return Err(ApiError::bad_request(format!(
+            "`title` must be {MAX_TITLE_CHARS} characters or fewer"
+        )));
+    }
+    if body.chars().count() > MAX_BODY_CHARS {
+        return Err(ApiError::bad_request(format!(
+            "`body` must be {MAX_BODY_CHARS} characters or fewer"
+        )));
+    }
+    Ok(())
+}

crates-server/yaak-playground/src/seed.json

@@ -0,0 +1,88 @@
+{
+  "users": [
+    { "id": 1, "name": "Ada Lovelace", "username": "ada", "email": "ada@example.com" },
+    { "id": 2, "name": "Grace Hopper", "username": "grace", "email": "grace@example.com" },
+    { "id": 3, "name": "Alan Turing", "username": "alan", "email": "alan@example.com" },
+    { "id": 4, "name": "Katherine Johnson", "username": "katherine", "email": "katherine@example.com" },
+    { "id": 5, "name": "Margaret Hamilton", "username": "margaret", "email": "margaret@example.com" }
+  ],
+  "posts": [
+    {
+      "id": 1,
+      "userId": 1,
+      "title": "Notes on the Analytical Engine",
+      "body": "Requests are just messages. The trick is knowing exactly what you sent."
+    },
+    {
+      "id": 2,
+      "userId": 1,
+      "title": "Why I keep my variables in environments",
+      "body": "Switching from staging to production should be one click, not a find and replace."
+    },
+    {
+      "id": 3,
+      "userId": 2,
+      "title": "Easier to ask forgiveness than permission",
+      "body": "Unless the API returns a 403. Then it's time to check your token."
+    },
+    {
+      "id": 4,
+      "userId": 2,
+      "title": "Debugging the first bug",
+      "body": "The Timeline tab shows every redirect, header, and byte. No moths required."
+    },
+    {
+      "id": 5,
+      "userId": 3,
+      "title": "Can machines send requests?",
+      "body": "This one just did. Look through the response headers to see what came back."
+    },
+    {
+      "id": 6,
+      "userId": 3,
+      "title": "On computable status codes",
+      "body": "2xx is good news, 4xx usually means the request needs fixing, and 5xx usually means the server does."
+    },
+    {
+      "id": 7,
+      "userId": 4,
+      "title": "Checking the math on pagination",
+      "body": "Add a limit query parameter to get fewer results back."
+    },
+    {
+      "id": 8,
+      "userId": 4,
+      "title": "Plotting a course between requests",
+      "body": "Pull a value out of one response and send it in the next. That's all chaining is."
+    },
+    {
+      "id": 9,
+      "userId": 5,
+      "title": "Error handling saved the landing",
+      "body": "An API that returns clear errors is an API you can build on."
+    },
+    {
+      "id": 10,
+      "userId": 5,
+      "title": "Logging in, then everything else",
+      "body": "Get a token from one request and use it for the rest. Set it once on a folder and every request inside inherits it."
+    }
+  ],
+  "todos": [
+    { "id": 1, "userId": 1, "title": "Send your first request", "completed": true },
+    { "id": 2, "userId": 1, "title": "Create an environment", "completed": false },
+    { "id": 3, "userId": 1, "title": "Switch to a sub-environment", "completed": false },
+    { "id": 4, "userId": 2, "title": "Import an OpenAPI spec", "completed": true },
+    { "id": 5, "userId": 2, "title": "Add a header to a folder", "completed": false },
+    { "id": 6, "userId": 2, "title": "Read the response timeline", "completed": true },
+    { "id": 7, "userId": 3, "title": "Chain a value from another response", "completed": false },
+    { "id": 8, "userId": 3, "title": "Log in and use the token", "completed": false },
+    { "id": 9, "userId": 3, "title": "Copy a request as curl", "completed": true },
+    { "id": 10, "userId": 4, "title": "Sync a workspace to a folder", "completed": false },
+    { "id": 11, "userId": 4, "title": "Commit the workspace to Git", "completed": false },
+    { "id": 12, "userId": 4, "title": "Encrypt a secret", "completed": false },
+    { "id": 13, "userId": 5, "title": "Create a post", "completed": false },
+    { "id": 14, "userId": 5, "title": "Delete the post you created", "completed": false },
+    { "id": 15, "userId": 5, "title": "Delete the example workspace", "completed": false }
+  ]
+}

crates-server/yaak-playground/src/store.rs

@@ -0,0 +1,83 @@
+use crate::data::{self, Post};
+use std::collections::HashMap;
+use std::net::IpAddr;
+use std::sync::{Mutex, MutexGuard};
+use std::time::{Duration, Instant};
+
+/// Posts as each client sees them. A client that has never written reads the sample data; its
+/// first write takes a private copy, which is thrown away `reset_after` later. Nothing one
+/// client writes is ever served to another.
+pub struct PostStore {
+    clients: Mutex<HashMap<IpAddr, ClientPosts>>,
+    reset_after: Duration,
+    max_clients: usize,
+    pub max_posts: usize,
+}
+
+pub struct ClientPosts {
+    pub posts: Vec<Post>,
+    next_id: u64,
+    created: Instant,
+}
+
+impl ClientPosts {
+    pub fn insert(&mut self, user_id: u64, title: String, body: String) -> Post {
+        let post = Post { id: self.next_id, user_id, title, body };
+        self.next_id += 1;
+        self.posts.push(post.clone());
+        post
+    }
+}
+
+impl PostStore {
+    pub fn new(reset_after: Duration, max_clients: usize, max_posts: usize) -> Self {
+        Self { clients: Mutex::new(HashMap::new()), reset_after, max_clients, max_posts }
+    }
+
+    pub fn read<R>(&self, client: IpAddr, f: impl FnOnce(&[Post]) -> R) -> R {
+        let mut clients = self.lock();
+        self.drop_if_expired(&mut clients, client, Instant::now());
+        match clients.get(&client) {
+            Some(c) => f(&c.posts),
+            None => f(data::posts()),
+        }
+    }
+
+    pub fn write<R>(&self, client: IpAddr, f: impl FnOnce(&mut ClientPosts) -> R) -> R {
+        let mut clients = self.lock();
+        let now = Instant::now();
+        self.drop_if_expired(&mut clients, client, now);
+
+        if !clients.contains_key(&client) {
+            if clients.len() >= self.max_clients {
+                clients.retain(|_, c| now.duration_since(c.created) < self.reset_after);
+            }
+            if clients.len() >= self.max_clients
+                && let Some(oldest) =
+                    clients.iter().min_by_key(|(_, c)| c.created).map(|(ip, _)| *ip)
+            {
+                clients.remove(&oldest);
+            }
+            let posts = data::posts().to_vec();
+            let next_id = posts.iter().map(|p| p.id).max().unwrap_or(0) + 1;
+            clients.insert(client, ClientPosts { posts, next_id, created: now });
+        }
+
+        f(clients.get_mut(&client).expect("inserted above"))
+    }
+
+    fn lock(&self) -> MutexGuard<'_, HashMap<IpAddr, ClientPosts>> {
+        self.clients.lock().unwrap_or_else(|e| e.into_inner())
+    }
+
+    fn drop_if_expired(
+        &self,
+        clients: &mut HashMap<IpAddr, ClientPosts>,
+        client: IpAddr,
+        now: Instant,
+    ) {
+        if clients.get(&client).is_some_and(|c| now.duration_since(c.created) >= self.reset_after) {
+            clients.remove(&client);
+        }
+    }
+}