chore(deps): bump minimatch and rimraf

Bumps [minimatch](https://github.com/isaacs/minimatch) to 11.0.4 and updates ancestor dependency [rimraf](https://github.com/isaacs/rimraf). These dependencies need to be updated together.


Updates `minimatch` from 10.2.6 to 11.0.4
- [Changelog](https://github.com/isaacs/minimatch/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/minimatch/compare/v10.2.6...v11.0.4)

Updates `rimraf` from 6.1.3 to 6.1.4
- [Changelog](https://github.com/isaacs/rimraf/blob/main/CHANGELOG.md)
- [Commits](https://github.com/isaacs/rimraf/compare/v6.1.3...v6.1.4)

---
updated-dependencies:
- dependency-name: minimatch
  dependency-version: 11.0.4
  dependency-type: indirect
- dependency-name: rimraf
  dependency-version: 6.1.4
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.agents/plugins/marketplace.json

@@ -0,0 +1,20 @@
+{
+  "name": "yaak",
+  "interface": {
+    "displayName": "Yaak"
+  },
+  "plugins": [
+    {
+      "name": "yaak",
+      "source": {
+        "source": "local",
+        "path": "./crates-cli/yaak-cli"
+      },
+      "policy": {
+        "installation": "AVAILABLE",
+        "authentication": "ON_INSTALL"
+      },
+      "category": "Developer Tools"
+    }
+  ]
+}

.claude-plugin/marketplace.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/claude-code-marketplace.json",
+  "name": "yaak",
+  "description": "Plugins for Yaak, the desktop API client",
+  "owner": {
+    "name": "Yaak",
+    "url": "https://yaak.app"
+  },
+  "plugins": [
+    {
+      "name": "yaak",
+      "source": "./crates-cli/yaak-cli",
+      "description": "Build, save, and send API requests with the yaak CLI, with its MCP server for agents",
+      "category": "development",
+      "tags": ["api", "http", "rest", "graphql", "grpc", "openapi", "api-client"]
+    }
+  ]
+}

.gitattributes

@@ -5,3 +5,4 @@ crates/yaak-templates/pkg/* linguist-generated=true
 
 # Ensure consistent line endings for test files that check exact content
 crates/yaak-http/tests/test.txt text eol=lf
+crates-proxy/yaak-proxy-lib/tests/fixtures/export.har text eol=lf

.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/ci.yml

@@ -35,3 +35,29 @@ jobs:
         run: |
           cargo build -p yaak-cli
           node plugins/importer-openapi/tests/roundtrip.mjs
+
+  test-windows:
+    name: Rust Tests (Windows)
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: voidzero-dev/setup-vp@v1
+        with:
+          node-version: "24"
+          cache: true
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: Swatinem/rust-cache@v2
+        with:
+          shared-key: ci
+          cache-on-failure: true
+      - name: Install Protoc for plugin-runtime
+        uses: arduino/setup-protoc@v3
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: vp install
+      - run: npm run bootstrap
+        env:
+          YAAK_TARGET_ARCH: x64
+      - name: Run Rust Tests
+        run: cargo test --all --exclude yaak-cli --features yaak-app-client/wry

.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

@@ -11,10 +11,12 @@ members = [
   "crates/yaak-core",
   "crates/yaak-common",
   "crates/yaak-crypto",
+  "crates/yaak-filter",
   "crates/yaak-git",
   "crates/yaak-grpc",
   "crates/yaak-http",
   "crates/yaak-lifecycle",
+  "crates/yaak-mcp",
   "crates/yaak-models",
   "crates/yaak-plugins",
   "crates/yaak-sse",
@@ -29,6 +31,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
@@ -37,6 +40,7 @@ members = [
   "crates-tauri/yaak-fonts",
   "crates-tauri/yaak-license",
   "crates-tauri/yaak-mac-window",
+  "crates-tauri/yaak-proxy-helper",
   "crates-tauri/yaak-system-appearance",
   "crates-tauri/yaak-tauri-utils",
   "crates-tauri/yaak-window",
@@ -47,9 +51,16 @@ 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"
+rustls-platform-verifier = "0.7.1"
 schemars = { version = "0.8.22", features = ["chrono"] }
 serde = "1.0.228"
 serde_json = "1.0.145"
@@ -77,10 +88,12 @@ yaak = { path = "crates/yaak" }
 yaak-commands = { path = "crates/yaak-commands" }
 yaak-common = { path = "crates/yaak-common" }
 yaak-crypto = { path = "crates/yaak-crypto" }
+yaak-filter = { path = "crates/yaak-filter" }
 yaak-git = { path = "crates/yaak-git" }
 yaak-grpc = { path = "crates/yaak-grpc" }
 yaak-http = { path = "crates/yaak-http" }
 yaak-lifecycle = { path = "crates/yaak-lifecycle" }
+yaak-mcp = { path = "crates/yaak-mcp" }
 yaak-models = { path = "crates/yaak-models" }
 yaak-plugins = { path = "crates/yaak-plugins" }
 yaak-sse = { path = "crates/yaak-sse" }
@@ -98,6 +111,7 @@ yaak-proxy-lib = { path = "crates-proxy/yaak-proxy-lib" }
 yaak-fonts = { path = "crates-tauri/yaak-fonts" }
 yaak-license = { path = "crates-tauri/yaak-license" }
 yaak-mac-window = { path = "crates-tauri/yaak-mac-window" }
+yaak-proxy-helper = { path = "crates-tauri/yaak-proxy-helper" }
 yaak-system-appearance = { path = "crates-tauri/yaak-system-appearance" }
 yaak-tauri-utils = { path = "crates-tauri/yaak-tauri-utils" }
 yaak-window = { path = "crates-tauri/yaak-window" }

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/commands.test.tsx

@@ -0,0 +1,148 @@
+import type { FunctionComponent, ReactElement } from "react";
+import { beforeEach, expect, test, vi } from "vite-plus/test";
+import type { SyncOp } from "@yaakapp-internal/sync/bindings/gen_sync";
+import type { DialogInstance } from "../components/Dialogs";
+import { syncWorkspace } from "./commands";
+
+const mocks = vi.hoisted(() => ({
+  calculateSync: vi.fn(),
+  applySync: vi.fn(),
+  showDialog: vi.fn<(dialog: DialogInstance) => void>(),
+  hideDialog: vi.fn(),
+  showToast: vi.fn(),
+}));
+
+vi.mock("@yaakapp-internal/sync", () => mocks);
+vi.mock("@yaakapp-internal/models", () => ({
+  createWorkspaceModel: vi.fn(),
+  modelTypeLabel: () => "Request",
+}));
+vi.mock("@yaakapp-internal/ui", () => ({
+  Banner: "div",
+  InlineCode: "code",
+  Table: "table",
+  TableBody: "tbody",
+  TableCell: "td",
+  TableHead: "thead",
+  TableHeaderCell: "th",
+  TableRow: "tr",
+  TruncatedWideTableCell: "td",
+}));
+vi.mock("../components/core/Button", () => ({ Button: "button" }));
+vi.mock("../hooks/useActiveWorkspace", () => ({ activeWorkspaceIdAtom: null }));
+vi.mock("../lib/dialog", () => mocks);
+vi.mock("../lib/jotai", () => ({ jotaiStore: { get: vi.fn() } }));
+vi.mock("../lib/prompt", () => ({ showPrompt: vi.fn() }));
+vi.mock("../lib/resolvedModelName", () => ({ resolvedModelNameWithFolders: () => "Request" }));
+vi.mock("../lib/toast", () => mocks);
+
+const staleToast = expect.objectContaining({
+  message: "Files changed while syncing. Review the changes again.",
+});
+
+const params = { workspaceId: "wk_test", syncDir: "/sync" };
+const deletion = {
+  type: "dbDelete",
+  model: { id: "rq_test", model: "http_request" },
+  state: {},
+} as Extract<SyncOp, { type: "dbDelete" }>;
+const update = {
+  type: "dbUpdate",
+  model: { id: "rq_test", model: "http_request" },
+  fs: { model: { id: "rq_test", model: "http_request", name: "Updated" } },
+  state: {},
+} as Extract<SyncOp, { type: "dbUpdate" }>;
+
+async function submit(dialog: DialogInstance) {
+  const render = dialog.render as FunctionComponent<{ hide: () => void }>;
+  const form = render({ hide: () => mocks.hideDialog(dialog.id) }) as ReactElement<{
+    onSubmit: (event: { preventDefault: () => void }) => Promise<void>;
+  }>;
+  await form.props.onSubmit({ preventDefault: vi.fn() });
+}
+
+function latestDialog() {
+  const dialog = mocks.showDialog.mock.calls.at(-1)?.[0];
+  if (dialog == null) throw new Error("Expected a sync dialog");
+  return dialog;
+}
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  mocks.applySync.mockResolvedValue(true);
+});
+
+test("closes an obsolete dialog when the restored file leaves no changes", async () => {
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([]);
+  await syncWorkspace.mutateAsync(params);
+  mocks.applySync.mockResolvedValueOnce(false);
+
+  await submit(latestDialog());
+
+  expect(mocks.applySync).toHaveBeenCalledTimes(1);
+  expect(mocks.applySync).toHaveBeenCalledWith(params.workspaceId, params.syncDir, [deletion]);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+  expect(mocks.showDialog).toHaveBeenCalledTimes(1);
+});
+
+test("requires another confirmation for a changed plan", async () => {
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([update]);
+  await syncWorkspace.mutateAsync(params);
+  const original = latestDialog();
+  mocks.applySync.mockResolvedValueOnce(false);
+
+  await submit(original);
+
+  expect(mocks.applySync).toHaveBeenCalledTimes(1);
+  expect(mocks.showDialog).toHaveBeenCalledTimes(2);
+  expect(mocks.showToast).toHaveBeenCalledWith(staleToast);
+  expect(mocks.hideDialog).not.toHaveBeenCalled();
+  await submit(latestDialog());
+  expect(mocks.applySync).toHaveBeenLastCalledWith(params.workspaceId, params.syncDir, [update]);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+});
+
+test("applies an unchanged reviewed plan and closes the dialog", async () => {
+  mocks.calculateSync.mockResolvedValue([update]);
+  await syncWorkspace.mutateAsync(params);
+  await submit(latestDialog());
+
+  expect(mocks.calculateSync).toHaveBeenCalledTimes(1);
+  expect(mocks.applySync).toHaveBeenCalledTimes(1);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+});
+
+test("forced sync retries the current plan without requesting another confirmation", async () => {
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([update]);
+  mocks.applySync.mockResolvedValueOnce(false);
+
+  await syncWorkspace.mutateAsync({ ...params, force: true });
+
+  expect(mocks.applySync).toHaveBeenCalledTimes(2);
+  expect(mocks.applySync).toHaveBeenLastCalledWith(params.workspaceId, params.syncDir, [update]);
+  expect(mocks.showDialog).not.toHaveBeenCalled();
+});
+
+test("outbound-only changes clear the old dialog and sync automatically", async () => {
+  const outbound = { type: "fsUpdate", model: update.model, state: {} } as SyncOp;
+  mocks.calculateSync.mockResolvedValueOnce([deletion]).mockResolvedValueOnce([outbound]);
+  await syncWorkspace.mutateAsync(params);
+  await syncWorkspace.mutateAsync(params);
+
+  expect(mocks.applySync).toHaveBeenCalledWith(params.workspaceId, params.syncDir, [outbound]);
+  expect(mocks.hideDialog).toHaveBeenCalledWith("commit-sync");
+  expect(mocks.showDialog).toHaveBeenCalledTimes(1);
+});
+
+test("stops retrying a plan that keeps going stale", async () => {
+  mocks.calculateSync.mockResolvedValue([update]);
+  mocks.applySync.mockResolvedValue(false);
+
+  await syncWorkspace.mutateAsync({ ...params, force: true });
+
+  expect(mocks.calculateSync).toHaveBeenCalledTimes(3);
+  expect(mocks.applySync).toHaveBeenCalledTimes(3);
+  expect(mocks.showToast).toHaveBeenCalledTimes(1);
+  expect(mocks.showToast).toHaveBeenCalledWith(staleToast);
+  expect(mocks.showDialog).not.toHaveBeenCalled();
+});

apps/yaak-client/commands/commands.tsx

@@ -14,11 +14,12 @@ import {
 } from "@yaakapp-internal/ui";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
-import { showDialog } from "../lib/dialog";
+import { hideDialog, showDialog } from "../lib/dialog";
 import { jotaiStore } from "../lib/jotai";
-import { pluralizeCount } from "../lib/pluralize";
 import { showPrompt } from "../lib/prompt";
 import { resolvedModelNameWithFolders } from "../lib/resolvedModelName";
+import { showToast } from "../lib/toast";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 export const createFolder = createFastMutation<
   string | null,
@@ -52,24 +53,48 @@ export const createFolder = createFastMutation<
   },
 });
 
+// Files can keep changing under a plan, so stop recalculating after a few stale applies.
+const MAX_SYNC_ATTEMPTS = 3;
+
+function showStaleSyncToast() {
+  showToast({
+    id: "sync-stale",
+    color: "warning",
+    message: "Files changed while syncing. Review the changes again.",
+  });
+}
+
 export const syncWorkspace = createFastMutation<
   void,
   void,
-  { workspaceId: string; syncDir: string; force?: boolean }
+  { workspaceId: string; syncDir: string; force?: boolean; attempt?: number }
 >({
   mutationKey: [],
-  mutationFn: async ({ workspaceId, syncDir, force }) => {
+  mutationFn: async ({ workspaceId, syncDir, force, attempt = 1 }) => {
     const ops = (await calculateSync(workspaceId, syncDir)) ?? [];
     if (ops.length === 0) {
       console.log("Nothing to sync", workspaceId, syncDir);
+      hideDialog("commit-sync");
       return;
     }
     console.log("Syncing workspace", workspaceId, syncDir, ops);
 
     const dbOps = ops.filter((o) => o.type.startsWith("db"));
 
-    if (dbOps.length === 0) {
-      await applySync(workspaceId, syncDir, ops);
+    const apply = async () => {
+      if (await applySync(workspaceId, syncDir, ops)) {
+        hideDialog("commit-sync");
+      } else if (attempt < MAX_SYNC_ATTEMPTS) {
+        await syncWorkspace.mutateAsync({ workspaceId, syncDir, force, attempt: attempt + 1 });
+      } else {
+        hideDialog("commit-sync");
+        showStaleSyncToast();
+      }
+    };
+
+    if (dbOps.length === 0 || force) {
+      hideDialog("commit-sync");
+      await apply();
       return;
     }
 
@@ -79,9 +104,8 @@ export const syncWorkspace = createFastMutation<
 
     console.log("Directory changes detected", { dbOps, ops });
 
-    if (force) {
-      await applySync(workspaceId, syncDir, ops);
-      return;
+    if (attempt > 1) {
+      showStaleSyncToast();
     }
 
     showDialog({
@@ -93,8 +117,7 @@ export const syncWorkspace = createFastMutation<
           className="h-full grid grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-3"
           onSubmit={async (e) => {
             e.preventDefault();
-            await applySync(workspaceId, syncDir, ops);
-            hide();
+            await apply();
           }}
         >
           {isDeletingWorkspace ? (

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/commands/moveToWorkspace.tsx

@@ -3,9 +3,9 @@ import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-intern
 import { MoveToWorkspaceDialog } from "../components/MoveToWorkspaceDialog";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
-import { pluralizeCount } from "../lib/pluralize";
 import { showDialog } from "../lib/dialog";
 import { jotaiStore } from "../lib/jotai";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 export const moveToWorkspace = createFastMutation({
   mutationKey: ["move_workspace"],

apps/yaak-client/commands/openWorkspaceFromSyncDir.tsx

@@ -17,7 +17,7 @@ export const openWorkspaceFromSyncDir = createFastMutation<void, void, string>({
       return;
     }
 
-    await applySync(workspace.id, dir, ops);
+    await applySync(workspace.id, dir, ops, { fsOnly: true });
 
     await router.navigate({
       to: "/workspaces/$workspaceId",

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

@@ -1,12 +1,11 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
 import type { ReactNode } from "react";
 import { useToggle } from "../hooks/useToggle";
 import { showConfirm } from "../lib/confirm";
 import { Button } from "./core/Button";
 import { Link } from "./core/Link";
-import { SizeTag } from "./core/SizeTag";
 
 interface Props {
   children: ReactNode;

apps/yaak-client/components/ConfirmLargeResponse.tsx

@@ -1,5 +1,5 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
 import { type ReactNode, useMemo } from "react";
 import { useSaveResponse } from "../hooks/useSaveResponse";
 import { useToggle } from "../hooks/useToggle";
@@ -8,7 +8,6 @@ import { getContentTypeFromHeaders } from "../lib/model_util";
 import { getResponseBodyText } from "../lib/responseBody";
 import { CopyButton } from "./CopyButton";
 import { Button } from "./core/Button";
-import { SizeTag } from "./core/SizeTag";
 
 interface Props {
   children: ReactNode;

apps/yaak-client/components/ConfirmLargeResponseRequest.tsx

@@ -1,5 +1,5 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
 import { type ReactNode, useMemo } from "react";
 import { getRequestBodyText as getHttpResponseRequestBodyText } from "../hooks/useHttpRequestBody";
 import { useToggle } from "../hooks/useToggle";
@@ -7,7 +7,6 @@ import { isProbablyTextContentType } from "../lib/contentType";
 import { getContentTypeFromHeaders } from "../lib/model_util";
 import { CopyButton } from "./CopyButton";
 import { Button } from "./core/Button";
-import { SizeTag } from "./core/SizeTag";
 
 interface Props {
   children: ReactNode;

apps/yaak-client/components/CookieDialog.tsx

@@ -25,12 +25,13 @@ import {
   TableHeaderCell,
   TableRow,
   TruncatedWideTableCell,
+  KeyValueRows,
 } from "@yaakapp-internal/ui";
 import { IconButton } from "./core/IconButton";
 import { Checkbox } from "./core/Checkbox";
 import classNames from "classnames";
 import { EventDetailHeader } from "./core/EventViewer";
-import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { KeyValueRow } from "./core/KeyValueRow";
 import { EmptyStateText } from "./EmptyStateText";
 import { PlainInput } from "./core/PlainInput";
 import { Select } from "./core/Select";

apps/yaak-client/components/CopyIconButton.tsx

@@ -1,31 +1,22 @@
-import { IconButton, type IconButtonProps, useTimedBoolean } from "@yaakapp-internal/ui";
+import {
+  CopyIconButton as BaseCopyIconButton,
+  type CopyIconButtonProps,
+} from "@yaakapp-internal/ui";
 import { copyToClipboard } from "../lib/copy";
 import { showToast } from "../lib/toast";
 
-interface Props extends Omit<IconButtonProps, "onClick" | "icon"> {
-  text: string | (() => Promise<string | null>);
+export function CopyIconButton(props: Omit<CopyIconButtonProps, "copy" | "onCopyFailed">) {
+  return <BaseCopyIconButton {...props} copy={copy} onCopyFailed={showCopyFailed} />;
 }
 
-export function CopyIconButton({ text, ...props }: Props) {
-  const [copied, setCopied] = useTimedBoolean();
-  return (
-    <IconButton
-      {...props}
-      icon={copied ? "check" : "copy"}
-      showConfirm
-      onClick={async () => {
-        const content = typeof text === "function" ? await text() : text;
-        if (content == null) {
-          showToast({
-            id: "failed-to-copy",
-            color: "danger",
-            message: "Failed to copy",
-          });
-        } else {
-          copyToClipboard(content, { disableToast: true });
-          setCopied();
-        }
-      }}
-    />
-  );
+function copy(text: string) {
+  copyToClipboard(text, { disableToast: true });
+}
+
+function showCopyFailed() {
+  showToast({
+    id: "failed-to-copy",
+    color: "danger",
+    message: "Failed to copy",
+  });
 }

apps/yaak-client/components/CreateEnvironmentDialog.tsx

@@ -1,12 +1,12 @@
 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 { Label } from "./core/Label";
+import { DialogFooter } from "./core/Dialog";
 import { PlainInput } from "./core/PlainInput";
+import { Label } from "@yaakapp-internal/ui";
 
 interface Props {
   onCreate: (id: string) => void;
@@ -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

@@ -1,15 +1,14 @@
 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 { VStack, Label } from "@yaakapp-internal/ui";
+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 { Label } from "./core/Label";
+import { DialogFooter } from "./core/Dialog";
 import { PlainInput } from "./core/PlainInput";
 import { EncryptionHelp } from "./EncryptionHelp";
 import { gitCallbacks } from "./git/callbacks";
@@ -26,12 +25,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 +89,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/DynamicForm.tsx

@@ -11,7 +11,7 @@ import type {
   FormInputText,
   JsonPrimitive,
 } from "@yaakapp-internal/plugins";
-import { Banner, VStack } from "@yaakapp-internal/ui";
+import { Banner, VStack, Label } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo } from "react";
@@ -26,7 +26,6 @@ import { Editor } from "./core/Editor/LazyEditor";
 import { IconButton } from "./core/IconButton";
 import type { InputProps } from "./core/Input";
 import { Input } from "./core/Input";
-import { Label } from "./core/Label";
 import type { Pair } from "./core/PairEditor";
 import { PairEditor } from "./core/PairEditor";
 import { PlainInput } from "./core/PlainInput";

apps/yaak-client/components/EnvironmentEditDialog.tsx

@@ -1,11 +1,19 @@
 import type { Environment, Workspace } from "@yaakapp-internal/models";
 import { duplicateModel, patchModel } from "@yaakapp-internal/models";
 import type { TreeHandle, TreeNode, TreeProps } from "@yaakapp-internal/ui";
-import { Banner, Icon, InlineCode, SplitLayout, Tree } from "@yaakapp-internal/ui";
+import { Banner, Icon, InlineCode, SplitLayout, Tree, IconTooltip } 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,
@@ -22,7 +30,6 @@ import { showColorPicker } from "../lib/showColorPicker";
 import type { ContextMenuProps, DropdownItem } from "./core/Dropdown";
 import { ContextMenu } from "./core/Dropdown";
 import { IconButton } from "./core/IconButton";
-import { IconTooltip } from "./core/IconTooltip";
 import type { PairEditorHandle } from "./core/PairEditor";
 import { EnvironmentColorIndicator } from "./EnvironmentColorIndicator";
 import { EnvironmentEditor } from "./EnvironmentEditor";
@@ -40,6 +47,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 +125,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 +134,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 +169,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 +238,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 +301,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 +310,7 @@ function EnvironmentEditDialogSidebar({
     },
     [
       baseEnvironments.length,
+      handleCreateSubEnvironment,
       handleDeleteEnvironment,
       handleDuplicateSelected,
       handleRenameSelected,
@@ -317,34 +362,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 +432,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 +452,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 +463,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 +483,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/EnvironmentSharableTooltip.tsx

@@ -1,4 +1,4 @@
-import { IconTooltip } from "./core/IconTooltip";
+import { IconTooltip } from "@yaakapp-internal/ui";
 
 export function EnvironmentSharableTooltip() {
   return (

apps/yaak-client/components/ErrorBoundary.tsx

@@ -1,60 +1,19 @@
-import { Banner, Button, InlineCode } from "@yaakapp-internal/ui";
-import type { ErrorInfo, ReactNode } from "react";
-import { Component, useEffect } from "react";
+import { ErrorBoundary as BaseErrorBoundary } from "@yaakapp-internal/ui";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
 import { showDialog } from "../lib/dialog";
 import RouteError from "./RouteError";
 
-interface ErrorBoundaryProps {
-  name: string;
-  children: ReactNode;
+export function ErrorBoundary({ name, children }: { name: string; children: ReactNode }) {
+  return (
+    <BaseErrorBoundary name={name} onShowError={showErrorDialog}>
+      {children}
+    </BaseErrorBoundary>
+  );
 }
 
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.warn("Error caught by ErrorBoundary:", error, info);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <Banner color="danger" className="flex items-center gap-2 overflow-auto">
-          <div>
-            Error rendering <InlineCode>{this.props.name}</InlineCode> component
-          </div>
-          <Button
-            className="inline-flex"
-            variant="border"
-            color="danger"
-            size="2xs"
-            onClick={() => {
-              showDialog({
-                id: "error-boundary",
-                render: () => <RouteError error={this.state.error} />,
-              });
-            }}
-          >
-            Show
-          </Button>
-        </Banner>
-      );
-    }
-
-    return this.props.children;
-  }
+export function showErrorDialog(error: unknown) {
+  showDialog({ id: "error-boundary", render: () => <RouteError error={error} /> });
 }
 
 export function ErrorBoundaryTestThrow() {

apps/yaak-client/components/ExportDataDialog.tsx

@@ -1,18 +1,18 @@
 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";
 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";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   onHide: () => void;
@@ -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/FolderLayout.tsx

@@ -1,6 +1,14 @@
 import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
 import { foldersAtom } from "@yaakapp-internal/models";
-import { Heading, HStack, Icon, LoadingIcon } from "@yaakapp-internal/ui";
+import {
+  Heading,
+  HStack,
+  Icon,
+  LoadingIcon,
+  HttpResponseDurationTag,
+  HttpStatusTag,
+  SizeTag,
+} from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import type { CSSProperties, ReactNode } from "react";
@@ -13,11 +21,8 @@ import { showDialog } from "../lib/dialog";
 import { resolvedModelName } from "../lib/resolvedModelName";
 import { router } from "../lib/router";
 import { Button } from "./core/Button";
-import { HttpResponseDurationTag } from "./core/HttpResponseDurationTag";
-import { HttpStatusTag } from "./core/HttpStatusTag";
 import { IconButton } from "./core/IconButton";
 import { Separator } from "./core/Separator";
-import { SizeTag } from "./core/SizeTag";
 import { HttpResponsePane } from "./HttpResponsePane";
 
 interface Props {

apps/yaak-client/components/FolderSettingsDialog.tsx

@@ -1,5 +1,5 @@
 import { createWorkspaceModel, foldersAtom, patchModel } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { HStack, Icon, InlineCode, VStack, CountBadge } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { Fragment, useMemo } from "react";
 import { useAuthTab } from "../hooks/useAuthTab";
@@ -11,7 +11,6 @@ import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
 import { hideDialog } from "../lib/dialog";
 import { CopyIconButton } from "./CopyIconButton";
 import { Button } from "./core/Button";
-import { CountBadge } from "./core/CountBadge";
 import { Input } from "./core/Input";
 import { Link } from "./core/Link";
 import type { TabItem } from "./core/Tabs/Tabs";

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

@@ -20,13 +20,13 @@ import { showConfirm } from "../lib/confirm";
 import { showDialog } from "../lib/dialog";
 import type { JsonSchema } from "../lib/jsonSchemaExample";
 import { buildExampleFromSchema } from "../lib/jsonSchemaExample";
-import { pluralizeCount } from "../lib/pluralize";
 import { queryClient } from "../lib/queryClient";
 import { Button } from "./core/Button";
 import { Dropdown } from "./core/Dropdown";
 import type { EditorProps } from "./core/Editor/Editor";
 import { Editor } from "./core/Editor/LazyEditor";
 import { GrpcProtoSelectionDialog } from "./GrpcProtoSelectionDialog";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 type Props = Pick<EditorProps, "heightMode" | "onChange" | "className" | "forceUpdateKey"> & {
   services: ReflectResponseService[] | null;
@@ -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,13 +1,13 @@
 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";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   onDone: () => void;
@@ -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/GrpcRequestPane.tsx

@@ -4,7 +4,7 @@ import {
   patchModel,
   patchModelDebounced,
 } from "@yaakapp-internal/models";
-import { HStack, Icon, useContainerSize, VStack } from "@yaakapp-internal/ui";
+import { HStack, Icon, useContainerSize, VStack, CountBadge } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { CSSProperties } from "react";
 import { useCallback, useMemo, useRef } from "react";
@@ -15,7 +15,6 @@ import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
 import { resolvedModelName } from "../lib/resolvedModelName";
 import { Button } from "./core/Button";
-import { CountBadge } from "./core/CountBadge";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
 import { RadioDropdown } from "./core/RadioDropdown";

apps/yaak-client/components/GrpcResponsePane.tsx

@@ -1,5 +1,13 @@
 import type { GrpcEvent, GrpcRequest } from "@yaakapp-internal/models";
-import { HStack, Icon, type IconProps, LoadingIcon, VStack } from "@yaakapp-internal/ui";
+import {
+  HStack,
+  Icon,
+  type IconProps,
+  LoadingIcon,
+  VStack,
+  useStateWithDeps,
+  KeyValueRows,
+} from "@yaakapp-internal/ui";
 import { useAtomValue, useSetAtom } from "jotai";
 import type { CSSProperties } from "react";
 import { useEffect, useMemo, useState } from "react";
@@ -9,13 +17,12 @@ import {
   pinnedGrpcConnectionIdAtom,
   useGrpcEvents,
 } from "../hooks/usePinnedGrpcConnection";
-import { useStateWithDeps } from "../hooks/useStateWithDeps";
 import { Button } from "./core/Button";
 import { Editor } from "./core/Editor/LazyEditor";
 import { EventDetailHeader, EventViewer } from "./core/EventViewer";
 import { EventViewerRow } from "./core/EventViewerRow";
 import { HotkeyList } from "./core/HotkeyList";
-import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { KeyValueRow } from "./core/KeyValueRow";
 import { EmptyStateText } from "./EmptyStateText";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { RecentGrpcConnectionsDropdown } from "./RecentGrpcConnectionsDropdown";

apps/yaak-client/components/HeadersEditor.tsx

@@ -1,5 +1,5 @@
 import type { HttpRequestHeader } from "@yaakapp-internal/models";
-import { HStack } from "@yaakapp-internal/ui";
+import { HStack, CountBadge } from "@yaakapp-internal/ui";
 import { acceptLanguages } from "../lib/data/acceptLanguages";
 import { cacheControlDirectives } from "../lib/data/cacheControl";
 import { charsets } from "../lib/data/charsets";
@@ -9,7 +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 { CountBadge } from "./core/CountBadge";
+import { validateHttpHeader } from "../lib/validateHttpHeader";
 import { DetailsBanner } from "./core/DetailsBanner";
 import type { GenericCompletion, GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import type { InputProps } from "./core/Input";
@@ -178,13 +178,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/HttpRequestPane.tsx

@@ -15,8 +15,6 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
 import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
-import { languageFromContentType } from "../lib/contentType";
-import { generateId } from "../lib/generateId";
 import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
 import { convertRequestBody } from "../lib/requestBodyConversion";
 import {
@@ -35,11 +33,10 @@ import { resolvedModelName } from "../lib/resolvedModelName";
 import { showToast } from "../lib/toast";
 import { BinaryFileEditor } from "./BinaryFileEditor";
 import { ConfirmLargeRequestBody } from "./ConfirmLargeRequestBody";
-import { CountBadge } from "./core/CountBadge";
 import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import { getUrlCompletionConfig } from "./core/Editor/url/completion";
 import { Editor } from "./core/Editor/LazyEditor";
-import { InlineCode } from "@yaakapp-internal/ui";
+import { InlineCode, languageFromContentType, CountBadge } from "@yaakapp-internal/ui";
 import { PlainInput } from "./core/PlainInput";
 import type { TabItem, TabsRef } from "./core/Tabs/Tabs";
 import { setActiveTab, TabContent, Tabs } from "./core/Tabs/Tabs";
@@ -54,6 +51,7 @@ import { RequestMethodDropdown } from "./RequestMethodDropdown";
 import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
 import { UrlBar } from "./UrlBar";
 import { UrlParametersEditor } from "./UrlParameterEditor";
+import { generateId } from "@yaakapp-internal/lib/generateId";
 
 const GraphQLEditor = lazy(() =>
   import("./graphql/GraphQLEditor").then((m) => ({ default: m.GraphQLEditor })),

apps/yaak-client/components/HttpResponsePane.tsx

@@ -1,5 +1,21 @@
 import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
-import { Banner, HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
+import {
+  Banner,
+  HStack,
+  Icon,
+  LoadingIcon,
+  VStack,
+  CountBadge,
+  HttpResponseDurationTag,
+  HttpStatusTag,
+  SizeTag,
+  Tooltip,
+  AudioViewer,
+  CsvViewer,
+  ImageViewer,
+  SvgViewer,
+  VideoViewer,
+} from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { ComponentType, CSSProperties } from "react";
 import { lazy, Suspense, useMemo } from "react";
@@ -17,15 +33,10 @@ import { getContentTypeFromHeaders, getCookieCounts } from "../lib/model_util";
 import { ConfirmLargeResponse } from "./ConfirmLargeResponse";
 import { ConfirmLargeResponseRequest } from "./ConfirmLargeResponseRequest";
 import { Button } from "./core/Button";
-import { CountBadge } from "./core/CountBadge";
 import { HotkeyList } from "./core/HotkeyList";
-import { HttpResponseDurationTag } from "./core/HttpResponseDurationTag";
-import { HttpStatusTag } from "./core/HttpStatusTag";
 import { PillButton } from "./core/PillButton";
-import { SizeTag } from "./core/SizeTag";
 import type { TabItem } from "./core/Tabs/Tabs";
 import { TabContent, Tabs } from "./core/Tabs/Tabs";
-import { Tooltip } from "./core/Tooltip";
 import { EmptyStateText } from "./EmptyStateText";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { HttpResponseTimeline } from "./HttpResponseTimeline";
@@ -33,14 +44,9 @@ import { RecentHttpResponsesDropdown } from "./RecentHttpResponsesDropdown";
 import { RequestBodyViewer } from "./RequestBodyViewer";
 import { ResponseCookies } from "./ResponseCookies";
 import { ResponseHeaders } from "./ResponseHeaders";
-import { AudioViewer } from "./responseViewers/AudioViewer";
-import { CsvViewer } from "./responseViewers/CsvViewer";
 import { EventStreamViewer } from "./responseViewers/EventStreamViewer";
 import { HTMLOrTextViewer } from "./responseViewers/HTMLOrTextViewer";
-import { ImageViewer } from "./responseViewers/ImageViewer";
 import { MultipartViewer } from "./responseViewers/MultipartViewer";
-import { SvgViewer } from "./responseViewers/SvgViewer";
-import { VideoViewer } from "./responseViewers/VideoViewer";
 
 const PdfViewer = lazy(() =>
   import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),

apps/yaak-client/components/HttpResponseTimeline.tsx

@@ -13,9 +13,8 @@ import { resolvedModelName } from "../lib/resolvedModelName";
 import { Editor } from "./core/Editor/LazyEditor";
 import { type EventDetailAction, EventDetailHeader, EventViewer } from "./core/EventViewer";
 import { EventViewerRow } from "./core/EventViewerRow";
-import { HttpStatusTagRaw } from "./core/HttpStatusTag";
-import { Icon, type IconProps } from "@yaakapp-internal/ui";
-import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { Icon, type IconProps, HttpStatusTagRaw, KeyValueRows } from "@yaakapp-internal/ui";
+import { KeyValueRow } from "./core/KeyValueRow";
 import type { TimelineViewMode } from "./HttpResponsePane";
 
 interface Props {

apps/yaak-client/components/ImportDataDialog.tsx

@@ -1,33 +1,35 @@
 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, IconTooltip } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import { formatDistanceToNowStrict } from "date-fns";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { pluralize } from "../lib/pluralize";
+import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { errorMessage } from "../lib/errorMessage";
 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 { IconTooltip } from "./core/IconTooltip";
-import { PlainInput } from "./core/PlainInput";
+import { Chip } from "./core/Chip";
+import { DialogFooter } from "./core/Dialog";
 import { Select } from "./core/Select";
 import { SegmentedControl } from "./core/SegmentedControl";
+import { pluralize } from "@yaakapp-internal/lib/pluralize";
 
 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 +37,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 +65,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 +85,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 +182,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 +189,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 +218,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 +271,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 +490,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 +525,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 +540,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 +559,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 +569,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 +668,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 +710,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/JsonBodyEditor.tsx

@@ -1,7 +1,7 @@
 import { linter } from "@codemirror/lint";
 import type { HttpRequest } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
-import { Banner, Icon } from "@yaakapp-internal/ui";
+import { Banner, Icon, IconTooltip } from "@yaakapp-internal/ui";
 import { useCallback, useMemo } from "react";
 import { useKeyValue } from "../hooks/useKeyValue";
 import { fireAndForget } from "../lib/fireAndForget";
@@ -12,7 +12,6 @@ import type { EditorProps } from "./core/Editor/Editor";
 import { jsonParseLinter } from "./core/Editor/json-lint";
 import { Editor } from "./core/Editor/LazyEditor";
 import { IconButton } from "./core/IconButton";
-import { IconTooltip } from "./core/IconTooltip";
 
 interface Props {
   forceUpdateKey: string;

apps/yaak-client/components/LargeValueDialog.tsx

@@ -1,15 +1,20 @@
 import { formatSize } from "@yaakapp-internal/lib/formatSize";
-import { Banner, Button, HStack, LoadingIcon } from "@yaakapp-internal/ui";
+import {
+  Banner,
+  Button,
+  HStack,
+  LoadingIcon,
+  AudioViewer,
+  ImageViewer,
+  SvgViewer,
+  VideoViewer,
+} from "@yaakapp-internal/ui";
 import type { ReactNode } from "react";
 import { lazy, Suspense, useEffect, useMemo, useState } from "react";
 import type { SniffedValue } from "./core/Editor/sniffValue";
 import { showDialog } from "../lib/dialog";
 import { decodeValue, largeValueActions } from "../lib/largeValue";
 import { Dropdown } from "./core/Dropdown";
-import { AudioViewer } from "./responseViewers/AudioViewer";
-import { ImageViewer } from "./responseViewers/ImageViewer";
-import { SvgViewer } from "./responseViewers/SvgViewer";
-import { VideoViewer } from "./responseViewers/VideoViewer";
 
 const PdfViewer = lazy(() =>
   import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),

apps/yaak-client/components/MoveToWorkspaceDialog.tsx

@@ -3,12 +3,12 @@ import { patchModel, workspacesAtom } from "@yaakapp-internal/models";
 import { InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useState } from "react";
-import { pluralizeCount } from "../lib/pluralize";
 import { resolvedModelName } from "../lib/resolvedModelName";
 import { router } from "../lib/router";
 import { showToast } from "../lib/toast";
 import { Button } from "./core/Button";
 import { Select } from "./core/Select";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   activeWorkspaceId: string;

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

@@ -1,6 +1,6 @@
 import type { GrpcConnection } from "@yaakapp-internal/models";
 import { deleteModel } from "@yaakapp-internal/models";
-import { HStack, Icon } from "@yaakapp-internal/ui";
+import { HStack, Icon, formatMillis } from "@yaakapp-internal/ui";
 import {
   differenceInHours,
   differenceInMinutes,
@@ -9,10 +9,9 @@ import {
   isYesterday,
 } from "date-fns";
 import { useDeleteGrpcConnections } from "../hooks/useDeleteGrpcConnections";
-import { pluralizeCount } from "../lib/pluralize";
 import { Dropdown, type DropdownItem } from "./core/Dropdown";
-import { formatMillis } from "./core/HttpResponseDurationTag";
 import { IconButton } from "./core/IconButton";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   connections: GrpcConnection[];

apps/yaak-client/components/RecentHttpResponsesDropdown.tsx

@@ -1,6 +1,6 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { deleteModel } from "@yaakapp-internal/models";
-import { HStack, Icon } from "@yaakapp-internal/ui";
+import { HStack, Icon, formatMillis, HttpStatusTag, SizeTag } from "@yaakapp-internal/ui";
 import {
   differenceInHours,
   differenceInMinutes,
@@ -12,10 +12,7 @@ import { useDeleteHttpResponses } from "../hooks/useDeleteHttpResponses";
 import { useKeyValue } from "../hooks/useKeyValue";
 import { DismissibleBanner } from "./core/DismissibleBanner";
 import { Dropdown, type DropdownItem } from "./core/Dropdown";
-import { formatMillis } from "./core/HttpResponseDurationTag";
-import { HttpStatusTag } from "./core/HttpStatusTag";
 import { IconButton } from "./core/IconButton";
-import { SizeTag } from "./core/SizeTag";
 
 interface Props {
   responses: HttpResponse[];

apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx

@@ -1,6 +1,6 @@
 import type { WebsocketConnection } from "@yaakapp-internal/models";
 import { deleteModel, getModel } from "@yaakapp-internal/models";
-import { HStack, Icon } from "@yaakapp-internal/ui";
+import { HStack, Icon, formatMillis } from "@yaakapp-internal/ui";
 import {
   differenceInHours,
   differenceInMinutes,
@@ -9,10 +9,9 @@ import {
   isYesterday,
 } from "date-fns";
 import { deleteWebsocketConnections } from "../commands/deleteWebsocketConnections";
-import { pluralizeCount } from "../lib/pluralize";
 import { Dropdown, type DropdownItem } from "./core/Dropdown";
-import { formatMillis } from "./core/HttpResponseDurationTag";
 import { IconButton } from "./core/IconButton";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   connections: WebsocketConnection[];

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

@@ -1,17 +1,20 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { lazy, Suspense } from "react";
 import { useHttpRequestBody } from "../hooks/useHttpRequestBody";
-import { getMimeTypeFromContentType, languageFromContentType } from "../lib/contentType";
-import { LoadingIcon } from "@yaakapp-internal/ui";
+import { getMimeTypeFromContentType } from "../lib/contentType";
+import {
+  LoadingIcon,
+  languageFromContentType,
+  AudioViewer,
+  CsvViewer,
+  ImageViewer,
+  SvgViewer,
+  VideoViewer,
+  WebPageViewer,
+} from "@yaakapp-internal/ui";
 import { EmptyStateText } from "./EmptyStateText";
-import { AudioViewer } from "./responseViewers/AudioViewer";
-import { CsvViewer } from "./responseViewers/CsvViewer";
-import { ImageViewer } from "./responseViewers/ImageViewer";
 import { MultipartViewer } from "./responseViewers/MultipartViewer";
-import { SvgViewer } from "./responseViewers/SvgViewer";
 import { TextViewer } from "./responseViewers/TextViewer";
-import { VideoViewer } from "./responseViewers/VideoViewer";
-import { WebPageViewer } from "./responseViewers/WebPageViewer";
 
 const PdfViewer = lazy(() =>
   import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),

apps/yaak-client/components/ResponseCookies.tsx

@@ -3,9 +3,9 @@ import classNames from "classnames";
 import { useMemo } from "react";
 import type { JSX } from "react/jsx-runtime";
 import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
-import { CountBadge } from "./core/CountBadge";
 import { DetailsBanner } from "./core/DetailsBanner";
-import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { KeyValueRow } from "./core/KeyValueRow";
+import { CountBadge, KeyValueRows } from "@yaakapp-internal/ui";
 
 interface Props {
   response: HttpResponse;

apps/yaak-client/components/ResponseHeaders.tsx

@@ -1,31 +1,16 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
-import { format, formatDistanceToNowStrict } from "date-fns";
-import { useMemo } from "react";
-import { CountBadge } from "./core/CountBadge";
-import { DetailsBanner } from "./core/DetailsBanner";
-import { IconButton } from "./core/IconButton";
-import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
 import { platform } from "@yaakapp-internal/platform";
+import { HeadersTable, KeyValueRows } from "@yaakapp-internal/ui";
+import { format, formatDistanceToNowStrict } from "date-fns";
+import { DetailsBanner, useDetailsBannerStoredValue } from "./core/DetailsBanner";
+import { IconButton } from "./core/IconButton";
+import { KeyValueRow } from "./core/KeyValueRow";
 
 interface Props {
   response: HttpResponse;
 }
 
 export function ResponseHeaders({ response }: Props) {
-  const responseHeaders = useMemo(
-    () =>
-      [...response.headers].sort((a, b) =>
-        a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()),
-      ),
-    [response.headers],
-  );
-  const requestHeaders = useMemo(
-    () =>
-      [...response.requestHeaders].sort((a, b) =>
-        a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()),
-      ),
-    [response.requestHeaders],
-  );
   return (
     <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
       <DetailsBanner storageKey={`${response.requestId}.general`} summary={<h2>Info</h2>}>
@@ -58,53 +43,21 @@ export function ResponseHeaders({ response }: Props) {
           </KeyValueRow>
         </KeyValueRows>
       </DetailsBanner>
-      <DetailsBanner
+      <HeadersTable
+        title="Request Headers"
+        headers={response.requestHeaders}
+        labelColor="primary"
         storageKey={`${response.requestId}.request_headers`}
-        summary={
-          <h2 className="flex items-center">
-            Request Headers <CountBadge showZero count={requestHeaders.length} />
-          </h2>
-        }
-      >
-        {requestHeaders.length === 0 ? (
-          <NoHeaders />
-        ) : (
-          <KeyValueRows>
-            {requestHeaders.map((h, i) => (
-              // oxlint-disable-next-line react/no-array-index-key
-              <KeyValueRow labelColor="primary" key={i} label={h.name}>
-                {h.value}
-              </KeyValueRow>
-            ))}
-          </KeyValueRows>
-        )}
-      </DetailsBanner>
-      <DetailsBanner
+        useStoredValue={useDetailsBannerStoredValue}
+      />
+      <HeadersTable
         defaultOpen
+        title="Response Headers"
+        headers={response.headers}
+        labelColor="info"
         storageKey={`${response.requestId}.response_headers`}
-        summary={
-          <h2 className="flex items-center">
-            Response Headers <CountBadge showZero count={responseHeaders.length} />
-          </h2>
-        }
-      >
-        {responseHeaders.length === 0 ? (
-          <NoHeaders />
-        ) : (
-          <KeyValueRows>
-            {responseHeaders.map((h, i) => (
-              // oxlint-disable-next-line react/no-array-index-key
-              <KeyValueRow labelColor="info" key={i} label={h.name}>
-                {h.value}
-              </KeyValueRow>
-            ))}
-          </KeyValueRows>
-        )}
-      </DetailsBanner>
+        useStoredValue={useDetailsBannerStoredValue}
+      />
     </div>
   );
 }
-
-function NoHeaders() {
-  return <span className="text-text-subtlest text-sm italic">No Headers</span>;
-}

apps/yaak-client/components/ResponseInfo.tsx

@@ -1,7 +1,8 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { IconButton } from "./core/IconButton";
-import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { KeyValueRow } from "./core/KeyValueRow";
 import { platform } from "@yaakapp-internal/platform";
+import { KeyValueRows } from "@yaakapp-internal/ui";
 
 interface Props {
   response: HttpResponse;

apps/yaak-client/components/SelectFile.tsx

@@ -1,5 +1,5 @@
 import { platform } from "@yaakapp-internal/platform";
-import { HStack } from "@yaakapp-internal/ui";
+import { HStack, IconTooltip, Label } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import mime from "mime";
 import type { ReactNode } from "react";
@@ -7,8 +7,6 @@ import { useEffect, useRef, useState } from "react";
 import type { ButtonProps } from "./core/Button";
 import { Button } from "./core/Button";
 import { IconButton } from "./core/IconButton";
-import { IconTooltip } from "./core/IconTooltip";
-import { Label } from "./core/Label";
 
 type Props = Omit<ButtonProps, "type"> & {
   onChange: (value: { filePath: string | null; contentType: string | null }) => void;

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

@@ -1,14 +1,14 @@
 import { platform } from "@yaakapp-internal/platform";
 import { useLicense } from "@yaakapp-internal/license";
 import { pluginsAtom, settingsAtom } from "@yaakapp-internal/models";
-import { HeaderSize, HStack, Icon } from "@yaakapp-internal/ui";
+import { HeaderSize, HStack, Icon, CountBadge } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import { useKeyPressEvent } from "react-use";
 import { appInfo } from "../../lib/appInfo";
 import { capitalize } from "../../lib/capitalize";
-import { CountBadge } from "../core/CountBadge";
 import { TabContent, type TabItem, Tabs } from "../core/Tabs/Tabs";
+import { SettingsAgents } from "./SettingsAgents";
 import { SettingsCertificates } from "./SettingsCertificates";
 import { SettingsGeneral } from "./SettingsGeneral";
 import { SettingsHotkeys } from "./SettingsHotkeys";
@@ -31,6 +31,7 @@ const TAB_SHORTCUTS = "shortcuts";
 const TAB_PROXY = "proxy";
 const TAB_CERTIFICATES = "certificates";
 const TAB_PLUGINS = "plugins";
+const TAB_AGENTS = "agents";
 const TAB_LICENSE = "license";
 const tabs = [
   TAB_GENERAL,
@@ -38,6 +39,7 @@ const tabs = [
   TAB_INTERFACE,
   TAB_SHORTCUTS,
   TAB_PLUGINS,
+  TAB_AGENTS,
   TAB_CERTIFICATES,
   TAB_PROXY,
   TAB_LICENSE,
@@ -93,7 +95,9 @@ export default function Settings({ tab, hide }: Props) {
           (value): TabItem => ({
             value,
             label: capitalize(value),
-            hidden: !appInfo.featureLicense && value === TAB_LICENSE,
+            hidden:
+              (!appInfo.featureLicense && value === TAB_LICENSE) ||
+              (!platform.capabilities.agents && value === TAB_AGENTS),
             leftSlot:
               value === TAB_GENERAL ? (
                 <Icon icon="settings" className="text-secondary" />
@@ -109,6 +113,8 @@ export default function Settings({ tab, hide }: Props) {
                 <Icon icon="wifi" className="text-secondary" />
               ) : value === TAB_PLUGINS ? (
                 <Icon icon="puzzle" className="text-secondary" />
+              ) : value === TAB_AGENTS ? (
+                <Icon icon="sparkles" className="text-secondary" />
               ) : value === TAB_LICENSE ? (
                 <Icon icon="key_round" className="text-secondary" />
               ) : null,
@@ -140,6 +146,9 @@ export default function Settings({ tab, hide }: Props) {
         <TabContent value={TAB_PLUGINS} className="h-full grid grid-rows-1">
           <SettingsPlugins defaultSubtab={mainTab === TAB_PLUGINS ? subtab : undefined} />
         </TabContent>
+        <TabContent value={TAB_AGENTS} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsAgents />
+        </TabContent>
         <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-6 py-4!">
           <SettingsProxy />
         </TabContent>

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

@@ -0,0 +1,140 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { platform } from "@yaakapp-internal/platform";
+import type { AgentSetupStatus, AppMetaData } from "@yaakapp-internal/rpc-schema";
+import { Banner, Heading, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useEffect } from "react";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import { usePluginInfos } from "../../hooks/usePluginInfo";
+import {
+  AGENT_CLIENTS,
+  type AgentClient,
+  cliSetup,
+  skillInstallCommand,
+} from "../../lib/agentSetup";
+import { appInfo } from "../../lib/appInfo";
+import { rpc } from "../../lib/rpc";
+import { Link } from "../core/Link";
+import { SegmentedControl } from "../core/SegmentedControl";
+import {
+  SettingCommand,
+  SettingSnippet,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";
+import { DeprecatedPluginBanner } from "./SettingsPlugins";
+
+const CLI_INSTALL_COMMAND = "npm install -g @yaakapp/cli";
+const MCP_SERVER_PLUGIN = "@yaak/mcp-server";
+
+export function SettingsAgents() {
+  const queryClient = useQueryClient();
+  const { value: storedClient, set: setClient } = useKeyValue<AgentClient>({
+    key: "agents_setup_client",
+    fallback: "claude_code",
+  });
+  const client = AGENT_CLIENTS.find((c) => c.value === storedClient)?.value ?? "claude_code";
+  const clientLabel = AGENT_CLIENTS.find((c) => c.value === client)?.label ?? "your agent";
+  const cliVersion = useQuery({
+    queryKey: ["cli_version"],
+    queryFn: async () => (await rpc<AppMetaData>("cmd_metadata")).cliVersion,
+    initialData: appInfo.cliVersion,
+  });
+  const setupStatus = useQuery({
+    queryKey: ["agent_setup_status", client],
+    queryFn: () => rpc<AgentSetupStatus>("cmd_agent_setup_status", { agent: client }),
+  });
+  const mcpServerPlugin = usePluginInfos().find(({ info }) => info.name === MCP_SERVER_PLUGIN);
+
+  useEffect(() => {
+    return platform.window.onFocusChanged((focused) => {
+      if (!focused) return;
+      void queryClient.invalidateQueries({ queryKey: ["cli_version"] });
+      void queryClient.invalidateQueries({ queryKey: ["agent_setup_status"] });
+    });
+  }, [queryClient]);
+
+  const cliInstalled = cliVersion.data != null;
+  const cli = cliSetup(client);
+
+  return (
+    <VStack space={1.5} className="mb-4">
+      <div className="mb-3">
+        <Heading>Agents</Heading>
+        <p className="text-text-subtle">
+          Connect AI coding agents like Claude Code and Cursor to Yaak.
+        </p>
+      </div>
+      <SettingsList>
+        <SettingsSection title={null}>
+          <div className="pb-4 border-b border-border-subtle">
+            <SegmentedControl
+              name="agents_setup_client"
+              label="Agent"
+              hideLabel
+              value={client}
+              onChange={setClient}
+              options={AGENT_CLIENTS}
+            />
+          </div>
+          {cliInstalled ? (
+            <div className="flex items-center gap-2 py-3 text-sm text-text-subtle border-b border-border-subtle">
+              <Icon icon="check" size="sm" color="success" />
+              <span>
+                Yaak CLI <span className="text-text">{cliVersion.data}</span> is installed.
+              </span>
+            </div>
+          ) : (
+            <div className="py-4 border-b border-border-subtle">
+              <Banner color="info">
+                <div className="flex items-center gap-2 text text-text">
+                  <Icon icon="square_terminal" color="info" />
+                  Install the Yaak CLI first
+                </div>
+                <p className="mt-1 text-sm text-text-subtle">
+                  Agents launch it to reach Yaak, even with the app closed.
+                </p>
+                <SettingSnippet className="mt-3" language="shell" snippet={CLI_INSTALL_COMMAND} />
+                <div className="mt-3 mb-1 flex items-center gap-4 text-sm">
+                  <Link href="https://yaak.app/docs/cli">Docs</Link>
+                  <span className="text-text-subtlest">
+                    Checks again when you come back to Yaak.
+                  </span>
+                </div>
+              </Banner>
+            </div>
+          )}
+          {mcpServerPlugin != null && (
+            <div className="py-4 border-b border-border-subtle">
+              <DeprecatedPluginBanner
+                plugin={mcpServerPlugin.plugin}
+                name={mcpServerPlugin.info.displayName}
+              >
+                The two steps below replace it. Uninstall it once your agent is connected.
+              </DeprecatedPluginBanner>
+            </div>
+          )}
+          <SettingCommand
+            title="Add the MCP server"
+            description={cli.where}
+            snippet={cli.snippet}
+            language={cli.language}
+            disabled={!cliInstalled}
+            done={setupStatus.data?.mcpServer ? "Added" : null}
+          />
+          <SettingCommand
+            title="Install the skill"
+            description={
+              <>
+                Lets {clientLabel} run the <InlineCode>yaak</InlineCode> command directly.
+              </>
+            }
+            snippet={skillInstallCommand(client)}
+            language="shell"
+            disabled={!cliInstalled}
+            done={setupStatus.data?.skill ? "Installed" : null}
+          />
+        </SettingsSection>
+      </SettingsList>
+    </VStack>
+  );
+}

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

@@ -4,7 +4,6 @@ import { differenceInDays } from "date-fns";
 import { formatDate } from "date-fns/format";
 import { useState } from "react";
 import { useToggle } from "../../hooks/useToggle";
-import { pluralizeCount } from "../../lib/pluralize";
 import { pricingUrl } from "../../lib/pricingUrl";
 import { CargoFeature } from "../CargoFeature";
 import { Button } from "../core/Button";
@@ -12,6 +11,7 @@ import { Link } from "../core/Link";
 import { PlainInput } from "../core/PlainInput";
 import { Separator } from "../core/Separator";
 import { platform } from "@yaakapp-internal/platform";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 export function SettingsLicense() {
   return (

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

@@ -2,13 +2,9 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import type { Plugin } from "@yaakapp-internal/models";
 import { patchModel, pluginsAtom } from "@yaakapp-internal/models";
 import type { PluginVersion } from "@yaakapp-internal/plugins";
+import { checkPluginUpdates, installPlugin, searchPlugins } from "@yaakapp-internal/plugins";
 import {
-  checkPluginUpdates,
-  installPlugin,
-  searchPlugins,
-  uninstallPlugin,
-} from "@yaakapp-internal/plugins";
-import {
+  Banner,
   HStack,
   Icon,
   InlineCode,
@@ -20,18 +16,17 @@ import {
   TableHeaderCell,
   TableRow,
   useDebouncedValue,
+  CountBadge,
 } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { useInstallPlugin } from "../../hooks/useInstallPlugin";
-import { usePluginInfo } from "../../hooks/usePluginInfo";
+import { usePluginInfo, usePluginInfos } from "../../hooks/usePluginInfo";
 import { usePluginsKey, useRefreshPlugins } from "../../hooks/usePlugins";
-import { showConfirmDelete } from "../../lib/confirm";
-import { minPromiseMillis } from "../../lib/minPromiseMillis";
+import { usePromptUninstallPlugin } from "../../hooks/useUninstallPlugin";
 import { Button } from "../core/Button";
 import { Checkbox } from "../core/Checkbox";
-import { CountBadge } from "../core/CountBadge";
 import { IconButton } from "../core/IconButton";
 import { Link } from "../core/Link";
 import { PlainInput } from "../core/PlainInput";
@@ -205,7 +200,7 @@ function PluginTableRow({
     mutationKey: ["install_plugin", name],
     mutationFn: (name: string) => installPlugin(name, null),
   });
-  const uninstall = usePromptUninstall(plugin?.id ?? null, displayName);
+  const uninstall = usePromptUninstallPlugin(plugin?.id ?? null, displayName);
   const refreshPlugins = useRefreshPlugins();
 
   return (
@@ -296,7 +291,10 @@ function PluginSearch() {
   const debouncedQuery = useDebouncedValue(query);
   const results = useQuery({
     queryKey: ["plugins", debouncedQuery],
-    queryFn: () => searchPlugins(query),
+    queryFn: async () => {
+      const { plugins } = await searchPlugins(query);
+      return { plugins: plugins.filter((p) => p.deprecated == null) };
+    },
   });
 
   return (
@@ -349,22 +347,77 @@ function InstalledPlugins({ plugins, className }: { plugins: Plugin[]; className
       </EmptyStateText>
     </div>
   ) : (
-    <Table scrollable className={className}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell className="w-0" />
-          <TableHeaderCell>Display Name</TableHeaderCell>
-          <TableHeaderCell>Name</TableHeaderCell>
-          <TableHeaderCell>Version</TableHeaderCell>
-          <TableHeaderCell />
-        </TableRow>
-      </TableHead>
-      <tbody className="divide-y divide-surface-highlight">
-        {plugins.map((p) => (
-          <PluginTableRowForInstalledPlugin key={p.id} plugin={p} />
-        ))}
-      </tbody>
-    </Table>
+    <div className={classNames(className, "h-full grid grid-rows-[auto_minmax(0,1fr)]")}>
+      <DeprecatedPluginBanners />
+      <Table scrollable>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell className="w-0" />
+            <TableHeaderCell>Display Name</TableHeaderCell>
+            <TableHeaderCell>Name</TableHeaderCell>
+            <TableHeaderCell>Version</TableHeaderCell>
+            <TableHeaderCell />
+          </TableRow>
+        </TableHead>
+        <tbody className="divide-y divide-surface-highlight">
+          {plugins.map((p) => (
+            <PluginTableRowForInstalledPlugin key={p.id} plugin={p} />
+          ))}
+        </tbody>
+      </Table>
+    </div>
+  );
+}
+
+function DeprecatedPluginBanners() {
+  const deprecated = usePluginInfos().filter(
+    ({ plugin, info }) => plugin.source !== "bundled" && info.deprecated != null,
+  );
+  return (
+    <div className={classNames("flex flex-col gap-2", deprecated.length > 0 && "pb-3")}>
+      {deprecated.map(({ plugin, info }) => (
+        <DeprecatedPluginBanner key={plugin.id} plugin={plugin} name={info.displayName}>
+          {withInlineCode(info.deprecated ?? "")}
+        </DeprecatedPluginBanner>
+      ))}
+    </div>
+  );
+}
+
+/** Backtick spans in a package.json string, set as code. */
+function withInlineCode(text: string): ReactNode {
+  return text
+    .split("`")
+    .map((part, i) => (i % 2 === 1 ? <InlineCode key={i}>{part}</InlineCode> : part));
+}
+
+export function DeprecatedPluginBanner({
+  children,
+  name,
+  plugin,
+}: {
+  children: ReactNode;
+  name: string;
+  plugin: Plugin;
+}) {
+  const uninstall = usePromptUninstallPlugin(plugin.id, name);
+  return (
+    <Banner color="info" className="flex items-center gap-4">
+      <div className="min-w-0 flex-1">
+        <div className="text text-text">The {name} plugin is deprecated.</div>
+        <p className="mt-1 text-sm text-text-subtle">{children}</p>
+      </div>
+      <Button
+        size="xs"
+        variant="border"
+        title="Uninstall plugin"
+        className="shrink-0"
+        isLoading={uninstall?.isPending}
+        onClick={() => uninstall?.mutate()}
+      >
+        Uninstall
+      </Button>
+    </Banner>
   );
 }
 
@@ -393,31 +446,6 @@ function BundledPlugins({ plugins }: { plugins: Plugin[] }) {
   );
 }
 
-function usePromptUninstall(pluginId: string | null, name: string) {
-  const mut = useMutation({
-    mutationKey: ["uninstall_plugin", pluginId],
-    mutationFn: async () => {
-      if (pluginId == null) return;
-
-      const confirmed = await showConfirmDelete({
-        id: `uninstall-plugin-${pluginId}`,
-        title: "Uninstall Plugin",
-        confirmText: "Uninstall",
-        description: (
-          <>
-            Permanently uninstall <InlineCode>{name}</InlineCode>?
-          </>
-        ),
-      });
-      if (confirmed) {
-        await minPromiseMillis(uninstallPlugin(pluginId), 700);
-      }
-    },
-  });
-
-  return pluginId == null ? null : mut;
-}
-
 function usePluginUpdates() {
   return useQuery({
     queryKey: ["plugin_updates", usePluginsKey()],

apps/yaak-client/components/SettingsDropdown.tsx

@@ -82,10 +82,9 @@ export function SettingsDropdown() {
         },
         {
           label: "Install CLI",
-          hidden: appInfo.cliVersion != null,
+          hidden: appInfo.cliVersion != null || !platform.capabilities.agents,
           leftSlot: <Icon icon="square_terminal" />,
-          rightSlot: <Icon icon="external_link" color="secondary" />,
-          onSelect: () => platform.openUrl("https://yaak.app/docs/cli"),
+          onSelect: () => openSettings.mutate("agents"),
         },
         {
           label: "Feedback",

apps/yaak-client/components/Sidebar.tsx

@@ -69,7 +69,6 @@ import type { Ast } from "./core/Editor/filter/query";
 import { evaluate, parseQuery } from "./core/Editor/filter/query";
 import { formatFieldFilter } from "./core/Editor/filter/format";
 import { HttpMethodTag } from "./core/HttpMethodTag";
-import { HttpStatusTag } from "./core/HttpStatusTag";
 import {
   Icon,
   LoadingIcon,
@@ -77,6 +76,7 @@ import {
   isSelectedFamily,
   selectedIdsFamily,
   InlineCode,
+  HttpStatusTag,
 } from "@yaakapp-internal/ui";
 import type { TreeNode, TreeHandle, TreeProps, TreeItemProps } from "@yaakapp-internal/ui";
 import { IconButton } from "./core/IconButton";
@@ -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.test.tsx

@@ -0,0 +1,152 @@
+// @vitest-environment happy-dom
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import type { Workspace } from "@yaakapp-internal/models";
+import type { TemplateFunction } from "@yaakapp-internal/plugins";
+import type { Tokens } from "@yaakapp-internal/templates";
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeAll, beforeEach, expect, test, vi } from "vite-plus/test";
+import { TemplateFunctionDialog } from "./TemplateFunctionDialog";
+
+interface FormProps {
+  data: Record<string, string | boolean>;
+  onChange: (values: Record<string, string | boolean>) => void;
+}
+
+const mocks = vi.hoisted(() => ({
+  parse: vi.fn<(text: string) => Tokens>(),
+  print: vi.fn<(tokens: Tokens) => Promise<string>>(),
+  serialize: vi.fn<(tokens: Tokens) => { data: string }>(),
+  preview: vi.fn<({ template }: { template: string }) => { data: string }>(),
+  form: null as FormProps | null,
+  config: {
+    name: "timestamp.format",
+    args: [
+      { type: "text", name: "date" },
+      { type: "text", name: "format" },
+    ],
+  } as TemplateFunction,
+}));
+
+vi.mock("@yaakapp-internal/templates", () => ({ parseTemplate: mocks.parse }));
+vi.mock("@yaakapp-internal/ui", () => ({
+  HStack: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  InlineCode: "code",
+  LoadingIcon: () => null,
+  useDebouncedValue: (value: string) => value,
+}));
+vi.mock("../hooks/useActiveWorkspace", () => ({ activeWorkspaceAtom: null }));
+vi.mock("../hooks/useRenderTemplate", () => ({ useRenderTemplate: mocks.preview }));
+vi.mock("../hooks/useTemplateFunctionConfig", () => ({
+  useTemplateFunctionConfig: () => ({ data: mocks.config }),
+}));
+vi.mock("../hooks/useTemplateTokensToString", () => ({
+  templateTokensToString: mocks.print,
+  useTemplateTokensToString: mocks.serialize,
+}));
+vi.mock("../lib/dialog", () => ({ showDialog: vi.fn() }));
+vi.mock("../lib/encryption", () => ({ convertTemplateToInsecure: vi.fn() }));
+vi.mock("../lib/jotai", () => ({ jotaiStore: { get: vi.fn() } }));
+vi.mock("../lib/setupOrConfigureEncryption", () => ({ setupOrConfigureEncryption: vi.fn() }));
+vi.mock("./core/Dialog", () => ({ DialogFooter: () => <button type="submit">Save</button> }));
+vi.mock("./core/IconButton", () => ({ IconButton: () => <button type="button" /> }));
+vi.mock("./core/PlainInput", () => ({ PlainInput: () => null }));
+vi.mock("./DynamicForm", () => ({
+  DYNAMIC_FORM_NULL_ARG: "__NULL__",
+  DynamicForm: (props: FormProps) => {
+    mocks.form = props;
+    return <input aria-label="Timestamp" readOnly value={String(props.data.date ?? "")} />;
+  },
+}));
+
+beforeAll(async () => {
+  const base = pathToFileURL(
+    resolve(import.meta.dirname, "../../../crates/yaak-templates/pkg") + "/",
+  );
+  const bindings = await import(new URL("yaak_templates_bg.js", base).href);
+  const { instance } = await WebAssembly.instantiate(
+    await readFile(new URL("yaak_templates_bg.wasm", base)),
+    { "./yaak_templates_bg.js": bindings },
+  );
+  bindings.__wbg_set_wasm(instance.exports);
+  (instance.exports.__wbindgen_start as () => void)();
+  mocks.parse.mockImplementation(bindings.parse_template);
+});
+
+let root: Root;
+let host: HTMLDivElement;
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  mocks.form = null;
+  // The transport returns an opaque string. Carry the AST as JSON so the assertions can
+  // inspect what Preview and Save receive, without duplicating the backend's printer.
+  mocks.serialize.mockImplementation((tokens) => ({ data: JSON.stringify(tokens) }));
+  mocks.preview.mockImplementation(({ template }) => ({ data: template }));
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+function functionValue(tokens: Tokens) {
+  const first = tokens.tokens[0];
+  if (first?.type !== "tag" || first.val.type !== "fn") throw new Error("Expected function");
+  return first.val;
+}
+
+test.each([
+  ["timestamp.offset(expression='-1h')", "${[ timestamp.offset(expression='-1h') ]}"],
+  ["date_var", "${[ date_var ]}"],
+  ["dates.previous", "${[ dates.previous ]}"],
+  ["'${[ date_var ]}'", "${[ date_var ]}"],
+])("Preview and Save preserve %s until that input changes", async (expression, display) => {
+  const initialTokens = mocks.parse(`\${[ timestamp.format(date=${expression}, format='HH:mm') ]}`);
+  const originalDate = functionValue(initialTokens).args[0];
+  const saved = vi.fn<(value: string) => void>();
+  mocks.print.mockResolvedValue(display);
+
+  await act(async () =>
+    root.render(
+      <TemplateFunctionDialog
+        templateFunction={mocks.config}
+        initialTokens={initialTokens}
+        model={{ id: "wk_test" } as Workspace}
+        onChange={saved}
+        hide={() => {}}
+      />,
+    ),
+  );
+  expect(host.querySelector<HTMLInputElement>("input")?.value).toBe(display);
+
+  async function submit() {
+    const form = host.querySelector("form");
+    if (form == null) throw new Error("Dialog did not initialize");
+    await act(async () => {
+      form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    });
+    const value = saved.mock.calls.at(-1)?.[0];
+    expect(value).toBe(mocks.preview.mock.calls.at(-1)?.[0].template);
+    return functionValue(JSON.parse(value ?? "null") as Tokens).args;
+  }
+
+  expect((await submit())[0]).toEqual(originalDate);
+  await act(async () => mocks.form?.onChange({ ...mocks.form.data, format: "yyyy" }));
+  expect(await submit()).toEqual([
+    originalDate,
+    { name: "format", value: { type: "str", text: "yyyy" } },
+  ]);
+
+  const edited = "${[ timestamp.offset(expression='-2h') ]}";
+  await act(async () => mocks.form?.onChange({ ...mocks.form.data, date: edited }));
+  expect((await submit())[0]).toEqual({ name: "date", value: { type: "str", text: edited } });
+  await act(async () => mocks.form?.onChange({ ...mocks.form.data, date: "" }));
+  expect((await submit())[0]).toEqual({ name: "date", value: { type: "str", text: "" } });
+});

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,8 +24,11 @@ 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 { collectArgumentValues } from "./core/Editor/twig/util";
+import {
+  collectEditableArgumentValues,
+  preserveUnchangedArgumentExpressions,
+} from "../lib/templateFunctionArguments";
+import { DialogFooter } from "./core/Dialog";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
 import { DYNAMIC_FORM_NULL_ARG, DynamicForm } from "./DynamicForm";
@@ -48,7 +51,11 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
     }
 
     (async () => {
-      const initial = collectArgumentValues(initialTokens, templateFunction);
+      const initial = await collectEditableArgumentValues(
+        initialTokens,
+        templateFunction,
+        templateTokensToString,
+      );
 
       // HACK: Replace the secure() function's encrypted `value` arg with the decrypted version so
       //  we can display it in the editor input.
@@ -74,6 +81,7 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
     <InitializedTemplateFunctionDialog
       {...props}
       templateFunction={templateFunction}
+      initialTokens={initialTokens}
       initialArgValues={initialArgValues}
     />
   );
@@ -82,15 +90,17 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
 function InitializedTemplateFunctionDialog({
   templateFunction: { name, previewType: ogPreviewType },
   initialArgValues,
+  initialTokens,
   hide,
   onChange,
   model,
-}: Omit<Props, "initialTokens"> & {
+}: Props & {
   initialArgValues: Record<string, string | boolean>;
 }) {
   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) => ({
@@ -110,12 +120,17 @@ function InitializedTemplateFunctionDialog({
           val: {
             type: "fn",
             name,
-            args: argTokens,
+            args: preserveUnchangedArgumentExpressions(
+              argTokens,
+              initialTokens,
+              initialArgValues,
+              argValues,
+            ),
           },
         },
       ],
     };
-  }, [argValues, name]);
+  }, [argValues, initialArgValues, initialTokens, name]);
 
   const tagText = useTemplateTokensToString(tokens);
   const templateFunction = useTemplateFunctionConfig(name, argValues, model);
@@ -160,13 +175,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 +204,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 +284,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/Toasts.tsx

@@ -1,43 +1,6 @@
-import { useAtomValue } from "jotai";
-import { AnimatePresence } from "motion/react";
-import type { ReactNode } from "react";
-import { hideToast, toastsAtom } from "../lib/toast";
-import { Toast, type ToastProps } from "./core/Toast";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { Portal } from "@yaakapp-internal/ui";
+import { Toasts as BaseToasts } from "@yaakapp-internal/ui";
+import { showErrorDialog } from "./ErrorBoundary";
 
-export type ToastInstance = {
-  id: string;
-  uniqueKey: string;
-  message: ReactNode;
-  timeout: 3000 | 5000 | 8000 | (number & {}) | null;
-  onClose?: ToastProps["onClose"];
-} & Omit<ToastProps, "onClose" | "open" | "children" | "timeout">;
+export type { ToastInstance } from "@yaakapp-internal/ui";
 
-export const Toasts = () => {
-  const toasts = useAtomValue(toastsAtom);
-  return (
-    <Portal name="toasts">
-      <div className="absolute right-0 bottom-0 z-50">
-        <AnimatePresence>
-          {toasts.map((toast: ToastInstance) => {
-            const { message, uniqueKey, ...props } = toast;
-            return (
-              <ErrorBoundary key={uniqueKey} name={`Toast ${uniqueKey}`}>
-                <Toast
-                  open
-                  {...props}
-                  // We call onClose inside actions.hide instead of passing to toast so that
-                  // it gets called from external close calls as well
-                  onClose={() => hideToast(toast)}
-                >
-                  {message}
-                </Toast>
-              </ErrorBoundary>
-            );
-          })}
-        </AnimatePresence>
-      </div>
-    </Portal>
-  );
-};
+export const Toasts = () => <BaseToasts onShowError={showErrorDialog} />;

apps/yaak-client/components/WebsocketRequestPane.tsx

@@ -22,11 +22,9 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { activeWebsocketConnectionAtom } from "../hooks/usePinnedWebsocketConnection";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
-import { languageFromContentType } from "../lib/contentType";
 import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
 import { prepareImportQuerystring } from "../lib/prepareImportQuerystring";
 import { resolvedModelName } from "../lib/resolvedModelName";
-import { CountBadge } from "./core/CountBadge";
 import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import { getUrlCompletionConfig } from "./core/Editor/url/completion";
 import { Editor } from "./core/Editor/LazyEditor";
@@ -40,6 +38,7 @@ import { MarkdownEditor } from "./MarkdownEditor";
 import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
 import { UrlBar } from "./UrlBar";
 import { UrlParametersEditor } from "./UrlParameterEditor";
+import { languageFromContentType, CountBadge } from "@yaakapp-internal/ui";
 
 interface Props {
   style: CSSProperties;

apps/yaak-client/components/WebsocketResponsePane.tsx

@@ -1,6 +1,14 @@
 import type { WebsocketEvent, WebsocketRequest } from "@yaakapp-internal/models";
-import { HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
-import { hexy } from "hexy";
+import {
+  HStack,
+  hexdump,
+  HexdumpViewer,
+  Icon,
+  LoadingIcon,
+  VStack,
+  useStateWithDeps,
+  languageFromContentType,
+} from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useMemo, useState } from "react";
 import { useFormatText } from "../hooks/useFormatText";
@@ -10,10 +18,9 @@ import {
   setPinnedWebsocketConnectionId,
   useWebsocketEvents,
 } from "../hooks/usePinnedWebsocketConnection";
-import { useStateWithDeps } from "../hooks/useStateWithDeps";
-import { languageFromContentType } from "../lib/contentType";
 import { Button } from "./core/Button";
 import { Editor } from "./core/Editor/LazyEditor";
+import { renderEditor } from "./core/Editor/renderEditor";
 import { type EventDetailAction, EventDetailHeader, EventViewer } from "./core/EventViewer";
 import { EventViewerRow } from "./core/EventViewerRow";
 import { HotkeyList } from "./core/HotkeyList";
@@ -117,10 +124,10 @@ function WebsocketEventRow({
     messageType === "error"
       ? "alert_triangle"
       : messageType === "close" || messageType === "open"
-      ? "info"
-      : isServer
-        ? "arrow_big_down_dash"
-        : "arrow_big_up_dash";
+        ? "info"
+        : isServer
+          ? "arrow_big_down_dash"
+          : "arrow_big_up_dash";
 
   const content =
     messageType === "close" ? (
@@ -167,7 +174,7 @@ function WebsocketEventDetail({
 }) {
   const message = useMemo(() => {
     if (hexDump) {
-      return event.message ? hexy(event.message) : "";
+      return event.message ? hexdump(event.message) : "";
     }
     return event.message ? new TextDecoder("utf-8").decode(Uint8Array.from(event.message)) : "";
   }, [event.message, hexDump]);
@@ -227,6 +234,8 @@ function WebsocketEventDetail({
         </VStack>
       ) : event.message.length === 0 ? (
         <EmptyStateText>No Content</EmptyStateText>
+      ) : hexDump ? (
+        <HexdumpViewer data={event.message} renderEditor={renderEditor} />
       ) : (
         <Editor
           language={language}

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

@@ -5,20 +5,17 @@ import {
   setWorkspaceKey,
 } from "@yaakapp-internal/crypto";
 import type { WorkspaceMeta } from "@yaakapp-internal/models";
-import { Banner, HStack, VStack } from "@yaakapp-internal/ui";
+import { Banner, HStack, VStack, useStateWithDeps, IconTooltip, Label } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
-import { useStateWithDeps } from "../hooks/useStateWithDeps";
 import { showConfirm } from "../lib/confirm";
 import { CopyIconButton } from "./CopyIconButton";
 import type { ButtonProps } from "./core/Button";
 import { Button } from "./core/Button";
 import { IconButton } from "./core/IconButton";
-import { IconTooltip } from "./core/IconTooltip";
-import { Label } from "./core/Label";
 import { PlainInput } from "./core/PlainInput";
 import { SettingRow } from "./core/SettingRow";
 import { EncryptionHelp } from "./EncryptionHelp";

apps/yaak-client/components/WorkspaceSettingsDialog.tsx

@@ -1,5 +1,5 @@
 import { patchModel, workspaceMetasAtom, workspacesAtom } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode, CountBadge } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useAuthTab } from "../hooks/useAuthTab";
 import { useHeadersTab } from "../hooks/useHeadersTab";
@@ -9,7 +9,6 @@ import { showDialog } from "../lib/dialog";
 import { router } from "../lib/router";
 import { CopyIconButton } from "./CopyIconButton";
 import { Button } from "./core/Button";
-import { CountBadge } from "./core/CountBadge";
 import { PlainInput } from "./core/PlainInput";
 import { SettingsList, SettingsSection } from "./core/SettingRow";
 import { TabContent, Tabs } from "./core/Tabs/Tabs";

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

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from "react";
-import { generateId } from "../../lib/generateId";
 import { Editor } from "./Editor/LazyEditor";
 import type { Pair, PairEditorProps, PairWithId } from "./PairEditor";
+import { generateId } from "@yaakapp-internal/lib/generateId";
 
 type Props = PairEditorProps;
 
@@ -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/Checkbox.tsx

@@ -1,73 +1,2 @@
-import { HStack, Icon } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import type { ReactNode } from "react";
-import { IconTooltip } from "./IconTooltip";
-
-export interface CheckboxProps {
-  checked: boolean | "indeterminate";
-  title: ReactNode;
-  onChange: (checked: boolean) => void;
-  className?: string;
-  disabled?: boolean;
-  inputWrapperClassName?: string;
-  hideLabel?: boolean;
-  fullWidth?: boolean;
-  help?: ReactNode;
-  size?: "sm" | "md";
-}
-
-export function Checkbox({
-  checked,
-  onChange,
-  className,
-  inputWrapperClassName,
-  disabled,
-  title,
-  hideLabel,
-  fullWidth,
-  help,
-  size = "sm",
-}: CheckboxProps) {
-  return (
-    <HStack
-      as="label"
-      alignItems="center"
-      space={2}
-      className={classNames(className, "text-text mr-auto")}
-    >
-      <div className={classNames(inputWrapperClassName, "x-theme-input", "relative flex mr-0.5")}>
-        <input
-          aria-hidden
-          className={classNames(
-            "appearance-none shrink-0 border border-border",
-            size === "sm" && "w-4 h-4",
-            size === "md" && "w-5 h-5",
-            "rounded-sm outline-hidden ring-0",
-            !disabled && "hocus:border-border-focus hocus:bg-focus/[5%]",
-            disabled && "border-dotted",
-          )}
-          type="checkbox"
-          disabled={disabled}
-          onChange={() => {
-            onChange(checked === "indeterminate" ? true : !checked);
-          }}
-        />
-        <div className="absolute inset-0 flex items-center justify-center">
-          <Icon
-            size={size}
-            className={classNames(disabled && "opacity-disabled")}
-            icon={checked === "indeterminate" ? "minus" : checked ? "check" : "empty"}
-          />
-        </div>
-      </div>
-      {!hideLabel && (
-        <div
-          className={classNames("text-sm", fullWidth && "w-full", disabled && "opacity-disabled")}
-        >
-          {title}
-        </div>
-      )}
-      {help && <IconTooltip content={help} />}
-    </HStack>
-  );
-}
+export type { CheckboxProps } from "@yaakapp-internal/ui";
+export { Checkbox } from "@yaakapp-internal/ui";

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

@@ -1,60 +1,27 @@
-import classNames from "classnames";
-import { atom, useAtom } from "jotai";
-import type { HTMLAttributes, ReactNode } from "react";
-import { useMemo } from "react";
+import {
+  DetailsBanner as BaseDetailsBanner,
+  type DetailsBannerProps,
+  type StoredValue,
+} from "@yaakapp-internal/ui";
+import { atom, useAtom, type WritableAtom } from "jotai";
+import { type SetStateAction, useMemo } from "react";
 import { atomWithKVStorage } from "../../lib/atoms/atomWithKVStorage";
-import type { BannerProps } from "@yaakapp-internal/ui";
-import { Banner } from "@yaakapp-internal/ui";
 
-interface Props extends HTMLAttributes<HTMLDetailsElement> {
-  summary: ReactNode;
-  color?: BannerProps["color"];
-  defaultOpen?: boolean;
-  storageKey?: string;
+export function DetailsBanner(props: Omit<DetailsBannerProps, "useStoredValue">) {
+  return <BaseDetailsBanner {...props} useStoredValue={useDetailsBannerStoredValue} />;
 }
 
-export function DetailsBanner({
-  className,
-  color,
-  summary,
-  children,
-  defaultOpen,
-  storageKey,
-  ...extraProps
-}: Props) {
-  // oxlint-disable-next-line react-hooks/exhaustive-deps -- We only want to recompute the atom when storageKey changes
-  const openAtom = useMemo(
+export function useDetailsBannerStoredValue<T extends StoredValue>(
+  key: string | string[] | null,
+  fallback: T,
+) {
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- We only want to recompute the atom when the key changes
+  const valueAtom = useMemo<WritableAtom<T, [SetStateAction<T>], void>>(
     () =>
-      storageKey
-        ? atomWithKVStorage<boolean>(["details_banner", storageKey], defaultOpen ?? false)
-        : atom(defaultOpen ?? false),
-    [storageKey],
-  );
-
-  const [isOpen, setIsOpen] = useAtom(openAtom);
-
-  const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
-    if (storageKey) {
-      setIsOpen(e.currentTarget.open);
-    }
-  };
-
-  return (
-    <Banner color={color} className={className}>
-      <details className="group list-none" open={isOpen} onToggle={handleToggle} {...extraProps}>
-        <summary className="cursor-default! select-none! list-none flex items-center gap-3 focus:outline-hidden opacity-70">
-          <div
-            className={classNames(
-              "transition-transform",
-              "group-open:rotate-90",
-              "w-0 h-0 border-t-[0.3em] border-b-[0.3em] border-l-[0.5em] border-r-0",
-              "border-t-transparent border-b-transparent border-l-text-subtle",
-            )}
-          />
-          {summary}
-        </summary>
-        <div className="mt-1.5 pb-2">{children}</div>
-      </details>
-    </Banner>
+      key != null
+        ? atomWithKVStorage<T>(["details_banner", ...[key].flat()], fallback)
+        : atom(fallback),
+    [key],
   );
+  return useAtom(valueAtom);
 }

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

@@ -1,131 +1,2 @@
-import type { DialogSize } from "@yaakapp-internal/plugins";
-import { Heading, 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 { IconButton } from "./IconButton";
-
-export interface DialogProps {
-  children: ReactNode;
-  open: boolean;
-  onClose?: () => void;
-  /** Block dismissal from the backdrop, Escape key, and built-in close button. */
-  disableClose?: boolean;
-  title?: ReactNode;
-  description?: ReactNode;
-  className?: string;
-  size?: DialogSize;
-  /** Hide the built-in close button without changing backdrop or Escape behavior. */
-  hideX?: boolean;
-  noPadding?: boolean;
-  noScroll?: boolean;
-  vAlign?: "top" | "center";
-}
-
-export function Dialog({
-  children,
-  className,
-  size = "full",
-  open,
-  onClose,
-  disableClose,
-  title,
-  description,
-  hideX,
-  noPadding,
-  noScroll,
-  vAlign = "center",
-}: DialogProps) {
-  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
-  const descriptionId = useMemo(
-    () => (description ? Math.random().toString(36).slice(2) : undefined),
-    [description],
-  );
-
-  return (
-    <Overlay open={open} onClose={disableClose ? undefined : onClose} portalName="dialog">
-      <div
-        role="dialog"
-        className={classNames(
-          "py-4 x-theme-dialog absolute inset-0 pointer-events-none",
-          "h-full flex flex-col items-center justify-center",
-          vAlign === "top" && "justify-start",
-          vAlign === "center" && "justify-center",
-        )}
-        aria-labelledby={titleId}
-        aria-describedby={descriptionId}
-        tabIndex={-1}
-        onKeyDown={(e) => {
-          // NOTE: We handle Escape on the element itself so that it doesn't close multiple
-          //   dialogs and can be intercepted by children if needed.
-          if (e.key === "Escape") {
-            if (!disableClose) onClose?.();
-            e.stopPropagation();
-            e.preventDefault();
-          }
-        }}
-      >
-        <m.div
-          initial={{ top: 5, scale: 0.97 }}
-          animate={{ top: 0, scale: 1 }}
-          className={classNames(
-            className,
-            "grid grid-rows-[auto_auto_minmax(0,1fr)]",
-            "grid-cols-1", // must be here for inline code blocks to correctly break words
-            "relative bg-surface pointer-events-auto",
-            "rounded-lg",
-            "border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]",
-            "min-h-40",
-            "max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]",
-            size === "sm" && "w-120",
-            size === "md" && "w-200",
-            size === "lg" && "w-280",
-            size === "full" && "w-screen h-screen",
-            size === "dynamic" && "min-w-80 max-w-[100vw]",
-          )}
-        >
-          {title ? (
-            <Heading className="px-6 mt-4 mb-2" level={1} id={titleId}>
-              {title}
-            </Heading>
-          ) : (
-            <span />
-          )}
-
-          {description ? (
-            <div className="min-h-0 px-6 text-text-subtle mb-3" id={descriptionId}>
-              {description}
-            </div>
-          ) : (
-            <span />
-          )}
-
-          <div
-            className={classNames(
-              "h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1",
-              !noPadding && "px-6 py-2",
-              !noScroll && "overflow-y-auto overflow-x-hidden",
-            )}
-          >
-            {children}
-          </div>
-
-          {/*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">
-              <IconButton
-                className="opacity-70 hover:opacity-100"
-                onClick={onClose}
-                title="Close dialog (Esc)"
-                aria-label="Close"
-                size="sm"
-                icon="x"
-              />
-            </div>
-          )}
-        </m.div>
-      </div>
-    </Overlay>
-  );
-}
+export type { DialogFooterAction, DialogProps } from "@yaakapp-internal/ui";
+export { Dialog, DialogFooter } from "@yaakapp-internal/ui";

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

@@ -5,7 +5,8 @@ import { EditorView } from "@codemirror/view";
 import classNames from "classnames";
 import { useEffect, useRef } from "react";
 import "./DiffViewer.css";
-import { readonlyExtensions, syntaxHighlightStyle } from "./extensions";
+import { syntaxHighlightStyle } from "@yaakapp-internal/ui/editor";
+import { readonlyExtensions } from "./extensions";
 
 interface Props {
   /** Original/previous version (left side) */

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

@@ -1,147 +1,53 @@
 import { startCompletion } from "@codemirror/autocomplete";
-import { defaultKeymap, historyField, indentWithTab } from "@codemirror/commands";
-import { foldState, forceParsing } from "@codemirror/language";
-import type { EditorStateConfig, Extension } from "@codemirror/state";
-import { Compartment, EditorState } from "@codemirror/state";
-import { EditorView, keymap, placeholder as placeholderExt, tooltips } from "@codemirror/view";
-import { emacs } from "@replit/codemirror-emacs";
-import { vim } from "@replit/codemirror-vim";
-
-import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
-import { debounce } from "@yaakapp-internal/lib";
-import type { EditorKeymap } from "@yaakapp-internal/models";
+import type { Extension } from "@codemirror/state";
+import type { EditorView } from "@codemirror/view";
 import { settingsAtom } from "@yaakapp-internal/models";
 import type { EditorLanguage, TemplateFunction } from "@yaakapp-internal/plugins";
-import { HStack } from "@yaakapp-internal/ui";
-import classNames from "classnames";
+import { CodeEditor, type CodeEditorProps } from "@yaakapp-internal/ui/editor";
 import type { GraphQLSchema } from "graphql";
 import { useAtomValue } from "jotai";
-import type { ReactNode, RefObject } from "react";
-import {
-  Children,
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { activeEnvironmentAtom } from "../../../hooks/useActiveEnvironment";
 import type { WrappedEnvironmentVariable } from "../../../hooks/useEnvironmentVariables";
 import { useEnvironmentVariables } from "../../../hooks/useEnvironmentVariables";
 import { eventMatchesHotkey } from "../../../hooks/useHotKey";
 import { useRequestEditor } from "../../../hooks/useRequestEditor";
 import { useTemplateFunctionCompletionOptions } from "../../../hooks/useTemplateFunctions";
-import { docFingerprint } from "../../../lib/docFingerprint";
 import { editEnvironment } from "../../../lib/editEnvironment";
 import { tryFormatJson, tryFormatXml } from "../../../lib/formatters";
 import { jotaiStore } from "../../../lib/jotai";
 import { withEncryptionEnabled } from "../../../lib/setupOrConfigureEncryption";
 import { TemplateFunctionDialog } from "../../TemplateFunctionDialog";
-import { IconButton } from "../IconButton";
-import "./Editor.css";
-import {
-  baseExtensions,
-  editableExtensions,
-  getLanguageExtension,
-  multiLineExtensions,
-  readonlyExtensions,
-} from "./extensions";
+import { getLanguageExtension } from "./extensions";
 import type { GenericCompletionConfig } from "./genericCompletion";
-import { singleLineExtensions } from "./singleLine";
+import { largeValues, mediaValues } from "./largeValues";
 
-// VSCode's Tab actions mess with the single-line editor tab actions, so remove it.
-const vsCodeWithoutTab = vscodeKeymap.filter((k) => k.key !== "Tab");
-
-const keymapExtensions: Record<EditorKeymap, Extension> = {
-  vim: vim(),
-  emacs: emacs(),
-  vscode: keymap.of(vsCodeWithoutTab),
-  default: [],
-};
-
-export interface EditorProps {
-  actions?: ReactNode;
-  autoFocus?: boolean;
-  autoSelect?: boolean;
+export type EditorProps = Omit<CodeEditorProps, "language" | "extensions" | "keymap"> & {
   autocomplete?: GenericCompletionConfig;
   autocompleteFunctions?: boolean;
   autocompleteVariables?: boolean | ((v: WrappedEnvironmentVariable) => boolean);
-  className?: string;
-  defaultValue?: string | null;
-  disableTabIndent?: boolean;
-  disabled?: boolean;
   extraExtensions?: Extension[] | Extension;
   forcedEnvironmentId?: string;
-  forceUpdateKey?: string | number;
-  format?: (v: string) => Promise<string>;
-  heightMode?: "auto" | "full";
-  hideGutter?: boolean;
-  id?: string;
-  language?: EditorLanguage | "pairs" | "url" | "timeline" | null;
-  lintExtension?: Extension;
   graphQLSchema?: GraphQLSchema | null;
-  onBlur?: () => void;
-  onChange?: (value: string) => void;
-  onFocus?: () => void;
-  onKeyDown?: (e: KeyboardEvent) => void;
-  onPaste?: (value: string) => void;
-  onPasteOverwrite?: (e: ClipboardEvent, value: string) => void;
-  placeholder?: string;
-  readOnly?: boolean;
-  singleLine?: boolean;
-  containerOnly?: boolean;
-  stateKey: string | null;
-  tooltipContainer?: HTMLElement;
-  type?: "text" | "password";
-  wrapLines?: boolean;
-  setRef?: (view: EditorView | null) => void;
-}
-
-const stateFields = { history: historyField, folds: foldState };
+  language?: EditorLanguage | "pairs" | "url" | "timeline" | null;
+};
 
 const emptyVariables: WrappedEnvironmentVariable[] = [];
-const emptyExtension: Extension = [];
 
-export function Editor(props: EditorProps) {
-  return <EditorInner key={props.stateKey} {...props} />;
-}
-
-function EditorInner({
-  actions,
-  autoFocus,
-  autoSelect,
+export function Editor({
   autocomplete,
   autocompleteFunctions,
   autocompleteVariables,
-  className,
-  defaultValue,
-  disableTabIndent,
-  disabled,
   extraExtensions,
   forcedEnvironmentId,
-  forceUpdateKey,
   format,
-  heightMode,
-  hideGutter,
   graphQLSchema,
+  hideGutter,
   language,
   lintExtension,
-  onBlur,
-  onChange,
-  onFocus,
-  onKeyDown,
-  onPaste,
-  onPasteOverwrite,
-  placeholder,
   readOnly,
-  singleLine,
-  containerOnly,
-  stateKey,
-  type,
   wrapLines,
-  setRef,
+  ...props
 }: EditorProps) {
   const settings = useAtomValue(settingsAtom);
 
@@ -158,20 +64,10 @@ function EditorInner({
     wrapLines = settings.editorSoftWrap;
   }
 
-  if (disabled) {
+  if (props.disabled) {
     readOnly = true;
   }
 
-  if (
-    singleLine ||
-    language == null ||
-    language === "text" ||
-    language === "url" ||
-    language === "pairs"
-  ) {
-    disableTabIndent = true;
-  }
-
   if (format == null && !readOnly) {
     format =
       language === "json"
@@ -181,130 +77,22 @@ function EditorInner({
           : undefined;
   }
 
-  const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
-
-  // Use ref so we can update the handler without re-initializing the editor
-  const handleChange = useRef<EditorProps["onChange"]>(onChange);
-  useEffect(() => {
-    handleChange.current = onChange;
-  }, [onChange]);
-
-  // Use ref so we can update the handler without re-initializing the editor
-  const handlePaste = useRef<EditorProps["onPaste"]>(onPaste);
-  useEffect(() => {
-    handlePaste.current = onPaste;
-  }, [onPaste]);
-
-  // Use ref so we can update the handler without re-initializing the editor
-  const handlePasteOverwrite = useRef<EditorProps["onPasteOverwrite"]>(onPasteOverwrite);
-  useEffect(() => {
-    handlePasteOverwrite.current = onPasteOverwrite;
-  }, [onPasteOverwrite]);
-
-  // Use ref so we can update the handler without re-initializing the editor
-  const handleFocus = useRef<EditorProps["onFocus"]>(onFocus);
-  useEffect(() => {
-    handleFocus.current = onFocus;
-  }, [onFocus]);
-
-  // Use ref so we can update the handler without re-initializing the editor
-  const handleBlur = useRef<EditorProps["onBlur"]>(onBlur);
-  useEffect(() => {
-    handleBlur.current = onBlur;
-  }, [onBlur]);
-
-  // Use ref so we can update the handler without re-initializing the editor
-  const handleKeyDown = useRef<EditorProps["onKeyDown"]>(onKeyDown);
-  useEffect(() => {
-    handleKeyDown.current = onKeyDown;
-  }, [onKeyDown]);
-
-  // Update placeholder
-  const placeholderCompartment = useRef(new Compartment());
-  useEffect(
-    function configurePlaceholder() {
-      if (cm.current === null) return;
-      const ext = placeholderExt(placeholderElFromText(placeholder));
-      const effects = placeholderCompartment.current.reconfigure(ext);
-      cm.current?.view.dispatch({ effects });
+  // Template dialogs are opened against the editor the tag was clicked in
+  const viewRef = useRef<EditorView | null>(null);
+  const { setRef } = props;
+  const handleSetRef = useCallback(
+    (view: EditorView | null) => {
+      viewRef.current = view;
+      setRef?.(view);
     },
-    [placeholder],
-  );
-
-  // Update vim
-  const keymapCompartment = useRef(new Compartment());
-  useEffect(
-    function configureKeymap() {
-      if (cm.current === null) return;
-      const current = keymapCompartment.current.get(cm.current.view.state) ?? [];
-      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
-      if (settings.editorKeymap === "default" && current === keymapExtensions.default) return; // Nothing to do
-      if (settings.editorKeymap === "vim" && current === keymapExtensions.vim) return; // Nothing to do
-      if (settings.editorKeymap === "vscode" && current === keymapExtensions.vscode) return; // Nothing to do
-      if (settings.editorKeymap === "emacs" && current === keymapExtensions.emacs) return; // Nothing to do
-
-      const ext = keymapExtensions[settings.editorKeymap] ?? keymapExtensions.default;
-      const effects = keymapCompartment.current.reconfigure(ext);
-      cm.current.view.dispatch({ effects });
-    },
-    [settings.editorKeymap],
-  );
-
-  // Update wrap lines
-  const wrapLinesCompartment = useRef(new Compartment());
-  useEffect(
-    function configureWrapLines() {
-      if (cm.current === null) return;
-      const current = wrapLinesCompartment.current.get(cm.current.view.state) ?? emptyExtension;
-      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
-      if (wrapLines && current !== emptyExtension) return; // Nothing to do
-      if (!wrapLines && current === emptyExtension) return; // Nothing to do
-
-      const ext = wrapLines ? EditorView.lineWrapping : emptyExtension;
-      const effects = wrapLinesCompartment.current.reconfigure(ext);
-      cm.current?.view.dispatch({ effects });
-    },
-    [wrapLines],
-  );
-
-  // Update tab indent
-  const tabIndentCompartment = useRef(new Compartment());
-  useEffect(
-    function configureTabIndent() {
-      if (cm.current === null) return;
-      const current = tabIndentCompartment.current.get(cm.current.view.state) ?? emptyExtension;
-      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
-      if (disableTabIndent && current !== emptyExtension) return; // Nothing to do
-      if (!disableTabIndent && current === emptyExtension) return; // Nothing to do
-
-      const ext = !disableTabIndent ? keymap.of([indentWithTab]) : emptyExtension;
-      const effects = tabIndentCompartment.current.reconfigure(ext);
-      cm.current?.view.dispatch({ effects });
-    },
-    [disableTabIndent],
-  );
-
-  // Update read-only
-  const readOnlyCompartment = useRef(new Compartment());
-  useEffect(
-    function configureReadOnly() {
-      if (cm.current === null) return;
-      const current = readOnlyCompartment.current.get(cm.current.view.state) ?? emptyExtension;
-      const next = readOnly ? readonlyExtensions : editableExtensions;
-      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
-      if (current === next) return;
-
-      const effects = readOnlyCompartment.current.reconfigure(next);
-      cm.current?.view.dispatch({ effects });
-    },
-    [readOnly],
+    [setRef],
   );
 
   const onClickFunction = useCallback(
     async (fn: TemplateFunction, tagValue: string, startPos: number) => {
       const show = () => {
-        if (cm.current === null) return;
-        TemplateFunctionDialog.show(fn, tagValue, startPos, cm.current.view);
+        if (viewRef.current === null) return;
+        TemplateFunctionDialog.show(fn, tagValue, startPos, viewRef.current);
       };
 
       if (fn.name === "secure") {
@@ -344,427 +132,64 @@ function EditorInner({
     !!autocompleteFunctions,
   );
 
-  // Update the language extension when the language changes
-  // oxlint-disable-next-line react-hooks/exhaustive-deps -- intentionally limited deps
-  useEffect(() => {
-    if (cm.current === null) return;
-    const { view, languageCompartment } = cm.current;
-    const ext = getLanguageExtension({
-      useTemplating,
+  const languageExtension = useMemo(
+    () =>
+      getLanguageExtension({
+        useTemplating,
+        language,
+        lintExtension,
+        hideGutter,
+        environmentVariables,
+        autocomplete,
+        completionOptions,
+        onClickVariable,
+        onClickMissingVariable,
+        onClickPathParameter,
+        graphQLSchema: graphQLSchema ?? null,
+      }),
+    [
       language,
       lintExtension,
-      hideGutter,
-      environmentVariables,
       autocomplete,
-      completionOptions,
+      environmentVariables,
       onClickVariable,
       onClickMissingVariable,
       onClickPathParameter,
-      graphQLSchema: graphQLSchema ?? null,
-    });
-    view.dispatch({ effects: languageCompartment.reconfigure(ext) });
-  }, [
-    language,
-    lintExtension,
-    autocomplete,
-    environmentVariables,
-    onClickFunction,
-    onClickVariable,
-    onClickMissingVariable,
-    onClickPathParameter,
-    completionOptions,
-    useTemplating,
-    graphQLSchema,
-    hideGutter,
-  ]);
-
-  // Initialize the editor when ref mounts
-  // oxlint-disable-next-line react-hooks/exhaustive-deps -- only reinitialize when necessary
-  const initEditorRef = useCallback(
-    function initEditorRef(container: HTMLDivElement | null) {
-      if (container === null) {
-        flushCachedEditorState(stateKey);
-        cm.current?.view.destroy();
-        cm.current = null;
-        return;
-      }
-
-      try {
-        const languageCompartment = new Compartment();
-        const langExt = getLanguageExtension({
-          useTemplating,
-          language,
-          lintExtension,
-          completionOptions,
-          autocomplete,
-          environmentVariables,
-          onClickVariable,
-          onClickMissingVariable,
-          onClickPathParameter,
-          graphQLSchema: graphQLSchema ?? null,
-        });
-        const extensions = [
-          languageCompartment.of(langExt),
-          placeholderCompartment.current.of(placeholderExt(placeholderElFromText(placeholder))),
-          wrapLinesCompartment.current.of(wrapLines ? EditorView.lineWrapping : emptyExtension),
-          tabIndentCompartment.current.of(
-            !disableTabIndent ? keymap.of([indentWithTab]) : emptyExtension,
-          ),
-          keymapCompartment.current.of(
-            keymapExtensions[settings.editorKeymap] ?? keymapExtensions.default,
-          ),
-          readOnlyCompartment.current.of(readOnly ? readonlyExtensions : editableExtensions),
-          ...getExtensions({
-            container,
-            singleLine,
-            hideGutter,
-            stateKey,
-            onChange: handleChange,
-            onPaste: handlePaste,
-            onPasteOverwrite: handlePasteOverwrite,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            onKeyDown: handleKeyDown,
-          }),
-          ...(Array.isArray(extraExtensions)
-            ? extraExtensions
-            : extraExtensions
-              ? [extraExtensions]
-              : []),
-        ];
-
-        const cachedJsonState = getCachedEditorState(defaultValue ?? "", stateKey, !!readOnly);
-
-        const doc = `${defaultValue ?? ""}`;
-        const config: EditorStateConfig = { extensions, doc };
-
-        const state = cachedJsonState
-          ? EditorState.fromJSON(cachedJsonState, config, stateFields)
-          : EditorState.create(config);
-
-        const view = new EditorView({ state, parent: container });
-
-        // For large documents, the parser may parse the max number of lines and fail to add
-        // things like fold markers because of it.
-        // This forces it to parse more but keeps the timeout to the default of 100 ms.
-        forceParsing(view, 9e6, 100);
-
-        cm.current = { view, languageCompartment };
-        if (autoFocus) {
-          view.focus();
-        }
-        if (autoSelect) {
-          view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
-        }
-        setRef?.(view);
-      } catch (e) {
-        console.log("Failed to initialize Codemirror", e);
-      }
-    },
-    [forceUpdateKey],
+      completionOptions,
+      useTemplating,
+      graphQLSchema,
+      hideGutter,
+    ],
   );
 
-  // For read-only mode, update content when `defaultValue` changes
-  useEffect(
-    function updateReadOnlyEditor() {
-      if (readOnly && cm.current?.view != null) {
-        updateContents(cm.current.view, defaultValue || "");
-      }
-    },
-    [defaultValue, readOnly],
-  );
-
-  // Force input to update when receiving change and not in focus
-  useLayoutEffect(
-    function updateNonFocusedEditor() {
-      const notFocused = !cm.current?.view.hasFocus;
-      if (notFocused && cm.current != null) {
-        updateContents(cm.current.view, defaultValue || "");
-      }
-    },
-    [defaultValue],
-  );
-
-  // Add bg classes to actions, so they appear over the text
-  const decoratedActions = useMemo(() => {
-    const results = [];
-    const actionClassName = classNames(
-      "bg-surface transition-opacity transform-gpu opacity-0 group-hover:opacity-100 hover:opacity-100! shadow",
-    );
-
-    if (format) {
-      results.push(
-        <IconButton
-          showConfirm
-          key="format"
-          size="sm"
-          title="Reformat contents"
-          icon="magic_wand"
-          variant="border"
-          className={classNames(actionClassName)}
-          onClick={async () => {
-            if (cm.current === null) return;
-            const { doc } = cm.current.view.state;
-            const formatted = await format(doc.toString());
-            // Update editor and blur because the cursor will reset anyway
-            cm.current.view.dispatch({
-              changes: { from: 0, to: doc.length, insert: formatted },
-            });
-            cm.current.view.contentDOM.blur();
-            // Fire change event
-            onChange?.(formatted);
-          }}
-        />,
-      );
-    }
-    results.push(
-      Children.map(actions, (existingChild) => {
-        if (!isValidElement<{ className?: string }>(existingChild)) return null;
-        const existingProps = existingChild.props;
-
-        return cloneElement(existingChild, {
-          ...existingProps,
-          className: classNames(existingProps.className, actionClassName),
-        });
-      }),
-    );
-    return results;
-  }, [actions, format, onChange]);
-
-  const cmContainer = (
-    <div
-      ref={initEditorRef}
-      className={classNames(
-        className,
-        "cm-wrapper text-base",
-        disabled && "opacity-disabled",
-        type === "password" && "cm-obscure-text",
-        heightMode === "auto" ? "cm-auto-height" : "cm-full-height",
-        singleLine ? "cm-singleline" : "cm-multiline",
-        readOnly && "cm-readonly",
-      )}
-    />
-  );
-
-  if (singleLine || containerOnly) {
-    return cmContainer;
-  }
-
   return (
-    <div className="group relative h-full w-full x-theme-editor bg-surface">
-      {cmContainer}
-      {decoratedActions && (
-        <HStack
-          space={1}
-          justifyContent="end"
-          className={classNames(
-            "absolute bottom-2 left-0 right-0",
-            "pointer-events-none", // No pointer events, so we don't block the editor
-          )}
-        >
-          {decoratedActions}
-        </HStack>
-      )}
-    </div>
+    <CodeEditor
+      {...props}
+      editableExtensions={mediaValues}
+      extensions={extraExtensions}
+      format={format}
+      hideGutter={hideGutter}
+      keyDownHandler={startCompletionOnHotkey}
+      keymap={settings.editorKeymap}
+      language={codeEditorLanguage(language)}
+      languageExtension={languageExtension}
+      lintExtension={lintExtension}
+      readOnly={readOnly}
+      readOnlyExtensions={largeValues}
+      setRef={handleSetRef}
+      wrapLines={wrapLines}
+    />
   );
 }
 
-function getExtensions({
-  stateKey,
-  container,
-  singleLine,
-  hideGutter,
-  onChange,
-  onPaste,
-  onPasteOverwrite,
-  onFocus,
-  onBlur,
-  onKeyDown,
-}: Pick<EditorProps, "singleLine" | "hideGutter"> & {
-  stateKey: EditorProps["stateKey"];
-  container: HTMLDivElement | null;
-  onChange: RefObject<EditorProps["onChange"]>;
-  onPaste: RefObject<EditorProps["onPaste"]>;
-  onPasteOverwrite: RefObject<EditorProps["onPasteOverwrite"]>;
-  onFocus: RefObject<EditorProps["onFocus"]>;
-  onBlur: RefObject<EditorProps["onBlur"]>;
-  onKeyDown: RefObject<EditorProps["onKeyDown"]>;
-}) {
-  // TODO: Ensure tooltips render inside the dialog if we are in one.
-  const parent =
-    container?.closest<HTMLDivElement>('[role="dialog"]') ??
-    document.querySelector<HTMLDivElement>("#cm-portal") ??
-    undefined;
-
-  return [
-    ...baseExtensions, // Must be first
-    EditorView.contentAttributes.of({
-      autocapitalize: "off",
-      autocorrect: "off",
-      // Keeps macOS Writing Tools from offering to write code for us
-      writingsuggestions: "false",
-    }),
-    EditorView.domEventHandlers({
-      focus: () => {
-        onFocus.current?.();
-      },
-      blur: () => {
-        onBlur.current?.();
-      },
-      keydown: (e, view) => {
-        // Check if the hotkey matches the editor.autocomplete action
-        if (eventMatchesHotkey(e, "editor.autocomplete")) {
-          e.preventDefault();
-          startCompletion(view);
-          return true;
-        }
-        onKeyDown.current?.(e);
-      },
-      paste: (e, v) => {
-        const textData = e.clipboardData?.getData("text/plain") ?? "";
-        onPaste.current?.(textData);
-        if (v.state.selection.main.from === 0 && v.state.selection.main.to === v.state.doc.length) {
-          onPasteOverwrite.current?.(e, textData);
-        }
-      },
-    }),
-    tooltips({ parent }),
-    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== "Enter") : defaultKeymap),
-    ...(singleLine ? [singleLineExtensions()] : []),
-    ...(!singleLine ? multiLineExtensions({ hideGutter }) : []),
-
-    // ------------------------ //
-    // Things that must be last //
-    // ------------------------ //
-
-    EditorView.updateListener.of((update) => {
-      if (update.startState === update.state) return;
-
-      if (onChange && update.docChanged) {
-        onChange.current?.(update.state.doc.toString());
-      }
-
-      saveCachedEditorStateDebounced(stateKey, update.state);
-    }),
-  ];
+/** The client's own languages bring their extension along, so CodeEditor needn't know them */
+function codeEditorLanguage(language: EditorProps["language"]): CodeEditorProps["language"] {
+  return language === "url" || language === "pairs" || language === "timeline" ? null : language;
 }
 
-const placeholderElFromText = (text: string | undefined) => {
-  const el = document.createElement("div");
-  // Default to <SPACE> because codemirror needs it for sizing. I'm not sure why, but probably something
-  // to do with how Yaak "hacks" it with CSS for single line input.
-  el.innerHTML = text ? text.replaceAll("\n", "<br/>") : " ";
-  return el;
-};
-
-// Caching the state is too expensive to do on every update (every keystroke and cursor move),
-// so debounce it per state key and flush when the editor unmounts.
-//
-// The cost scales with the document, and every update pays it in full:
-//   - `state.toJSON` flattens the whole rope into a string, ~0.13 ms per 200 KB
-//   - the fingerprint is an exact md5 for editable documents, ~0.3 ms per 200 KB. `docFingerprint`
-//     only samples read-only ones, so editing a large body still hashes all of it
-//   - `sessionStorage.setItem` is synchronous and blocks the main thread
-// Typing in a 200 KB body costs ~0.4 ms per keystroke before the storage write, and a 1 MB one
-// ~2.3 ms. Read-only documents skip most of the hashing but still serialize, which is the larger
-// half once documents get into the megabytes.
-const SAVE_STATE_DEBOUNCE_MS = 500;
-const stateSavers = new Map<string, ReturnType<typeof debounce>>();
-
-function saveCachedEditorStateDebounced(stateKey: string | null, state: EditorState) {
-  if (!stateKey) return;
-  let saver = stateSavers.get(stateKey);
-  if (saver == null) {
-    saver = debounce(
-      (s: EditorState) => saveCachedEditorState(stateKey, s),
-      SAVE_STATE_DEBOUNCE_MS,
-    );
-    stateSavers.set(stateKey, saver);
-  }
-  saver(state);
-}
-
-// NOTE: Only called when an editor unmounts, so the saver is dropped rather than left in the map
-//  for every state key the session has ever shown. A pending saver holds the last EditorState,
-//  which holds the whole document.
-function flushCachedEditorState(stateKey: string | null) {
-  if (!stateKey) return;
-  const saver = stateSavers.get(stateKey);
-  if (saver == null) return;
-  saver.flush();
-  stateSavers.delete(stateKey);
-}
-
-function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
-  if (!stateKey || state == null) return;
-  const stateObj = state.toJSON(stateFields);
-
-  // Save state in sessionStorage by removing doc and saving a fingerprint of it instead.
-  // This will be checked on restore and put back in if it matches.
-  // Editable documents get the exact hash, so a collision can never restore undo history
-  // belonging to other content
-  stateObj.docHash = docFingerprint(stateObj.doc, { exact: !state.readOnly });
-  stateObj.doc = undefined;
-
-  try {
-    sessionStorage.setItem(computeFullStateKey(stateKey), JSON.stringify(stateObj));
-  } catch (err) {
-    console.log("Failed to save to editor state", stateKey, err);
-  }
-}
-
-function getCachedEditorState(doc: string, stateKey: string | null, readOnly: boolean) {
-  if (stateKey == null) return;
-
-  try {
-    const stateStr = sessionStorage.getItem(computeFullStateKey(stateKey));
-    if (stateStr == null) return null;
-
-    const { docHash, ...state } = JSON.parse(stateStr);
-
-    // Ensure the doc matches the one that was used to save the state
-    if (docHash !== docFingerprint(doc, { exact: !readOnly })) {
-      return null;
-    }
-
-    state.doc = doc;
-    return state;
-  } catch (err) {
-    console.log("Failed to restore editor storage", stateKey, err);
-  }
-
-  return null;
-}
-
-function computeFullStateKey(stateKey: string): string {
-  return `editor.${stateKey}`;
-}
-
-function updateContents(view: EditorView, text: string) {
-  // Replace codemirror contents
-  const currentDoc = view.state.doc.toString();
-
-  if (currentDoc === text) {
-    return;
-  }
-
-  if (text.startsWith(currentDoc)) {
-    // If we're just appending, append only the changes. This preserves
-    // things like scroll position.
-    view.dispatch({
-      changes: view.state.changes({
-        from: currentDoc.length,
-        insert: text.slice(currentDoc.length),
-      }),
-    });
-  } else {
-    // If we're replacing everything, reset the entire content
-    view.dispatch({
-      changes: view.state.changes({
-        from: 0,
-        to: currentDoc.length,
-        insert: text,
-      }),
-    });
-  }
+function startCompletionOnHotkey(e: KeyboardEvent, view: EditorView): boolean {
+  if (!eventMatchesHotkey(e, "editor.autocomplete")) return false;
+  e.preventDefault();
+  startCompletion(view);
+  return true;
 }

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

@@ -1,141 +1,30 @@
-import {
-  autocompletion,
-  closeBrackets,
-  closeBracketsKeymap,
-  completionKeymap,
-} from "@codemirror/autocomplete";
-import { history, historyKeymap } from "@codemirror/commands";
-import { go } from "@codemirror/lang-go";
-import { java } from "@codemirror/lang-java";
-import { javascript } from "@codemirror/lang-javascript";
-import { markdown } from "@codemirror/lang-markdown";
-import { php } from "@codemirror/lang-php";
-import { python } from "@codemirror/lang-python";
-import { xml } from "@codemirror/lang-xml";
-import {
-  bracketMatching,
-  codeFolding,
-  foldGutter,
-  foldKeymap,
-  HighlightStyle,
-  indentOnInput,
-  LanguageSupport,
-  StreamLanguage,
-  syntaxHighlighting,
-} from "@codemirror/language";
-import { c, csharp, kotlin, objectiveC } from "@codemirror/legacy-modes/mode/clike";
-import { clojure } from "@codemirror/legacy-modes/mode/clojure";
-import { http } from "@codemirror/legacy-modes/mode/http";
-import { oCaml } from "@codemirror/legacy-modes/mode/mllike";
-import { powerShell } from "@codemirror/legacy-modes/mode/powershell";
-import { r } from "@codemirror/legacy-modes/mode/r";
-import { ruby } from "@codemirror/legacy-modes/mode/ruby";
-import { shell } from "@codemirror/legacy-modes/mode/shell";
-import { swift } from "@codemirror/legacy-modes/mode/swift";
-import { linter, lintGutter, lintKeymap } from "@codemirror/lint";
-import { search, searchKeymap } from "@codemirror/search";
+import { linter } from "@codemirror/lint";
 import type { Extension } from "@codemirror/state";
-import { EditorState } from "@codemirror/state";
 import {
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  EditorView,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  keymap,
-  lineNumbers,
-  rectangularSelection,
-} from "@codemirror/view";
-import { tags as t } from "@lezer/highlight";
-import { jsonc, jsoncLanguage } from "@shopify/lang-jsonc";
+  closeBracketsExtensions,
+  getLanguageExtension as getBaseLanguageExtension,
+  type LanguageSupports,
+  readonlyExtensions as baseReadonlyExtensions,
+  syntaxExtensions,
+} from "@yaakapp-internal/ui/editor";
 import { graphql } from "cm6-graphql";
 import type { GraphQLSchema } from "graphql";
 import { activeRequestIdAtom } from "../../../hooks/useActiveRequestId";
 import type { WrappedEnvironmentVariable } from "../../../hooks/useEnvironmentVariables";
 import { jotaiStore } from "../../../lib/jotai";
 import { renderMarkdown } from "../../../lib/markdown";
-import { pluralizeCount } from "../../../lib/pluralize";
 import { showGraphQLDocExplorerAtom } from "../../graphql/graphqlAtoms";
 import type { EditorProps } from "./Editor";
 import { jsonParseLinter } from "./json-lint";
-import { largeValues, mediaValues } from "./largeValues";
+import { largeValues } from "./largeValues";
 import { pairs } from "./pairs/extension";
-import { searchMatchCount } from "./searchMatchCount";
-import { text } from "./text/extension";
 import { timeline } from "./timeline/extension";
 import type { TwigCompletionOption } from "./twig/completion";
 import { twig } from "./twig/extension";
 import { pathParametersPlugin } from "./twig/pathParameters";
 import { url } from "./url/extension";
 
-export const syntaxHighlightStyle = HighlightStyle.define([
-  {
-    tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
-    color: "var(--textSubtlest)",
-  },
-  {
-    tag: [t.emphasis],
-    textDecoration: "underline",
-  },
-  {
-    tag: [t.angleBracket, t.paren, t.bracket, t.squareBracket, t.brace, t.separator, t.punctuation],
-    color: "var(--textSubtle)",
-  },
-  {
-    tag: [t.link, t.name, t.tagName, t.angleBracket, t.docString, t.number],
-    color: "var(--info)",
-  },
-  { tag: [t.variableName], color: "var(--success)" },
-  { tag: [t.bool], color: "var(--warning)" },
-  { tag: [t.attributeName, t.propertyName], color: "var(--primary)" },
-  { tag: [t.attributeValue], color: "var(--warning)" },
-  { tag: [t.string], color: "var(--notice)" },
-  { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: "var(--danger)" },
-]);
-
-const syntaxTheme = EditorView.theme({}, { dark: true });
-
-const closeBracketsExtensions: Extension = [closeBrackets(), keymap.of([...closeBracketsKeymap])];
-
-const legacyLang = (mode: Parameters<typeof StreamLanguage.define>[0]) => {
-  return () => new LanguageSupport(StreamLanguage.define(mode));
-};
-
-const syntaxExtensions: Record<
-  NonNullable<EditorProps["language"]>,
-  null | (() => LanguageSupport)
-> = {
-  graphql: null,
-  json: jsonc,
-  javascript: javascript,
-  // HTML as XML because HTML is oddly slow
-  html: xml,
-  xml: xml,
-  url: url,
-  pairs: pairs,
-  text: text,
-  timeline: timeline,
-  markdown: markdown,
-  c: legacyLang(c),
-  clojure: legacyLang(clojure),
-  csharp: legacyLang(csharp),
-  go: go,
-  http: legacyLang(http),
-  java: java,
-  kotlin: legacyLang(kotlin),
-  objective_c: legacyLang(objectiveC),
-  ocaml: legacyLang(oCaml),
-  php: php,
-  powershell: legacyLang(powerShell),
-  python: python,
-  r: legacyLang(r),
-  ruby: legacyLang(ruby),
-  shell: legacyLang(shell),
-  swift: legacyLang(swift),
-};
-
-const closeBracketsFor: (keyof typeof syntaxExtensions)[] = ["json", "javascript", "graphql"];
+const languages: LanguageSupports = { ...syntaxExtensions, url, pairs, timeline };
 
 export function getLanguageExtension({
   useTemplating,
@@ -157,18 +46,7 @@ export function getLanguageExtension({
   onClickPathParameter: (name: string) => void;
   completionOptions: TwigCompletionOption[];
   graphQLSchema: GraphQLSchema | null;
-} & Pick<EditorProps, "language" | "autocomplete" | "hideGutter" | "lintExtension">) {
-  const extraExtensions: Extension[] = [];
-
-  if (language === "url") {
-    extraExtensions.push(pathParametersPlugin(onClickPathParameter));
-  }
-
-  // Only close brackets on languages that need it
-  if (language && closeBracketsFor.includes(language)) {
-    extraExtensions.push(closeBracketsExtensions);
-  }
-
+} & Pick<EditorProps, "language" | "autocomplete" | "hideGutter" | "lintExtension">): Extension {
   // GraphQL is a special exception
   if (language === "graphql") {
     return [
@@ -189,155 +67,31 @@ export function getLanguageExtension({
           }));
         },
       }),
-      extraExtensions,
+      [closeBracketsExtensions],
     ];
   }
 
-  if (language === "json") {
-    extraExtensions.push(lintExtension ?? linter(jsonParseLinter()));
-    extraExtensions.push(
-      jsoncLanguage.data.of({
-        commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
-      }),
-    );
-    if (!hideGutter) {
-      extraExtensions.push(lintGutter());
-    }
-  }
-
-  const maybeBase = language ? syntaxExtensions[language] : null;
-  const base = typeof maybeBase === "function" ? maybeBase() : null;
-  if (base == null) {
-    return [];
-  }
-
-  if (!useTemplating) {
-    return [base, extraExtensions];
-  }
-
-  return twig({
-    base,
-    environmentVariables,
-    completionOptions,
-    autocomplete,
-    onClickVariable,
-    onClickMissingVariable,
-    onClickPathParameter,
-    extraExtensions,
+  return getBaseLanguageExtension({
+    language,
+    hideGutter,
+    languages,
+    lintExtension: language === "json" ? (lintExtension ?? linter(jsonParseLinter())) : undefined,
+    extraExtensions: language === "url" ? [pathParametersPlugin(onClickPathParameter)] : [],
+    wrap: useTemplating
+      ? (base, extraExtensions) =>
+          twig({
+            base,
+            environmentVariables,
+            completionOptions,
+            autocomplete,
+            onClickVariable,
+            onClickMissingVariable,
+            onClickPathParameter,
+            extraExtensions,
+          })
+      : undefined,
   });
 }
 
-// Filter out autocomplete start triggers from completionKeymap since we handle it via configurable hotkeys.
-// Keep navigation keys (ArrowUp/Down, Enter, Escape, etc.) but remove startCompletion bindings.
-const filteredCompletionKeymap = completionKeymap.filter((binding) => {
-  const key = binding.key?.toLowerCase() ?? "";
-  const mac = (binding as { mac?: string }).mac?.toLowerCase() ?? "";
-  // Filter out Ctrl-Space and Mac-specific autocomplete triggers (Alt-`, Alt-i)
-  const isStartTrigger = key.includes("space") || mac.includes("alt-") || mac.includes("`");
-  return !isStartTrigger;
-});
-
-export const baseExtensions = [
-  highlightSpecialChars(),
-  history(),
-  dropCursor(),
-  drawSelection(),
-  autocompletion({
-    tooltipClass: () => "x-theme-menu",
-    closeOnBlur: true, // Set to `false` for debugging in devtools without closing it
-    defaultKeymap: false, // We handle the trigger via configurable hotkeys
-    compareCompletions: (a, b) => {
-      // Don't sort completions at all, only on boost
-      return (a.boost ?? 0) - (b.boost ?? 0);
-    },
-  }),
-  syntaxHighlighting(syntaxHighlightStyle),
-  syntaxTheme,
-  keymap.of([...historyKeymap, ...filteredCompletionKeymap]),
-];
-
-export const readonlyExtensions = [
-  EditorState.readOnly.of(true),
-  EditorView.contentAttributes.of({ tabindex: "-1" }),
-  // Nobody is editing this, so every rule applies
-  largeValues,
-];
-
-/**
- * The counterpart for a document being edited.
- *
- * Only encoded media collapses here: it is pasted rather than typed, and replaced rather than
- * edited, so a tag stands in for it without hiding anything anyone meant to read. The rules that
- * hide text by length alone stay out. See {@link mediaValues}.
- */
-export const editableExtensions = [mediaValues];
-
-export const multiLineExtensions = ({ hideGutter }: { hideGutter?: boolean }) => [
-  search({ top: true }),
-  searchMatchCount(),
-  hideGutter
-    ? []
-    : [
-        lineNumbers(),
-        foldGutter({
-          markerDOM: (open) => {
-            const el = document.createElement("div");
-            el.classList.add("fold-gutter-icon");
-            el.tabIndex = -1;
-            if (open) {
-              el.setAttribute("data-open", "");
-            }
-            return el;
-          },
-        }),
-      ],
-  codeFolding({
-    placeholderDOM(_view, onclick, prepared) {
-      const el = document.createElement("span");
-      el.onclick = onclick;
-      el.className = "cm-foldPlaceholder";
-      el.innerText = prepared || "…";
-      el.title = "unfold";
-      el.ariaLabel = "folded code";
-      return el;
-    },
-    /**
-     * Show the number of items when code folded. NOTE: this doesn't get called when restoring
-     * a previous serialized editor state, which is a bummer
-     */
-    preparePlaceholder(state, range) {
-      let count: number | undefined;
-      let startToken = "{";
-      let endToken = "}";
-
-      const prevLine = state.doc.lineAt(range.from).text;
-      const isArray = prevLine.lastIndexOf("[") > prevLine.lastIndexOf("{");
-
-      if (isArray) {
-        startToken = "[";
-        endToken = "]";
-      }
-
-      const internal = state.sliceDoc(range.from, range.to);
-      const toParse = startToken + internal + endToken;
-
-      try {
-        const parsed = JSON.parse(toParse);
-        count = Object.keys(parsed).length;
-      } catch {
-        /* empty */
-      }
-
-      if (count !== undefined) {
-        const label = isArray ? "item" : "key";
-        return pluralizeCount(label, count);
-      }
-    },
-  }),
-  indentOnInput(),
-  rectangularSelection(),
-  crosshairCursor(),
-  bracketMatching(),
-  highlightActiveLineGutter(),
-  keymap.of([...searchKeymap, ...foldKeymap, ...lintKeymap]),
-];
+// Nobody is editing this, so every rule applies
+export const readonlyExtensions = [...baseReadonlyExtensions, largeValues];

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,58 +1,15 @@
-import type { Diagnostic } from "@codemirror/lint";
-import type { EditorView } from "@codemirror/view";
-import { type ParseError, parse, printParseErrorCode } from "jsonc-parser";
+import {
+  type JsonLintOptions,
+  jsonParseLinter as baseJsonParseLinter,
+} from "@yaakapp-internal/ui/editor";
+import { replaceTemplateTags } from "../../../lib/templateTags";
 
-const TEMPLATE_SYNTAX_REGEX = /\$\{\[[\s\S]*?]}/g;
-
-// jsonc-parser reports error codes, so these are the words the editor shows for them
-const MESSAGES: Record<string, string> = {
-  InvalidSymbol: "Invalid symbol",
-  InvalidNumberFormat: "Invalid number format",
-  PropertyNameExpected: "Property name expected",
-  ValueExpected: "Value expected",
-  ColonExpected: "Colon expected",
-  CommaExpected: "Comma expected",
-  CloseBraceExpected: "Closing brace expected",
-  CloseBracketExpected: "Closing bracket expected",
-  EndOfFileExpected: "End of file expected",
-  InvalidCommentToken: "Comments are not allowed",
-  UnexpectedEndOfComment: "Unexpected end of comment",
-  UnexpectedEndOfString: "Unexpected end of string",
-  UnexpectedEndOfNumber: "Unexpected end of number",
-  InvalidUnicode: "Invalid unicode sequence",
-  InvalidEscapeCharacter: "Invalid escape character",
-  InvalidCharacter: "Invalid character",
-};
-
-interface JsonLintOptions {
-  allowComments?: boolean;
-  allowTrailingCommas?: boolean;
+export function jsonParseLinter(options?: Omit<JsonLintOptions, "escape">) {
+  return baseJsonParseLinter({ ...options, escape: escapeTemplateTags });
 }
 
-export function jsonParseLinter(options?: JsonLintOptions) {
-  return (view: EditorView): Diagnostic[] => {
-    const doc = view.state.doc.toString();
-    // We need lint to not break on stuff like {"foo:" ${[ ... ]}} so we'll replace all template
-    // syntax with repeating `1` characters, so it's valid JSON and the position is still correct.
-    const escapedDoc = doc.replace(TEMPLATE_SYNTAX_REGEX, (m) => "1".repeat(m.length));
-
-    const errors: ParseError[] = [];
-    parse(escapedDoc, errors, {
-      allowTrailingComma: options?.allowTrailingCommas ?? false,
-      disallowComments: !(options?.allowComments ?? true),
-    });
-
-    // Later errors are mostly consequences of the first one, so only that one is shown
-    const error = errors[0];
-    if (error == null) return [];
-
-    return [
-      {
-        from: error.offset,
-        to: error.offset + error.length,
-        severity: "error",
-        message: MESSAGES[printParseErrorCode(error.error)] ?? "Invalid JSON",
-      },
-    ];
-  };
+// 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.
+function escapeTemplateTags(doc: string): string {
+  return replaceTemplateTags(doc, (m) => "1".repeat(m.end - m.start));
 }

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

@@ -1,6 +1,5 @@
 import { EditorState } from "@codemirror/state";
 import { jsonc } from "@shopify/lang-jsonc";
-import { text } from "./text/extension";
 import { twig } from "./twig/extension";
 import { describe, expect, test } from "vite-plus/test";
 import {
@@ -11,6 +10,7 @@ import {
   MAX_VISIBLE_LINE_CHARS,
 } from "./largeValues";
 import type { SniffedValue } from "./sniffValue";
+import { text } from "@yaakapp-internal/ui/editor";
 
 const BIG = "A".repeat(1_000_000);
 

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

@@ -0,0 +1,7 @@
+import type { CodeEditorProps } from "@yaakapp-internal/ui/editor";
+import { Editor } from "./LazyEditor";
+
+/** Renders a ui component's editor as the client's, with its settings and value handling */
+export function renderEditor({ extensions, ...props }: CodeEditorProps) {
+  return <Editor {...props} extraExtensions={extensions} />;
+}

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 { twigCompletion, type TwigCompletionOption } from "./completion";
+import { parser } from "./twig";
+import { singleLineExtensions } from "@yaakapp-internal/ui/editor";
+
+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/extension.ts

@@ -5,11 +5,11 @@ import { parseMixed } from "@lezer/common";
 import type { WrappedEnvironmentVariable } from "../../../../hooks/useEnvironmentVariables";
 import type { GenericCompletionConfig } from "../genericCompletion";
 import { genericCompletion } from "../genericCompletion";
-import { textLanguage } from "../text/extension";
 import type { TwigCompletionOption } from "./completion";
 import { twigCompletion } from "./completion";
 import { templateTagsPlugin } from "./templateTags";
 import { parser as twigParser } from "./twig";
+import { textLanguage } from "@yaakapp-internal/ui/editor";
 
 export function twig({
   base,

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

@@ -1,45 +1 @@
-import { HStack } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { useFormattedHotkey } from "../../hooks/useHotKey";
-
-interface Props {
-  action: HotkeyAction | null;
-  className?: string;
-  variant?: "text" | "with-bg";
-}
-
-export function Hotkey({ action, className, variant }: Props) {
-  const labelParts = useFormattedHotkey(action);
-  if (labelParts === null) {
-    return null;
-  }
-
-  return <HotkeyRaw labelParts={labelParts} className={className} variant={variant} />;
-}
-
-interface HotkeyRawProps {
-  labelParts: string[];
-  className?: string;
-  variant?: "text" | "with-bg";
-}
-
-export function HotkeyRaw({ labelParts, className, variant }: HotkeyRawProps) {
-  return (
-    <HStack
-      className={classNames(
-        className,
-        variant === "with-bg" &&
-          "rounded-sm bg-surface-highlight px-1 border border-border text-text-subtle",
-        variant === "text" && "text-text-subtlest",
-      )}
-    >
-      {labelParts.map((char, index) => (
-        // oxlint-disable-next-line react/no-array-index-key
-        <div key={index} className="min-w-[1em] text-center">
-          {char}
-        </div>
-      ))}
-    </HStack>
-  );
-}
+export { Hotkey, HotkeyRaw } from "@yaakapp-internal/ui";

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

@@ -1,91 +1,22 @@
-import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
 import { settingsAtom } from "@yaakapp-internal/models";
-import classNames from "classnames";
+import {
+  HttpMethodTag as BaseHttpMethodTag,
+  HttpMethodTagRaw as BaseHttpMethodTagRaw,
+} from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
-import { memo } from "react";
+import { type ComponentProps, memo } from "react";
 
-interface Props {
-  request: HttpRequest | GrpcRequest | WebsocketRequest;
-  className?: string;
-  short?: boolean;
-  noAlias?: boolean;
-}
-
-const methodNames: Record<string, string> = {
-  get: "GET",
-  put: "PUT",
-  post: "POST",
-  patch: "PTCH",
-  delete: "DELE",
-  options: "OPTN",
-  head: "HEAD",
-  query: "QURY",
-  graphql: "GQL",
-  grpc: "GRPC",
-  websocket: "WS",
-};
-
-export const HttpMethodTag = memo(function HttpMethodTag({
-  request,
-  className,
-  short,
-  noAlias,
-}: Props) {
-  const method =
-    request.model === "http_request" && request.bodyType === "graphql" && !noAlias
-      ? "graphql"
-      : request.model === "grpc_request"
-        ? "grpc"
-        : request.model === "websocket_request"
-          ? "websocket"
-          : request.method;
-
-  return <HttpMethodTagRaw method={method} className={className} short={short} />;
+export const HttpMethodTag = memo(function HttpMethodTag(
+  props: Omit<ComponentProps<typeof BaseHttpMethodTag>, "colored">,
+) {
+  const settings = useAtomValue(settingsAtom);
+  return <BaseHttpMethodTag {...props} colored={settings.coloredMethods} />;
 });
 
 export function HttpMethodTagRaw({
-  className,
-  method,
-  short,
   forceColor,
-}: {
-  method: string;
-  className?: string;
-  short?: boolean;
-  forceColor?: boolean;
-}) {
-  let label = method.toUpperCase();
-  if (short) {
-    label = methodNames[method.toLowerCase()] ?? method.slice(0, 4);
-    label = label.padEnd(4, " ");
-  }
-
-  const m = method.toUpperCase();
-
+  ...props
+}: Omit<ComponentProps<typeof BaseHttpMethodTagRaw>, "colored"> & { forceColor?: boolean }) {
   const settings = useAtomValue(settingsAtom);
-  const colored = forceColor || settings.coloredMethods;
-
-  return (
-    <span
-      className={classNames(
-        className,
-        !colored && "text-text-subtle",
-        colored && m === "GRAPHQL" && "text-info",
-        colored && m === "WEBSOCKET" && "text-info",
-        colored && m === "GRPC" && "text-info",
-        colored && m === "QUERY" && "text-text-subtle",
-        colored && m === "OPTIONS" && "text-info",
-        colored && m === "HEAD" && "text-text-subtle",
-        colored && m === "GET" && "text-primary",
-        colored && m === "PUT" && "text-warning",
-        colored && m === "PATCH" && "text-notice",
-        colored && m === "POST" && "text-success",
-        colored && m === "DELETE" && "text-danger",
-        "font-mono shrink-0 whitespace-pre",
-        "pt-[0.15em]", // Fix for monospace font not vertically centering
-      )}
-    >
-      {label}
-    </span>
-  );
+  return <BaseHttpMethodTagRaw {...props} colored={forceColor || settings.coloredMethods} />;
 }

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

@@ -1,19 +1,24 @@
-import type { EditorView } from "@codemirror/view";
-import type { Color } from "@yaakapp-internal/plugins";
-import { HStack, Icon, type IconProps } from "@yaakapp-internal/ui";
+import {
+  HStack,
+  Icon,
+  type IconProps,
+  IconTooltip,
+  Input as BaseUiInput,
+  type InputHandle,
+  type InputProps as BaseUiInputProps,
+  useStateWithDeps,
+} from "@yaakapp-internal/ui";
+import type { CodeEditorProps } from "@yaakapp-internal/ui/editor";
 import classNames from "classnames";
-import type { ReactNode } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { createFastMutation } from "../../hooks/useFastMutation";
 import { useIsEncryptionEnabled } from "../../hooks/useIsEncryptionEnabled";
-import { useStateWithDeps } from "../../hooks/useStateWithDeps";
 import { copyToClipboard } from "../../lib/copy";
 import {
   analyzeTemplate,
   convertTemplateToInsecure,
   convertTemplateToSecure,
 } from "../../lib/encryption";
-import { generateId } from "../../lib/generateId";
 import {
   setupOrConfigureEncryption,
   withEncryptionEnabled,
@@ -25,69 +30,30 @@ import type { EditorProps } from "./Editor/Editor";
 import type { GenericCompletion } from "./Editor/genericCompletion";
 import { Editor } from "./Editor/LazyEditor";
 import { IconButton } from "./IconButton";
-import { IconTooltip } from "./IconTooltip";
-import { Label } from "./Label";
 
-export type InputProps = Pick<
-  EditorProps,
-  | "language"
-  | "autocomplete"
-  | "forcedEnvironmentId"
-  | "forceUpdateKey"
-  | "disabled"
-  | "autoFocus"
-  | "autoSelect"
-  | "autocompleteVariables"
-  | "autocompleteFunctions"
-  | "onKeyDown"
-  | "readOnly"
-> & {
-  className?: string;
-  containerClassName?: string;
-  inputWrapperClassName?: string;
-  defaultValue?: string | null;
-  disableObscureToggle?: boolean;
-  fullHeight?: boolean;
-  hideLabel?: boolean;
-  help?: ReactNode;
-  label: ReactNode;
-  labelClassName?: string;
-  labelPosition?: "top" | "left";
-  leftSlot?: ReactNode;
-  multiLine?: boolean;
-  name?: string;
-  onBlur?: () => void;
-  onChange?: (value: string) => void;
-  onFocus?: () => void;
-  onPaste?: (value: string) => void;
-  onPasteOverwrite?: EditorProps["onPasteOverwrite"];
-  placeholder?: string;
-  required?: boolean;
-  rightSlot?: ReactNode;
-  /**
-   * Show a chevron that opens the `autocomplete` options as a menu, so a value can be picked
-   * without knowing what to type. Opt-in, because plenty of inputs pass `autocomplete` without
-   * wanting the affordance (the URL bar completes from history, and a chevron there would be
-   * noise). Renders nothing when there are no options to show.
-   */
-  showOptionsPicker?: boolean;
-  size?: "2xs" | "xs" | "sm" | "md" | "auto";
-  stateKey: EditorProps["stateKey"];
-  extraExtensions?: EditorProps["extraExtensions"];
-  tint?: Color;
-  type?: "text" | "password";
-  validate?: boolean | ((v: string) => boolean);
-  wrapLines?: boolean;
-  setRef?: (h: InputHandle | null) => void;
-};
+export type { InputHandle };
 
-export interface InputHandle {
-  focus: () => void;
-  isFocused: () => boolean;
-  value: () => string;
-  selectAll: () => void;
-  dispatch: EditorView["dispatch"];
-}
+export type InputProps = Omit<
+  BaseUiInputProps,
+  "language" | "extensions" | "renderEditor" | "renderOptionsPicker"
+> &
+  Pick<
+    EditorProps,
+    | "language"
+    | "autocomplete"
+    | "forcedEnvironmentId"
+    | "autocompleteVariables"
+    | "autocompleteFunctions"
+    | "extraExtensions"
+  > & {
+    /**
+     * Show a chevron that opens the `autocomplete` options as a menu, so a value can be picked
+     * without knowing what to type. Opt-in, because plenty of inputs pass `autocomplete` without
+     * wanting the affordance (the URL bar completes from history, and a chevron there would be
+     * noise). Renders nothing when there are no options to show.
+     */
+    showOptionsPicker?: boolean;
+  };
 
 export function Input({ type, ...props }: InputProps) {
   // If it's a password and template functions are supported (ie. secure(...)) then
@@ -99,283 +65,47 @@ export function Input({ type, ...props }: InputProps) {
 }
 
 function BaseInput({
-  className,
-  containerClassName,
-  defaultValue,
-  disableObscureToggle,
-  disabled,
-  forceUpdateKey,
-  fullHeight,
-  help,
-  hideLabel,
-  inputWrapperClassName,
-  label,
-  labelClassName,
-  labelPosition = "top",
-  leftSlot,
-  multiLine,
-  onBlur,
-  onChange,
-  onFocus,
-  onPaste,
-  onPasteOverwrite,
-  placeholder,
-  readOnly,
-  required,
-  rightSlot,
+  autocomplete,
+  autocompleteFunctions,
+  autocompleteVariables,
+  extraExtensions,
+  forcedEnvironmentId,
+  language,
   showOptionsPicker,
-  size = "md",
-  stateKey,
-  tint,
-  type = "text",
-  validate,
-  wrapLines,
-  setRef,
   ...props
 }: InputProps) {
-  const [focused, setFocused] = useState(false);
-  const [obscured, setObscured] = useStateWithDeps(type === "password", [type]);
-  const [hasChanged, setHasChanged] = useStateWithDeps<boolean>(false, [forceUpdateKey]);
-  const editorRef = useRef<EditorView | null>(null);
-  const skipNextFocus = useRef<boolean>(false);
-
-  const handle = useMemo<InputHandle>(
-    () => ({
-      focus: () => {
-        if (editorRef.current == null) return;
-        const anchor = editorRef.current.state.doc.length;
-        skipNextFocus.current = true;
-        editorRef.current.focus();
-        editorRef.current.dispatch({ selection: { anchor, head: anchor }, scrollIntoView: true });
-      },
-      isFocused: () => editorRef.current?.hasFocus ?? false,
-      value: () => editorRef.current?.state.doc.toString() ?? "",
-      dispatch: (...args) => {
-        // oxlint-disable-next-line no-explicit-any
-        editorRef.current?.dispatch(...(args as any));
-      },
-      selectAll() {
-        if (editorRef.current == null) return;
-        editorRef.current.focus();
-        editorRef.current.dispatch({
-          selection: { anchor: 0, head: editorRef.current.state.doc.length },
-        });
-      },
-    }),
-    [],
+  const renderEditor = useCallback(
+    (editorProps: CodeEditorProps) => (
+      <Editor
+        {...editorProps}
+        language={language}
+        autocomplete={autocomplete}
+        autocompleteFunctions={autocompleteFunctions}
+        autocompleteVariables={autocompleteVariables}
+        extraExtensions={extraExtensions}
+        forcedEnvironmentId={forcedEnvironmentId}
+      />
+    ),
+    [
+      language,
+      autocomplete,
+      autocompleteFunctions,
+      autocompleteVariables,
+      extraExtensions,
+      forcedEnvironmentId,
+    ],
   );
 
-  // Replace the whole value with a picked option. Dispatching runs it through the editor's
-  // onChange, same as typing, so callers see one consistent change path.
-  const insertOption = useCallback((value: string) => {
-    const view = editorRef.current;
-    if (view == null) return;
-    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
-    view.focus();
-  }, []);
-
-  const pickerOptions = showOptionsPicker && !disabled ? (props.autocomplete?.options ?? []) : [];
-
-  const setEditorRef = useCallback(
-    (h: EditorView | null) => {
-      editorRef.current = h;
-      setRef?.(handle);
-    },
-    [handle, setRef],
-  );
-
-  useEffect(() => {
-    const fn = () => {
-      skipNextFocus.current = true;
-    };
-    window.addEventListener("focus", fn);
-    return () => {
-      window.removeEventListener("focus", fn);
-    };
-  }, []);
-
-  const handleFocus = useCallback(() => {
-    if (readOnly) return;
-
-    if (!skipNextFocus.current) {
-      editorRef.current?.dispatch({
-        selection: { anchor: 0, head: editorRef.current.state.doc.length },
-      });
-    }
-
-    setFocused(true);
-    onFocus?.();
-    skipNextFocus.current = false;
-  }, [onFocus, readOnly]);
-
-  const handleBlur = useCallback(async () => {
-    setFocused(false);
-    // Move selection to the end on blur
-    const anchor = editorRef.current?.state.doc.length ?? 0;
-    editorRef.current?.dispatch({
-      selection: { anchor, head: anchor },
-    });
-    onBlur?.();
-  }, [onBlur]);
-
-  const id = useRef(`input-${generateId()}`);
-  const editorClassName = classNames(
-    className,
-    "bg-transparent! min-w-0 h-auto w-full focus:outline-hidden placeholder:text-placeholder",
-  );
-
-  const isValid = useMemo(() => {
-    if (required && !validateRequire(defaultValue ?? "")) return false;
-    if (typeof validate === "boolean") return validate;
-    if (typeof validate === "function" && !validate(defaultValue ?? "")) return false;
-    return true;
-  }, [required, defaultValue, validate]);
-
-  const handleChange = useCallback(
-    (value: string) => {
-      onChange?.(value);
-      setHasChanged(true);
-    },
-    [onChange, setHasChanged],
-  );
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  // Submit the nearest form on Enter key press
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key !== "Enter") return;
-
-      const form = wrapperRef.current?.closest("form");
-      if (!isValid || form == null) return;
-
-      form?.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }));
-    },
-    [isValid],
-  );
+  const pickerOptions = showOptionsPicker && !props.disabled ? (autocomplete?.options ?? []) : [];
+  const renderOptionsPicker =
+    pickerOptions.length > 0
+      ? (insert: (value: string) => void) => (
+          <OptionsPickerDropdown options={pickerOptions} onSelect={insert} />
+        )
+      : undefined;
 
   return (
-    <div
-      ref={wrapperRef}
-      className={classNames(
-        "pointer-events-auto", // Just in case we're placing in disabled parent
-        "w-full",
-        fullHeight && "h-full",
-        labelPosition === "left" && "flex items-center gap-2",
-        labelPosition === "top" && "flex-row gap-0.5",
-      )}
-    >
-      <Label
-        htmlFor={id.current}
-        help={help}
-        required={required}
-        visuallyHidden={hideLabel}
-        className={classNames(labelClassName)}
-      >
-        {label}
-      </Label>
-      <HStack
-        alignItems="stretch"
-        className={classNames(
-          containerClassName,
-          fullHeight && "h-full",
-          "x-theme-input",
-          "relative w-full rounded-md text overflow-hidden",
-          "border",
-          focused && !disabled ? "border-border-focus" : "border-border",
-          disabled && "border-dotted",
-          !isValid && hasChanged && "border-danger!",
-          size === "md" && "min-h-md",
-          size === "sm" && "min-h-sm",
-          size === "xs" && "min-h-xs",
-          size === "2xs" && "min-h-2xs",
-        )}
-      >
-        {tint != null && (
-          <div
-            aria-hidden
-            className={classNames(
-              "absolute inset-0 opacity-5 pointer-events-none",
-              tint === "primary" && "bg-primary",
-              tint === "secondary" && "bg-secondary",
-              tint === "info" && "bg-info",
-              tint === "success" && "bg-success",
-              tint === "notice" && "bg-notice",
-              tint === "warning" && "bg-warning",
-              tint === "danger" && "bg-danger",
-            )}
-          />
-        )}
-        {leftSlot}
-        <HStack
-          className={classNames(
-            inputWrapperClassName,
-            "flex-1 min-w-0 px-2",
-            fullHeight && "h-full",
-            leftSlot ? "pl-0" : null,
-            rightSlot ? "pr-0" : null,
-          )}
-        >
-          <Editor
-            setRef={setEditorRef}
-            id={id.current}
-            hideGutter
-            singleLine={!multiLine}
-            containerOnly
-            stateKey={stateKey}
-            wrapLines={wrapLines}
-            heightMode="auto"
-            onKeyDown={handleKeyDown}
-            type={type === "password" && !obscured ? "text" : type}
-            defaultValue={defaultValue}
-            forceUpdateKey={forceUpdateKey}
-            placeholder={placeholder}
-            onChange={handleChange}
-            onPaste={onPaste}
-            onPasteOverwrite={onPasteOverwrite}
-            disabled={disabled}
-            className={classNames(
-              editorClassName,
-              multiLine && size === "md" && "py-1.5",
-              multiLine && size === "sm" && "py-1",
-              multiLine && (size === "xs" || size === "2xs") && "py-0.5",
-            )}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            readOnly={readOnly}
-            {...props}
-          />
-        </HStack>
-        {type === "password" && !disableObscureToggle && (
-          <IconButton
-            title={
-              obscured
-                ? `Show ${typeof label === "string" ? label : "field"}`
-                : `Obscure ${typeof label === "string" ? label : "field"}`
-            }
-            size="xs"
-            className={classNames("mr-0.5 h-auto! my-0.5", disabled && "opacity-disabled")}
-            color={tint}
-            // iconClassName={classNames(
-            //   tint === 'primary' && 'text-primary',
-            //   tint === 'secondary' && 'text-secondary',
-            //   tint === 'info' && 'text-info',
-            //   tint === 'success' && 'text-success',
-            //   tint === 'notice' && 'text-notice',
-            //   tint === 'warning' && 'text-warning',
-            //   tint === 'danger' && 'text-danger',
-            // )}
-            iconSize="sm"
-            icon={obscured ? "eye" : "eye_closed"}
-            onClick={() => setObscured((o) => !o)}
-          />
-        )}
-        {pickerOptions.length > 0 && (
-          <OptionsPickerDropdown options={pickerOptions} onSelect={insertOption} />
-        )}
-        {rightSlot}
-      </HStack>
-    </div>
+    <BaseUiInput {...props} renderEditor={renderEditor} renderOptionsPicker={renderOptionsPicker} />
   );
 }
 
@@ -419,10 +149,6 @@ function OptionsPickerDropdown({
   );
 }
 
-function validateRequire(v: string) {
-  return v.length > 0;
-}
-
 type PasswordFieldType = "text" | "encrypted";
 
 function EncryptionInput({

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

@@ -1,106 +1,10 @@
-import classNames from "classnames";
-import type { HTMLAttributes, ReactElement, ReactNode } from "react";
-import { CopyIconButton } from "../CopyIconButton";
+import { KeyValueRow as BaseKeyValueRow, type KeyValueRowProps } from "@yaakapp-internal/ui";
+import { copyToClipboard } from "../../lib/copy";
 
-interface Props {
-  children:
-    | ReactElement<HTMLAttributes<HTMLTableColElement>>
-    | (ReactElement<HTMLAttributes<HTMLTableColElement>> | null)[];
-  selectable?: boolean;
+export function KeyValueRow(props: Omit<KeyValueRowProps, "copy">) {
+  return <BaseKeyValueRow {...props} copy={copy} />;
 }
 
-export function KeyValueRows({ children, selectable }: Props) {
-  const childArray = Array.isArray(children) ? children.filter(Boolean) : [children];
-  return (
-    <table
-      className={classNames(
-        "text-editor font-mono min-w-0 w-full mb-auto",
-        selectable &&
-          "[&_td]:select-auto [&_td]:cursor-auto [&_td_*]:select-auto [&_td_*]:cursor-auto",
-      )}
-    >
-      <tbody className="divide-y divide-surface-highlight">
-        {childArray.map((child, i) => (
-          // oxlint-disable-next-line react/no-array-index-key
-          <tr key={i}>{child}</tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-interface KeyValueRowProps {
-  label: ReactNode;
-  children: ReactNode;
-  rightSlot?: ReactNode;
-  leftSlot?: ReactNode;
-  align?: "top" | "middle";
-  labelClassName?: string;
-  labelColor?: "secondary" | "primary" | "info";
-  enableCopy?: boolean;
-  copyText?: string;
-}
-
-export function KeyValueRow({
-  label,
-  children,
-  rightSlot,
-  leftSlot,
-  align = "top",
-  labelColor = "secondary",
-  labelClassName,
-  enableCopy,
-  copyText,
-}: KeyValueRowProps) {
-  const textToCopy =
-    copyText ??
-    (typeof children === "string" || typeof children === "number" ? `${children}` : null);
-  const copyTitle =
-    typeof label === "string" || typeof label === "number" ? `Copy ${label}` : "Copy value";
-  const resolvedRightSlot =
-    rightSlot ??
-    (enableCopy && textToCopy != null ? (
-      <CopyIconButton
-        text={textToCopy}
-        className="text-text-subtle"
-        size="2xs"
-        title={copyTitle}
-        iconSize="sm"
-      />
-    ) : null);
-
-  return (
-    <>
-      <td
-        className={classNames(
-          "select-none py-0.5 pr-2 h-full max-w-40",
-          align === "top" && "align-top",
-          align === "middle" && "align-middle",
-          labelClassName,
-          labelColor === "primary" && "text-primary",
-          labelColor === "secondary" && "text-text-subtle",
-          labelColor === "info" && "text-info",
-        )}
-      >
-        <span className="select-text cursor-text">{label}</span>
-      </td>
-      <td
-        className={classNames(
-          "select-none py-0.5 break-all max-w-60",
-          align === "top" && "align-top",
-          align === "middle" && "align-middle",
-        )}
-      >
-        <div className="select-text cursor-text max-h-48 overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
-          {leftSlot ?? <span aria-hidden />}
-          {children}
-          {resolvedRightSlot ? (
-            <div className="ml-1.5">{resolvedRightSlot}</div>
-          ) : (
-            <span aria-hidden />
-          )}
-        </div>
-      </td>
-    </>
-  );
+function copy(text: string) {
+  copyToClipboard(text, { disableToast: true });
 }

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

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

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

@@ -14,9 +14,8 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "rea
 import type { WrappedEnvironmentVariable } from "../../hooks/useEnvironmentVariables";
 import { useRandomKey } from "../../hooks/useRandomKey";
 import { useToggle } from "../../hooks/useToggle";
-import { languageFromContentType } from "../../lib/contentType";
 import { showDialog } from "../../lib/dialog";
-import { computeSideForDragMove, DropMarker } from "@yaakapp-internal/ui";
+import { computeSideForDragMove, DropMarker, languageFromContentType } from "@yaakapp-internal/ui";
 import { showPrompt } from "../../lib/prompt";
 import { SelectFile } from "../SelectFile";
 import { Button } from "./Button";