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

2026-11-13 20:23:40 +01:00 · 2026-09-14 21:31:47 -07:00
663 changed files with 13444 additions and 63000 deletions
@@ -1,20 +0,0 @@
-{
-  "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"
-    }
-  ]
-}
@@ -1,18 +0,0 @@
-{
-  "$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"]
-    }
-  ]
-}
@@ -5,4 +5,3 @@ 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
@@ -7,23 +7,6 @@ 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
@@ -42,10 +25,6 @@ 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:
@@ -1,79 +0,0 @@
-// 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}`);
@@ -35,29 +35,3 @@ 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
@@ -70,7 +70,7 @@ jobs:
            runtime: "wry"
            targets: "aarch64-pc-windows-msvc"
    runs-on: ${{ matrix.platform }}
-    timeout-minutes: 360
+    timeout-minutes: 60
    steps:
      - name: Checkout yaakapp/app
        uses: actions/checkout@v4
@@ -172,8 +172,7 @@ 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

-      - name: Build and upload Tauri bundles
-        uses: tauri-apps/tauri-action@v0
+      - uses: tauri-apps/tauri-action@v0
        env:
          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}

@@ -195,8 +194,6 @@ 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__"
@@ -206,17 +203,6 @@ 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:
@@ -231,13 +217,7 @@ jobs:
          mkdir -p "$extract_dir"
          dpkg-deb -x "$deb" "$extract_dir"
          tar -C "$extract_dir" -czf "$tarball" .
-          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
+          gh release upload "${{ github.ref_name }}" "$tarball" --clobber

      # Build a per-machine NSIS installer for enterprise deployment (PDQ, SCCM, Intune)
      - name: Build and upload machine-wide installer (Windows only)
@@ -255,7 +235,6 @@ 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"
@@ -263,30 +242,5 @@ jobs:
          $destSig = "$dest.sig"
          Copy-Item $setup.FullName $dest
          Copy-Item $setupSig $destSig
-          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
+          gh release upload "${{ github.ref_name }}" "$dest" --clobber
+          gh release upload "${{ github.ref_name }}" "$destSig" --clobber
@@ -3,7 +3,6 @@
  "ignorePatterns": [
    "**/bindings/**",
    "crates/yaak-templates/pkg/**",
-    "apps/yaak-client/routeTree.gen.ts",
-    "plugins/importer-bruno/tests/fixtures/upstream/**"
+    "apps/yaak-client/routeTree.gen.ts"
  ]
 }
@@ -11,12 +11,10 @@ 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",
@@ -31,7 +29,6 @@ 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
@@ -40,7 +37,6 @@ 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",
@@ -51,16 +47,9 @@ chrono = "0.4.42"
 hex = "0.4.3"
 keyring = "3.6.3"
 log = "0.4.29"
-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",
-] }
+reqwest = "0.12.20"
 rustls = { version = "0.23.34", default-features = false }
-rustls-platform-verifier = "0.7.1"
+rustls-platform-verifier = "0.6.2"
 schemars = { version = "0.8.22", features = ["chrono"] }
 serde = "1.0.228"
 serde_json = "1.0.145"
@@ -88,12 +77,10 @@ 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" }
@@ -111,7 +98,6 @@ 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" }
@@ -1,15 +0,0 @@
-# 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"]
@@ -38,10 +38,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
    ca-certificates libssl3 && rm -rf /var/lib/apt/lists/*
 COPY --from=server /app/target/release/yaak-web /usr/local/bin/yaak-web
 COPY --from=web /app/dist/apps/yaak-client /srv
-# 0.0.0.0 so the port is reachable from outside the container. PORT is the variable a
-# platform-as-a-service assigns, so a deploy that sets it needs nothing else changed.
-ENV HOST=0.0.0.0
-ENV PORT=8080
+ENV YAAK_WEB_BIND=0.0.0.0:8080
 EXPOSE 8080
 USER nobody
 # Overriding the command (dropping --serve) leaves the stateless send executor:
@@ -1,148 +0,0 @@
-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();
-});
@@ -14,12 +14,11 @@ import {
 } from "@yaakapp-internal/ui";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
-import { hideDialog, showDialog } from "../lib/dialog";
+import { 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,
@@ -53,48 +52,24 @@ 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; attempt?: number }
+  { workspaceId: string; syncDir: string; force?: boolean }
 >({
  mutationKey: [],
-  mutationFn: async ({ workspaceId, syncDir, force, attempt = 1 }) => {
+  mutationFn: async ({ workspaceId, syncDir, force }) => {
    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"));

-    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();
+    if (dbOps.length === 0) {
+      await applySync(workspaceId, syncDir, ops);
      return;
    }

@@ -104,8 +79,9 @@ export const syncWorkspace = createFastMutation<

    console.log("Directory changes detected", { dbOps, ops });

-    if (attempt > 1) {
-      showStaleSyncToast();
+    if (force) {
+      await applySync(workspaceId, syncDir, ops);
+      return;
    }

    showDialog({
@@ -117,7 +93,8 @@ export const syncWorkspace = createFastMutation<
          className="h-full grid grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-3"
          onSubmit={async (e) => {
            e.preventDefault();
-            await apply();
+            await applySync(workspaceId, syncDir, ops);
+            hide();
          }}
        >
          {isDeletingWorkspace ? (
@@ -6,12 +6,11 @@ import { showDialog } from "../lib/dialog";
 import { jotaiStore } from "../lib/jotai";
 import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";

-/**
- * 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>({
+export const createSubEnvironmentAndActivate = createFastMutation<
+  string | null,
+  unknown,
+  Environment | null
+>({
  mutationKey: ["create_environment"],
  mutationFn: async (baseEnvironment) => {
    if (baseEnvironment == null) {
@@ -42,17 +41,6 @@ export const createSubEnvironment = createFastMutation<string | null, unknown, E
      });
    });
  },
-});
-
-/** 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
@@ -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"],
@@ -17,7 +17,7 @@ export const openWorkspaceFromSyncDir = createFastMutation<void, void, string>({
      return;
    }

-    await applySync(workspace.id, dir, ops, { fsOnly: true });
+    await applySync(workspace.id, dir, ops);

    await router.navigate({
      to: "/workspaces/$workspaceId",
@@ -1,10 +1,16 @@
-import type { WorkspaceSettingsTab } from "../components/WorkspaceSettingsDialog";
+import type {
+  WorkspaceSettingsHighlight,
+  WorkspaceSettingsTab,
+} from "../components/WorkspaceSettingsDialog";
 import { WorkspaceSettingsDialog } from "../components/WorkspaceSettingsDialog";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { jotaiStore } from "../lib/jotai";

-export function openWorkspaceSettings(tab?: WorkspaceSettingsTab) {
+export function openWorkspaceSettings(
+  tab?: WorkspaceSettingsTab,
+  highlight?: WorkspaceSettingsHighlight,
+) {
  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
  if (workspaceId == null) return;
-  WorkspaceSettingsDialog.show(workspaceId, tab);
+  WorkspaceSettingsDialog.show(workspaceId, tab, highlight);
 }
@@ -1,12 +1,12 @@
 import { gitClone } from "@yaakapp-internal/git";
 import { Banner, VStack } from "@yaakapp-internal/ui";
-import { useId, useState } from "react";
+import { 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,7 +29,6 @@ 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);
@@ -84,7 +83,7 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
  };

  return (
-    <VStack as="form" id={formId} space={3} alignItems="start" onSubmit={handleClone}>
+    <VStack as="form" space={3} alignItems="start" className="pb-3" onSubmit={handleClone}>
      {error && (
        <Banner color="danger" className="w-full">
          {error}
@@ -133,17 +132,15 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
        />
      )}

-      <DialogFooter
-        actions={[
-          {
-            label: isCloning ? "Cloning..." : "Clone Repository",
-            color: "primary",
-            form: formId,
-            disabled: !url || !directory || isCloning,
-            isLoading: isCloning,
-          },
-        ]}
-      />
+      <Button
+        type="submit"
+        color="primary"
+        className="w-full mt-3"
+        disabled={!url || !directory || isCloning}
+        isLoading={isCloning}
+      >
+        {isCloning ? "Cloning..." : "Clone Repository"}
+      </Button>
    </VStack>
  );
 }
@@ -1,11 +1,12 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode } 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;
@@ -1,5 +1,5 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
 import { type ReactNode, useMemo } from "react";
 import { useSaveResponse } from "../hooks/useSaveResponse";
 import { useToggle } from "../hooks/useToggle";
@@ -8,6 +8,7 @@ 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;
@@ -1,5 +1,5 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
 import { type ReactNode, useMemo } from "react";
 import { getRequestBodyText as getHttpResponseRequestBodyText } from "../hooks/useHttpRequestBody";
 import { useToggle } from "../hooks/useToggle";
@@ -7,6 +7,7 @@ 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;
@@ -25,13 +25,12 @@ 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 } from "./core/KeyValueRow";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
 import { EmptyStateText } from "./EmptyStateText";
 import { PlainInput } from "./core/PlainInput";
 import { Select } from "./core/Select";
@@ -1,22 +1,31 @@
-import {
-  CopyIconButton as BaseCopyIconButton,
-  type CopyIconButtonProps,
-} from "@yaakapp-internal/ui";
+import { IconButton, type IconButtonProps, useTimedBoolean } from "@yaakapp-internal/ui";
 import { copyToClipboard } from "../lib/copy";
 import { showToast } from "../lib/toast";

-export function CopyIconButton(props: Omit<CopyIconButtonProps, "copy" | "onCopyFailed">) {
-  return <BaseCopyIconButton {...props} copy={copy} onCopyFailed={showCopyFailed} />;
+interface Props extends Omit<IconButtonProps, "onClick" | "icon"> {
+  text: string | (() => Promise<string | null>);
 }

-function copy(text: string) {
-  copyToClipboard(text, { disableToast: true });
-}
-
-function showCopyFailed() {
-  showToast({
-    id: "failed-to-copy",
-    color: "danger",
-    message: "Failed to copy",
-  });
+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();
+        }
+      }}
+    />
+  );
 }
@@ -1,12 +1,12 @@
 import { createWorkspaceModel } from "@yaakapp-internal/models";
-import { useId, useState } from "react";
+import { useState } from "react";
 import { useToggle } from "../hooks/useToggle";
 import { ColorIndicator } from "./ColorIndicator";
+import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
 import { ColorPickerWithThemeColors } from "./core/ColorPicker";
-import { DialogFooter } from "./core/Dialog";
+import { Label } from "./core/Label";
 import { PlainInput } from "./core/PlainInput";
-import { Label } from "@yaakapp-internal/ui";

 interface Props {
  onCreate: (id: string) => void;
@@ -18,11 +18,9 @@ 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
-      id={formId}
-      className="flex flex-col gap-3"
+      className="pb-3 flex flex-col gap-3"
      onSubmit={async (e) => {
        e.preventDefault();
        const id = await createWorkspaceModel({
@@ -61,17 +59,10 @@ export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props)
        </Label>
        <ColorPickerWithThemeColors onChange={setColor} color={color} />
      </div>
-      <DialogFooter
-        inline
-        actions={[
-          {
-            label: "Create Environment",
-            color: "secondary",
-            form: formId,
-            leftSlot: color != null ? <ColorIndicator color={color} /> : undefined,
-          },
-        ]}
-      />
+      <Button type="submit" color="secondary" className="mt-3">
+        {color != null && <ColorIndicator color={color} />}
+        Create Environment
+      </Button>
    </form>
  );
 }
@@ -1,14 +1,15 @@
 import { gitMutations } from "@yaakapp-internal/git";
 import type { WorkspaceMeta } from "@yaakapp-internal/models";
 import { createGlobalModel, updateModel } from "@yaakapp-internal/models";
-import { VStack, Label } from "@yaakapp-internal/ui";
-import { useId, useState } from "react";
+import { VStack } from "@yaakapp-internal/ui";
+import { useState } from "react";
 import { router } from "../lib/router";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
 import { rpc } from "../lib/rpc";
 import { showErrorToast } from "../lib/toast";
+import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
-import { DialogFooter } from "./core/Dialog";
+import { Label } from "./core/Label";
 import { PlainInput } from "./core/PlainInput";
 import { EncryptionHelp } from "./EncryptionHelp";
 import { gitCallbacks } from "./git/callbacks";
@@ -25,13 +26,12 @@ 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,7 +89,9 @@ export function CreateWorkspaceDialog({ hide }: Props) {
          title="Enable Encryption"
        />
      </div>
-      <DialogFooter actions={[{ label: "Create Workspace", color: "primary", form: formId }]} />
+      <Button type="submit" color="primary" className="w-full mt-3">
+        Create Workspace
+      </Button>
    </VStack>
  );
 }
@@ -11,7 +11,7 @@ import type {
  FormInputText,
  JsonPrimitive,
 } from "@yaakapp-internal/plugins";
-import { Banner, VStack, Label } from "@yaakapp-internal/ui";
+import { Banner, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo } from "react";
@@ -26,10 +26,12 @@ 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";
 import { Select } from "./core/Select";
+import { SecretVariableHint } from "./hints/SecretVariableHint";
 import { Markdown } from "./Markdown";
 import { SelectFile } from "./SelectFile";

@@ -45,6 +47,8 @@ interface Props<T> {
  stateKey: string;
  className?: string;
  disabled?: boolean;
+  /** Offer to move literal secrets typed into password fields into a variable */
+  suggestVariables?: boolean;
 }

 export function DynamicForm<T extends Record<string, JsonPrimitive>>({
@@ -56,6 +60,7 @@ export function DynamicForm<T extends Record<string, JsonPrimitive>>({
  stateKey,
  className,
  disabled,
+  suggestVariables,
 }: Props<T>) {
  const setDataAttr = useCallback(
    (name: string, value: JsonPrimitive) => {
@@ -72,6 +77,7 @@ export function DynamicForm<T extends Record<string, JsonPrimitive>>({
      stateKey={stateKey}
      autocompleteFunctions={autocompleteFunctions}
      autocompleteVariables={autocompleteVariables}
+      suggestVariables={suggestVariables}
      data={data}
      className={classNames(className, "pb-4")} // Pad the bottom to look nice
    />
@@ -102,6 +108,7 @@ type FormInputsProps<T> = Pick<
 > & {
  setDataAttr: (name: string, value: JsonPrimitive) => void;
  disabled?: boolean;
+  suggestVariables?: boolean;
 };

 function FormInputs<T extends Record<string, JsonPrimitive>>({
@@ -112,6 +119,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
  setDataAttr,
  data,
  disabled,
+  suggestVariables,
 }: FormInputsProps<T>) {
  return (
    <>
@@ -146,6 +154,7 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
                arg={input}
                autocompleteFunctions={autocompleteFunctions || false}
                autocompleteVariables={autocompleteVariables || false}
+                suggestVariables={suggestVariables || false}
                onChange={(v) => setDataAttr(input.name, v)}
                value={
                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "")
@@ -286,6 +295,7 @@ function TextArg({
  value,
  autocompleteFunctions,
  autocompleteVariables,
+  suggestVariables,
  stateKey,
 }: {
  arg: FormInputText;
@@ -293,6 +303,7 @@ function TextArg({
  onChange: (v: string) => void;
  autocompleteFunctions: boolean;
  autocompleteVariables: boolean;
+  suggestVariables: boolean;
  stateKey: string;
 }) {
  const props: InputProps = {
@@ -315,10 +326,19 @@ function TextArg({
    autocompleteFunctions,
    autocompleteVariables,
  };
-  if (autocompleteVariables || autocompleteFunctions || arg.completionOptions) {
-    return <Input {...props} />;
-  }
-  return <PlainInput {...props} />;
+  const input =
+    autocompleteVariables || autocompleteFunctions || arg.completionOptions ? (
+      <Input {...props} />
+    ) : (
+      <PlainInput {...props} />
+    );
+  if (!suggestVariables || !arg.password) return input;
+  return (
+    <div className="flex flex-col gap-2">
+      {input}
+      <SecretVariableHint name={arg.name} value={value} onReplace={onChange} />
+    </div>
+  );
 }

 function EditorArg({
@@ -1,19 +1,11 @@
 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, IconTooltip } from "@yaakapp-internal/ui";
+import { Banner, Icon, InlineCode, SplitLayout, Tree } from "@yaakapp-internal/ui";
 import { atom, useAtomValue } from "jotai";
 import { atomFamily } from "jotai-family";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import { createSubEnvironment } from "../commands/createEnvironment";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { createSubEnvironmentAndActivate } from "../commands/createEnvironment";
 import { activeWorkspaceAtom, activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import {
  environmentsBreakdownAtom,
@@ -30,6 +22,7 @@ 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";
@@ -47,9 +40,6 @@ 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>(
@@ -125,7 +115,7 @@ function EnvironmentEditDialogSidebar({
  const activeWorkspaceId = useAtomValue(activeWorkspaceIdAtom) ?? "";
  const treeId = `environment.${activeWorkspaceId}.sidebar`;
  const treeRef = useRef<TreeHandle>(null);
-  const { allEnvironments, baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
+  const { baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();

  // oxlint-disable-next-line react-hooks/exhaustive-deps -- none
  useLayoutEffect(() => {
@@ -134,31 +124,6 @@ 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);
@@ -169,14 +134,6 @@ 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(
@@ -238,14 +195,13 @@ function EnvironmentEditDialogSidebar({
      const addEnvironmentItem: DropdownItem = {
        label: "Create Sub Environment",
        leftSlot: <Icon icon="plus" />,
-        onSelect: handleCreateSubEnvironment,
+        onSelect: async () => {
+          await createSubEnvironment();
+        },
      };
-      // 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 canCreateSubEnvironment ? [addEnvironmentItem] : [];
+        return [addEnvironmentItem];
      }

      const singleEnvironment = items.length === 1;
@@ -301,7 +257,7 @@ function EnvironmentEditDialogSidebar({
      ];

      // Add sub environment to base environment
-      if (isBaseEnvironment(environment) && singleEnvironment && canCreateSubEnvironment) {
+      if (isBaseEnvironment(environment) && singleEnvironment) {
        menuItems.push({ type: "separator" });
        menuItems.push(addEnvironmentItem);
      }
@@ -310,7 +266,6 @@ function EnvironmentEditDialogSidebar({
    },
    [
      baseEnvironments.length,
-      handleCreateSubEnvironment,
      handleDeleteEnvironment,
      handleDuplicateSelected,
      handleRenameSelected,
@@ -362,37 +317,34 @@ function EnvironmentEditDialogSidebar({
  );

  const renderContextMenuFn = useCallback<NonNullable<TreeProps<TreeModel>["renderContextMenu"]>>(
-    ({ 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} />
-      ),
+    ({ items, position, onClose }) => (
+      <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 && (
-        <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>
+        <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>
      )}
    </aside>
  );
@@ -432,15 +384,6 @@ 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 ? (
@@ -452,7 +395,6 @@ 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) && (
@@ -463,7 +405,7 @@ function ItemRightSlot({ item }: { item: TreeModel }) {
          icon="plus_circle"
          className="opacity-50 hover:opacity-100"
          title="Add Sub-Environment"
-          onClick={handleCreateSubEnvironment}
+          onClick={createSubEnvironment}
        />
      )}
    </>
@@ -483,6 +425,13 @@ 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,
@@ -15,6 +15,7 @@ import {
  withEncryptionEnabled,
 } from "../lib/setupOrConfigureEncryption";
 import { DismissibleBanner } from "./core/DismissibleBanner";
+import { FeatureHint } from "./core/FeatureHint";
 import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import type { PairEditorHandle, PairWithId } from "./core/PairEditor";
 import { ensurePairId } from "./core/PairEditor.util";
@@ -152,6 +153,17 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
            This sharable environment contains plain-text secrets
          </DismissibleBanner>
        )}
+        {!environment.public && !isEncryptionEnabled && hasSecretLookingVariable(environment) && (
+          <FeatureHint
+            id="encrypt-secrets"
+            className="mr-3"
+            docsUrl="https://yaak.app/docs/collaboration/secrets-encryption"
+            action={{ label: "Enable Encryption", onClick: setupOrConfigureEncryption }}
+          >
+            Some of these look like secrets. Encrypt them so the workspace is safe to sync to a
+            folder or share with a team.
+          </FeatureHint>
+        )}
      </div>
      <PairOrBulkEditor
        setRef={setRef}
@@ -173,3 +185,9 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
    </div>
  );
 }
+
+const SECRET_NAME = /token|secret|password|passwd|api[_-]?key|private[_-]?key|credential/i;
+
+function hasSecretLookingVariable(environment: Environment) {
+  return environment.variables.some((v) => v.value.trim() !== "" && SECRET_NAME.test(v.name));
+}
@@ -1,4 +1,4 @@
-import { IconTooltip } from "@yaakapp-internal/ui";
+import { IconTooltip } from "./core/IconTooltip";

 export function EnvironmentSharableTooltip() {
  return (
@@ -1,19 +1,60 @@
-import { ErrorBoundary as BaseErrorBoundary } from "@yaakapp-internal/ui";
-import type { ReactNode } from "react";
-import { useEffect } from "react";
+import { Banner, Button, InlineCode } from "@yaakapp-internal/ui";
+import type { ErrorInfo, ReactNode } from "react";
+import { Component, useEffect } from "react";
 import { showDialog } from "../lib/dialog";
 import RouteError from "./RouteError";

-export function ErrorBoundary({ name, children }: { name: string; children: ReactNode }) {
-  return (
-    <BaseErrorBoundary name={name} onShowError={showErrorDialog}>
-      {children}
-    </BaseErrorBoundary>
-  );
+interface ErrorBoundaryProps {
+  name: string;
+  children: ReactNode;
 }

-export function showErrorDialog(error: unknown) {
-  showDialog({ id: "error-boundary", render: () => <RouteError error={error} /> });
+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 ErrorBoundaryTestThrow() {
@@ -1,18 +1,18 @@
 import type { Workspace } from "@yaakapp-internal/models";
 import { workspacesAtom } from "@yaakapp-internal/models";
-import { VStack } from "@yaakapp-internal/ui";
+import { HStack, 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,30 +65,29 @@ 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 document = await rpc<string>("cmd_export_data", {
-      workspaceIds: ids,
-      includePrivateEnvironments: includePrivateEnvironments,
+    const exportPath = await platform.dialog.save({
+      title: "Export Data",
+      defaultPath: `yaak.${slug}.json`,
    });
-
-    const savedTo = await platform.files.save(
-      `yaak.${slug}.json`,
-      new TextEncoder().encode(document),
-      [{ name: "JSON", extensions: ["json"] }],
-    );
-    if (savedTo == null) {
-      return; // Cancelled
+    if (exportPath == null) {
+      return;
    }

+    await rpc("cmd_export_data", {
+      workspaceIds: ids,
+      exportPath,
+      includePrivateEnvironments: includePrivateEnvironments,
+    });
    onHide();
-    onSuccess(savedTo);
+    onSuccess(exportPath);
  }, [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 (
-    <>
-      <VStack space={3} className="pb-4">
+    <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">
        <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">
@@ -141,22 +140,29 @@ function ExportDataDialogContent({
          />
        </DetailsBanner>
      </VStack>
-      <DialogFooter
-        leftSlot={
+      <footer className="px-5 grid grid-cols-[1fr_auto] items-center bg-surface py-3 border-t border-border-subtle">
+        <div>
          <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtlest">
            Create Run Button
          </Link>
-        }
-        actions={[
-          { label: "Cancel", onClick: onHide },
-          {
-            label: `Export ${pluralizeCount("Workspace", numSelected, { omitSingle: true, noneWord: "Nothing" })}`,
-            color: "primary",
-            disabled: noneSelected,
-            onClick: () => handleExport(),
-          },
-        ]}
-      />
-    </>
+        </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>
  );
 }
@@ -1,14 +1,6 @@
 import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
 import { foldersAtom } from "@yaakapp-internal/models";
-import {
-  Heading,
-  HStack,
-  Icon,
-  LoadingIcon,
-  HttpResponseDurationTag,
-  HttpStatusTag,
-  SizeTag,
-} from "@yaakapp-internal/ui";
+import { Heading, HStack, Icon, LoadingIcon } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import type { CSSProperties, ReactNode } from "react";
@@ -21,8 +13,11 @@ 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 {
@@ -1,5 +1,5 @@
 import { createWorkspaceModel, foldersAtom, patchModel } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode, VStack, CountBadge } from "@yaakapp-internal/ui";
+import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { Fragment, useMemo } from "react";
 import { useAuthTab } from "../hooks/useAuthTab";
@@ -11,6 +11,7 @@ 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";
@@ -1,4 +1,3 @@
-import type { NavigateWorkspace } from "@yaakapp-internal/tauri-client";
 import { activeRequestAtom } from "../hooks/useActiveRequest";
 import { useSubscribeActiveWorkspaceId } from "../hooks/useActiveWorkspace";
 import { useActiveWorkspaceChangedToast } from "../hooks/useActiveWorkspaceChangedToast";
@@ -6,13 +5,10 @@ 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();
@@ -28,20 +24,6 @@ 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 () => {
@@ -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,7 +239,6 @@ export function GrpcEditor({
                showDialog({
                  title: "Configure Schema",
                  size: "md",
-                  className: "h-[30rem]",
                  id: "grpc-configure-schema",
                  render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
                });
@@ -1,13 +1,13 @@
 import type { GrpcRequest } from "@yaakapp-internal/models";
-import { Banner, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { Banner, HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useActiveRequest } from "../hooks/useActiveRequest";
 import { useGrpc } from "../hooks/useGrpc";
 import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
-import { DialogFooter } from "./core/Dialog";
-import { PathList } from "./core/PathList";
+import { pluralizeCount } from "../lib/pluralize";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
 import { Link } from "./core/Link";
 import { platform } from "@yaakapp-internal/platform";
-import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";

 interface Props {
  onDone: () => void;
@@ -20,10 +20,7 @@ export function GrpcProtoSelectionDialog(props: Props) {
  return <GrpcProtoSelectionDialogWithRequest request={request} {...props} />;
 }

-function GrpcProtoSelectionDialogWithRequest({
-  request,
-  onDone,
-}: Props & { request: GrpcRequest }) {
+function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: GrpcRequest }) {
  const protoFilesKv = useGrpcProtoFiles(request.id);
  const protoFiles = protoFilesKv.value ?? [];
  const grpc = useGrpc(request, null, protoFiles);
@@ -41,8 +38,54 @@ function GrpcProtoSelectionDialogWithRequest({
  }

  return (
-    <>
-      <VStack space={5} className="pb-4">
+    <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}>
        {reflectError && (
          <Banner color="warning">
            <h1 className="font-bold">
@@ -85,47 +128,46 @@ function GrpcProtoSelectionDialogWithRequest({
          </Banner>
        )}

-        <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();
-              },
-            },
-          ]}
-        />
+        {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>
+        )}
        {reflectionUnimplemented && protoFiles.length === 0 && (
          <Banner>
            <InlineCode>{request.url}</InlineCode> doesn&apos;t implement{" "}
@@ -136,17 +178,6 @@ function GrpcProtoSelectionDialogWithRequest({
          </Banner>
        )}
      </VStack>
-      <DialogFooter
-        actions={[
-          {
-            label: "Refresh Schema",
-            isLoading: grpc.reflect.isFetching,
-            disabled: grpc.reflect.isFetching,
-            onClick: () => grpc.reflect.refetch(),
-          },
-          { label: "Done", color: "primary", onClick: onDone },
-        ]}
-      />
-    </>
+    </VStack>
  );
 }
@@ -4,7 +4,7 @@ import {
  patchModel,
  patchModelDebounced,
 } from "@yaakapp-internal/models";
-import { HStack, Icon, useContainerSize, VStack, CountBadge } from "@yaakapp-internal/ui";
+import { HStack, Icon, useContainerSize, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { CSSProperties } from "react";
 import { useCallback, useMemo, useRef } from "react";
@@ -15,6 +15,7 @@ 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";
@@ -1,13 +1,5 @@
 import type { GrpcEvent, GrpcRequest } from "@yaakapp-internal/models";
-import {
-  HStack,
-  Icon,
-  type IconProps,
-  LoadingIcon,
-  VStack,
-  useStateWithDeps,
-  KeyValueRows,
-} from "@yaakapp-internal/ui";
+import { HStack, Icon, type IconProps, LoadingIcon, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue, useSetAtom } from "jotai";
 import type { CSSProperties } from "react";
 import { useEffect, useMemo, useState } from "react";
@@ -17,12 +9,13 @@ 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 } from "./core/KeyValueRow";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
 import { EmptyStateText } from "./EmptyStateText";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { RecentGrpcConnectionsDropdown } from "./RecentGrpcConnectionsDropdown";
@@ -1,5 +1,5 @@
 import type { HttpRequestHeader } from "@yaakapp-internal/models";
-import { HStack, CountBadge } from "@yaakapp-internal/ui";
+import { HStack } 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 { validateHttpHeader } from "../lib/validateHttpHeader";
+import { CountBadge } from "./core/CountBadge";
 import { DetailsBanner } from "./core/DetailsBanner";
 import type { GenericCompletion, GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import type { InputProps } from "./core/Input";
@@ -178,3 +178,13 @@ 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;
+};
@@ -178,6 +178,7 @@ export function HttpAuthenticationEditor({ model }: Props) {
        disabled={model.authentication.disabled === true}
        autocompleteVariables
        autocompleteFunctions
+        suggestVariables
        stateKey={`auth.${model.id}.${model.authenticationType}`}
        inputs={authConfig.data?.args ?? []}
        data={model.authentication}
@@ -15,6 +15,8 @@ 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 {
@@ -33,10 +35,11 @@ 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, languageFromContentType, CountBadge } from "@yaakapp-internal/ui";
+import { InlineCode } 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";
@@ -49,9 +52,9 @@ import { JsonBodyEditor } from "./JsonBodyEditor";
 import { MarkdownEditor } from "./MarkdownEditor";
 import { RequestMethodDropdown } from "./RequestMethodDropdown";
 import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { SharedOriginHint } from "./hints/SharedOriginHint";
 import { UrlBar } from "./UrlBar";
 import { UrlParametersEditor } from "./UrlParameterEditor";
-import { generateId } from "@yaakapp-internal/lib/generateId";

 const GraphQLEditor = lazy(() =>
  import("./graphql/GraphQLEditor").then((m) => ({ default: m.GraphQLEditor })),
@@ -342,24 +345,27 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
    >
      {activeRequest && (
        <>
-          <UrlBar
-            stateKey={`url.${activeRequest.id}`}
-            key={forceUpdateKey + urlKey}
-            url={activeRequest.url}
-            placeholder="https://example.com"
-            onPasteOverwrite={handlePaste}
-            autocomplete={autocomplete}
-            onSend={handleSend}
-            onCancel={cancelResponse}
-            onUrlChange={handleUrlChange}
-            leftSlot={
-              <div className="py-0.5">
-                <RequestMethodDropdown request={activeRequest} className="ml-0.5 h-full!" />
-              </div>
-            }
-            forceUpdateKey={updateKey}
-            isLoading={activeResponse != null && activeResponse.state !== "closed"}
-          />
+          <div>
+            <UrlBar
+              stateKey={`url.${activeRequest.id}`}
+              key={forceUpdateKey + urlKey}
+              url={activeRequest.url}
+              placeholder="https://example.com"
+              onPasteOverwrite={handlePaste}
+              autocomplete={autocomplete}
+              onSend={handleSend}
+              onCancel={cancelResponse}
+              onUrlChange={handleUrlChange}
+              leftSlot={
+                <div className="py-0.5">
+                  <RequestMethodDropdown request={activeRequest} className="ml-0.5 h-full!" />
+                </div>
+              }
+              forceUpdateKey={updateKey}
+              isLoading={activeResponse != null && activeResponse.state !== "closed"}
+            />
+            <SharedOriginHint />
+          </div>
          <Tabs
            ref={tabsRef}
            label="Request"
@@ -1,21 +1,5 @@
 import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
-import {
-  Banner,
-  HStack,
-  Icon,
-  LoadingIcon,
-  VStack,
-  CountBadge,
-  HttpResponseDurationTag,
-  HttpStatusTag,
-  SizeTag,
-  Tooltip,
-  AudioViewer,
-  CsvViewer,
-  ImageViewer,
-  SvgViewer,
-  VideoViewer,
-} from "@yaakapp-internal/ui";
+import { Banner, HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { ComponentType, CSSProperties } from "react";
 import { lazy, Suspense, useMemo } from "react";
@@ -33,20 +17,31 @@ 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 { ChainingHint } from "./hints/ChainingHint";
 import { HttpResponseTimeline } from "./HttpResponseTimeline";
 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 })),
@@ -286,6 +281,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
                {activeResponse.error}
              </Banner>
            )}
+            {activeResponse && <ChainingHint response={activeResponse} mimeType={mimeType} />}
            {/* Show tabs if we have any data (headers, body, etc.) even if there's an error */}
            <Tabs
              tabs={tabs}
@@ -13,8 +13,9 @@ 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 { Icon, type IconProps, HttpStatusTagRaw, KeyValueRows } from "@yaakapp-internal/ui";
-import { KeyValueRow } from "./core/KeyValueRow";
+import { HttpStatusTagRaw } from "./core/HttpStatusTag";
+import { Icon, type IconProps } from "@yaakapp-internal/ui";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
 import type { TimelineViewMode } from "./HttpResponsePane";

 interface Props {
@@ -1,35 +1,33 @@
 import {
+  type Folder,
  type ImportDestination,
  type ImportPlan,
  type ImportPlanItem,
  type ImportSource,
  type Workspace,
 } from "@yaakapp-internal/models";
-import { Banner, FormattedError, HStack, Icon, VStack, IconTooltip } from "@yaakapp-internal/ui";
+import { Banner, HStack, Icon, type IconProps, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { platform } from "@yaakapp-internal/platform";
 import classNames from "classnames";
-import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { errorMessage } from "../lib/errorMessage";
+import { formatDistanceToNowStrict } from "date-fns";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { pluralize } from "../lib/pluralize";
 import { CommercialUseBanner } from "./CommercialUseBanner";
-import {
-  ImportSourceList,
-  type ImportSourceDetection,
-  type ImportSourcePath,
-  InlineButton,
-  toSourcePath,
-} from "./ImportSourceList";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
 import type { CheckboxTreeNode } from "./core/CheckboxTree";
 import { CheckboxTree } from "./core/CheckboxTree";
-import { Chip } from "./core/Chip";
-import { DialogFooter } from "./core/Dialog";
+import { IconTooltip } from "./core/IconTooltip";
+import { PlainInput } from "./core/PlainInput";
 import { Select } from "./core/Select";
 import { SegmentedControl } from "./core/SegmentedControl";
-import { pluralize } from "@yaakapp-internal/lib/pluralize";

 interface Props {
  currentWorkspace: Workspace | null;
  workspaces: Workspace[];
-  planSources: (sources: ImportSourcePath[], destination: ImportDestination) => Promise<ImportPlan>;
-  detectSource: (source: ImportSourcePath) => Promise<string>;
+  selectedFolder: Folder | null;
+  planFile: (filePath: string, destination: ImportDestination) => Promise<ImportPlan>;
+  planUrl: (url: string, destination: ImportDestination) => Promise<ImportPlan>;
  listSources: (workspaceId: string) => Promise<ImportSource[]>;
  findSourcesForOrigin: (args: { filePath?: string; url?: string }) => Promise<ImportSource[]>;
  commit: (plan: ImportPlan) => Promise<void>;
@@ -37,6 +35,25 @@ 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
@@ -65,19 +82,30 @@ 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,
-  planSources,
-  detectSource,
+  selectedFolder,
+  planFile,
+  planUrl,
+  listSources,
  findSourcesForOrigin,
  commit,
  cancel,
  onError,
  initialSources,
 }: Props & { initialSources: ImportSource[] }) {
+  // A workspace with a linked source is probably being re-imported, so start from that source
+  const prefill = latestSource(initialSources);
+
  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [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
@@ -85,82 +113,65 @@ function LoadedImportDataDialog({
    null,
  );
  const [otherWorkspaceId, setOtherWorkspaceId] = useState<string | null>(null);
-  const [originSources, setOriginSources] = useState<ImportSource[]>(initialSources);
-  const initialPaths = useMemo(
-    () => [...new Set(initialSources.map((source) => source.origin))].map(toSourcePath),
-    [initialSources],
+  const [targetSelectedFolder, setTargetSelectedFolder] = useState(selectedFolder != null);
+  const [linkedSources, setLinkedSources] = useState<ImportSource[]>(
+    prefill != null ? initialSources : [],
  );
-  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],
+  const [originSources, setOriginSources] = useState<ImportSource[]>(
+    prefill != null ? [prefill] : [],
  );
-  const allDetected = sources.every((source) => detections[source.path]?.status === "ok");
-  useEffect(() => {
-    detect(initialPaths);
-  }, [detect, initialPaths]);
+  // 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 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);
+  const selectSource = (value: string) => {
+    setSource(value);
+    // Remount the input so it shows the path of the newly-picked file
+    setForceUpdateKey((k) => k + 1);
  };

+  // Accept a file dropped anywhere on the dialog, the way SelectFile does for its button
  useEffect(() => {
-    let cancelled = false;
-    if (sources.length === 0) {
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "over") {
+        const p = event.position;
+        const r = ref.current?.getBoundingClientRect();
+        if (r == null) return;
+        setIsHovering(p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom);
+      } else if (event.type === "drop" && isHovering) {
+        const p = event.paths[0];
+        if (p) selectSource(p);
+        setIsHovering(false);
+      } else {
+        setIsHovering(false);
+      }
+    });
+  }, [isHovering, setSource]);
+
+  useEffect(() => {
+    if (trimmedSource === "") {
      setOriginSources([]);
      return;
    }
-    Promise.all(
-      sources.map(({ path, kind }) =>
-        findSourcesForOrigin(kind === "url" ? { url: path } : { filePath: path }),
-      ),
-    )
-      .then((found) => {
-        if (!cancelled) setOriginSources(found.flat());
-      })
-      .catch(() => {
-        if (!cancelled) setOriginSources([]);
-      });
+    let cancelled = false;
+    const timeout = setTimeout(() => {
+      findSourcesForOrigin(filePath != null ? { filePath } : { url: trimmedSource })
+        .then((sources) => {
+          if (!cancelled) setOriginSources(sources);
+        })
+        .catch(() => setOriginSources([]));
+    }, 300);
    return () => {
      cancelled = true;
+      clearTimeout(timeout);
    };
-  }, [sources, findSourcesForOrigin]);
+  }, [trimmedSource, filePath, findSourcesForOrigin]);

-  // The one workspace these sources are linked to, if there is exactly one.
+  // The one workspace this file is linked to, if there is exactly one.
  const linkedWorkspace = useMemo(() => {
    const ids = [...new Set(originSources.map((s) => s.workspaceId))];
    if (ids.length !== 1) return null;
@@ -182,6 +193,32 @@ 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" };
@@ -189,18 +226,21 @@ function LoadedImportDataDialog({
    return {
      type: "existing_workspace",
      workspaceId: destinationWorkspaceId,
+      folderId: canTargetSelectedFolder && targetSelectedFolder ? selectedFolder.id : undefined,
    };
  };

  const handlePreview = async () => {
    setIsLoading(true);
-    setSourceError(null);
    try {
-      const nextPlan = await planSources(sources, destination());
+      const nextPlan =
+        filePath != null
+          ? await planFile(filePath, destination())
+          : await planUrl(trimmedSource, destination());
      setPlan(nextPlan);
      setItems(nextPlan.items);
    } catch (err) {
-      setSourceError(err);
+      onError(err);
    } finally {
      setIsLoading(false);
    }
@@ -218,6 +258,8 @@ 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.
@@ -271,215 +313,196 @@ 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 [
-          names.length === 1 ? "New workspace" : `${names.length} new workspaces`,
-          names.join(", "),
-        ];
+        return [pluralize("New workspace", names.length), names.join(", ")];
      }
-      const { workspaceId } = plan.destination;
+      const { workspaceId, folderId } = plan.destination;
      const name = workspaces.find((w) => w.id === workspaceId)?.name ?? "Unknown workspace";
-      return ["Destination", name];
+      return [
+        "Destination",
+        folderId != null && folderId === selectedFolder?.id
+          ? `${name} / ${selectedFolder.name}`
+          : name,
+      ];
    })();

    // The destination workspace roots the tree. It is not a plan item — commit always applies
    // it — so its checkbox only aggregates the subtree.
-    const workspaceRoots: CheckboxTreeNode<TreeRow>[] = (() => {
+    const workspaceRoot: CheckboxTreeNode<TreeRow> = (() => {
+      const planned = plan.resources.workspaces[0];
      const planDestination = plan.destination;
      const existing =
        planDestination.type === "existing_workspace"
          ? workspaces.find((w) => w.id === planDestination.workspaceId)
          : null;
-      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,
+      return {
+        key: existing?.id ?? planned?.id ?? "workspace",
        data: {
          kind: "destination",
-          label: workspace.name,
+          label: existing?.name ?? planned?.name ?? "New workspace",
          isNew: planDestination.type === "new_workspace",
        },
-        children: buildItemTree(
-          items.filter((item) => workspaceById.get(item.modelId) === workspace.id),
-        ),
-      }));
+        children: itemTree,
+      };
    })();

    return (
-      <>
-        <VStack space={4} className="pb-4">
-          <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
-            <PreviewRow label="Detected format" value={plan.importer} />
-            <PreviewRow label={destinationLabel} value={destinationValue} />
-          </div>
+      <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
-            .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} />
-                )}
-              />
+        {plan.warnings.map((warning) => (
+          <Banner
+            key={`${warning.title}:${warning.detail}`}
+            color={warning.level === "warning" ? "warning" : "info"}
+            className="flex items-start gap-2.5"
+          >
+            <Icon
+              icon={warning.level === "warning" ? "alert_triangle" : "info"}
+              size="sm"
+              className="mt-0.5"
+            />
+            <div className="min-w-0">
+              <div className="text-sm font-medium">{warning.title}</div>
+              <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
            </div>
-          ))}
-        </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,
-            },
-          ]}
-        />
-      </>
+          </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>
    );
  }

-  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"
-        value={destinationKind}
-        onChange={setDestinationChoice}
-        options={[
-          { value: "new", label: "New Workspace" },
-          ...(currentWorkspace != null
-            ? [{ value: "current" as const, label: "Current Workspace" }]
-            : []),
-          { value: "other", label: "Other Workspace" },
-        ]}
-      />
-      {destinationKind === "other" && (
-        <Select
-          name="import-destination-workspace"
-          label="Workspace"
-          hideLabel
-          size="sm"
-          value={otherWorkspaceId ?? ""}
-          onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
-          filterable
-          options={[
-            { value: "", label: "Select a workspace" },
-            ...workspaces
-              .filter((w) => w.id !== currentWorkspace?.id)
-              .map((w) => ({ value: w.id, label: w.name })),
-          ]}
-        />
-      )}
-    </HStack>
-  );
+  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 space={4} className="h-full pb-4">
-        <CommercialUseBanner source="data-import" title="Importing work data?" />
+    <VStack ref={ref} space={4} className="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>
+      <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>

-        {linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId && (
+      <PlainInput
+        label="Or enter a file path or URL"
+        size="sm"
+        placeholder="https://example.com/openapi.json"
+        defaultValue={source ?? ""}
+        forceUpdateKey={String(forceUpdateKey)}
+        onChange={setSource}
+      />
+
+      <VStack space={2}>
+        <Select
+          name="import-destination-kind"
+          label="Import location"
+          size="sm"
+          value={destinationKind}
+          onChange={setDestinationChoice}
+          options={[
+            { value: "new", label: "New Workspace" },
+            ...(currentWorkspace != null
+              ? [{ value: "current" as const, label: "Current Workspace" }]
+              : []),
+            { value: "other", label: "Other Workspace" },
+          ]}
+        />
+        {destinationKind === "other" && (
+          <Select
+            name="import-destination-workspace"
+            label="Workspace"
+            hideLabel
+            size="sm"
+            value={otherWorkspaceId ?? ""}
+            onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
+            filterable
+            options={[
+              { value: "", label: "Select a workspace" },
+              ...workspaces
+                .filter((w) => w.id !== currentWorkspace?.id)
+                .map((w) => ({ value: w.id, label: w.name })),
+            ]}
+          />
+        )}
+        {lastImported != null && destinationWorkspaceId != null ? (
          <div className="text-xs text-text-subtle">
-            {sources.length === 1 ? "This source was" : "These sources were"} last imported into{" "}
-            <InlineButton
+            Last imported from {lastImported.originLabel} ·{" "}
+            {formatDistanceToNowStrict(`${lastImported.lastImportedAt}Z`, { addSuffix: true })}
+          </div>
+        ) : linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId ? (
+          <div className="text-xs text-text-subtle">
+            This file was last imported into{" "}
+            <button
+              type="button"
+              className="underline hocus:text-text"
              onClick={() => {
                if (linkedWorkspace.id === currentWorkspace?.id) {
                  setDestinationChoice("current");
@@ -490,28 +513,36 @@ function LoadedImportDataDialog({
              }}
            >
              {linkedWorkspace.name}
-            </InlineButton>
+            </button>
          </div>
+        ) : null}
+        {canTargetSelectedFolder && (
+          <Checkbox
+            checked={targetSelectedFolder}
+            title={`Place root resources in selected folder “${selectedFolder.name}”`}
+            onChange={setTargetSelectedFolder}
+          />
        )}
      </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,
-          },
-        ]}
-      />
-    </>
+
+      <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>
  );
 }

@@ -525,12 +556,10 @@ function ImportTreeRow({
  if (row.kind !== "item") {
    return (
      <>
-        {row.kind === "destination" && (
-          <Icon icon="box" size="sm" className="shrink-0 text-text-subtle" />
-        )}
+        <Icon color="secondary" icon={row.kind === "destination" ? "house" : row.icon} />
        <div className="truncate flex-1">{row.label}</div>
        {row.kind === "destination" && row.isNew && (
-          <ActionChip label="new" help="Created by this import" color="success" />
+          <ActionChip label="new" help="Created by this import" className="text-success" />
        )}
      </>
    );
@@ -540,6 +569,11 @@ 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">
@@ -559,7 +593,17 @@ function ImportTreeRow({
        </div>
      ) : (
        label != null && (
-          <ActionChip label={label} help={actionHelp(item)} color={actionColor(item)} />
+          <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",
+            )}
+          />
        )
      )}
    </>
@@ -569,37 +613,26 @@ function ImportTreeRow({
 function ActionChip({
  label,
  help,
-  color,
+  className,
 }: {
  label: string;
  help: string | null;
-  color: ComponentProps<typeof Chip>["color"];
+  className?: string;
 }) {
  return (
-    <Chip color={color}>
+    <InlineCode
+      className={classNames(
+        "py-0 bg-transparent w-32 shrink-0 whitespace-nowrap text-xs",
+        "inline-flex items-center justify-center gap-1.5",
+        className,
+      )}
+    >
      {label}
      {help != null && <IconTooltip content={help} iconSize="xs" />}
-    </Chip>
+    </InlineCode>
  );
 }

-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":
@@ -668,7 +701,7 @@ function ancestorsOf(item: ImportPlanItem, byId: Map<string, ImportPlanItem>): I
 */
 type TreeRow =
  | { kind: "destination"; label: string; isNew: boolean }
-  | { kind: "group"; label: string }
+  | { kind: "group"; label: string; icon: IconProps["icon"] }
  | { kind: "item"; item: ImportPlanItem };

 function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
@@ -710,7 +743,7 @@ function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
  return [
    {
      key: "group:environments",
-      data: { kind: "group", label: "Variables" },
+      data: { kind: "group", label: "Variables", icon: "variable" },
      children: environments.map((e) => toNode(e, new Set())),
    },
    ...nodes,
@@ -1,271 +0,0 @@
-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>
-  );
-}
@@ -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, IconTooltip } from "@yaakapp-internal/ui";
+import { Banner, Icon } from "@yaakapp-internal/ui";
 import { useCallback, useMemo } from "react";
 import { useKeyValue } from "../hooks/useKeyValue";
 import { fireAndForget } from "../lib/fireAndForget";
@@ -12,6 +12,7 @@ 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;
@@ -1,20 +1,15 @@
 import { formatSize } from "@yaakapp-internal/lib/formatSize";
-import {
-  Banner,
-  Button,
-  HStack,
-  LoadingIcon,
-  AudioViewer,
-  ImageViewer,
-  SvgViewer,
-  VideoViewer,
-} from "@yaakapp-internal/ui";
+import { Banner, Button, HStack, LoadingIcon } from "@yaakapp-internal/ui";
 import type { ReactNode } from "react";
 import { lazy, Suspense, useEffect, useMemo, useState } from "react";
 import type { SniffedValue } from "./core/Editor/sniffValue";
 import { showDialog } from "../lib/dialog";
 import { decodeValue, largeValueActions } from "../lib/largeValue";
 import { Dropdown } from "./core/Dropdown";
+import { AudioViewer } from "./responseViewers/AudioViewer";
+import { ImageViewer } from "./responseViewers/ImageViewer";
+import { SvgViewer } from "./responseViewers/SvgViewer";
+import { VideoViewer } from "./responseViewers/VideoViewer";

 const PdfViewer = lazy(() =>
  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
@@ -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;
@@ -1,212 +0,0 @@
-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>
-  );
-}
@@ -1,6 +1,6 @@
 import type { GrpcConnection } from "@yaakapp-internal/models";
 import { deleteModel } from "@yaakapp-internal/models";
-import { HStack, Icon, formatMillis } from "@yaakapp-internal/ui";
+import { HStack, Icon } from "@yaakapp-internal/ui";
 import {
  differenceInHours,
  differenceInMinutes,
@@ -9,9 +9,10 @@ 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[];
@@ -1,6 +1,6 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { deleteModel } from "@yaakapp-internal/models";
-import { HStack, Icon, formatMillis, HttpStatusTag, SizeTag } from "@yaakapp-internal/ui";
+import { HStack, Icon } from "@yaakapp-internal/ui";
 import {
  differenceInHours,
  differenceInMinutes,
@@ -12,7 +12,10 @@ 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[];
@@ -1,6 +1,6 @@
 import type { WebsocketConnection } from "@yaakapp-internal/models";
 import { deleteModel, getModel } from "@yaakapp-internal/models";
-import { HStack, Icon, formatMillis } from "@yaakapp-internal/ui";
+import { HStack, Icon } from "@yaakapp-internal/ui";
 import {
  differenceInHours,
  differenceInMinutes,
@@ -9,9 +9,10 @@ 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[];
@@ -7,7 +7,6 @@ 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);
@@ -15,6 +14,10 @@ export function RedirectToLatestWorkspace() {

  useEffect(() => {
    if (workspaces.length === 0 || recentWorkspaces == null) {
+      console.log("No workspaces found to redirect to. Skipping.", {
+        workspaces,
+        recentWorkspaces,
+      });
      return;
    }

@@ -31,21 +34,11 @@ 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;
 }
@@ -1,20 +1,17 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { lazy, Suspense } from "react";
 import { useHttpRequestBody } from "../hooks/useHttpRequestBody";
-import { getMimeTypeFromContentType } from "../lib/contentType";
-import {
-  LoadingIcon,
-  languageFromContentType,
-  AudioViewer,
-  CsvViewer,
-  ImageViewer,
-  SvgViewer,
-  VideoViewer,
-  WebPageViewer,
-} from "@yaakapp-internal/ui";
+import { getMimeTypeFromContentType, languageFromContentType } from "../lib/contentType";
+import { LoadingIcon } 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 })),
@@ -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 } from "./core/KeyValueRow";
-import { CountBadge, KeyValueRows } from "@yaakapp-internal/ui";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";

 interface Props {
  response: HttpResponse;
@@ -1,16 +1,31 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
-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 { useMemo } from "react";
+import { CountBadge } from "./core/CountBadge";
+import { DetailsBanner } from "./core/DetailsBanner";
 import { IconButton } from "./core/IconButton";
-import { KeyValueRow } from "./core/KeyValueRow";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { platform } from "@yaakapp-internal/platform";

 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>}>
@@ -43,21 +58,53 @@ export function ResponseHeaders({ response }: Props) {
          </KeyValueRow>
        </KeyValueRows>
      </DetailsBanner>
-      <HeadersTable
-        title="Request Headers"
-        headers={response.requestHeaders}
-        labelColor="primary"
+      <DetailsBanner
        storageKey={`${response.requestId}.request_headers`}
-        useStoredValue={useDetailsBannerStoredValue}
-      />
-      <HeadersTable
+        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
        defaultOpen
-        title="Response Headers"
-        headers={response.headers}
-        labelColor="info"
        storageKey={`${response.requestId}.response_headers`}
-        useStoredValue={useDetailsBannerStoredValue}
-      />
+        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>
    </div>
  );
 }
+
+function NoHeaders() {
+  return <span className="text-text-subtlest text-sm italic">No Headers</span>;
+}
@@ -1,8 +1,7 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { IconButton } from "./core/IconButton";
-import { KeyValueRow } from "./core/KeyValueRow";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
 import { platform } from "@yaakapp-internal/platform";
-import { KeyValueRows } from "@yaakapp-internal/ui";

 interface Props {
  response: HttpResponse;
@@ -1,5 +1,5 @@
 import { platform } from "@yaakapp-internal/platform";
-import { HStack, IconTooltip, Label } from "@yaakapp-internal/ui";
+import { HStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import mime from "mime";
 import type { ReactNode } from "react";
@@ -7,6 +7,8 @@ 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;
@@ -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, CountBadge } from "@yaakapp-internal/ui";
+import { HeaderSize, HStack, Icon } 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,7 +31,6 @@ 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,
@@ -39,7 +38,6 @@ const tabs = [
  TAB_INTERFACE,
  TAB_SHORTCUTS,
  TAB_PLUGINS,
-  TAB_AGENTS,
  TAB_CERTIFICATES,
  TAB_PROXY,
  TAB_LICENSE,
@@ -95,9 +93,7 @@ export default function Settings({ tab, hide }: Props) {
          (value): TabItem => ({
            value,
            label: capitalize(value),
-            hidden:
-              (!appInfo.featureLicense && value === TAB_LICENSE) ||
-              (!platform.capabilities.agents && value === TAB_AGENTS),
+            hidden: !appInfo.featureLicense && value === TAB_LICENSE,
            leftSlot:
              value === TAB_GENERAL ? (
                <Icon icon="settings" className="text-secondary" />
@@ -113,8 +109,6 @@ 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,
@@ -146,9 +140,6 @@ 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>
@@ -1,140 +0,0 @@
-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>
-  );
-}
@@ -4,6 +4,7 @@ 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";
@@ -11,7 +12,6 @@ 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 (
@@ -2,9 +2,13 @@ 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 {
-  Banner,
+  checkPluginUpdates,
+  installPlugin,
+  searchPlugins,
+  uninstallPlugin,
+} from "@yaakapp-internal/plugins";
+import {
  HStack,
  Icon,
  InlineCode,
@@ -16,17 +20,18 @@ import {
  TableHeaderCell,
  TableRow,
  useDebouncedValue,
-  CountBadge,
 } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
-import { type ReactNode, useState } from "react";
+import { useState } from "react";
 import { useInstallPlugin } from "../../hooks/useInstallPlugin";
-import { usePluginInfo, usePluginInfos } from "../../hooks/usePluginInfo";
+import { usePluginInfo } from "../../hooks/usePluginInfo";
 import { usePluginsKey, useRefreshPlugins } from "../../hooks/usePlugins";
-import { usePromptUninstallPlugin } from "../../hooks/useUninstallPlugin";
+import { showConfirmDelete } from "../../lib/confirm";
+import { minPromiseMillis } from "../../lib/minPromiseMillis";
 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";
@@ -200,7 +205,7 @@ function PluginTableRow({
    mutationKey: ["install_plugin", name],
    mutationFn: (name: string) => installPlugin(name, null),
  });
-  const uninstall = usePromptUninstallPlugin(plugin?.id ?? null, displayName);
+  const uninstall = usePromptUninstall(plugin?.id ?? null, displayName);
  const refreshPlugins = useRefreshPlugins();

  return (
@@ -291,10 +296,7 @@ function PluginSearch() {
  const debouncedQuery = useDebouncedValue(query);
  const results = useQuery({
    queryKey: ["plugins", debouncedQuery],
-    queryFn: async () => {
-      const { plugins } = await searchPlugins(query);
-      return { plugins: plugins.filter((p) => p.deprecated == null) };
-    },
+    queryFn: () => searchPlugins(query),
  });

  return (
@@ -347,77 +349,22 @@ function InstalledPlugins({ plugins, className }: { plugins: Plugin[]; className
      </EmptyStateText>
    </div>
  ) : (
-    <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>
+    <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>
  );
 }

@@ -446,6 +393,31 @@ 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()],
@@ -82,9 +82,10 @@ export function SettingsDropdown() {
        },
        {
          label: "Install CLI",
-          hidden: appInfo.cliVersion != null || !platform.capabilities.agents,
+          hidden: appInfo.cliVersion != null,
          leftSlot: <Icon icon="square_terminal" />,
-          onSelect: () => openSettings.mutate("agents"),
+          rightSlot: <Icon icon="external_link" color="secondary" />,
+          onSelect: () => platform.openUrl("https://yaak.app/docs/cli"),
        },
        {
          label: "Feedback",
@@ -69,6 +69,7 @@ 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,
@@ -76,7 +77,6 @@ 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,14 +941,10 @@ const sidebarTreeAtom = atom<

    if (node.children != null) {
      childItems.sort((a, b) => {
-        if (a.sortPriority !== b.sortPriority) {
-          return a.sortPriority - b.sortPriority;
+        if (a.sortPriority === b.sortPriority) {
+          return a.updatedAt > b.updatedAt ? 1 : -1;
        }
-        // 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;
+        return a.sortPriority - b.sortPriority;
      });

      for (const item of childItems) {
@@ -1,11 +1,11 @@
 import type { Workspace } from "@yaakapp-internal/models";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { HStack, 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,33 +16,45 @@ 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 && (
-        <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
+        <HStack justifyContent="end">
+          <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
+        </HStack>
      )}
-      <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>
  );
 }
@@ -59,6 +59,7 @@ export function SyncToFilesystemSetting({
        )}

        <SettingRowDirectory
+          highlightKey="sync_dir"
          title="Local directory sync"
          description="Sync data to a folder for backup and Git integration."
          filePath={value.filePath}
@@ -1,152 +0,0 @@
-// @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: "" } });
-});
@@ -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, useId, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { useRenderTemplate } from "../hooks/useRenderTemplate";
 import { useTemplateFunctionConfig } from "../hooks/useTemplateFunctionConfig";
@@ -24,11 +24,8 @@ import { showDialog } from "../lib/dialog";
 import { convertTemplateToInsecure } from "../lib/encryption";
 import { jotaiStore } from "../lib/jotai";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
-import {
-  collectEditableArgumentValues,
-  preserveUnchangedArgumentExpressions,
-} from "../lib/templateFunctionArguments";
-import { DialogFooter } from "./core/Dialog";
+import { Button } from "./core/Button";
+import { collectArgumentValues } from "./core/Editor/twig/util";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
 import { DYNAMIC_FORM_NULL_ARG, DynamicForm } from "./DynamicForm";
@@ -51,11 +48,7 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
    }

    (async () => {
-      const initial = await collectEditableArgumentValues(
-        initialTokens,
-        templateFunction,
-        templateTokensToString,
-      );
+      const initial = collectArgumentValues(initialTokens, templateFunction);

      // HACK: Replace the secure() function's encrypted `value` arg with the decrypted version so
      //  we can display it in the editor input.
@@ -81,7 +74,6 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
    <InitializedTemplateFunctionDialog
      {...props}
      templateFunction={templateFunction}
-      initialTokens={initialTokens}
      initialArgValues={initialArgValues}
    />
  );
@@ -90,17 +82,15 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
 function InitializedTemplateFunctionDialog({
  templateFunction: { name, previewType: ogPreviewType },
  initialArgValues,
-  initialTokens,
  hide,
  onChange,
  model,
-}: Props & {
+}: Omit<Props, "initialTokens"> & {
  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) => ({
@@ -120,17 +110,12 @@ function InitializedTemplateFunctionDialog({
          val: {
            type: "fn",
            name,
-            args: preserveUnchangedArgumentExpressions(
-              argTokens,
-              initialTokens,
-              initialArgValues,
-              argValues,
-            ),
+            args: argTokens,
          },
        },
      ],
    };
-  }, [argValues, initialArgValues, initialTokens, name]);
+  }, [argValues, name]);

  const tagText = useTemplateTokensToString(tokens);
  const templateFunction = useTemplateFunctionConfig(name, argValues, model);
@@ -175,14 +160,13 @@ function InitializedTemplateFunctionDialog({

  return (
    <form
-      id={formId}
-      className="grid grid-rows-[minmax(0,1fr)_auto] h-full"
+      className="grid grid-rows-[minmax(0,1fr)_auto_auto] h-full max-h-[90vh]"
      onSubmit={(e) => {
        e.preventDefault();
        handleDone();
      }}
    >
-      <div className="overflow-y-auto h-full">
+      <div className="overflow-y-auto h-full px-6">
        {name === "secure" ? (
          <PlainInput
            required
@@ -204,71 +188,75 @@ function InitializedTemplateFunctionDialog({
          />
        )}
      </div>
-      {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">
+      <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>
              <IconButton
                size="xs"
-                icon="refresh"
-                className="text-text-subtle"
-                title="Refresh preview"
-                spin={rendered.isPending}
-                onClick={() => {
-                  setRenderKey(new Date().toISOString());
-                }}
+                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"
+                  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>
-      ) : (
-        <span />
-      )}
-      <DialogFooter
-        actions={[
-          ...(templateFunction.data.name === "secure"
-            ? [{ label: "Reveal Encryption Key", onClick: setupOrConfigureEncryption }]
-            : []),
-          { label: "Save", color: "primary", form: formId },
-        ]}
-      />
+      </div>
    </form>
  );
 }
@@ -284,6 +272,7 @@ 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 }) => {
@@ -1,6 +1,43 @@
-import { Toasts as BaseToasts } from "@yaakapp-internal/ui";
-import { showErrorDialog } from "./ErrorBoundary";
+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";

-export type { ToastInstance } from "@yaakapp-internal/ui";
+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 const Toasts = () => <BaseToasts onShowError={showErrorDialog} />;
+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>
+  );
+};
@@ -22,9 +22,11 @@ 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";
@@ -38,7 +40,6 @@ 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;
@@ -1,12 +1,5 @@
 import type { WebsocketEvent, WebsocketRequest } from "@yaakapp-internal/models";
-import {
-  HStack,
-  Icon,
-  LoadingIcon,
-  VStack,
-  useStateWithDeps,
-  languageFromContentType,
-} from "@yaakapp-internal/ui";
+import { HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
 import { hexy } from "hexy";
 import { useAtomValue } from "jotai";
 import { useMemo, useState } from "react";
@@ -17,6 +10,8 @@ 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 { type EventDetailAction, EventDetailHeader, EventViewer } from "./core/EventViewer";
@@ -40,7 +40,6 @@ 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";
@@ -67,8 +66,9 @@ export function Workspace() {
    return { background };
  }, [activeEnvironment?.color]);

+  // We're loading still
  if (workspaces.length === 0) {
-    return <RedirectToLatestWorkspace />;
+    return null;
  }

  const header = (
@@ -5,17 +5,20 @@ import {
  setWorkspaceKey,
 } from "@yaakapp-internal/crypto";
 import type { WorkspaceMeta } from "@yaakapp-internal/models";
-import { Banner, HStack, VStack, useStateWithDeps, IconTooltip, Label } from "@yaakapp-internal/ui";
+import { Banner, HStack, VStack } 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";
@@ -1,5 +1,5 @@
 import { patchModel, workspaceMetasAtom, workspacesAtom } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode, CountBadge } from "@yaakapp-internal/ui";
+import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useAuthTab } from "../hooks/useAuthTab";
 import { useHeadersTab } from "../hooks/useHeadersTab";
@@ -9,6 +9,7 @@ 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";
@@ -24,8 +25,12 @@ interface Props {
  workspaceId: string;
  hide: () => void;
  tab?: WorkspaceSettingsTab;
+  highlight?: WorkspaceSettingsHighlight;
 }

+/** Settings rows that can be pointed out when the dialog opens */
+export type WorkspaceSettingsHighlight = "sync_dir";
+
 const TAB_AUTH = "auth";
 const TAB_DNS = "dns";
 const TAB_HEADERS = "headers";
@@ -41,7 +46,7 @@ export type WorkspaceSettingsTab =

 const DEFAULT_TAB: WorkspaceSettingsTab = TAB_GENERAL;

-export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
+export function WorkspaceSettingsDialog({ workspaceId, hide, tab, highlight }: Props) {
  const workspace = useAtomValue(workspacesAtom).find((w) => w.id === workspaceId);
  const workspaceMeta = useAtomValue(workspaceMetasAtom).find((m) => m.workspaceId === workspaceId);
  const authTab = useAuthTab(TAB_AUTH, workspace ?? null);
@@ -103,7 +108,7 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
        />
      </TabContent>
      <TabContent value={TAB_SETTINGS} className="overflow-y-auto h-full px-4">
-        <SettingsList className="space-y-8 pb-3">
+        <SettingsList className="space-y-8 pb-3" highlight={highlight}>
          <SettingsSection title={null}>
            <SyncToFilesystemSetting
              layout="settings"
@@ -177,14 +182,23 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
  );
 }

-WorkspaceSettingsDialog.show = (workspaceId: string, tab?: WorkspaceSettingsTab) => {
+WorkspaceSettingsDialog.show = (
+  workspaceId: string,
+  tab?: WorkspaceSettingsTab,
+  highlight?: WorkspaceSettingsHighlight,
+) => {
  showDialog({
    id: "workspace-settings",
    size: "lg",
    className: "h-[calc(100vh-5rem)] max-h-200!",
    noPadding: true,
    render: ({ hide }) => (
-      <WorkspaceSettingsDialog workspaceId={workspaceId} hide={hide} tab={tab} />
+      <WorkspaceSettingsDialog
+        workspaceId={workspaceId}
+        hide={hide}
+        tab={tab}
+        highlight={highlight}
+      />
    ),
  });
 };
@@ -1,10 +1,5 @@
 import { describe, expect, test } from "vite-plus/test";
-import {
-  formatBulkPairLine,
-  formatBulkPairs,
-  parseBulkPairLine,
-  parseBulkPairs,
-} from "./BulkPairEditor";
+import { parseBulkPairLine } from "./BulkPairEditor";

 describe("parseBulkPairLine", () => {
  test("parses colon-space pairs as name and value", () => {
@@ -38,130 +33,4 @@ 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" },
-    ]);
-  });
 });
@@ -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,11 +14,20 @@ export function BulkPairEditor({
  forcedEnvironmentId,
  stateKey,
 }: Props) {
-  const pairsText = useMemo(() => formatBulkPairs(pairs), [pairs]);
+  const pairsText = useMemo(() => {
+    return pairs
+      .filter((p) => !(p.name.trim() === "" && p.value.trim() === ""))
+      .map(formatBulkPairLine)
+      .join("\n");
+  }, [pairs]);

  const handleChange = useCallback(
    (text: string) => {
-      onChange(parseBulkPairs(text));
+      const pairs = text
+        .split("\n")
+        .filter((l: string) => l.trim())
+        .map(parseBulkPairLine);
+      onChange(pairs);
    },
    [onChange],
  );
@@ -38,57 +47,13 @@ export function BulkPairEditor({
  );
 }

-export function formatBulkPairs(pairs: Pair[]): string {
-  return pairs
-    .filter((p) => !(p.name.trim() === "" && p.value.trim() === ""))
-    .map(formatBulkPairLine)
-    .join("\n");
-}
-
-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;
+  return `${pair.name}: ${value}`;
 }

-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 ?? [];
+export function parseBulkPairLine(line: string): PairWithId {
+  const [, name, value] = line.match(/^([^:]+):\s+(.*)$/) ?? [];
  return {
    enabled: true,
    name: (name ?? line).trim(),
@@ -1,2 +1,73 @@
-export type { CheckboxProps } from "@yaakapp-internal/ui";
-export { Checkbox } from "@yaakapp-internal/ui";
+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>
+  );
+}
@@ -1,32 +0,0 @@
-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>
-  );
-}
@@ -1,8 +1,9 @@
 import type { Color } from "@yaakapp-internal/plugins";
+import { HStack } from "@yaakapp-internal/ui";
 import type { FormEvent } from "react";
-import { useId, useState } from "react";
+import { useState } from "react";
 import { CopyIconButton } from "../CopyIconButton";
-import { DialogFooter } from "./Dialog";
+import { Button } from "./Button";
 import { PlainInput } from "./PlainInput";

 export interface ConfirmProps {
@@ -21,7 +22,6 @@ 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 id={formId} className="flex flex-col" onSubmit={handleSuccess}>
+    <form className="flex flex-col" onSubmit={handleSuccess}>
      {requireTyping && (
        <PlainInput
          autoFocus
@@ -61,19 +61,14 @@ export function Confirm({
          }
        />
      )}
-      <DialogFooter
-        inline
-        actions={[
-          { label: "Cancel", onClick: handleHide },
-          {
-            label: confirmText ?? "Confirm",
-            color,
-            form: formId,
-            disabled: !didConfirm,
-            autoFocus: !requireTyping,
-          },
-        ]}
-      />
+      <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>
    </form>
  );
 }
@@ -1,27 +1,60 @@
-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 classNames from "classnames";
+import { atom, useAtom } from "jotai";
+import type { HTMLAttributes, ReactNode } from "react";
+import { useMemo } from "react";
 import { atomWithKVStorage } from "../../lib/atoms/atomWithKVStorage";
+import type { BannerProps } from "@yaakapp-internal/ui";
+import { Banner } from "@yaakapp-internal/ui";

-export function DetailsBanner(props: Omit<DetailsBannerProps, "useStoredValue">) {
-  return <BaseDetailsBanner {...props} useStoredValue={useDetailsBannerStoredValue} />;
+interface Props extends HTMLAttributes<HTMLDetailsElement> {
+  summary: ReactNode;
+  color?: BannerProps["color"];
+  defaultOpen?: boolean;
+  storageKey?: string;
 }

-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>>(
+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(
    () =>
-      key != null
-        ? atomWithKVStorage<T>(["details_banner", ...[key].flat()], fallback)
-        : atom(fallback),
-    [key],
+      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>
  );
-  return useAtom(valueAtom);
 }
@@ -1,2 +1,131 @@
-export type { DialogFooterAction, DialogProps } from "@yaakapp-internal/ui";
-export { Dialog, DialogFooter } from "@yaakapp-internal/ui";
+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>
+  );
+}
@@ -2,11 +2,12 @@ import type { Color } from "@yaakapp-internal/plugins";
 import type { BannerProps } from "@yaakapp-internal/ui";
 import { Banner } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import type { MouseEvent } from "react";
+import type { MouseEvent, ReactNode } from "react";
 import { useEffect } from "react";
 import { useKeyValue } from "../../hooks/useKeyValue";
 import type { ButtonProps } from "./Button";
 import { Button } from "./Button";
+import { IconButton } from "./IconButton";

 type DismissibleBannerSize = "sm" | "xs";

@@ -18,17 +19,21 @@ export function DismissibleBanner({
  onDismiss,
  onShow,
  actions,
+  variant = "banner",
  ...props
 }: BannerProps & {
  id: string;
  size?: DismissibleBannerSize;
  onDismiss?: () => void | Promise<void>;
  onShow?: () => void | Promise<void>;
+  /** A tip dismisses with an X in the corner instead of a text button */
+  variant?: "banner" | "tip";
  actions?: {
    label: string;
    onClick: () => void;
    color?: Color;
    variant?: ButtonProps["variant"];
+    rightSlot?: ReactNode;
  }[];
 }) {
  const {
@@ -56,54 +61,69 @@ export function DismissibleBanner({
    event.preventDefault();
    event.stopPropagation();
  };
+  const dismiss = (event: MouseEvent) => {
+    stopParentClick(event);
+    setDismissed(true).catch(console.error);
+    Promise.resolve(onDismiss?.()).catch(console.error);
+  };
+  const isTip = variant === "tip";
+  const hasActionRow = !isTip || (actions?.length ?? 0) > 0;

  return (
    <Banner
-      className={classNames(
-        className,
-        "relative",
-        size === "xs" && "!px-2 !py-2 text-xs",
-      )}
+      className={classNames(className, "relative", size === "xs" && "!px-2 !py-2 text-xs")}
      {...props}
    >
-      <div className="@container">
+      <div className={classNames("@container", isTip && "relative")}>
+        {isTip && (
+          <IconButton
+            icon="x"
+            size="2xs"
+            iconSize="sm"
+            title="Dismiss message"
+            className="absolute! -top-0.5 -right-1 @[34rem]:top-1/2 @[34rem]:-translate-y-1/2 opacity-50 hover:opacity-100"
+            onClick={dismiss}
+          />
+        )}
        <div
          className={classNames(
            "grid @[34rem]:grid-cols-[minmax(0,1fr)_auto] @[34rem]:items-center",
+            isTip && "@[34rem]:pr-5",
            size === "xs" ? "gap-1.5 @[34rem]:gap-2" : "gap-2 @[34rem]:gap-3",
          )}
        >
-          {children}
-          <div className="flex flex-wrap gap-1.5 @[34rem]:justify-end">
-            <Button
-              variant="border"
-              color={props.color}
-              size={actionSize}
-              onClick={(event) => {
-                stopParentClick(event);
-                setDismissed(true).catch(console.error);
-                Promise.resolve(onDismiss?.()).catch(console.error);
-              }}
-              title="Dismiss message"
-            >
-              Dismiss
-            </Button>
-            {actions?.map((a) => (
-              <Button
-                key={a.label}
-                variant={a.variant ?? "border"}
-                color={a.color ?? props.color}
-                size={actionSize}
-                onClick={(event) => {
-                  stopParentClick(event);
-                  a.onClick();
-                }}
-                title={a.label}
-              >
-                {a.label}
-              </Button>
-            ))}
-          </div>
+          {isTip ? <div className="pr-5 @[34rem]:pr-0">{children}</div> : children}
+          {hasActionRow && (
+            <div className="flex flex-col gap-1.5 @[16rem]:flex-row @[16rem]:flex-wrap @[16rem]:justify-end">
+              {!isTip && (
+                <Button
+                  variant="border"
+                  color={props.color}
+                  size={actionSize}
+                  onClick={dismiss}
+                  title="Dismiss message"
+                >
+                  Dismiss
+                </Button>
+              )}
+              {actions?.map((a) => (
+                <Button
+                  key={a.label}
+                  rightSlot={a.rightSlot}
+                  variant={a.variant ?? "border"}
+                  color={a.color ?? props.color}
+                  size={actionSize}
+                  onClick={(event) => {
+                    stopParentClick(event);
+                    a.onClick();
+                  }}
+                  title={a.label}
+                >
+                  {a.label}
+                </Button>
+              ))}
+            </div>
+          )}
        </div>
      </div>
    </Banner>
@@ -5,8 +5,7 @@ import { EditorView } from "@codemirror/view";
 import classNames from "classnames";
 import { useEffect, useRef } from "react";
 import "./DiffViewer.css";
-import { syntaxHighlightStyle } from "@yaakapp-internal/ui/editor";
-import { readonlyExtensions } from "./extensions";
+import { readonlyExtensions, syntaxHighlightStyle } from "./extensions";

 interface Props {
  /** Original/previous version (left side) */
@@ -1,5 +1,4 @@
-@reference "tailwindcss";
-@reference "../../../../tailwind-config/index.css";
+@reference "../../../main.css";

 .cm-wrapper {
  @apply h-full overflow-hidden;
@@ -1,53 +1,147 @@
 import { startCompletion } from "@codemirror/autocomplete";
-import type { Extension } from "@codemirror/state";
-import type { EditorView } from "@codemirror/view";
+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 { settingsAtom } from "@yaakapp-internal/models";
 import type { EditorLanguage, TemplateFunction } from "@yaakapp-internal/plugins";
-import { CodeEditor, type CodeEditorProps } from "@yaakapp-internal/ui/editor";
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
 import type { GraphQLSchema } from "graphql";
 import { useAtomValue } from "jotai";
-import { useCallback, useMemo, useRef } from "react";
+import type { ReactNode, RefObject } from "react";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  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 { getLanguageExtension } from "./extensions";
+import { IconButton } from "../IconButton";
+import "./Editor.css";
+import {
+  baseExtensions,
+  editableExtensions,
+  getLanguageExtension,
+  multiLineExtensions,
+  readonlyExtensions,
+} from "./extensions";
 import type { GenericCompletionConfig } from "./genericCompletion";
-import { largeValues, mediaValues } from "./largeValues";
+import { singleLineExtensions } from "./singleLine";

-export type EditorProps = Omit<CodeEditorProps, "language" | "extensions" | "keymap"> & {
+// 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;
  autocomplete?: GenericCompletionConfig;
  autocompleteFunctions?: boolean;
  autocompleteVariables?: boolean | ((v: WrappedEnvironmentVariable) => boolean);
+  className?: string;
+  defaultValue?: string | null;
+  disableTabIndent?: boolean;
+  disabled?: boolean;
  extraExtensions?: Extension[] | Extension;
  forcedEnvironmentId?: string;
-  graphQLSchema?: GraphQLSchema | null;
+  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 };

 const emptyVariables: WrappedEnvironmentVariable[] = [];
+const emptyExtension: Extension = [];

-export function Editor({
+export function Editor(props: EditorProps) {
+  return <EditorInner key={props.stateKey} {...props} />;
+}
+
+function EditorInner({
+  actions,
+  autoFocus,
+  autoSelect,
  autocomplete,
  autocompleteFunctions,
  autocompleteVariables,
+  className,
+  defaultValue,
+  disableTabIndent,
+  disabled,
  extraExtensions,
  forcedEnvironmentId,
+  forceUpdateKey,
  format,
-  graphQLSchema,
+  heightMode,
  hideGutter,
+  graphQLSchema,
  language,
  lintExtension,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onPaste,
+  onPasteOverwrite,
+  placeholder,
  readOnly,
+  singleLine,
+  containerOnly,
+  stateKey,
+  type,
  wrapLines,
-  ...props
+  setRef,
 }: EditorProps) {
  const settings = useAtomValue(settingsAtom);

@@ -64,10 +158,20 @@ export function Editor({
    wrapLines = settings.editorSoftWrap;
  }

-  if (props.disabled) {
+  if (disabled) {
    readOnly = true;
  }

+  if (
+    singleLine ||
+    language == null ||
+    language === "text" ||
+    language === "url" ||
+    language === "pairs"
+  ) {
+    disableTabIndent = true;
+  }
+
  if (format == null && !readOnly) {
    format =
      language === "json"
@@ -77,22 +181,130 @@ export function Editor({
          : undefined;
  }

-  // 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);
+  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 });
    },
-    [setRef],
+    [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],
  );

  const onClickFunction = useCallback(
    async (fn: TemplateFunction, tagValue: string, startPos: number) => {
      const show = () => {
-        if (viewRef.current === null) return;
-        TemplateFunctionDialog.show(fn, tagValue, startPos, viewRef.current);
+        if (cm.current === null) return;
+        TemplateFunctionDialog.show(fn, tagValue, startPos, cm.current.view);
      };

      if (fn.name === "secure") {
@@ -132,64 +344,427 @@ export function Editor({
    !!autocompleteFunctions,
  );

-  const languageExtension = useMemo(
-    () =>
-      getLanguageExtension({
-        useTemplating,
-        language,
-        lintExtension,
-        hideGutter,
-        environmentVariables,
-        autocomplete,
-        completionOptions,
-        onClickVariable,
-        onClickMissingVariable,
-        onClickPathParameter,
-        graphQLSchema: graphQLSchema ?? null,
-      }),
-    [
+  // 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,
      language,
      lintExtension,
-      autocomplete,
+      hideGutter,
      environmentVariables,
+      autocomplete,
+      completionOptions,
      onClickVariable,
      onClickMissingVariable,
      onClickPathParameter,
-      completionOptions,
-      useTemplating,
-      graphQLSchema,
-      hideGutter,
-    ],
+      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],
  );

-  return (
-    <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}
+  // 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>
+  );
 }

-/** 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;
+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);
+    }),
+  ];
 }

-function startCompletionOnHotkey(e: KeyboardEvent, view: EditorView): boolean {
-  if (!eventMatchesHotkey(e, "editor.autocomplete")) return false;
-  e.preventDefault();
-  startCompletion(view);
-  return true;
+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,
+      }),
+    });
+  }
 }
@@ -1,30 +1,141 @@
-import { linter } from "@codemirror/lint";
-import type { Extension } from "@codemirror/state";
 import {
-  closeBracketsExtensions,
-  getLanguageExtension as getBaseLanguageExtension,
-  type LanguageSupports,
-  readonlyExtensions as baseReadonlyExtensions,
-  syntaxExtensions,
-} from "@yaakapp-internal/ui/editor";
+  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 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";
 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 } from "./largeValues";
+import { largeValues, mediaValues } 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";

-const languages: LanguageSupports = { ...syntaxExtensions, url, pairs, timeline };
+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"];

 export function getLanguageExtension({
  useTemplating,
@@ -46,7 +157,18 @@ export function getLanguageExtension({
  onClickPathParameter: (name: string) => void;
  completionOptions: TwigCompletionOption[];
  graphQLSchema: GraphQLSchema | null;
-} & Pick<EditorProps, "language" | "autocomplete" | "hideGutter" | "lintExtension">): Extension {
+} & 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);
+  }
+
  // GraphQL is a special exception
  if (language === "graphql") {
    return [
@@ -67,31 +189,155 @@ export function getLanguageExtension({
          }));
        },
      }),
-      [closeBracketsExtensions],
+      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,
+  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,
  });
 }

-// Nobody is editing this, so every rule applies
-export const readonlyExtensions = [...baseReadonlyExtensions, largeValues];
+// 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]),
+];
@@ -1,46 +0,0 @@
-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('"${['));
-  });
-});
@@ -1,15 +1,58 @@
-import {
-  type JsonLintOptions,
-  jsonParseLinter as baseJsonParseLinter,
-} from "@yaakapp-internal/ui/editor";
-import { replaceTemplateTags } from "../../../lib/templateTags";
+import type { Diagnostic } from "@codemirror/lint";
+import type { EditorView } from "@codemirror/view";
+import { type ParseError, parse, printParseErrorCode } from "jsonc-parser";

-export function jsonParseLinter(options?: Omit<JsonLintOptions, "escape">) {
-  return baseJsonParseLinter({ ...options, escape: escapeTemplateTags });
+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;
 }

-// 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));
+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",
+      },
+    ];
+  };
 }
@@ -1,5 +1,6 @@
 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 {
@@ -10,7 +11,6 @@ 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);

@@ -1,7 +0,0 @@
-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} />;
-}