Add the Yaak Bridge so a browser tab can run the real engine

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-11-13 20:23:40 +01:00 · 2026-08-15 11:38:46 -07:00
1141 changed files with 28459 additions and 158850 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"]
-    }
-  ]
-}
@@ -1,11 +0,0 @@
-node_modules
-**/node_modules
-dist
-**/dist
-target
-**/target
-.claude
-vendored
-**/vendored
-*.log
-.git
@@ -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
@@ -1,55 +0,0 @@
-version: 2
-
-updates:
-  - package-ecosystem: npm
-    directory: /
-    schedule:
-      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
-        update-types:
-          - minor
-          - patch
-      npm-development:
-        dependency-type: development
-        update-types:
-          - minor
-          - patch
-
-  - package-ecosystem: cargo
-    directory: /
-    schedule:
-      interval: weekly
-      day: monday
-    open-pull-requests-limit: 5
-    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:
-          - "*"
-        update-types:
-          - minor
-          - patch
@@ -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}`);
@@ -31,33 +31,3 @@ jobs:
        run: vp test
      - name: Run Rust Tests
        run: cargo test --all --features yaak-app-client/wry
-      - name: OpenAPI import round-trip
-        run: |
-          cargo build -p yaak-cli
-          node plugins/importer-openapi/tests/roundtrip.mjs
-
-  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
@@ -2,24 +2,10 @@ name: Release App Artifacts
 on:
  push:
    tags: [v*]
-  # The Yaak Proxy dry run only: builds, signs and notarizes the proxy for the chosen ref and
-  # keeps the results as workflow artifacts. It never builds Yaak, releases, tags or publishes.
-  workflow_dispatch:
-    inputs:
-      proxy_dry_run:
-        description: "Dry-run the Yaak Proxy build (artifacts only; nothing is released)"
-        type: boolean
-        required: true
-        default: true
-      proxy_version:
-        description: "Version to stamp into the dry-run build"
-        type: string
-        required: true
-        default: "0.0.1-dryrun"

 jobs:
  build-artifacts:
-    if: github.repository == 'mountain-loop/yaak' && github.event_name == 'push'
+    if: github.repository == 'mountain-loop/yaak'
    permissions:
      contents: write

@@ -84,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
@@ -117,18 +103,6 @@ jobs:
        run: |
          sudo apt-get update
          sudo apt-get install -y cmake ninja-build libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libnss3 patchelf xdg-utils
-          # crates/yaak-wasm compiles SQLite to wasm via sqlite-wasm-rs, whose C shim
-          # uses C23 [[noreturn]] and expects a freestanding wasm32 target. Ubuntu
-          # 22.04 ships only clang <=15: 14 rejects the attribute, and 15 falls
-          # through to host glibc headers ("bits/libc-header-start.h" not found).
-          # clang-18 handles it (it is what ubuntu-24.04 uses). Install it from
-          # apt.llvm.org since 22.04's repos stop at 15. Only the wasm build uses
-          # this compiler, so the shipped binary keeps 22.04's glibc floor.
-          wget -qO /tmp/llvm.sh https://apt.llvm.org/llvm.sh
-          chmod +x /tmp/llvm.sh
-          sudo /tmp/llvm.sh 18
-          echo "CC_wasm32_unknown_unknown=/usr/bin/clang-18" >> "$GITHUB_ENV"
-          echo "AR_wasm32_unknown_unknown=/usr/bin/llvm-ar-18" >> "$GITHUB_ENV"

      - name: Install Protoc for plugin-runtime
        uses: arduino/setup-protoc@v3
@@ -186,8 +160,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 }}

@@ -209,8 +182,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__"
@@ -220,17 +191,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:
@@ -245,13 +205,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)
@@ -269,7 +223,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"
@@ -277,205 +230,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
-
-  # Yaak Proxy, macOS only, on the same tag and version as Yaak. Its own job, sharing nothing
-  # with Yaak's, so a proxy failure never stops Yaak's artifacts; it fails the run, visibly.
-  #
-  # On a v* tag it runs only once the repository variable RELEASE_PROXY is "true": the website's
-  # download links pick Yaak's assets by suffix and architecture, and its release audit expects
-  # Yaak's exact asset set and this run's success, so the proxy must not join Yaak's release
-  # until the website expects it there. The dry run (workflow_dispatch) runs regardless, and
-  # only keeps workflow artifacts.
-  build-proxy:
-    if: >-
-      github.repository == 'mountain-loop/yaak' && (
-        (github.event_name == 'push' && vars.RELEASE_PROXY == 'true') ||
-        (github.event_name == 'workflow_dispatch' && inputs.proxy_dry_run)
-      )
-    permissions:
-      contents: write
-
-    name: Build Yaak Proxy
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - target: "aarch64-apple-darwin" # for Arm-based Macs (M1 and above).
-            yaak_arch: "arm64"
-            lipo_arch: "arm64"
-            asset_arch: "aarch64"
-          - target: "x86_64-apple-darwin" # for Intel-based Macs.
-            yaak_arch: "x64"
-            lipo_arch: "x86_64"
-            asset_arch: "x64"
-    runs-on: macos-latest
-    timeout-minutes: 240
-    env:
-      DRY_RUN: ${{ github.event_name == 'workflow_dispatch' }}
-      # The tag, as Yaak's version is taken, or the dry run's own
-      PROXY_VERSION: ${{ github.event_name == 'workflow_dispatch' && inputs.proxy_version || github.ref_name }}
-    steps:
-      - name: Checkout yaakapp/app
-        uses: actions/checkout@v4
-
-      - name: Setup Vite+
-        uses: voidzero-dev/setup-vp@v1
-        with:
-          node-version: "24"
-          cache: true
-
-      - name: install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.target }}
-
-      # A cache of its own, so the proxy's builds never change what Yaak's jobs restore
-      - uses: Swatinem/rust-cache@v2
-        with:
-          shared-key: release-proxy
-          key: ${{ matrix.target }}
-          cache-on-failure: true
-
-      - name: Install Protoc for plugin-runtime
-        uses: arduino/setup-protoc@v3
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - run: vp install
-
-      - name: Set version
-        run: npm run replace-version -- proxy
-        env:
-          YAAK_VERSION: ${{ env.PROXY_VERSION }}
-
-      - name: Import signing certificate
-        env:
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          KEYCHAIN_PASSWORD: ${{ secrets.KEYCHAIN_PASSWORD }}
-        run: |
-          set -euo pipefail
-          KEYCHAIN_PATH="$RUNNER_TEMP/app-signing.keychain-db"
-          security create-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
-          security set-keychain-settings -lut 21600 "$KEYCHAIN_PATH"
-          security unlock-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
-
-          echo "$APPLE_CERTIFICATE" | base64 --decode > "$RUNNER_TEMP/certificate.p12"
-          security import "$RUNNER_TEMP/certificate.p12" -P "$APPLE_CERTIFICATE_PASSWORD" -A -t cert -f pkcs12 -k "$KEYCHAIN_PATH"
-          rm "$RUNNER_TEMP/certificate.p12"
-          # Lets codesign use the key unattended; without it the first signature can wait on a
-          # prompt nobody answers
-          security set-key-partition-list -S apple-tool:,apple:,codesign: -s -k "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH" > /dev/null
-          security list-keychain -d user -s "$KEYCHAIN_PATH"
-
-      # Builds the helper for the target and signs it and protoc before bundling (the bundle
-      # config's before-build step), then signs, notarizes and staples the app and makes the
-      # updater archive and its signature.
-      - name: Build, sign and notarize
-        run: >-
-          npm run proxy:bundle --
-          --target ${{ matrix.target }}
-          --bundles dmg
-          --config crates-tauri/yaak-app-proxy/tauri.release.conf.json
-        env:
-          CI: true
-          YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-          # The helper only answers an app signed by this team
-          YAAK_PROXY_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-
-      - name: Verify the bundle
-        run: >-
-          node scripts/verify-proxy-bundle.mjs
-          "target/${{ matrix.target }}/release/bundle/macos/Yaak Proxy.app"
-          --signed
-          --version "$PROXY_VERSION"
-          --arch ${{ matrix.lipo_arch }}
-          --team "$YAAK_PROXY_TEAM_ID"
-        env:
-          YAAK_PROXY_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-
-      # Named Yaak.Proxy_*, so neither people nor tools take them for Yaak's Yaak_* assets.
-      # The app refuses an update not named so (ARTIFACT_PREFIX in yaak-app-proxy's updates.rs).
-      - name: Collect the release assets
-        run: |
-          set -euo pipefail
-          bundle="target/${{ matrix.target }}/release/bundle"
-          version="${PROXY_VERSION#v}"
-          out="$RUNNER_TEMP/yaak-proxy-release"
-          mkdir -p "$out"
-          dmgs=("$bundle"/dmg/*.dmg)
-          if [ "${#dmgs[@]}" -ne 1 ] || [ ! -f "${dmgs[0]}" ]; then
-            echo "Expected one .dmg in $bundle/dmg"; exit 1
-          fi
-          cp "${dmgs[0]}" "$out/Yaak.Proxy_${version}_${{ matrix.asset_arch }}.dmg"
-          cp "$bundle/macos/Yaak Proxy.app.tar.gz" "$out/Yaak.Proxy_${{ matrix.asset_arch }}.app.tar.gz"
-          cp "$bundle/macos/Yaak Proxy.app.tar.gz.sig" "$out/Yaak.Proxy_${{ matrix.asset_arch }}.app.tar.gz.sig"
-          (cd "$out" && shasum -a 256 Yaak.Proxy_* > checksums.txt)
-          ls -l "$out"
-
-      - name: Keep the bundles as workflow artifacts
-        if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: proxy-${{ env.PROXY_VERSION }}-${{ matrix.asset_arch }}-${{ github.run_id }}-attempt-${{ github.run_attempt }}
-          path: ${{ runner.temp }}/yaak-proxy-release/
-          retention-days: ${{ env.DRY_RUN == 'true' && 14 || 7 }}
-          if-no-files-found: error
-
-      # Yaak's jobs create the draft release; this waits for it rather than making its own,
-      # which could race theirs into two drafts.
-      - name: Upload to the release
-        if: env.DRY_RUN != 'true'
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          set -euo pipefail
-          for attempt in $(seq 1 120); do
-            if gh release view "$GITHUB_REF_NAME" > /dev/null 2>&1; then break; fi
-            if [ "$attempt" -eq 120 ]; then
-              echo "No release for $GITHUB_REF_NAME after two hours; Yaak's jobs make it"; exit 1
-            fi
-            sleep 60
-          done
-          for asset in "$RUNNER_TEMP"/yaak-proxy-release/Yaak.Proxy_*; do
-            for attempt in 1 2 3 4; do
-              if gh release upload "$GITHUB_REF_NAME" "$asset" --clobber; then
-                break
-              fi
-              if [ "$attempt" -eq 4 ]; then exit 1; fi
-              sleep 10
-            done
-          done
+          gh release upload "${{ github.ref_name }}" "$dest" --clobber
+          gh release upload "${{ github.ref_name }}" "$destSig" --clobber
@@ -1,123 +0,0 @@
-name: Release web image
-
-# Builds ghcr.io/mountain-loop/yaak-web: the browser client and the server that serves it.
-# One image per architecture on its own native runner (emulating a Rust release build is hours),
-# joined into one multi-arch tag at the end.
-
-on:
-  push:
-    tags: [v*]
-  workflow_dispatch:
-    inputs:
-      version:
-        description: Version to publish, without the v (e.g. 2026.2.0). Empty publishes main and sha tags only.
-        required: false
-        type: string
-
-permissions:
-  contents: read
-  packages: write
-
-env:
-  IMAGE: ghcr.io/mountain-loop/yaak-web
-
-jobs:
-  build:
-    if: github.repository == 'mountain-loop/yaak'
-    name: Build ${{ matrix.platform }}
-    runs-on: ${{ matrix.runner }}
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: linux/amd64
-            runner: ubuntu-22.04
-            arch: amd64
-          - platform: linux/arm64
-            runner: ubuntu-22.04-arm
-            arch: arm64
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to GHCR
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile.web
-          platforms: ${{ matrix.platform }}
-          outputs: type=image,name=${{ env.IMAGE }},push-by-digest=true,name-canonical=true,push=true
-
-      - name: Export digest
-        run: |
-          mkdir -p "${{ runner.temp }}/digests"
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digest-${{ matrix.arch }}
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  publish:
-    name: Publish manifest
-    needs: build
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
-        with:
-          path: ${{ runner.temp }}/digests
-          pattern: digest-*
-          merge-multiple: true
-
-      - name: Set up Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to GHCR
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      # `latest` follows a release tag, and a manual run that names a version — the way to
-      # publish before the first release. A prerelease (v2026.2.1-beta.1) never takes it.
-      - name: Tags
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.IMAGE }}
-          flavor: latest=false
-          tags: |
-            type=semver,pattern={{version}}
-            type=raw,value=${{ inputs.version }},enable=${{ inputs.version != '' }}
-            type=raw,value=latest,enable=${{ inputs.version != '' || (github.event_name == 'push' && !contains(github.ref_name, '-')) }}
-            type=ref,event=branch
-            type=sha,format=short
-
-      - name: Create and push the manifest
-        working-directory: ${{ runner.temp }}/digests
-        run: |
-          docker buildx imagetools create \
-            $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.IMAGE }}@sha256:%s ' *)
-
-      - name: Inspect
-        run: docker buildx imagetools inspect ${{ env.IMAGE }}:${{ steps.meta.outputs.version }}
@@ -59,6 +59,3 @@ flatpak/node-sources.json
 # Claude Code local settings
 .claude/settings.local.json
 .claude/worktrees/
-
-# Headless screenshots taken while working
-.shots/
@@ -0,0 +1,3 @@
+**/bindings/**
+**/routeTree.gen.ts
+crates/yaak-templates/pkg/**
@@ -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"
  ]
 }
@@ -2,7 +2,6 @@
 resolver = "2"
 members = [
  "crates/yaak",
-  "crates/yaak-commands",
  # Common/foundation crates
  "crates/common/yaak-database",
  "crates/common/yaak-rpc",
@@ -11,40 +10,32 @@ 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-query",
  "crates/yaak-sse",
  "crates/yaak-sync",
  "crates/yaak-templates",
  "crates/yaak-tls",
  "crates/yaak-ws",
-  "crates/yaak-wasm",
  "crates/yaak-api",
  "crates/yaak-proxy",
  # Proxy-specific crates
  "crates-proxy/yaak-proxy-lib",
-  # Server crates (the browser tier's hosted send executor)
-  "crates-server/yaak-web",
-  "crates-server/yaak-playground",
  # CLI crates
  "crates-cli/yaak-cli",
+  # Headless server crates
+  "crates-server/yaak-server",
  # Tauri-specific crates
  "crates-tauri/yaak-app-client",
  "crates-tauri/yaak-app-proxy",
  "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-updater",
  "crates-tauri/yaak-window",
 ]

@@ -53,16 +44,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"
@@ -87,18 +71,13 @@ yaak-rpc-schema = { path = "crates/common/yaak-rpc-schema" }
 # Internal crates - shared
 yaak-core = { path = "crates/yaak-core" }
 yaak = { path = "crates/yaak" }
-yaak-commands = { path = "crates/yaak-commands" }
 yaak-common = { path = "crates/yaak-common" }
 yaak-crypto = { path = "crates/yaak-crypto" }
-yaak-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-query = { path = "crates/yaak-query" }
 yaak-sse = { path = "crates/yaak-sse" }
 yaak-sync = { path = "crates/yaak-sync" }
 yaak-templates = { path = "crates/yaak-templates" }
@@ -114,10 +93,8 @@ 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-updater = { path = "crates-tauri/yaak-updater" }
 yaak-window = { path = "crates-tauri/yaak-window" }

 [profile.release]
@@ -44,25 +44,6 @@ After bootstrapping, start the app in development mode:
 npm start
 ```

-## Run the App in a Browser
-
-The client can also run as a plain web page, with no Tauri and no local process
-behind it. Set `YAAK_TARGET=web` and start the frontend on its own:
-
-```shell
-YAAK_TARGET=web npm run dev --workspace @yaakapp/yaak-client
-```
-
-That flag picks the browser host in `packages/platform/src/web/`, which answers
-commands from an IndexedDB database the page owns instead of from the Rust
-engine. Data persists across reloads and is shared between tabs on the same
-origin. Sending HTTP is not available yet — the Send button reports that and
-everything else about the request is still saved. `packages/platform/src/web/README.md`
-lists which commands the browser host implements and which it declines.
-
-Desktop builds are unaffected: without the flag the platform package installs
-the Tauri host exactly as before.
-
 ## SQLite Migrations

 New migrations can be created from the `src-tauri/` directory:
@@ -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"]
@@ -1,49 +0,0 @@
-# syntax=docker/dockerfile:1
-# Yaak in a browser, whole: the web client and the server that executes its sends, in one
-# image serving both from one origin.
-#
-#   docker run -p 8080:8080 ghcr.io/mountain-loop/yaak-web
-#
-# See crates-server/yaak-web/README.md for the knobs.
-
-FROM node:22-slim AS web
-WORKDIR /app
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    git python3 make g++ ca-certificates && rm -rf /var/lib/apt/lists/*
-COPY . .
-# `npm ci` runs a prepare hook (`vp config`) that shells out to git, and there is no .git in
-# the build context — it is ignored, and in a worktree it is a pointer file anyway.
-RUN git init -q && git add -A \
-    && git -c user.email=build@yaak.app -c user.name=build commit -qm build
-# Empty means the tab posts sends to its own origin, which is what this image serves. Set it
-# only to build a bundle for a deployment whose server lives somewhere else.
-ARG VITE_YAAK_WEB_URL=""
-ENV VITE_YAAK_WEB_URL=$VITE_YAAK_WEB_URL
-ENV YAAK_TARGET=web
-# crates/yaak-wasm's wasm package is committed; rebuilding it needs a clang with a WebAssembly
-# backend, which this image has no reason to carry.
-ENV SKIP_WASM_BUILD=1
-RUN npm ci
-RUN node_modules/.bin/vp -C apps/yaak-client build
-
-FROM rust:1-bookworm AS server
-WORKDIR /app
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    pkg-config libssl-dev protobuf-compiler && rm -rf /var/lib/apt/lists/*
-COPY . .
-RUN cargo build --release -p yaak-web
-
-FROM debian:bookworm-slim
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    ca-certificates libssl3 && rm -rf /var/lib/apt/lists/*
-COPY --from=server /app/target/release/yaak-web /usr/local/bin/yaak-web
-COPY --from=web /app/dist/apps/yaak-client /srv
-# 0.0.0.0 so the port is reachable from outside the container. PORT is the variable a
-# platform-as-a-service assigns, so a deploy that sets it needs nothing else changed.
-ENV HOST=0.0.0.0
-ENV PORT=8080
-EXPOSE 8080
-USER nobody
-# Overriding the command (dropping --serve) leaves the stateless send executor:
-#   docker run ghcr.io/mountain-loop/yaak-web yaak-web
-CMD ["yaak-web", "--serve", "/srv"]
@@ -17,7 +17,7 @@
 <br>

 <p align="center">
-  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/bytebase"><img src="https:&#x2F;&#x2F;github.com&#x2F;bytebase.png" width="80px" alt="User avatar: bytebase" /></a>&nbsp;&nbsp;<a href="https://github.com/rauchg"><img src="https:&#x2F;&#x2F;github.com&#x2F;rauchg.png" width="80px" alt="User avatar: rauchg" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
+  <!-- sponsors-premium --><a href="https://github.com/MVST-Solutions"><img src="https:&#x2F;&#x2F;github.com&#x2F;MVST-Solutions.png" width="80px" alt="User avatar: MVST-Solutions" /></a>&nbsp;&nbsp;<a href="https://github.com/dharsanb"><img src="https:&#x2F;&#x2F;github.com&#x2F;dharsanb.png" width="80px" alt="User avatar: dharsanb" /></a>&nbsp;&nbsp;<a href="https://github.com/railwayapp"><img src="https:&#x2F;&#x2F;github.com&#x2F;railwayapp.png" width="80px" alt="User avatar: railwayapp" /></a>&nbsp;&nbsp;<a href="https://github.com/caseyamcl"><img src="https:&#x2F;&#x2F;github.com&#x2F;caseyamcl.png" width="80px" alt="User avatar: caseyamcl" /></a>&nbsp;&nbsp;<a href="https://github.com/bytebase"><img src="https:&#x2F;&#x2F;github.com&#x2F;bytebase.png" width="80px" alt="User avatar: bytebase" /></a>&nbsp;&nbsp;<a href="https://github.com/"><img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JamesIves&#x2F;github-sponsors-readme-action&#x2F;dev&#x2F;.github&#x2F;assets&#x2F;placeholder.png" width="80px" alt="User avatar: " /></a>&nbsp;&nbsp;<!-- sponsors-premium -->
 </p>
 <p align="center">
  <!-- sponsors-base --><a href="https://github.com/seanwash"><img src="https:&#x2F;&#x2F;github.com&#x2F;seanwash.png" width="50px" alt="User avatar: seanwash" /></a>&nbsp;&nbsp;<a href="https://github.com/jerath"><img src="https:&#x2F;&#x2F;github.com&#x2F;jerath.png" width="50px" alt="User avatar: jerath" /></a>&nbsp;&nbsp;<a href="https://github.com/itsa-sh"><img src="https:&#x2F;&#x2F;github.com&#x2F;itsa-sh.png" width="50px" alt="User avatar: itsa-sh" /></a>&nbsp;&nbsp;<a href="https://github.com/dmmulroy"><img src="https:&#x2F;&#x2F;github.com&#x2F;dmmulroy.png" width="50px" alt="User avatar: dmmulroy" /></a>&nbsp;&nbsp;<a href="https://github.com/timcole"><img src="https:&#x2F;&#x2F;github.com&#x2F;timcole.png" width="50px" alt="User avatar: timcole" /></a>&nbsp;&nbsp;<a href="https://github.com/VLZH"><img src="https:&#x2F;&#x2F;github.com&#x2F;VLZH.png" width="50px" alt="User avatar: VLZH" /></a>&nbsp;&nbsp;<a href="https://github.com/terasaka2k"><img src="https:&#x2F;&#x2F;github.com&#x2F;terasaka2k.png" width="50px" alt="User avatar: terasaka2k" /></a>&nbsp;&nbsp;<a href="https://github.com/andriyor"><img src="https:&#x2F;&#x2F;github.com&#x2F;andriyor.png" width="50px" alt="User avatar: andriyor" /></a>&nbsp;&nbsp;<a href="https://github.com/majudhu"><img src="https:&#x2F;&#x2F;github.com&#x2F;majudhu.png" width="50px" alt="User avatar: majudhu" /></a>&nbsp;&nbsp;<a href="https://github.com/axelrindle"><img src="https:&#x2F;&#x2F;github.com&#x2F;axelrindle.png" width="50px" alt="User avatar: axelrindle" /></a>&nbsp;&nbsp;<a href="https://github.com/jirizverina"><img src="https:&#x2F;&#x2F;github.com&#x2F;jirizverina.png" width="50px" alt="User avatar: jirizverina" /></a>&nbsp;&nbsp;<a href="https://github.com/chip-well"><img src="https:&#x2F;&#x2F;github.com&#x2F;chip-well.png" width="50px" alt="User avatar: chip-well" /></a>&nbsp;&nbsp;<a href="https://github.com/GRAYAH"><img src="https:&#x2F;&#x2F;github.com&#x2F;GRAYAH.png" width="50px" alt="User avatar: GRAYAH" /></a>&nbsp;&nbsp;<a href="https://github.com/flashblaze"><img src="https:&#x2F;&#x2F;github.com&#x2F;flashblaze.png" width="50px" alt="User avatar: flashblaze" /></a>&nbsp;&nbsp;<a href="https://github.com/Frostist"><img src="https:&#x2F;&#x2F;github.com&#x2F;Frostist.png" width="50px" alt="User avatar: Frostist" /></a>&nbsp;&nbsp;<a href="https://github.com/PurplProto"><img src="https:&#x2F;&#x2F;github.com&#x2F;PurplProto.png" width="50px" alt="User avatar: PurplProto" /></a>&nbsp;&nbsp;<!-- sponsors-base -->
@@ -25,10 +25,6 @@

 ![Yaak API Client](https://yaak.app/static/screenshot.png)

-## Install
-
-Download Yaak for macOS, Windows, or Linux from [yaak.app/download](https://yaak.app/download). Package managers and other install methods are in the [installation docs](https://yaak.app/docs/getting-started/installation).
-
 ## Features

 Yaak is an offline-first API client designed to stay out of your way while giving you everything you need when you need it.
@@ -72,9 +68,3 @@ Built with [Tauri](https://tauri.app), Rust, and React, it’s fast, lightweight
 - [Yaak vs Postman](https://yaak.app/alternatives/postman)
 - [Yaak vs Bruno](https://yaak.app/alternatives/bruno)
 - [Yaak vs Insomnia](https://yaak.app/alternatives/insomnia)
-
-## License
-
-The source is [MIT licensed](LICENSE) and can be built and run for free, for both personal and commercial use.
-
-The prebuilt binaries follow Yaak's [pricing terms](https://yaak.app/pricing): free for personal use, license required for commercial use.
@@ -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"],
@@ -1,37 +1,19 @@
-import { platform } from "@yaakapp-internal/platform";
-import type { SettingsTab, SettingsTabWithSubtab } from "../components/Settings/Settings";
+import type { SettingsTab } from "../components/Settings/Settings";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
-import { showDialog } from "../lib/dialog";
 import { jotaiStore } from "../lib/jotai";
 import { router } from "../lib/router";
 import { rpc } from "../lib/rpc";

-export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab | null>({
+// Allow tab with optional subtab (e.g., "plugins:installed")
+type SettingsTabWithSubtab = SettingsTab | `${SettingsTab}:${string}` | null;
+
+export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab>({
  mutationKey: ["open_settings"],
  mutationFn: async (tab) => {
    const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
    if (workspaceId == null) return;

-    // Settings is its own window where the host has windows to give. Where it
-    // doesn't — a browser tab — it's a dialog like any other, so opening it
-    // doesn't take you away from the request you were working on.
-    if (!platform.capabilities.multiWindow) {
-      // Imported here so Settings stays out of the startup bundle, the way the
-      // route that renders it on desktop already keeps it
-      const { default: Settings } = await import("../components/Settings/Settings");
-      showDialog({
-        id: "settings",
-        size: "md",
-        className: "h-[calc(100vh-5rem)] max-h-150! overflow-hidden",
-        noPadding: true,
-        noScroll: true,
-        // Keyed so opening a specific tab while the dialog is already up moves to it
-        render: ({ hide }) => <Settings key={tab ?? "general"} tab={tab} hide={hide} />,
-      });
-      return;
-    }
-
    const location = router.buildLocation({
      to: "/workspaces/$workspaceId/settings",
      params: { workspaceId },
@@ -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,4 +1,3 @@
-import { platform } from "@yaakapp-internal/platform";
 import { createFastMutation } from "../hooks/useFastMutation";
 import { getRecentCookieJars } from "../hooks/useRecentCookieJars";
 import { getRecentEnvironments } from "../hooks/useRecentEnvironments";
@@ -25,9 +24,7 @@ export const switchWorkspace = createFastMutation<
      request_id: requestId,
    };

-    // A host without windows opens the workspace here instead. Refusing would
-    // strand the user on the workspace they were trying to leave.
-    if (inNewWindow && platform.capabilities.multiWindow) {
+    if (inNewWindow) {
      const location = router.buildLocation({
        to: "/workspaces/$workspaceId",
        params: { workspaceId },
@@ -1,99 +0,0 @@
-import { platform } from "@yaakapp-internal/platform";
-import {
-  Banner,
-  type EditorHost,
-  EditorHostProvider,
-  EmptyStateText,
-  type HostBodyViewerArgs,
-  type HttpBodyLoader,
-  LoadingIcon,
-  type StoredValue,
-  type StoredValueNamespace,
-} from "@yaakapp-internal/ui";
-import { lazy, type ReactNode, Suspense } from "react";
-import { useKeyValue } from "../hooks/useKeyValue";
-import { copyToClipboard } from "../lib/copy";
-import { showDialog } from "../lib/dialog";
-import { showPrompt } from "../lib/prompt";
-import { useDetailsBannerStoredValue } from "./core/DetailsBanner";
-import { Editor } from "./core/Editor/LazyEditor";
-import { Input } from "./core/Input";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { MultipartViewer } from "./responseViewers/MultipartViewer";
-import { TextViewer } from "./responseViewers/TextViewer";
-import { SelectFile } from "./SelectFile";
-
-const PdfViewer = lazy(() =>
-  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
-);
-
-function useClientStoredValue<T extends StoredValue>(
-  key: string | string[] | null,
-  fallback: T,
-  namespace: StoredValueNamespace = "global",
-) {
-  // A null key is never written by the shared components, so any stable key will do
-  const { value, set } = useKeyValue<T>({ namespace, key: key ?? ["tabs", "default"], fallback });
-  return [value ?? fallback, set] as const;
-}
-
-function renderBodyViewer({ source, mimeType, body, complete }: HostBodyViewerArgs) {
-  if (!mimeType?.match(/pdf/i)) return null;
-  return source === "response" ? (
-    <PdfResponseBody body={body} complete={complete} />
-  ) : (
-    <PdfRequestBody body={body} />
-  );
-}
-
-/** Waits for the whole response, then loads the PDF from its file */
-function PdfResponseBody({ body, complete }: { body: HttpBodyLoader; complete: boolean }) {
-  const bodyUrl = body.useUrl(complete);
-
-  if (!complete || bodyUrl.isLoading) {
-    return (
-      <EmptyStateText>
-        <LoadingIcon />
-      </EmptyStateText>
-    );
-  }
-  if (bodyUrl.error) {
-    return <Banner color="danger">{String(bodyUrl.error)}</Banner>;
-  }
-  if (bodyUrl.data == null) {
-    return <div>Empty response body</div>;
-  }
-  return <PdfViewer bodyUrl={bodyUrl.data} />;
-}
-
-function PdfRequestBody({ body }: { body: HttpBodyLoader }) {
-  const bytes = body.useBytes();
-  if (bytes.data == null) return null;
-  return (
-    <Suspense fallback={<LoadingIcon />}>
-      <PdfViewer data={bytes.data} />
-    </Suspense>
-  );
-}
-
-const clientEditorHost: EditorHost = {
-  Editor,
-  Input,
-  SelectFile,
-  showDialog,
-  showPrompt,
-  basename: (path) => platform.files.basename(path),
-  useStoredValue: useClientStoredValue,
-  useDetailsBannerStoredValue,
-  ErrorBoundary,
-  TextViewer,
-  MultipartViewer,
-  renderBodyViewer,
-  openUrl: (url) => platform.openUrl(url),
-  copy: (text) => copyToClipboard(text, { disableToast: true }),
-};
-
-/** Gives the shared editing components the client's templated editor, dialogs and storage */
-export function ClientEditorHost({ children }: { children: ReactNode }) {
-  return <EditorHostProvider value={clientEditorHost}>{children}</EditorHostProvider>;
-}
@@ -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;
@@ -0,0 +1,61 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
+import { type ReactNode, useMemo } from "react";
+import { useSaveResponse } from "../hooks/useSaveResponse";
+import { useToggle } from "../hooks/useToggle";
+import { isProbablyTextContentType } from "../lib/contentType";
+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;
+  response: HttpResponse;
+}
+
+const LARGE_BYTES = 2 * 1000 * 1000;
+
+export function ConfirmLargeResponse({ children, response }: Props) {
+  const { mutate: saveResponse } = useSaveResponse(response);
+  const [showLargeResponse, toggleShowLargeResponse] = useToggle();
+  const isProbablyText = useMemo(() => {
+    const contentType = getContentTypeFromHeaders(response.headers);
+    return isProbablyTextContentType(contentType);
+  }, [response.headers]);
+
+  const contentLength = response.contentLength ?? 0;
+  const isLarge = contentLength > LARGE_BYTES;
+  if (!showLargeResponse && isLarge) {
+    return (
+      <Banner color="primary" className="flex flex-col gap-3">
+        <p>
+          Showing responses over{" "}
+          <InlineCode>
+            <SizeTag contentLength={LARGE_BYTES} />
+          </InlineCode>{" "}
+          may impact performance
+        </p>
+        <HStack wrap space={2}>
+          <Button color="primary" size="xs" onClick={toggleShowLargeResponse}>
+            Reveal Response
+          </Button>
+          <Button color="secondary" variant="border" size="xs" onClick={() => saveResponse()}>
+            Save to File
+          </Button>
+          {isProbablyText && (
+            <CopyButton
+              color="secondary"
+              variant="border"
+              size="xs"
+              text={() => getResponseBodyText({ response, filter: null })}
+            />
+          )}
+        </HStack>
+      </Banner>
+    );
+  }
+
+  return <>{children}</>;
+}
@@ -0,0 +1,56 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+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";
+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;
+  response: HttpResponse;
+}
+
+const LARGE_BYTES = 2 * 1000 * 1000;
+
+export function ConfirmLargeResponseRequest({ children, response }: Props) {
+  const [showLargeResponse, toggleShowLargeResponse] = useToggle();
+  const isProbablyText = useMemo(() => {
+    const contentType = getContentTypeFromHeaders(response.headers);
+    return isProbablyTextContentType(contentType);
+  }, [response.headers]);
+
+  const contentLength = response.requestContentLength ?? 0;
+  const isLarge = contentLength > LARGE_BYTES;
+  if (!showLargeResponse && isLarge) {
+    return (
+      <Banner color="primary" className="flex flex-col gap-3">
+        <p>
+          Showing content over{" "}
+          <InlineCode>
+            <SizeTag contentLength={LARGE_BYTES} />
+          </InlineCode>{" "}
+          may impact performance
+        </p>
+        <HStack wrap space={2}>
+          <Button color="primary" size="xs" onClick={toggleShowLargeResponse}>
+            Reveal Request Body
+          </Button>
+          {isProbablyText && (
+            <CopyButton
+              color="secondary"
+              variant="border"
+              size="xs"
+              text={() => getHttpResponseRequestBodyText(response).then((d) => d?.bodyText ?? "")}
+            />
+          )}
+        </HStack>
+      </Banner>
+    );
+  }
+
+  return <>{children}</>;
+}
@@ -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,6 +26,7 @@ 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";
@@ -1 +1,24 @@
-export { EmptyStateText } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+}
+
+export function EmptyStateText({ children, className, wrapperClassName }: Props) {
+  return (
+    <div className={classNames("w-full h-full pb-2", wrapperClassName)}>
+      <div
+        className={classNames(
+          className,
+          "rounded-lg border border-dashed border-border-subtle",
+          "h-full py-2 text-text-subtlest flex items-center justify-center italic",
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
@@ -67,14 +67,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
        )}
        // If no environments, the button simply opens the dialog.
        // NOTE: We don't create a new button because we want to reuse the hotkey from the menu items
-        onClick={
-          subEnvironments.length === 0
-            ? (event) => {
-                event.preventDefault();
-                editEnvironment(null);
-              }
-            : undefined
-        }
+        onClick={subEnvironments.length === 0 ? () => editEnvironment(null) : undefined}
        {...buttonProps}
      >
        <EnvironmentColorIndicator environment={activeEnvironment ?? null} />
@@ -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,
@@ -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,42 +1,32 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
 import { useCallback, useMemo } from "react";
-import type { Pair, PairEditorProps } from "../pairs/PairEditor";
-import { PairEditor } from "../pairs/PairEditor";
-import type { HttpFormFieldView, HttpRequestBodyView } from "./types";
+import type { Pair, PairEditorProps } from "./core/PairEditor";
+import { PairEditor } from "./core/PairEditor";

 type Props = {
  forceUpdateKey: string;
-  /** The request's id, keeping each request's editor state apart */
-  requestId: string;
-  form: HttpFormFieldView[] | undefined;
-  onChange?: (body: HttpRequestBodyView) => void;
-  /** Show the fields without a way to change them */
-  readOnly?: boolean;
+  request: HttpRequest;
+  onChange: (body: HttpRequest["body"]) => void;
 };

-export function FormMultipartEditor({
-  requestId,
-  form,
-  forceUpdateKey,
-  onChange,
-  readOnly,
-}: Props) {
+export function FormMultipartEditor({ request, forceUpdateKey, onChange }: Props) {
  const pairs = useMemo<Pair[]>(
    () =>
-      (Array.isArray(form) ? form : []).map((p) => ({
+      (Array.isArray(request.body.form) ? request.body.form : []).map((p) => ({
        enabled: p.enabled,
        name: p.name,
-        value: (p.file ?? p.value) as string,
+        value: p.file ?? p.value,
        contentType: p.contentType,
        filename: p.filename,
        isFile: !!p.file,
        id: p.id,
      })),
-    [form],
+    [request.body.form],
  );

  const handleChange = useCallback<PairEditorProps["onChange"]>(
    (pairs) =>
-      onChange?.({
+      onChange({
        form: pairs.map((p) => ({
          enabled: p.enabled,
          name: p.name,
@@ -60,9 +50,8 @@ export function FormMultipartEditor({
      allowMultilineValues
      pairs={pairs}
      onChange={handleChange}
-      readOnly={readOnly}
      forceUpdateKey={forceUpdateKey}
-      stateKey={`multipart.${requestId}`}
+      stateKey={`multipart.${request.id}`}
    />
  );
 }
@@ -0,0 +1,46 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { useCallback, useMemo } from "react";
+import type { Pair, PairEditorProps } from "./core/PairEditor";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
+
+type Props = {
+  forceUpdateKey: string;
+  request: HttpRequest;
+  onChange: (headers: HttpRequest["body"]) => void;
+};
+
+export function FormUrlencodedEditor({ request, forceUpdateKey, onChange }: Props) {
+  const pairs = useMemo<Pair[]>(
+    () =>
+      (Array.isArray(request.body.form) ? request.body.form : []).map((p) => ({
+        enabled: !!p.enabled,
+        name: p.name || "",
+        value: p.value || "",
+        id: p.id,
+      })),
+    [request.body.form],
+  );
+
+  const handleChange = useCallback<PairEditorProps["onChange"]>(
+    (pairs) =>
+      onChange({ form: pairs.map((p) => ({ enabled: p.enabled, name: p.name, value: p.value })) }),
+    [onChange],
+  );
+
+  return (
+    <PairOrBulkEditor
+      allowMultilineValues
+      preferenceName="form_urlencoded"
+      valueAutocompleteFunctions
+      valueAutocompleteVariables
+      nameAutocompleteFunctions
+      nameAutocompleteVariables
+      namePlaceholder="entry_name"
+      valuePlaceholder="Value"
+      pairs={pairs}
+      onChange={handleChange}
+      forceUpdateKey={forceUpdateKey}
+      stateKey={`urlencoded.${request.id}`}
+    />
+  );
+}
@@ -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 () => {
@@ -1,8 +1,9 @@
 import { linter } from "@codemirror/lint";
 import type { EditorView } from "@codemirror/view";
 import { jsoncLanguage } from "@shopify/lang-jsonc";
-import { type GrpcRequest, patchModel } from "@yaakapp-internal/models";
-import { Banner, FormattedError, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import type { GrpcRequest } from "@yaakapp-internal/models";
+import { FormattedError, InlineCode, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
 import {
  handleRefresh,
  jsonCompletion,
@@ -10,23 +11,15 @@ import {
  stateExtensions,
  updateSchema,
 } from "codemirror-json-schema";
-import type { JSONSchema7 } from "json-schema";
-import type { ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ReflectResponseService } from "../hooks/useGrpc";
-import { wasUpdatedExternally } from "../hooks/useRequestUpdateKey";
 import { showAlert } from "../lib/alert";
-import { showConfirm } from "../lib/confirm";
 import { showDialog } from "../lib/dialog";
-import type { JsonSchema } from "../lib/jsonSchemaExample";
-import { buildExampleFromSchema } from "../lib/jsonSchemaExample";
-import { queryClient } from "../lib/queryClient";
+import { pluralizeCount } from "../lib/pluralize";
 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;
@@ -36,11 +29,6 @@ type Props = Pick<EditorProps, "heightMode" | "onChange" | "className" | "forceU
  protoFiles: string[];
 };

-type MethodSchema =
-  | { type: "none" }
-  | { type: "schema"; schema: JsonSchema }
-  | { type: "error"; id: string; title: string; body: ReactNode; log: unknown[] };
-
 export function GrpcEditor({
  services,
  reflectionError,
@@ -54,16 +42,21 @@ export function GrpcEditor({
    setEditorView(h);
  }, []);

-  // Find the schema for the selected service and method
-  const methodSchema = useMemo<MethodSchema>(() => {
-    if (services === null || request.service === null || request.method === null) {
-      return { type: "none" };
+  // Find the schema for the selected service and method and update the editor
+  useEffect(() => {
+    if (
+      editorView == null ||
+      services === null ||
+      request.service === null ||
+      request.method === null
+    ) {
+      return;
    }

    const s = services.find((s) => s.name === request.service);
    if (s == null) {
-      return {
-        type: "error",
+      console.log("Failed to find service", { service: request.service, services });
+      showAlert({
        id: "grpc-find-service-error",
        title: "Couldn't Find Service",
        body: (
@@ -71,14 +64,14 @@ export function GrpcEditor({
            Failed to find service <InlineCode>{request.service}</InlineCode> in schema
          </>
        ),
-        log: ["Failed to find service", { service: request.service, services }],
-      };
+      });
+      return;
    }

    const schema = s.methods.find((m) => m.name === request.method)?.schema;
-    if (schema == null) {
-      return {
-        type: "error",
+    if (request.method != null && schema == null) {
+      console.log("Failed to find method", { method: request.method, methods: s?.methods });
+      showAlert({
        id: "grpc-find-schema-error",
        title: "Couldn't Find Method",
        body: (
@@ -87,15 +80,18 @@ export function GrpcEditor({
            <InlineCode>{request.service}</InlineCode> in schema
          </>
        ),
-        log: ["Failed to find method", { method: request.method, methods: s.methods }],
-      };
+      });
+      return;
+    }
+
+    if (schema == null) {
+      return;
    }

    try {
-      return { type: "schema", schema: JSON.parse(schema) as JsonSchema };
+      updateSchema(editorView, JSON.parse(schema));
    } catch (err) {
-      return {
-        type: "error",
+      showAlert({
        id: "grpc-parse-schema-error",
        title: "Failed to Parse Schema",
        body: (
@@ -107,22 +103,9 @@ export function GrpcEditor({
            <FormattedError>{String(err)}</FormattedError>
          </VStack>
        ),
-        log: ["Failed to parse schema", err],
-      };
+      });
    }
-  }, [services, request.method, request.service]);
-
-  useEffect(() => {
-    if (methodSchema.type !== "error") return;
-    console.log(...methodSchema.log);
-    showAlert({ id: methodSchema.id, title: methodSchema.title, body: methodSchema.body });
-  }, [methodSchema]);
-
-  // Update the editor whenever the schema changes
-  useEffect(() => {
-    if (editorView == null || methodSchema.type !== "schema") return;
-    updateSchema(editorView, methodSchema.schema as JSONSchema7);
-  }, [editorView, methodSchema]);
+  }, [editorView, services, request.method, request.service]);

  const extraExtensions = useMemo(
    () => [
@@ -141,146 +124,45 @@ export function GrpcEditor({
  const reflectionUnavailable = reflectionError?.match(/unimplemented/i);
  reflectionError = reflectionUnavailable ? undefined : reflectionError;

-  const handleGenerateExample = useCallback(async () => {
-    if (methodSchema.type !== "schema") return;
-
-    if (request.message.trim() !== "") {
-      const confirmed = await showConfirm({
-        id: "grpc-generate-example",
-        title: "Generate Example",
-        description: "The current message will be replaced with an example.",
-        confirmText: "Generate",
-      });
-      if (!confirmed) return;
-    }
-
-    const message = JSON.stringify(buildExampleFromSchema(methodSchema.schema), null, 2);
-    await patchModel(request, { message });
-
-    // Force the editor to pick up the new message
-    wasUpdatedExternally(request.id);
-  }, [methodSchema, request]);
-
-  // The reflect query is keyed by request, url and proto files, so a prefix invalidate
-  // reaches it without threading a refetch down from the connection layout.
-  const handleReloadSchema = useCallback(
-    () => queryClient.invalidateQueries({ queryKey: ["grpc_reflect", request.id] }),
-    [request.id],
-  );
-
-  const handleShowReflectionError = useCallback(() => {
-    showDialog({
-      id: "grpc-reflection-error",
-      title: "Reflection Failed",
-      size: "sm",
-      render: ({ hide }) => (
-        <>
-          <FormattedError>{reflectionError ?? "unknown"}</FormattedError>
-          <div className="w-full my-4">
-            <Button
-              className="ml-auto"
-              color="primary"
-              size="sm"
-              onClick={async () => {
-                hide();
-                await handleReloadSchema();
-              }}
-            >
-              Retry
-            </Button>
-          </div>
-        </>
-      ),
-    });
-  }, [handleReloadSchema, reflectionError]);
-
  const actions = useMemo(
    () => [
-      // Matches the GraphQL editor: one always-visible control labelled by schema state,
-      // with everything schema-related behind it.
-      <div key="schema" className="opacity-100!">
-        <Dropdown
-          items={[
-            {
-              // Hidden for servers without reflection, which isn't an error
-              hidden: !reflectionError,
-              type: "content",
-              label: (
-                <Banner color="danger">
-                  <p className="mb-1">Reflection failed</p>
-                  <Button
-                    size="xs"
-                    color="danger"
-                    variant="border"
-                    onClick={handleShowReflectionError}
-                  >
-                    View Error
-                  </Button>
-                </Banner>
-              ),
-            },
-            {
-              label: "Generate Example Message",
-              leftSlot: <Icon icon="magic_wand" />,
-              disabled: methodSchema.type !== "schema",
-              onSelect: handleGenerateExample,
-            },
-            { type: "separator" },
-            {
-              label: "Reload Schema",
-              leftSlot: <Icon icon="refresh" spin={reflectionLoading} />,
-              keepOpenOnSelect: true,
-              onSelect: handleReloadSchema,
-            },
-            {
-              label: protoFiles.length > 0 ? "Select Proto Files\u2026" : "Configure Schema\u2026",
-              leftSlot: <Icon icon="settings" />,
-              onSelect: () => {
-                showDialog({
-                  title: "Configure Schema",
-                  size: "md",
-                  className: "h-[30rem]",
-                  id: "grpc-configure-schema",
-                  render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
-                });
-              },
-            },
-          ]}
-        >
-          <Button
-            size="sm"
-            variant="border"
-            title="Schema"
-            forDropdown
-            isLoading={reflectionLoading}
-            color={reflectionUnavailable ? "info" : reflectionError ? "danger" : "default"}
-          >
-            {reflectionLoading
-              ? "Inspecting Schema"
+      <div key="reflection" className={classNames(services == null && "opacity-100!")}>
+        <Button
+          size="xs"
+          color={
+            reflectionLoading
+              ? "secondary"
              : reflectionUnavailable
-                ? "Select Proto Files"
+                ? "info"
                : reflectionError
-                  ? "Server Error"
-                  : protoFiles.length > 0
-                    ? pluralizeCount("File", protoFiles.length)
-                    : services != null
-                      ? "Schema Detected"
-                      : "Select Schema"}
-          </Button>
-        </Dropdown>
+                  ? "danger"
+                  : "secondary"
+          }
+          isLoading={reflectionLoading}
+          onClick={() => {
+            showDialog({
+              title: "Configure Schema",
+              size: "md",
+              id: "reflection-failed",
+              render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
+            });
+          }}
+        >
+          {reflectionLoading
+            ? "Inspecting Schema"
+            : reflectionUnavailable
+              ? "Select Proto Files"
+              : reflectionError
+                ? "Server Error"
+                : protoFiles.length > 0
+                  ? pluralizeCount("File", protoFiles.length)
+                  : services != null && protoFiles.length === 0
+                    ? "Schema Detected"
+                    : "Select Schema"}
+        </Button>
      </div>,
    ],
-    [
-      handleGenerateExample,
-      handleReloadSchema,
-      handleShowReflectionError,
-      methodSchema.type,
-      protoFiles.length,
-      reflectionError,
-      reflectionLoading,
-      reflectionUnavailable,
-      services,
-    ],
+    [protoFiles.length, reflectionError, reflectionLoading, reflectionUnavailable, services],
  );

  return (
@@ -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";
@@ -132,8 +133,6 @@ export function GrpcRequestPane({
    onSend({ message: activeRequest.message });
  }, [activeRequest, onSend]);

-  const hasDescription = activeRequest.description.trim().length > 0;
-
  const tabs: TabItem[] = useMemo(
    () => [
      { value: TAB_MESSAGE, label: "Message" },
@@ -147,10 +146,10 @@ export function GrpcRequestPane({
      {
        value: TAB_DESCRIPTION,
        label: "Info",
-        rightSlot: hasDescription && <CountBadge count={true} />,
+        rightSlot: activeRequest.description && <CountBadge count={true} />,
      },
    ],
-    [authTab, hasDescription, metadataTab, numSettingsOverrides],
+    [activeRequest.description, authTab, metadataTab, numSettingsOverrides],
  );

  const handleMetadataChange = useCallback(
@@ -195,6 +194,13 @@ export function GrpcRequestPane({
              type: "default",
              shortLabel: o.label,
            }))}
+            itemsAfter={[
+              {
+                label: "Refresh",
+                type: "default",
+                leftSlot: <Icon size="sm" icon="refresh" />,
+              },
+            ]}
          >
            <Button
              size="sm"
@@ -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 +1,190 @@
-export { HeadersEditor } from "@yaakapp-internal/ui";
+import type { HttpRequestHeader } from "@yaakapp-internal/models";
+import { HStack } from "@yaakapp-internal/ui";
+import { acceptLanguages } from "../lib/data/acceptLanguages";
+import { cacheControlDirectives } from "../lib/data/cacheControl";
+import { charsets } from "../lib/data/charsets";
+import { connections } from "../lib/data/connections";
+import { encodings } from "../lib/data/encodings";
+import type { HeaderValuePreset } from "../lib/data/headerValuePresets";
+import { headerNames } from "../lib/data/headerNames";
+import { mimeTypes } from "../lib/data/mimetypes";
+import { userAgents } from "../lib/data/userAgents";
+import { CountBadge } from "./core/CountBadge";
+import { DetailsBanner } from "./core/DetailsBanner";
+import type { GenericCompletion, GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import type { InputProps } from "./core/Input";
+import type { Pair, PairEditorProps } from "./core/PairEditor";
+import { PairEditorRow } from "./core/PairEditor";
+import { ensurePairId } from "./core/PairEditor.util";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
+
+type Props = {
+  forceUpdateKey: string;
+  headers: HttpRequestHeader[];
+  inheritedHeaders?: HttpRequestHeader[];
+  inheritedHeadersLabel?: string;
+  stateKey: string;
+  onChange: (headers: HttpRequestHeader[]) => void;
+  label?: string;
+};
+
+export function HeadersEditor({
+  stateKey,
+  headers,
+  inheritedHeaders,
+  inheritedHeadersLabel = "Inherited",
+  onChange,
+  forceUpdateKey,
+}: Props) {
+  // Get header names defined at current level (case-insensitive)
+  const currentHeaderNames = new Set(
+    headers.filter((h) => h.name).map((h) => h.name.toLowerCase()),
+  );
+  // Filter inherited headers: must be enabled, have content, and not be overridden by current level
+  const validInheritedHeaders =
+    inheritedHeaders?.filter(
+      (pair) =>
+        pair.enabled &&
+        (pair.name || pair.value) &&
+        !currentHeaderNames.has(pair.name.toLowerCase()),
+    ) ?? [];
+  const hasInheritedHeaders = validInheritedHeaders.length > 0;
+  return (
+    <div
+      className={
+        hasInheritedHeaders
+          ? "@container w-full h-full grid grid-rows-[auto_minmax(0,1fr)] gap-y-1.5"
+          : "@container w-full h-full"
+      }
+    >
+      {hasInheritedHeaders && (
+        <DetailsBanner
+          color="secondary"
+          className="text-sm"
+          summary={
+            <HStack>
+              {inheritedHeadersLabel} <CountBadge count={validInheritedHeaders.length} />
+            </HStack>
+          }
+        >
+          <div className="pb-2">
+            {validInheritedHeaders?.map((pair, i) => (
+              <PairEditorRow
+                key={`${pair.id}.${i}`}
+                index={i}
+                disabled
+                disableDrag
+                className="py-1"
+                pair={ensurePairId(pair)}
+                stateKey={null}
+                nameAutocompleteFunctions
+                nameAutocompleteVariables
+                valueAutocompleteFunctions
+                valueAutocompleteVariables
+              />
+            ))}
+          </div>
+        </DetailsBanner>
+      )}
+      <PairOrBulkEditor
+        forceUpdateKey={forceUpdateKey}
+        nameAutocomplete={nameAutocomplete}
+        nameAutocompleteFunctions
+        nameAutocompleteVariables
+        namePlaceholder="Header-Name"
+        nameValidate={validateHttpHeader}
+        onChange={onChange}
+        pairs={headers}
+        preferenceName="headers"
+        stateKey={stateKey}
+        valueType={valueType}
+        valueAutocomplete={valueAutocomplete}
+        valueAutocompleteFunctions
+        valueAutocompleteVariables
+      />
+    </div>
+  );
+}
+
+const MIN_MATCH = 3;
+
+const headerOptionsMap: Record<string, HeaderValuePreset[]> = {
+  "content-type": mimeTypes,
+  accept: ["*/*", ...mimeTypes],
+  "accept-encoding": encodings,
+  "content-encoding": encodings,
+  connection: connections,
+  "accept-charset": charsets,
+  "accept-language": acceptLanguages,
+  "cache-control": cacheControlDirectives,
+  "user-agent": userAgents,
+  pragma: ["no-cache"],
+  te: ["trailers", "compress", "deflate", "gzip"],
+  dnt: ["1", "0"],
+  "upgrade-insecure-requests": ["1"],
+  "x-requested-with": ["XMLHttpRequest"],
+};
+
+const valueType = (pair: Pair): InputProps["type"] => {
+  const name = pair.name.toLowerCase().trim();
+  if (
+    name.includes("authorization") ||
+    name.includes("api-key") ||
+    name.includes("access-token") ||
+    name.includes("auth") ||
+    name.includes("secret") ||
+    name.includes("token") ||
+    name === "cookie" ||
+    name === "set-cookie"
+  ) {
+    return "password";
+  }
+  return "text";
+};
+
+const valueAutocomplete = (headerName: string): GenericCompletionConfig | undefined => {
+  const name = headerName.toLowerCase().trim();
+  const options: GenericCompletion[] =
+    headerOptionsMap[name]?.map((o) =>
+      typeof o === "string"
+        ? {
+            label: o,
+            type: "constant",
+            boost: 1, // Put above other completions
+          }
+        : {
+            // Show the short label but insert the full value (e.g. User-Agent)
+            label: o.label,
+            apply: o.value,
+            type: "constant",
+            boost: 1,
+          },
+    ) ?? [];
+  return { minMatch: MIN_MATCH, options };
+};
+
+const nameAutocomplete: PairEditorProps["nameAutocomplete"] = {
+  minMatch: MIN_MATCH,
+  options: headerNames.map((t) =>
+    typeof t === "string"
+      ? {
+          label: t,
+          type: "constant",
+          boost: 1, // Put above other completions
+        }
+      : {
+          ...t,
+          boost: 1, // Put above other completions
+        },
+  ),
+};
+
+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;
+};
@@ -6,7 +6,7 @@ import type {
  Workspace,
 } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode, SegmentedControl } from "@yaakapp-internal/ui";
+import { HStack, Icon, InlineCode } from "@yaakapp-internal/ui";
 import { useCallback } from "react";
 import { openFolderSettings } from "../commands/openFolderSettings";
 import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
@@ -21,6 +21,7 @@ import { IconButton } from "./core/IconButton";
 import { Input, type InputProps } from "./core/Input";
 import { Link } from "./core/Link";
 import { RadioDropdown } from "./core/RadioDropdown";
+import { SegmentedControl } from "./core/SegmentedControl";
 import { DynamicForm } from "./DynamicForm";
 import { EmptyStateText } from "./EmptyStateText";

@@ -1,16 +1,9 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
 import { getModel, patchModel, patchModelDebounced } from "@yaakapp-internal/models";
 import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
-import {
-  CountBadge,
-  type EditablePair,
-  type ExtraPaneTab,
-  HttpRequestPaneView,
-  InlineCode,
-  languageFromContentType,
-} from "@yaakapp-internal/ui";
+import classNames from "classnames";
 import { atom, useAtomValue } from "jotai";
-import type { CSSProperties, ReactNode } from "react";
+import type { CSSProperties } from "react";
 import { lazy, Suspense, useCallback, useMemo, useRef, useState } from "react";
 import { importCurl, looksLikeCurl } from "../commands/importCurl";
 import { allRequestUrlsAtom } from "../hooks/useAllRequests";
@@ -22,8 +15,10 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
 import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
-import { fireAndForget } from "../lib/fireAndForget";
-import { httpRequestToView } from "../lib/httpViews";
+import { languageFromContentType } from "../lib/contentType";
+import { generateId } from "../lib/generateId";
+import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
+import { convertRequestBody } from "../lib/requestBodyConversion";
 import {
  BODY_TYPE_BINARY,
  BODY_TYPE_FORM_MULTIPART,
@@ -35,24 +30,30 @@ import {
  BODY_TYPE_XML,
  getContentTypeFromHeaders,
 } from "../lib/model_util";
-import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
 import { prepareImportQuerystring } from "../lib/prepareImportQuerystring";
-import { convertRequestBody } from "../lib/requestBodyConversion";
 import { resolvedModelName } from "../lib/resolvedModelName";
 import { showToast } from "../lib/toast";
 import { BinaryFileEditor } from "./BinaryFileEditor";
 import { ConfirmLargeRequestBody } from "./ConfirmLargeRequestBody";
+import { CountBadge } from "./core/CountBadge";
 import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import { getUrlCompletionConfig } from "./core/Editor/url/completion";
+import { Editor } from "./core/Editor/LazyEditor";
+import { InlineCode } from "@yaakapp-internal/ui";
 import { PlainInput } from "./core/PlainInput";
 import type { TabItem, TabsRef } from "./core/Tabs/Tabs";
-import { setActiveTab } from "./core/Tabs/Tabs";
+import { setActiveTab, TabContent, Tabs } from "./core/Tabs/Tabs";
+import { EmptyStateText } from "./EmptyStateText";
+import { FormMultipartEditor } from "./FormMultipartEditor";
+import { FormUrlencodedEditor } from "./FormUrlencodedEditor";
+import { HeadersEditor } from "./HeadersEditor";
 import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { JsonBodyEditor } from "./JsonBodyEditor";
 import { MarkdownEditor } from "./MarkdownEditor";
-import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
 import { RequestMethodDropdown } from "./RequestMethodDropdown";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { UrlBar } from "./UrlBar";
 import { UrlParametersEditor } from "./UrlParameterEditor";
-import { generateId } from "@yaakapp-internal/lib/generateId";

 const GraphQLEditor = lazy(() =>
  import("./graphql/GraphQLEditor").then((m) => ({ default: m.GraphQLEditor })),
@@ -164,11 +165,9 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
      : 0;
  }

-  const hasDescription = activeRequest.description.trim().length > 0;
-
-  const bodyTab = useMemo<TabItem>(
-    () =>
-      ({
+  const tabs = useMemo<TabItem[]>(
+    () => [
+      {
        value: TAB_BODY,
        rightSlot: numParams > 0 ? <CountBadge count={numParams} /> : null,
        options: {
@@ -245,8 +244,34 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
            }
          },
        },
-      }) satisfies TabItem,
-    [activeRequest, contentType, handleContentTypeChange, numParams],
+      },
+      {
+        value: TAB_PARAMS,
+        rightSlot: <CountBadge count={urlParameterPairs.length} />,
+        label: "Params",
+      },
+      ...headersTab,
+      ...authTab,
+      {
+        value: TAB_SETTINGS,
+        label: "Settings",
+        rightSlot: <CountBadge count={numSettingsOverrides} />,
+      },
+      {
+        value: TAB_DESCRIPTION,
+        label: "Info",
+      },
+    ],
+    [
+      activeRequest,
+      authTab,
+      contentType,
+      handleContentTypeChange,
+      headersTab,
+      numParams,
+      numSettingsOverrides,
+      urlParameterPairs.length,
+    ],
  );

  const { mutate: sendRequest } = useSendAnyHttpRequest();
@@ -308,152 +333,154 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
    [activeRequest],
  );

-  const handleJsonOrBodyTextChange = useCallback(
-    (text: string, bodyType: string | null) => {
-      // JSON writes at once, as its editor always has; other text debounces
-      if (bodyType === BODY_TYPE_JSON) {
-        return patchModel(activeRequest, { body: { ...activeRequest.body, text } });
-      }
-      return handleBodyTextChange(text);
-    },
-    [activeRequest, handleBodyTextChange],
-  );
-
-  const handleSendJsonCommentsChange = useCallback(
-    (sendJsonComments: boolean) => {
-      const newBody = { ...activeRequest.body };
-      if (sendJsonComments) {
-        newBody.sendJsonComments = true;
-      } else {
-        delete newBody.sendJsonComments;
-      }
-      fireAndForget(patchModel(activeRequest, { body: newBody }));
-    },
-    [activeRequest],
-  );
-
-  const requestView = useMemo(() => httpRequestToView(activeRequest), [activeRequest]);
-
-  const extraTabs = useMemo<ExtraPaneTab[]>(
-    () => [
-      {
-        tab: {
-          value: TAB_SETTINGS,
-          label: "Settings",
-          rightSlot: <CountBadge count={numSettingsOverrides} />,
-        },
-        content: <ModelSettingsEditor model={activeRequest} />,
-      },
-      {
-        tab: {
-          value: TAB_DESCRIPTION,
-          label: "Info",
-          rightSlot: hasDescription && <CountBadge count={true} />,
-        },
-        content: (
-          <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
-            <PlainInput
-              label="Request Name"
-              hideLabel
-              forceUpdateKey={updateKey}
-              defaultValue={activeRequest.name}
-              className="font-sans text-xl! px-0!"
-              containerClassName="border-0"
-              placeholder={resolvedModelName(activeRequest)}
-              onChange={(name) => patchModel(activeRequest, { name })}
-            />
-            <MarkdownEditor
-              name="request-description"
-              placeholder="Request description"
-              defaultValue={activeRequest.description}
-              stateKey={`description.${activeRequest.id}`}
-              forceUpdateKey={updateKey}
-              onChange={(description) => patchModel(activeRequest, { description })}
-            />
-          </div>
-        ),
-      },
-    ],
-    [activeRequest, hasDescription, numSettingsOverrides, updateKey],
-  );
-
-  const renderBody = useCallback(
-    (sharedEditor: ReactNode) => (
-      <ConfirmLargeRequestBody request={activeRequest}>
-        {activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
-          <Suspense>
-            <GraphQLEditor
-              forceUpdateKey={forceUpdateKey}
-              baseRequest={activeRequest}
-              request={activeRequest}
-              onChange={handleBodyChange}
-            />
-          </Suspense>
-        ) : activeRequest.bodyType === BODY_TYPE_BINARY ? (
-          <BinaryFileEditor
-            requestId={activeRequest.id}
-            contentType={contentType}
-            body={activeRequest.body}
-            onChange={(body) => patchModelDebounced(activeRequest, { body })}
-            onChangeContentType={handleContentTypeChange}
-          />
-        ) : (
-          sharedEditor
-        )}
-      </ConfirmLargeRequestBody>
-    ),
-    [activeRequest, contentType, forceUpdateKey, handleBodyChange, handleContentTypeChange],
-  );
-
-  const renderUrlParameters = useCallback(
-    (pairs: EditablePair[]) => (
-      <UrlParametersEditor
-        stateKey={`params.${activeRequest.id}`}
-        forceUpdateKey={forceUpdateKey + urlParametersKey}
-        pairs={pairs}
-        onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
-      />
-    ),
-    [activeRequest, forceUpdateKey, urlParametersKey],
-  );
-
  return (
-    <HttpRequestPaneView
-      editable
+    <div
      style={style}
-      className={className}
-      fullHeight={fullHeight}
-      request={requestView}
-      tabsRef={tabsRef}
-      tabsStorageKey={TABS_STORAGE_KEY}
-      forceUpdateKey={forceUpdateKey}
-      urlBarKey={forceUpdateKey + urlKey}
-      urlForceUpdateKey={updateKey}
-      urlAutocomplete={autocomplete}
-      onUrlChange={handleUrlChange}
-      onUrlPasteOverwrite={handlePaste}
-      onSend={handleSend}
-      onCancel={cancelResponse}
-      isSending={activeResponse != null && activeResponse.state !== "closed"}
-      sendHotkeyAction="request.send"
-      focusHotkeyAction="url_bar.focus"
-      methodSlot={<RequestMethodDropdown request={activeRequest} className="ml-0.5 h-full!" />}
-      bodyTab={bodyTab}
-      renderBody={renderBody}
-      onBodyChange={handleBodyChange}
-      onBodyTextChange={handleJsonOrBodyTextChange}
-      onSendJsonCommentsChange={handleSendJsonCommentsChange}
-      jsonNoticeStorageKey={activeRequest.workspaceId}
-      urlParameterPairs={urlParameterPairs}
-      renderUrlParameters={renderUrlParameters}
-      headersTabs={headersTab}
-      inheritedHeaders={inheritedHeaders}
-      headersForceUpdateKey={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
-      onHeadersChange={(headers) => patchModelDebounced(activeRequest, { headers })}
-      authTabs={authTab}
-      authContent={<HttpAuthenticationEditor model={activeRequest} />}
-      extraTabs={extraTabs}
-    />
+      className={classNames(className, "h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1")}
+    >
+      {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"}
+          />
+          <Tabs
+            ref={tabsRef}
+            label="Request"
+            tabs={tabs}
+            tabListClassName="mt-1 -mb-1.5"
+            storageKey={TABS_STORAGE_KEY}
+            activeTabKey={activeRequestId}
+          >
+            <TabContent value={TAB_AUTH}>
+              <HttpAuthenticationEditor model={activeRequest} />
+            </TabContent>
+            <TabContent value={TAB_HEADERS}>
+              <HeadersEditor
+                inheritedHeaders={inheritedHeaders}
+                forceUpdateKey={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
+                headers={activeRequest.headers}
+                stateKey={`headers.${activeRequest.id}`}
+                onChange={(headers) => patchModelDebounced(activeRequest, { headers })}
+              />
+            </TabContent>
+            <TabContent value={TAB_PARAMS}>
+              <UrlParametersEditor
+                stateKey={`params.${activeRequest.id}`}
+                forceUpdateKey={forceUpdateKey + urlParametersKey}
+                pairs={urlParameterPairs}
+                onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
+              />
+            </TabContent>
+            <TabContent value={TAB_SETTINGS}>
+              <ModelSettingsEditor model={activeRequest} />
+            </TabContent>
+            <TabContent value={TAB_BODY}>
+              <ConfirmLargeRequestBody request={activeRequest}>
+                {activeRequest.bodyType === BODY_TYPE_JSON ? (
+                  <JsonBodyEditor
+                    forceUpdateKey={forceUpdateKey}
+                    heightMode={fullHeight ? "full" : "auto"}
+                    request={activeRequest}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_XML ? (
+                  <Editor
+                    forceUpdateKey={forceUpdateKey}
+                    autocompleteFunctions
+                    autocompleteVariables
+                    placeholder="..."
+                    heightMode={fullHeight ? "full" : "auto"}
+                    defaultValue={`${activeRequest.body?.text ?? ""}`}
+                    language="xml"
+                    onChange={handleBodyTextChange}
+                    stateKey={`xml.${activeRequest.id}`}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
+                  <Suspense>
+                    <GraphQLEditor
+                      forceUpdateKey={forceUpdateKey}
+                      baseRequest={activeRequest}
+                      request={activeRequest}
+                      onChange={handleBodyChange}
+                    />
+                  </Suspense>
+                ) : activeRequest.bodyType === BODY_TYPE_FORM_URLENCODED ? (
+                  <FormUrlencodedEditor
+                    forceUpdateKey={forceUpdateKey}
+                    request={activeRequest}
+                    onChange={handleBodyChange}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_FORM_MULTIPART ? (
+                  <FormMultipartEditor
+                    forceUpdateKey={forceUpdateKey}
+                    request={activeRequest}
+                    onChange={handleBodyChange}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_BINARY ? (
+                  <BinaryFileEditor
+                    requestId={activeRequest.id}
+                    contentType={contentType}
+                    body={activeRequest.body}
+                    onChange={(body) => patchModelDebounced(activeRequest, { body })}
+                    onChangeContentType={handleContentTypeChange}
+                  />
+                ) : typeof activeRequest.bodyType === "string" ? (
+                  <Editor
+                    forceUpdateKey={forceUpdateKey}
+                    autocompleteFunctions
+                    autocompleteVariables
+                    language={languageFromContentType(contentType)}
+                    placeholder="..."
+                    heightMode={fullHeight ? "full" : "auto"}
+                    defaultValue={`${activeRequest.body?.text ?? ""}`}
+                    onChange={handleBodyTextChange}
+                    stateKey={`other.${activeRequest.id}`}
+                  />
+                ) : (
+                  <EmptyStateText>No Body</EmptyStateText>
+                )}
+              </ConfirmLargeRequestBody>
+            </TabContent>
+            <TabContent value={TAB_DESCRIPTION}>
+              <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+                <PlainInput
+                  label="Request Name"
+                  hideLabel
+                  forceUpdateKey={updateKey}
+                  defaultValue={activeRequest.name}
+                  className="font-sans text-xl! px-0!"
+                  containerClassName="border-0"
+                  placeholder={resolvedModelName(activeRequest)}
+                  onChange={(name) => patchModel(activeRequest, { name })}
+                />
+                <MarkdownEditor
+                  name="request-description"
+                  placeholder="Request description"
+                  defaultValue={activeRequest.description}
+                  stateKey={`description.${activeRequest.id}`}
+                  forceUpdateKey={updateKey}
+                  onChange={(description) => patchModel(activeRequest, { description })}
+                />
+              </div>
+            </TabContent>
+          </Tabs>
+        </>
+      )}
+    </div>
  );
 }

@@ -1,36 +1,50 @@
 import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
-import {
-  CountBadge,
-  type ExtraPaneTab,
-  type HostBodyViewerArgs,
-  HttpResponsePaneView,
-  Icon,
-  type ResponseTextViewerExtras,
-  type TextFilterApi,
-  Tooltip,
-  VStack,
-} from "@yaakapp-internal/ui";
-import type { CSSProperties } from "react";
-import { useCallback, useMemo } from "react";
+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";
 import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
 import { useCopyHttpResponse } from "../hooks/useCopyHttpResponse";
-import { useRequestBodyLoader, useResponseBodyLoader } from "../hooks/useHttpBodyLoaders";
 import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
 import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
-import { useRecentFilters } from "../hooks/useRecentFilters";
+import { useResponseBodyBytes, useResponseBodyText } from "../hooks/useResponseBodyText";
+import { useResponseBodyUrl } from "../hooks/useResponseBodyUrl";
 import { useResponseViewMode } from "../hooks/useResponseViewMode";
 import { useSaveResponse } from "../hooks/useSaveResponse";
 import { useTimelineViewMode } from "../hooks/useTimelineViewMode";
-import { httpResponseToView } from "../lib/httpViews";
-import { getCookieCounts } from "../lib/model_util";
-import { CopyButton } from "./CopyButton";
+import { getMimeTypeFromContentType } from "../lib/contentType";
+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 { IconButton } from "./core/IconButton";
+import { HttpResponseDurationTag } from "./core/HttpResponseDurationTag";
+import { HttpStatusTag } from "./core/HttpStatusTag";
 import { PillButton } from "./core/PillButton";
+import { SizeTag } from "./core/SizeTag";
+import type { TabItem } from "./core/Tabs/Tabs";
+import { TabContent, Tabs } from "./core/Tabs/Tabs";
+import { Tooltip } from "./core/Tooltip";
+import { EmptyStateText } from "./EmptyStateText";
+import { ErrorBoundary } from "./ErrorBoundary";
 import { HttpResponseTimeline } from "./HttpResponseTimeline";
 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 { RecentFiltersDropdown } from "./responseViewers/RecentFiltersDropdown";
+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 })),
+);

 interface Props {
  style?: CSSProperties;
@@ -38,6 +52,10 @@ interface Props {
  activeRequestId: string;
 }

+const TAB_BODY = "body";
+const TAB_REQUEST = "request";
+const TAB_HEADERS = "headers";
+const TAB_COOKIES = "cookies";
 const TAB_TIMELINE = "timeline";

 export type TimelineViewMode = "timeline" | "text";
@@ -47,11 +65,12 @@ interface RedirectDropWarning {
  droppedHeaders: string[];
 }

-/** The shared response pane, bound to the pinned response of the active request */
 export function HttpResponsePane({ style, className, activeRequestId }: Props) {
  const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequestId);
  const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
  const [timelineViewMode, setTimelineViewMode] = useTimelineViewMode();
+  const contentType = getContentTypeFromHeaders(activeResponse?.headers ?? null);
+  const mimeType = contentType == null ? null : getMimeTypeFromContentType(contentType).essence;

  const responseEvents = useHttpResponseEvents(activeResponse);
  const redirectDropWarning = useMemo(
@@ -64,181 +83,280 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
  const cookieCounts = useMemo(() => getCookieCounts(responseEvents.data), [responseEvents.data]);
  const saveResponse = useSaveResponse(activeResponse ?? null);
  const copyResponse = useCopyHttpResponse(activeResponse ?? null);
-  const cancel = useCancelHttpResponse(activeResponse?.id ?? null);
-  const body = useResponseBodyLoader(activeResponse ?? null);
-  const requestBody = useRequestBodyLoader(activeResponse ?? null);
-  const textViewer = useResponseTextViewerExtras(activeResponse ?? null);

-  const responseView = useMemo(
-    () => (activeResponse == null ? null : httpResponseToView(activeResponse, responseEvents.data)),
-    [activeResponse, responseEvents.data],
-  );
-
-  const extraTabs = useMemo<ExtraPaneTab[]>(
-    () =>
-      activeResponse == null
-        ? []
-        : [
+  const tabs = useMemo<TabItem[]>(
+    () => [
+      {
+        value: TAB_BODY,
+        label: "Response",
+        options: {
+          value: viewMode,
+          onChange: setViewMode,
+          items: [
+            { label: "Response", value: "pretty" },
+            ...(mimeType?.startsWith("image")
+              ? []
+              : [{ label: "Response (Raw)", shortLabel: "Raw", value: "raw" }]),
+          ],
+          itemsAfter: [
            {
-              tab: {
-                value: TAB_TIMELINE,
-                rightSlot: <CountBadge count={responseEvents.data?.length ?? 0} />,
-                options: {
-                  value: timelineViewMode,
-                  onChange: (v) => setTimelineViewMode((v as TimelineViewMode) ?? "timeline"),
-                  items: [
-                    { label: "Timeline", value: "timeline" },
-                    { label: "Timeline (Text)", shortLabel: "Timeline", value: "text" },
-                  ],
-                },
-              },
-              content: (
-                <HttpResponseTimeline response={activeResponse} viewMode={timelineViewMode} />
-              ),
+              label: "Save to File",
+              onSelect: saveResponse.mutate,
+              leftSlot: <Icon icon="save" />,
+              hidden: activeResponse == null || !!activeResponse.error,
+              disabled: activeResponse?.state !== "closed" && (activeResponse?.status ?? 0) >= 100,
+            },
+            {
+              label: "Copy Body",
+              onSelect: copyResponse.mutate,
+              leftSlot: <Icon icon="copy" />,
+              hidden: activeResponse == null || !!activeResponse.error,
+              disabled: activeResponse?.state !== "closed" && (activeResponse?.status ?? 0) >= 100,
            },
          ],
-    [activeResponse, responseEvents.data?.length, setTimelineViewMode, timelineViewMode],
+        },
+      },
+      {
+        value: TAB_REQUEST,
+        label: "Request",
+        rightSlot:
+          (activeResponse?.requestContentLength ?? 0) > 0 ? <CountBadge count={true} /> : null,
+      },
+      {
+        value: TAB_HEADERS,
+        label: "Headers",
+        rightSlot: (
+          <CountBadge
+            count={activeResponse?.requestHeaders.length ?? 0}
+            count2={activeResponse?.headers.length ?? 0}
+            showZero
+          />
+        ),
+      },
+      {
+        value: TAB_COOKIES,
+        label: "Cookies",
+        rightSlot:
+          cookieCounts.sent > 0 || cookieCounts.received > 0 ? (
+            <CountBadge count={cookieCounts.sent} count2={cookieCounts.received} showZero />
+          ) : null,
+      },
+      {
+        value: TAB_TIMELINE,
+        rightSlot: <CountBadge count={responseEvents.data?.length ?? 0} />,
+        options: {
+          value: timelineViewMode,
+          onChange: (v) => setTimelineViewMode((v as TimelineViewMode) ?? "timeline"),
+          items: [
+            { label: "Timeline", value: "timeline" },
+            { label: "Timeline (Text)", shortLabel: "Timeline", value: "text" },
+          ],
+        },
+      },
+    ],
+    [
+      activeResponse?.headers,
+      activeResponse,
+      activeResponse?.error,
+      activeResponse?.requestContentLength,
+      activeResponse?.requestHeaders.length,
+      activeResponse?.state,
+      activeResponse?.status,
+      cookieCounts.sent,
+      cookieCounts.received,
+      copyResponse.mutate,
+      mimeType,
+      responseEvents.data?.length,
+      saveResponse.mutate,
+      setViewMode,
+      viewMode,
+      timelineViewMode,
+      setTimelineViewMode,
+    ],
  );

-  const renderBodyViewer = useCallback(
-    ({ mimeType, viewMode }: HostBodyViewerArgs) =>
-      activeResponse != null && mimeType?.match(/^text\/event-stream/i) && viewMode === "pretty" ? (
-        <EventStreamViewer response={activeResponse} />
-      ) : null,
-    [activeResponse],
-  );
+  const cancel = useCancelHttpResponse(activeResponse?.id ?? null);

  return (
-    <HttpResponsePaneView
+    <div
      style={style}
-      className={className}
-      response={responseView}
-      body={body}
-      requestBody={requestBody}
-      emptyState={
+      className={classNames(
+        className,
+        "x-theme-responsePane",
+        "max-h-full h-full",
+        "bg-surface rounded-md border border-border-subtle overflow-hidden",
+        "relative",
+      )}
+    >
+      {activeResponse == null ? (
        <HotkeyList hotkeys={["request.send", "model.create", "sidebar.focus", "url_bar.focus"]} />
-      }
-      viewMode={viewMode === "raw" ? "raw" : "pretty"}
-      onViewModeChange={setViewMode}
-      activeTabKey={activeRequestId}
-      onSaveBody={saveResponse.mutate}
-      onCopyBody={copyResponse.mutate}
-      onCancel={cancel.mutate}
-      cookieCounts={cookieCounts}
-      extraTabs={extraTabs}
-      textViewer={textViewer}
-      renderBodyViewer={renderBodyViewer}
-      renderCopyButton={renderCopyButton}
-      statusLineCenter={
-        shouldShowRedirectDropWarning ? (
-          <Tooltip
-            tabIndex={0}
-            className="my-auto pl-3 shrink-0 max-w-full justify-self-end overflow-hidden"
-            content={
-              <VStack alignItems="start" space={1} className="text-xs">
-                <span className="font-medium text-warning">Redirect changed this request</span>
-                {redirectDropWarning.droppedBodyCount > 0 && (
-                  <span>
-                    Body dropped on {redirectDropWarning.droppedBodyCount}{" "}
-                    {redirectDropWarning.droppedBodyCount === 1 ? "redirect hop" : "redirect hops"}
-                  </span>
-                )}
-                {redirectDropWarning.droppedHeaders.length > 0 && (
-                  <span>
-                    Headers dropped:{" "}
-                    <span className="font-mono">
-                      {redirectDropWarning.droppedHeaders.join(", ")}
-                    </span>
-                  </span>
-                )}
-                <span className="text-text-subtle">See Timeline for details.</span>
-              </VStack>
-            }
+      ) : (
+        <div className="h-full w-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1">
+          <HStack
+            className={classNames(
+              "text-text-subtle w-full shrink-0",
+              // Remove a bit of space because the tabs have lots too
+              "-mb-1.5",
+            )}
          >
-            <span className="inline-flex min-w-0">
-              <PillButton
-                color="warning"
-                className="font-sans text-sm shrink! max-w-full"
-                innerClassName="flex items-center"
-                leftSlot={<Icon icon="alert_triangle" size="xs" color="warning" />}
+            {activeResponse && (
+              <div
+                className={classNames(
+                  "grid grid-cols-[auto_minmax(4rem,1fr)_auto]",
+                  "cursor-default select-none",
+                  "whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm hide-scrollbars",
+                )}
              >
-                <span className="truncate">{getRedirectWarningLabel(redirectDropWarning)}</span>
-              </PillButton>
-            </span>
-          </Tooltip>
-        ) : null
-      }
-      statusLineRight={
-        activeResponse != null && (
-          <RecentHttpResponsesDropdown
-            responses={responses}
-            activeResponse={activeResponse}
-            onPinnedResponseId={setPinnedResponseId}
-          />
-        )
-      }
-    />
+                <HStack space={2} className="w-full shrink-0">
+                  {activeResponse.state !== "closed" && <LoadingIcon size="sm" />}
+                  <HttpStatusTag showReason response={activeResponse} />
+                  <span>&bull;</span>
+                  <HttpResponseDurationTag response={activeResponse} />
+                  <span>&bull;</span>
+                  <SizeTag
+                    contentLength={activeResponse.contentLength ?? 0}
+                    contentLengthCompressed={activeResponse.contentLengthCompressed}
+                  />
+                </HStack>
+                {shouldShowRedirectDropWarning ? (
+                  <Tooltip
+                    tabIndex={0}
+                    className="my-auto pl-3 shrink-0 max-w-full justify-self-end overflow-hidden"
+                    content={
+                      <VStack alignItems="start" space={1} className="text-xs">
+                        <span className="font-medium text-warning">
+                          Redirect changed this request
+                        </span>
+                        {redirectDropWarning.droppedBodyCount > 0 && (
+                          <span>
+                            Body dropped on {redirectDropWarning.droppedBodyCount}{" "}
+                            {redirectDropWarning.droppedBodyCount === 1
+                              ? "redirect hop"
+                              : "redirect hops"}
+                          </span>
+                        )}
+                        {redirectDropWarning.droppedHeaders.length > 0 && (
+                          <span>
+                            Headers dropped:{" "}
+                            <span className="font-mono">
+                              {redirectDropWarning.droppedHeaders.join(", ")}
+                            </span>
+                          </span>
+                        )}
+                        <span className="text-text-subtle">See Timeline for details.</span>
+                      </VStack>
+                    }
+                  >
+                    <span className="inline-flex min-w-0">
+                      <PillButton
+                        color="warning"
+                        className="font-sans text-sm shrink! max-w-full"
+                        innerClassName="flex items-center"
+                        leftSlot={<Icon icon="alert_triangle" size="xs" color="warning" />}
+                      >
+                        <span className="truncate">
+                          {getRedirectWarningLabel(redirectDropWarning)}
+                        </span>
+                      </PillButton>
+                    </span>
+                  </Tooltip>
+                ) : (
+                  <span />
+                )}
+                <div className="justify-self-end shrink-0">
+                  <RecentHttpResponsesDropdown
+                    responses={responses}
+                    activeResponse={activeResponse}
+                    onPinnedResponseId={setPinnedResponseId}
+                  />
+                </div>
+              </div>
+            )}
+          </HStack>
+
+          <div className="overflow-hidden flex flex-col min-h-0">
+            {activeResponse?.error && (
+              <Banner color="danger" className="mx-3 mt-1 shrink-0">
+                {activeResponse.error}
+              </Banner>
+            )}
+            {/* Show tabs if we have any data (headers, body, etc.) even if there's an error */}
+            <Tabs
+              tabs={tabs}
+              label="Response"
+              className="ml-3 mr-3 mb-3 min-h-0 flex-1"
+              tabListClassName="mt-0.5 -mb-1.5"
+              storageKey="http_response_tabs"
+              activeTabKey={activeRequestId}
+            >
+              <TabContent value={TAB_BODY}>
+                <ErrorBoundary name="Http Response Viewer">
+                  <Suspense>
+                    <ConfirmLargeResponse response={activeResponse}>
+                      {activeResponse.state === "initialized" ? (
+                        <EmptyStateText>
+                          <VStack space={3}>
+                            <HStack space={3}>
+                              <LoadingIcon className="text-text-subtlest" />
+                              Sending Request
+                            </HStack>
+                            <Button size="sm" variant="border" onClick={() => cancel.mutate()}>
+                              Cancel
+                            </Button>
+                          </VStack>
+                        </EmptyStateText>
+                      ) : activeResponse.state === "closed" &&
+                        (activeResponse.contentLength ?? 0) === 0 ? (
+                        <EmptyStateText>Empty</EmptyStateText>
+                      ) : mimeType?.match(/^text\/event-stream/i) && viewMode === "pretty" ? (
+                        <EventStreamViewer response={activeResponse} />
+                      ) : mimeType?.match(/^image\/svg/) ? (
+                        <HttpSvgViewer response={activeResponse} />
+                      ) : mimeType?.match(/^image/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={ImageViewer} />
+                      ) : mimeType?.match(/^audio/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={AudioViewer} />
+                      ) : mimeType?.match(/^video/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={VideoViewer} />
+                      ) : mimeType?.match(/^multipart/i) && viewMode === "pretty" ? (
+                        <HttpMultipartViewer response={activeResponse} />
+                      ) : mimeType?.match(/pdf/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={PdfViewer} />
+                      ) : mimeType?.match(/csv|tab-separated/i) && viewMode === "pretty" ? (
+                        <HttpCsvViewer className="pb-2" response={activeResponse} />
+                      ) : (
+                        <HTMLOrTextViewer
+                          textViewerClassName="-mr-2 bg-surface" // Pull to the right
+                          response={activeResponse}
+                          pretty={viewMode === "pretty"}
+                        />
+                      )}
+                    </ConfirmLargeResponse>
+                  </Suspense>
+                </ErrorBoundary>
+              </TabContent>
+              <TabContent value={TAB_REQUEST}>
+                <ConfirmLargeResponseRequest response={activeResponse}>
+                  <RequestBodyViewer response={activeResponse} />
+                </ConfirmLargeResponseRequest>
+              </TabContent>
+              <TabContent value={TAB_HEADERS}>
+                <ResponseHeaders response={activeResponse} />
+              </TabContent>
+              <TabContent value={TAB_COOKIES}>
+                <ResponseCookies response={activeResponse} />
+              </TabContent>
+              <TabContent value={TAB_TIMELINE}>
+                <HttpResponseTimeline response={activeResponse} viewMode={timelineViewMode} />
+              </TabContent>
+            </Tabs>
+          </div>
+        </div>
+      )}
+    </div>
  );
 }

-/** The client's additions to the response text viewer: filter history, save and copy */
-function useResponseTextViewerExtras(
-  response: HttpResponse | null,
-): ResponseTextViewerExtras | undefined {
-  const filterStateKey = `response.body.${response?.requestId ?? ""}`;
-  const { recentFilters, addFilter, removeFilter, togglePin, clearFilters } =
-    useRecentFilters(filterStateKey);
-  const saveResponse = useSaveResponse(response);
-  const copyResponse = useCopyHttpResponse(response);
-  const filterLeftSlot = useCallback(
-    (filter: TextFilterApi) => (
-      <div className="py-0.5 flex">
-        <RecentFiltersDropdown
-          recentFilters={recentFilters}
-          activeFilter={filter.appliedFilter}
-          onSelect={filter.replaceFilter}
-          onRemove={removeFilter}
-          onTogglePin={togglePin}
-          onClear={clearFilters}
-        />
-      </div>
-    ),
-    [recentFilters, removeFilter, togglePin, clearFilters],
-  );
-
-  if (response == null) return undefined;
-  const actionsDisabled = response.state !== "closed" && response.status >= 100;
-  return {
-    filterStateKey,
-    onFilterApplied: addFilter,
-    filterLeftSlot,
-    footerActions: [
-      <IconButton
-        key="save"
-        size="sm"
-        icon="save"
-        title="Save response to file"
-        disabled={actionsDisabled}
-        onClick={() => saveResponse.mutate()}
-        className="border !border-border-subtle"
-      />,
-      <IconButton
-        key="copy"
-        size="sm"
-        icon="copy"
-        title="Copy response body"
-        disabled={actionsDisabled}
-        onClick={() => copyResponse.mutate()}
-        className="border !border-border-subtle"
-      />,
-    ],
-  };
-}
-
-function renderCopyButton(getText: () => Promise<string | null>) {
-  return <CopyButton color="secondary" variant="border" size="xs" text={getText} />;
-}
-
 function getRedirectDropWarning(
  events: HttpResponseEvent[] | undefined,
 ): RedirectDropWarning | null {
@@ -286,3 +404,58 @@ function getRedirectWarningLabel(warning: RedirectDropWarning): string {
  }
  return "Dropped headers";
 }
+
+function EnsureCompleteResponse({
+  response,
+  Component,
+}: {
+  response: HttpResponse;
+  Component: ComponentType<{ bodyUrl: string }>;
+}) {
+  // Wait until the response has been fully-downloaded before asking for it
+  const complete = response.state === "closed";
+  const bodyUrl = useResponseBodyUrl(complete ? response : null);
+
+  if (!complete || bodyUrl.isPending) {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+
+  if (bodyUrl.error) {
+    return <Banner color="danger">{String(bodyUrl.error)}</Banner>;
+  }
+
+  if (bodyUrl.data == null) {
+    return <div>Empty response body</div>;
+  }
+
+  return <Component bodyUrl={bodyUrl.data} />;
+}
+
+function HttpSvgViewer({ response }: { response: HttpResponse }) {
+  const body = useResponseBodyText({ response, filter: null });
+
+  if (!body.data) return null;
+
+  return <SvgViewer text={body.data} />;
+}
+
+function HttpCsvViewer({ response, className }: { response: HttpResponse; className?: string }) {
+  const body = useResponseBodyText({ response, filter: null });
+
+  return <CsvViewer text={body.data ?? null} className={className} />;
+}
+
+function HttpMultipartViewer({ response }: { response: HttpResponse }) {
+  const body = useResponseBodyBytes({ response });
+
+  if (body.data == null) return null;
+
+  const contentTypeHeader = getContentTypeFromHeaders(response.headers);
+  const boundary = contentTypeHeader?.split("boundary=")[1] ?? "unknown";
+
+  return <MultipartViewer data={body.data} boundary={boundary} idPrefix={response.id} />;
+}
@@ -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,769 +1,139 @@
-import {
-  type ImportDestination,
-  type ImportPlan,
-  type ImportPlanItem,
-  type ImportSource,
-  type Workspace,
-} from "@yaakapp-internal/models";
-import {
-  Banner,
-  FormattedError,
-  HStack,
-  Icon,
-  VStack,
-  IconTooltip,
-  SegmentedControl,
-} from "@yaakapp-internal/ui";
+import { platform } from "@yaakapp-internal/platform";
+import { Icon, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { errorMessage } from "../lib/errorMessage";
+import { useEffect, useRef, useState } from "react";
+import { useLocalStorage } from "react-use";
 import { CommercialUseBanner } from "./CommercialUseBanner";
-import {
-  ImportSourceList,
-  type ImportSourceDetection,
-  type ImportSourcePath,
-  InlineButton,
-  toSourcePath,
-} from "./ImportSourceList";
-import type { CheckboxTreeNode } from "./core/CheckboxTree";
-import { CheckboxTree } from "./core/CheckboxTree";
-import { Chip } from "./core/Chip";
-import { DialogFooter } from "./core/Dialog";
-import { Select } from "./core/Select";
-import { pluralize } from "@yaakapp-internal/lib/pluralize";
+import { Button } from "./core/Button";
+import { PlainInput } from "./core/PlainInput";

 interface Props {
-  currentWorkspace: Workspace | null;
-  workspaces: Workspace[];
-  planSources: (sources: ImportSourcePath[], destination: ImportDestination) => Promise<ImportPlan>;
-  detectSource: (source: ImportSourcePath) => Promise<string>;
-  listSources: (workspaceId: string) => Promise<ImportSource[]>;
-  findSourcesForOrigin: (args: { filePath?: string; url?: string }) => Promise<ImportSource[]>;
-  commit: (plan: ImportPlan) => Promise<void>;
-  cancel: () => void;
-  onError: (err: unknown) => void;
+  importFile: (filePath: string) => Promise<void>;
+  importUrl: (url: string) => Promise<void>;
 }

 /**
- * Loads the current workspace's linked sources before rendering the dialog, so the inner
- * component can construct its initial state (prefilled path, destination) in one pass instead of
- * patching it in with effects after the first paint.
+ * 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).
 */
-export function ImportDataDialog(props: Props) {
-  const [initialSources, setInitialSources] = useState<ImportSource[] | null>(null);
-  const { currentWorkspace, listSources } = props;
-
-  useEffect(() => {
-    let cancelled = false;
-    const load = currentWorkspace == null ? Promise.resolve([]) : listSources(currentWorkspace.id);
-    load
-      .then((sources) => {
-        if (!cancelled) setInitialSources(sources);
-      })
-      .catch(() => {
-        if (!cancelled) setInitialSources([]);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [currentWorkspace, listSources]);
-
-  if (initialSources == null) return null;
-  return <LoadedImportDataDialog {...props} initialSources={initialSources} />;
+function isFilePath(value: string): boolean {
+  return (
+    value.startsWith("/") ||
+    value.startsWith("./") ||
+    value.startsWith("../") ||
+    value.startsWith("~/") ||
+    value.startsWith("\\\\") ||
+    /^[a-zA-Z]:[\\/]/.test(value)
+  );
 }

-function LoadedImportDataDialog({
-  currentWorkspace,
-  workspaces,
-  planSources,
-  detectSource,
-  findSourcesForOrigin,
-  commit,
-  cancel,
-  onError,
-  initialSources,
-}: Props & { initialSources: ImportSource[] }) {
+function fileName(path: string): string {
+  return path.split(/[/\\]/).at(-1) || path;
+}
+
+export function ImportDataDialog({ importFile, importUrl }: Props) {
  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
-  const [destinationChoice, setDestinationChoice] = useState<"new" | "current" | "other" | null>(
-    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 [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) }),
-        );
+  // A file path or a URL. Both inputs write here, so there is only ever one thing to import
+  const [source, setSource] = useLocalStorage<string | null>("importPathOrUrl", null);
+  const [forceUpdateKey, setForceUpdateKey] = useState<number>(0);
+  const [isHovering, setIsHovering] = useState<boolean>(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const trimmedSource = source?.trim() ?? "";
+  const filePath = isFilePath(trimmedSource) ? trimmedSource : null;
+
+  const selectSource = (value: string) => {
+    setSource(value);
+    // Remount the input so it shows the path of the newly-picked file
+    setForceUpdateKey((k) => k + 1);
+  };
+
+  // Accept a file dropped anywhere on the dialog, the way SelectFile does for its button
+  useEffect(() => {
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "over") {
+        const p = event.position;
+        const r = ref.current?.getBoundingClientRect();
+        if (r == null) return;
+        setIsHovering(p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom);
+      } else if (event.type === "drop" && isHovering) {
+        const p = event.paths[0];
+        if (p) selectSource(p);
+        setIsHovering(false);
+      } else {
+        setIsHovering(false);
      }
-    },
-    [detectSource],
-  );
-  const allDetected = sources.every((source) => detections[source.path]?.status === "ok");
-  useEffect(() => {
-    detect(initialPaths);
-  }, [detect, initialPaths]);
+    });
+  }, [isHovering, setSource]);

-  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 handleSelectFile = async () => {
+    const selected = await platform.dialog.open({ title: "Select File", multiple: false });
+    if (selected == null) return;
+    selectSource(selected);
  };

-  useEffect(() => {
-    let cancelled = false;
-    if (sources.length === 0) {
-      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([]);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [sources, findSourcesForOrigin]);
-
-  // The one workspace these sources are linked to, if there is exactly one.
-  const linkedWorkspace = useMemo(() => {
-    const ids = [...new Set(originSources.map((s) => s.workspaceId))];
-    if (ids.length !== 1) return null;
-    return workspaces.find((w) => w.id === ids[0]) ?? null;
-  }, [originSources, workspaces]);
-
-  // A file linked to the current workspace defaults back into it, so re-importing doesn't
-  // accidentally create a duplicate workspace. A file linked elsewhere only gets a suggestion —
-  // silently targeting a workspace that is neither new nor current is too surprising. An
-  // explicit choice always wins.
-  const destinationKind =
-    destinationChoice ??
-    (linkedWorkspace != null && linkedWorkspace.id === currentWorkspace?.id ? "current" : "new");
-
-  const destinationWorkspaceId =
-    destinationKind === "current"
-      ? (currentWorkspace?.id ?? null)
-      : destinationKind === "other"
-        ? otherWorkspaceId
-        : null;
-
-  const destination = (): ImportDestination => {
-    if (destinationWorkspaceId == null) {
-      return { type: "new_workspace" };
-    }
-    return {
-      type: "existing_workspace",
-      workspaceId: destinationWorkspaceId,
-    };
-  };
-
-  const handlePreview = async () => {
+  const handleImport = async () => {
    setIsLoading(true);
-    setSourceError(null);
    try {
-      const nextPlan = await planSources(sources, destination());
-      setPlan(nextPlan);
-      setItems(nextPlan.items);
-    } catch (err) {
-      setSourceError(err);
+      if (filePath != null) {
+        await importFile(filePath);
+      } else {
+        await importUrl(trimmedSource);
+      }
    } finally {
      setIsLoading(false);
    }
  };

-  const handleCommit = async () => {
-    if (plan == null) return;
-    setIsLoading(true);
-    try {
-      await commit({ ...plan, items });
-    } catch (err) {
-      onError(err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  return (
+    <VStack ref={ref} space={4} className="pb-4">
+      <CommercialUseBanner source="data-import" title="Importing work data?" />

-  // A folder row's checkbox carries everything beneath it, deletions included — the row labels
-  // say which of those are destructive. Checking anything also brings back the folders it needs
-  // to live in.
-  const toggleNode = (node: CheckboxTreeNode<TreeRow>, checked: boolean) => {
-    const targets = new Set(togglableItems(node).map((i) => i.modelId));
-    if (checked && node.data.kind === "item") {
-      const byId = new Map(items.map((i) => [i.modelId, i]));
-      for (const ancestor of ancestorsOf(node.data.item, byId)) {
-        if (isMissingFolder(ancestor)) targets.add(ancestor.modelId);
-      }
-    }
-    setItems((prev) => prev.map((i) => (targets.has(i.modelId) ? { ...i, selected: checked } : i)));
-  };
-
-  const resolveConflict = (modelId: string, resolution: "keep_mine" | "take_source") => {
-    setItems((prev) =>
-      prev.map((item) => (item.modelId === modelId ? { ...item, resolution } : item)),
-    );
-  };
-
-  // Deleting a folder takes its contents with it, so those rows have nothing left to decide.
-  const disabledIds = useMemo(() => {
-    const disabled = new Set<string>();
-    const byId = new Map(items.map((i) => [i.modelId, i]));
-    for (const item of items) {
-      if (item.action !== "delete") continue;
-      for (const parent of ancestorsOf(item, byId)) {
-        if (parent.action === "delete" && parent.selected) {
-          disabled.add(item.modelId);
-        }
-      }
-    }
-    return disabled;
-  }, [items]);
-
-  if (plan != null) {
-    const unchanged = items.filter((i) => i.action === "unchanged");
-    const footerNote =
-      unchanged.length > 0
-        ? `${unchanged.length} ${pluralize("resource", unchanged.length)} unchanged`
-        : "";
-    const changeCount = items.filter((item) => {
-      if (disabledIds.has(item.modelId)) return false;
-      if (item.action === "conflict") return item.resolution === "take_source";
-      if (item.action === "unchanged") return false;
-      return item.selected;
-    }).length;
-
-    // The row's label carries what kind of destination it is, so the value can just be its name
-    const [destinationLabel, destinationValue] = ((): [string, string] => {
-      if (plan.destination.type === "new_workspace") {
-        const names = plan.resources.workspaces.map((w) => w.name).filter((n) => n !== "");
-        if (names.length === 0) return ["New workspace", "Untitled"];
-        return [
-          names.length === 1 ? "New workspace" : `${names.length} new workspaces`,
-          names.join(", "),
-        ];
-      }
-      const { workspaceId } = plan.destination;
-      const name = workspaces.find((w) => w.id === workspaceId)?.name ?? "Unknown workspace";
-      return ["Destination", name];
-    })();
-
-    // The destination workspace roots the tree. It is not a plan item — commit always applies
-    // it — so its checkbox only aggregates the subtree.
-    const workspaceRoots: CheckboxTreeNode<TreeRow>[] = (() => {
-      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,
-        data: {
-          kind: "destination",
-          label: workspace.name,
-          isNew: planDestination.type === "new_workspace",
-        },
-        children: buildItemTree(
-          items.filter((item) => workspaceById.get(item.modelId) === workspace.id),
-        ),
-      }));
-    })();
-
-    return (
-      <>
-        <VStack space={4} className="pb-4">
-          <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
-            <PreviewRow label="Detected format" value={plan.importer} />
-            <PreviewRow label={destinationLabel} value={destinationValue} />
-          </div>
-
-          {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} />
-                )}
-              />
+      <button
+        type="button"
+        onClick={handleSelectFile}
+        className={classNames(
+          "w-full rounded-lg border border-dashed px-4 py-6",
+          "flex flex-col items-center gap-1 text-center",
+          isHovering ? "border-notice bg-surface-highlight" : "border-border hover:border-text",
+        )}
+      >
+        <Icon icon="folder_input" className="text-text-subtlest w-8! h-8! mb-2" />
+        {/* Fixed height so the region doesn't resize between the empty and selected states */}
+        <div className="h-6 w-full flex items-center justify-center">
+          {filePath == null ? (
+            <div className="text-text">
+              <strong className="font-semibold">Choose a file</strong> or drag it here
            </div>
-          ))}
-        </VStack>
-        <DialogFooter
-          leftSlot={
-            footerNote !== "" ? (
-              <div className="text-xs text-text-subtle">{footerNote}</div>
-            ) : undefined
-          }
-          actions={[
-            {
-              label: "Back",
-              disabled: isLoading,
-              onClick: () => {
-                setPlan(null);
-                setItems([]);
-              },
-            },
-            {
-              label: isLoading
-                ? "Importing"
-                : changeCount > 0
-                  ? `Apply ${changeCount} ${changeCount === 1 ? "Change" : "Changes"}`
-                  : "Done",
-              color: "primary",
-              isLoading,
-              onClick: handleCommit,
-            },
-          ]}
-        />
-      </>
-    );
-  }
-
-  const 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>
-  );
-
-  return (
-    <>
-      <VStack space={4} className="h-full pb-4">
-        <CommercialUseBanner source="data-import" title="Importing work data?" />
-
-        <ImportSourceList
-          sources={sources}
-          detections={detections}
-          disabled={isLoading}
-          onAdd={addSources}
-          onRemove={removeSource}
-          onError={setSourceError}
-        />
-
-        {sourceError != null && (
-          <Banner color="warning">
-            <FormattedError>{errorMessage(sourceError)}</FormattedError>
-          </Banner>
-        )}
-
-        {linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId && (
-          <div className="text-xs text-text-subtle">
-            {sources.length === 1 ? "This source was" : "These sources were"} last imported into{" "}
-            <InlineButton
-              onClick={() => {
-                if (linkedWorkspace.id === currentWorkspace?.id) {
-                  setDestinationChoice("current");
-                } else {
-                  setDestinationChoice("other");
-                  setOtherWorkspaceId(linkedWorkspace.id);
-                }
-              }}
-            >
-              {linkedWorkspace.name}
-            </InlineButton>
-          </div>
-        )}
-      </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,
-          },
-        ]}
-      />
-    </>
-  );
-}
-
-function ImportTreeRow({
-  row,
-  onResolveConflict,
-}: {
-  row: TreeRow;
-  onResolveConflict: (modelId: string, resolution: "keep_mine" | "take_source") => void;
-}) {
-  if (row.kind !== "item") {
-    return (
-      <>
-        {row.kind === "destination" && (
-          <Icon icon="box" size="sm" className="shrink-0 text-text-subtle" />
-        )}
-        <div className="truncate flex-1">{row.label}</div>
-        {row.kind === "destination" && row.isNew && (
-          <ActionChip label="new" help="Created by this import" color="success" />
-        )}
-      </>
-    );
-  }
-
-  const { item } = row;
-  const label = actionLabel(item);
-  return (
-    <>
-      <div className="truncate flex-1">{item.name}</div>
-      {item.action === "conflict" ? (
-        <div className="shrink-0">
-          <SegmentedControl
-            name={`conflict-${item.modelId}`}
-            label={`Resolve conflict for ${item.name}`}
-            hideLabel
-            size="2xs"
-            help={actionHelp(item)}
-            value={item.resolution ?? "keep_mine"}
-            onChange={(v) => onResolveConflict(item.modelId, v)}
-            options={[
-              { value: "keep_mine", label: "Keep mine" },
-              { value: "take_source", label: "Take source" },
-            ]}
-          />
+          ) : (
+            <div className="text-text font-mono text-xs max-w-full truncate" title={filePath}>
+              {fileName(filePath)}
+            </div>
+          )}
        </div>
-      ) : (
-        label != null && (
-          <ActionChip label={label} help={actionHelp(item)} color={actionColor(item)} />
-        )
-      )}
-    </>
-  );
-}
-
-function ActionChip({
-  label,
-  help,
-  color,
-}: {
-  label: string;
-  help: string | null;
-  color: ComponentProps<typeof Chip>["color"];
-}) {
-  return (
-    <Chip color={color}>
-      {label}
-      {help != null && <IconTooltip content={help} iconSize="xs" />}
-    </Chip>
-  );
-}
-
-function actionColor(item: ImportPlanItem): ComponentProps<typeof Chip>["color"] {
-  switch (item.action) {
-    case "create":
-      return "success";
-    case "update":
-      return "info";
-    case "delete":
-      return "danger";
-    case "keep_local":
-      return item.selected ? "warning" : "default";
-    case "unchanged":
-    case "conflict":
-    case "ignored":
-      return "default";
-  }
-}
-
-function actionLabel(item: ImportPlanItem): string | null {
-  switch (item.action) {
-    case "create":
-      return "new";
-    case "update":
-      return "updated";
-    case "delete":
-      return "removed";
-    case "keep_local":
-      return "edited";
-    case "ignored":
-      return "ignored";
-    default:
-      return null;
-  }
-}
-
-function actionHelp(item: ImportPlanItem): string | null {
-  const help = (text: string) =>
-    item.changedFields.length > 0
-      ? `${text} · ${item.changedFields.map(fieldLabel).join(", ")}`
-      : text;
-  switch (item.action) {
-    case "create":
-      return "Not in this workspace yet";
-    case "update":
-      return item.reason === "moved_into_ignored_folder"
-        ? "Moved into a folder that isn't imported. Importing that folder brings it along"
-        : help("Changed in the source since the last import");
-    case "delete":
-      return "Gone from the source since the last import. Checking it deletes it here";
-    case "keep_local":
-      return help("Changed here since the last import. Checking it reverts to the source");
-    case "conflict":
-      return help("Changed here and in the source since the last import");
-    case "ignored":
-      return "Not in this workspace. Imports leave it alone until you check it";
-    default:
-      return null;
-  }
-}
-
-function fieldLabel(field: string): string {
-  return field.replace(/([A-Z])/g, " $1").toLowerCase();
-}
-
-/** Every plan item above `item`, nearest first. */
-function ancestorsOf(item: ImportPlanItem, byId: Map<string, ImportPlanItem>): ImportPlanItem[] {
-  const ancestors: ImportPlanItem[] = [];
-  const seen = new Set<string>();
-  let parentId = item.parentId;
-  while (parentId != null && !seen.has(parentId)) {
-    seen.add(parentId);
-    const parent = byId.get(parentId);
-    if (parent == null) break;
-    ancestors.push(parent);
-    parentId = parent.parentId;
-  }
-  return ancestors;
-}
-
-/**
- * A row of the preview tree. Most are plan items, but the destination workspace and the group the
- * workspace's environments sit in are headings: they aggregate their children and decide nothing
- * themselves.
- */
-type TreeRow =
-  | { kind: "destination"; label: string; isNew: boolean }
-  | { kind: "group"; label: string }
-  | { kind: "item"; item: ImportPlanItem };
-
-function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
-  const byId = new Map(items.map((i) => [i.modelId, i]));
-  const childrenOf = new Map<string, ImportPlanItem[]>();
-  const roots: ImportPlanItem[] = [];
-  for (const item of items) {
-    if (item.parentId != null && byId.has(item.parentId)) {
-      const siblings = childrenOf.get(item.parentId) ?? [];
-      siblings.push(item);
-      childrenOf.set(item.parentId, siblings);
-    } else {
-      roots.push(item);
-    }
-  }
-
-  const byKind = (list: ImportPlanItem[]) => [
-    ...list.filter((i) => i.model === "environment"),
-    ...list.filter((i) => i.model === "folder"),
-    ...list.filter((i) => i.model !== "environment" && i.model !== "folder"),
-  ];
-
-  const toNode = (item: ImportPlanItem, seen: Set<string>): CheckboxTreeNode<TreeRow> => ({
-    key: item.modelId,
-    data: { kind: "item", item },
-    children: seen.has(item.modelId)
-      ? []
-      : byKind(childrenOf.get(item.modelId) ?? []).map((c) =>
-          toNode(c, new Set([...seen, item.modelId])),
-        ),
-  });
-
-  // The workspace's environments have nothing to sit under — a sub-environment is a sibling of
-  // the base one, not its child — so a heading groups them into one thing to turn on and off.
-  const environments = roots.filter((i) => i.model === "environment");
-  const others = byKind(roots.filter((i) => i.model !== "environment"));
-  const nodes = others.map((r) => toNode(r, new Set()));
-  if (environments.length === 0) return nodes;
-  return [
-    {
-      key: "group:environments",
-      data: { kind: "group", label: "Variables" },
-      children: environments.map((e) => toNode(e, new Set())),
-    },
-    ...nodes,
-  ];
-}
-
-function collectRows(node: CheckboxTreeNode<TreeRow>): TreeRow[] {
-  return [node.data, ...node.children.flatMap(collectRows)];
-}
-
-/** A folder that isn't there yet, so anything inside it needs it brought in first. */
-function isMissingFolder(item: ImportPlanItem): boolean {
-  return item.model === "folder" && (item.action === "create" || item.action === "ignored");
-}
-
-/**
- * The plan item a row's checkbox decides, if it decides one. An unchanged resource has nothing to
- * decide and a conflict is decided by its own control, so neither takes a checkbox — nor rides
- * along with a parent's.
- */
-function togglableItem(row: TreeRow): ImportPlanItem | null {
-  if (row.kind !== "item") return null;
-  const { item } = row;
-  return item.action === "unchanged" || item.action === "conflict" ? null : item;
-}
-
-function togglableItems(node: CheckboxTreeNode<TreeRow>): ImportPlanItem[] {
-  return collectRows(node)
-    .map(togglableItem)
-    .filter((i) => i != null);
-}
-
-function nodeCheckedStatus(node: CheckboxTreeNode<TreeRow>): boolean | "indeterminate" | "hidden" {
-  const covered = togglableItems(node);
-  if (covered.length === 0) return "hidden";
-  const selected = covered.filter((i) => i.selected).length;
-  if (selected === covered.length) return true;
-  if (selected === 0) return false;
-  return "indeterminate";
-}
-
-function PreviewRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-start justify-between gap-4 px-3 py-2 text-sm">
-      <span className="text-text-subtle">{label}</span>
-      <span className="text-right font-medium">{value}</span>
-    </div>
+        <div className="text-xs text-text-subtlest">
+          Supports OpenAPI, Swagger, Postman, Insomnia, and curl
+        </div>
+      </button>
+
+      <VStack space={2}>
+        <PlainInput
+          label="Or enter a file path or URL"
+          size="sm"
+          placeholder="https://example.com/openapi.json"
+          defaultValue={source ?? ""}
+          forceUpdateKey={String(forceUpdateKey)}
+          onChange={setSource}
+        />
+        <Button
+          color="primary"
+          disabled={trimmedSource === "" || isLoading}
+          isLoading={isLoading}
+          size="sm"
+          onClick={handleImport}
+        >
+          {isLoading ? "Importing" : "Import"}
+        </Button>
+      </VStack>
+    </VStack>
  );
 }
@@ -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>
-  );
-}
@@ -0,0 +1,122 @@
+import { linter } from "@codemirror/lint";
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { Banner, Icon } from "@yaakapp-internal/ui";
+import { useCallback, useMemo } from "react";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { fireAndForget } from "../lib/fireAndForget";
+import { textLikelyContainsJsonComments } from "../lib/jsonComments";
+import type { DropdownItem } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
+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;
+  heightMode: EditorProps["heightMode"];
+  request: HttpRequest;
+}
+
+export function JsonBodyEditor({ forceUpdateKey, heightMode, request }: Props) {
+  const handleChange = useCallback(
+    (text: string) => patchModel(request, { body: { ...request.body, text } }),
+    [request],
+  );
+
+  const autoFix = request.body?.sendJsonComments !== true;
+
+  const lintExtension = useMemo(
+    () =>
+      linter(
+        jsonParseLinter(
+          autoFix
+            ? { allowComments: true, allowTrailingCommas: true }
+            : { allowComments: false, allowTrailingCommas: false },
+        ),
+      ),
+    [autoFix],
+  );
+
+  const hasComments = useMemo(
+    () => textLikelyContainsJsonComments(request.body?.text ?? ""),
+    [request.body?.text],
+  );
+
+  const { value: bannerDismissed, set: setBannerDismissed } = useKeyValue<boolean>({
+    namespace: "no_sync",
+    key: ["json-fix-3", request.workspaceId],
+    fallback: false,
+  });
+
+  const handleToggleAutoFix = useCallback(() => {
+    const newBody = { ...request.body };
+    if (autoFix) {
+      newBody.sendJsonComments = true;
+    } else {
+      delete newBody.sendJsonComments;
+    }
+    fireAndForget(patchModel(request, { body: newBody }));
+  }, [request, autoFix]);
+
+  const handleDropdownOpen = useCallback(() => {
+    if (!bannerDismissed) {
+      fireAndForget(setBannerDismissed(true));
+    }
+  }, [bannerDismissed, setBannerDismissed]);
+
+  const showBanner = hasComments && autoFix && !bannerDismissed;
+
+  const stripMessage = "Automatically strip comments and trailing commas before sending";
+  const actions = useMemo<EditorProps["actions"]>(
+    () => [
+      showBanner && (
+        <Banner color="notice" className="opacity-100! h-sm py-0! px-2! flex items-center text-xs">
+          <p className="inline-flex items-center gap-1 min-w-0">
+            <span className="truncate">Auto-fix enabled</span>
+            <Icon icon="arrow_right" size="sm" className="opacity-disabled" />
+          </p>
+        </Banner>
+      ),
+      <div key="settings" className="opacity-100! shadow!">
+        <Dropdown
+          onOpen={handleDropdownOpen}
+          items={
+            [
+              {
+                label: "Automatically Fix JSON",
+                keepOpenOnSelect: true,
+                onSelect: handleToggleAutoFix,
+                rightSlot: <IconTooltip content={stripMessage} />,
+                leftSlot: (
+                  <Icon icon={autoFix ? "check_square_checked" : "check_square_unchecked"} />
+                ),
+              },
+            ] satisfies DropdownItem[]
+          }
+        >
+          <IconButton size="sm" variant="border" icon="settings" title="JSON Settings" />
+        </Dropdown>
+      </div>,
+    ],
+    [handleDropdownOpen, handleToggleAutoFix, autoFix, showBanner],
+  );
+
+  return (
+    <Editor
+      forceUpdateKey={forceUpdateKey}
+      autocompleteFunctions
+      autocompleteVariables
+      placeholder="..."
+      heightMode={heightMode}
+      defaultValue={`${request.body?.text ?? ""}`}
+      language="json"
+      onChange={handleChange}
+      stateKey={`json.${request.id}`}
+      actions={actions}
+      lintExtension={lintExtension}
+    />
+  );
+}
@@ -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 })),
@@ -1,8 +1,8 @@
-import { SegmentedControl } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useRef, useState } from "react";
 import type { EditorProps } from "./core/Editor/Editor";
 import { Editor } from "./core/Editor/LazyEditor";
+import { SegmentedControl } from "./core/SegmentedControl";
 import { Markdown } from "./Markdown";

 type ViewMode = "edit" | "preview";
@@ -2,9 +2,7 @@ import type {
  Folder,
  GrpcRequest,
  HttpRequest,
-  HttpVersion,
  InheritedBoolSetting,
-  InheritedHttpVersionSetting,
  InheritedIntSetting,
  WebsocketRequest,
  Workspace,
@@ -15,7 +13,6 @@ import {
  modelSupportsSetting,
  type RequestSettingDefinition,
  SETTING_FOLLOW_REDIRECTS,
-  SETTING_HTTP_VERSION,
  SETTING_REQUEST_MESSAGE_SIZE,
  SETTING_REQUEST_TIMEOUT,
  SETTING_SEND_COOKIES,
@@ -24,7 +21,6 @@ import {
 } from "../lib/requestSettings";
 import { Checkbox } from "./core/Checkbox";
 import { PlainInput } from "./core/PlainInput";
-import { Select } from "./core/Select";
 import {
  SettingOverrideRow,
  SettingRow,
@@ -42,21 +38,37 @@ interface Props {
  model: ModelWithSettings;
 }

-type ModelWithSettings = Workspace | Folder | HttpRequest | WebsocketRequest | GrpcRequest;
+type ModelWithSettings =
+  | Workspace
+  | Folder
+  | HttpRequest
+  | WebsocketRequest
+  | GrpcRequest;
 type ModelWithHttpSettings = Workspace | Folder | HttpRequest;
-type ModelWithTlsSettings = Workspace | Folder | HttpRequest | WebsocketRequest | GrpcRequest;
-type ModelWithCookieSettings = Workspace | Folder | HttpRequest | WebsocketRequest;
-type ModelWithMessageSizeSettings = Workspace | Folder | WebsocketRequest | GrpcRequest;
+type ModelWithTlsSettings =
+  | Workspace
+  | Folder
+  | HttpRequest
+  | WebsocketRequest
+  | GrpcRequest;
+type ModelWithCookieSettings =
+  | Workspace
+  | Folder
+  | HttpRequest
+  | WebsocketRequest;
+type ModelWithMessageSizeSettings =
+  | Workspace
+  | Folder
+  | WebsocketRequest
+  | GrpcRequest;
 type BooleanSetting = boolean | InheritedBoolSetting;
 type IntegerSetting = number | InheritedIntSetting;
-type HttpVersionSetting = HttpVersion | InheritedHttpVersionSetting;
 type CookieSettingsPatch = {
  settingSendCookies?: ModelWithCookieSettings["settingSendCookies"];
  settingStoreCookies?: ModelWithCookieSettings["settingStoreCookies"];
 };
 type HttpSettingsPatch = {
  settingFollowRedirects?: ModelWithHttpSettings["settingFollowRedirects"];
-  settingHttpVersion?: ModelWithHttpSettings["settingHttpVersion"];
  settingRequestTimeout?: ModelWithHttpSettings["settingRequestTimeout"];
 };
 type TlsSettingsPatch = {
@@ -66,7 +78,10 @@ type MessageSizeSettingsPatch = {
  settingRequestMessageSize?: ModelWithMessageSizeSettings["settingRequestMessageSize"];
 };

-export function ModelSettingsEditor({ model, showSectionTitles = false }: Props) {
+export function ModelSettingsEditor({
+  model,
+  showSectionTitles = false,
+}: Props) {
  const ancestors = useModelAncestors(model);
  const supportsHttpSettings = modelSupportsHttpSettings(model);
  const supportsCookieSettings = modelSupportsCookieSettings(model);
@@ -139,26 +154,12 @@ export function ModelSettingsEditor({ model, showSectionTitles = false }: Props)
              }
            />
          )}
-          {supportsHttpSettings && (
-            <HttpVersionSettingRow
-              settingDefinition={SETTING_HTTP_VERSION}
-              setting={model.settingHttpVersion}
-              inheritedValue={resolveInheritedValue(
-                ancestors,
-                SETTING_HTTP_VERSION.modelKey,
-                model.settingHttpVersion,
-              )}
-              onChange={(settingHttpVersion) =>
-                patchHttpSettings(model, {
-                  settingHttpVersion,
-                })
-              }
-            />
-          )}
        </SettingsSection>
      )}
      {supportsCookieSettings && (
-        <SettingsSection title={supportsTlsSettings || showSectionTitles ? "Cookies" : null}>
+        <SettingsSection
+          title={supportsTlsSettings || showSectionTitles ? "Cookies" : null}
+        >
          <BooleanSettingRow
            settingDefinition={SETTING_SEND_COOKIES}
            setting={model.settingSendCookies}
@@ -194,7 +195,7 @@ export function ModelSettingsEditor({ model, showSectionTitles = false }: Props)
 }

 export function countOverriddenSettings(model: ModelWithSettings) {
-  const settings: (BooleanSetting | IntegerSetting | HttpVersionSetting)[] = [];
+  const settings: (BooleanSetting | IntegerSetting)[] = [];

  if (modelSupportsCookieSettings(model)) {
    settings.push(model.settingSendCookies, model.settingStoreCookies);
@@ -203,22 +204,22 @@ export function countOverriddenSettings(model: ModelWithSettings) {
  settings.push(model.settingValidateCertificates);

  if (modelSupportsHttpSettings(model)) {
-    settings.push(
-      model.settingFollowRedirects,
-      model.settingRequestTimeout,
-      model.settingHttpVersion,
-    );
+    settings.push(model.settingFollowRedirects, model.settingRequestTimeout);
  }

  if (modelSupportsMessageSizeSettings(model)) {
    settings.push(model.settingRequestMessageSize);
  }

-  return settings.filter((setting) => isInheritedSetting(setting) && setting.enabled === true)
-    .length;
+  return settings.filter(
+    (setting) => isInheritedSetting(setting) && setting.enabled === true,
+  ).length;
 }

-function patchCookieSettings(model: ModelWithCookieSettings, patch: Partial<CookieSettingsPatch>) {
+function patchCookieSettings(
+  model: ModelWithCookieSettings,
+  patch: Partial<CookieSettingsPatch>,
+) {
  switch (model.model) {
    case "workspace":
      return patchModel(model, patch as Partial<Workspace>);
@@ -231,7 +232,10 @@ function patchCookieSettings(model: ModelWithCookieSettings, patch: Partial<Cook
  }
 }

-function patchHttpSettings(model: ModelWithHttpSettings, patch: Partial<HttpSettingsPatch>) {
+function patchHttpSettings(
+  model: ModelWithHttpSettings,
+  patch: Partial<HttpSettingsPatch>,
+) {
  switch (model.model) {
    case "workspace":
      return patchModel(model, patch as Partial<Workspace>);
@@ -242,7 +246,10 @@ function patchHttpSettings(model: ModelWithHttpSettings, patch: Partial<HttpSett
  }
 }

-function patchTlsSettings(model: ModelWithTlsSettings, patch: Partial<TlsSettingsPatch>) {
+function patchTlsSettings(
+  model: ModelWithTlsSettings,
+  patch: Partial<TlsSettingsPatch>,
+) {
  switch (model.model) {
    case "workspace":
      return patchModel(model, patch as Partial<Workspace>);
@@ -273,15 +280,21 @@ function patchMessageSizeSettings(
  }
 }

-function modelSupportsHttpSettings(model: ModelWithSettings): model is ModelWithHttpSettings {
+function modelSupportsHttpSettings(
+  model: ModelWithSettings,
+): model is ModelWithHttpSettings {
  return modelSupportsSetting(model, SETTING_REQUEST_TIMEOUT);
 }

-function modelSupportsCookieSettings(model: ModelWithSettings): model is ModelWithCookieSettings {
+function modelSupportsCookieSettings(
+  model: ModelWithSettings,
+): model is ModelWithCookieSettings {
  return modelSupportsSetting(model, SETTING_SEND_COOKIES);
 }

-function modelSupportsTlsSettings(model: ModelWithSettings): model is ModelWithTlsSettings {
+function modelSupportsTlsSettings(
+  model: ModelWithSettings,
+): model is ModelWithTlsSettings {
  return modelSupportsSetting(model, SETTING_VALIDATE_CERTIFICATES);
 }

@@ -304,7 +317,11 @@ function BooleanSettingRow({
 }) {
  const inherited = isInheritedSetting(setting);
  const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+  const value = inherited
+    ? overridden
+      ? setting.value
+      : inheritedValue
+    : setting;

  if (!inherited) {
    return (
@@ -335,63 +352,6 @@ function BooleanSettingRow({
  );
 }

-const HTTP_VERSION_OPTIONS: { label: string; value: HttpVersion }[] = [
-  { label: "Automatic", value: "auto" },
-  { label: "HTTP/1.1", value: "http1" },
-  { label: "HTTP/2", value: "http2" },
-];
-
-function HttpVersionSettingRow({
-  inheritedValue,
-  setting,
-  settingDefinition,
-  onChange,
-}: {
-  inheritedValue: HttpVersion;
-  setting: HttpVersionSetting;
-  settingDefinition: RequestSettingDefinition<"settingHttpVersion">;
-  onChange: (setting: HttpVersionSetting) => void;
-}) {
-  const inherited = isInheritedSetting(setting);
-  const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
-
-  if (!inherited) {
-    return (
-      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
-        <Select
-          hideLabel
-          name={settingDefinition.modelKey}
-          label={settingDefinition.title}
-          size="sm"
-          value={value}
-          options={HTTP_VERSION_OPTIONS}
-          onChange={(value) => onChange(value)}
-        />
-      </SettingRow>
-    );
-  }
-
-  return (
-    <SettingOverrideRow
-      title={settingDefinition.title}
-      description={settingDefinition.description}
-      overridden={overridden}
-      onResetOverride={() => onChange({ ...setting, enabled: false })}
-    >
-      <Select
-        hideLabel
-        name={settingDefinition.modelKey}
-        label={settingDefinition.title}
-        size="sm"
-        value={value}
-        options={HTTP_VERSION_OPTIONS}
-        onChange={(value) => onChange({ ...setting, enabled: true, value })}
-      />
-    </SettingOverrideRow>
-  );
-}
-
 function IntegerSettingRow({
  inheritedValue,
  setting,
@@ -405,11 +365,18 @@ function IntegerSettingRow({
 }) {
  const inherited = isInheritedSetting(setting);
  const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+  const value = inherited
+    ? overridden
+      ? setting.value
+      : inheritedValue
+    : setting;

  if (!inherited) {
    return (
-      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
+      <SettingRow
+        title={settingDefinition.title}
+        description={settingDefinition.description}
+      >
        <NumberUnitInput
          name={settingDefinition.modelKey}
          label={settingDefinition.title}
@@ -462,13 +429,20 @@ function MessageSizeSettingRow({
 }) {
  const inherited = isInheritedSetting(setting);
  const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+  const value = inherited
+    ? overridden
+      ? setting.value
+      : inheritedValue
+    : setting;
  const displayValue = formatMegabytes(value);
  const placeholder = "0";

  if (!inherited) {
    return (
-      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
+      <SettingRow
+        title={settingDefinition.title}
+        description={settingDefinition.description}
+      >
        <MessageSizeInput
          name={settingDefinition.modelKey}
          label={settingDefinition.title}
@@ -593,18 +567,13 @@ function resolveInheritedValue(
  key: BooleanWorkspaceSettingKey,
  fallback: BooleanSetting,
 ): boolean;
-function resolveInheritedValue(
-  ancestors: (Folder | Workspace)[],
-  key: "settingHttpVersion",
-  fallback: HttpVersionSetting,
-): HttpVersion;
 function resolveInheritedValue(
  ancestors: (Folder | Workspace)[],
  key: keyof WorkspaceSettings,
-  fallback: BooleanSetting | IntegerSetting | HttpVersionSetting,
+  fallback: BooleanSetting | IntegerSetting,
 ) {
  for (const ancestor of ancestors) {
-    const setting = ancestor[key] as BooleanSetting | IntegerSetting | HttpVersionSetting;
+    const setting = ancestor[key] as BooleanSetting | IntegerSetting;
    if (isInheritedSetting(setting)) {
      if (setting.enabled === true) {
        return setting.value;
@@ -620,7 +589,6 @@ function resolveInheritedValue(
 type WorkspaceSettings = Pick<
  Workspace,
  | "settingFollowRedirects"
-  | "settingHttpVersion"
  | "settingRequestMessageSize"
  | "settingRequestTimeout"
  | "settingSendCookies"
@@ -630,12 +598,14 @@ type WorkspaceSettings = Pick<

 type BooleanWorkspaceSettingKey = Exclude<
  keyof WorkspaceSettings,
-  "settingRequestTimeout" | "settingRequestMessageSize" | "settingHttpVersion"
+  "settingRequestTimeout" | "settingRequestMessageSize"
 >;

 function formatMegabytes(bytes: number) {
  const megabytes = bytes / BYTES_PER_MB;
-  return Number.isInteger(megabytes) ? `${megabytes}` : megabytes.toFixed(3).replace(/\.?0+$/, "");
+  return Number.isInteger(megabytes)
+    ? `${megabytes}`
+    : megabytes.toFixed(3).replace(/\.?0+$/, "");
 }

 function parseMegabytes(value: string) {
@@ -656,5 +626,9 @@ function isValidInteger(value: string) {
 function isValidMegabytes(value: string) {
  if (value === "") return true;
  const megabytes = Number(value);
-  return Number.isFinite(megabytes) && megabytes >= 0 && megabytes <= MAX_MESSAGE_SIZE_MB;
+  return (
+    Number.isFinite(megabytes) &&
+    megabytes >= 0 &&
+    megabytes <= MAX_MESSAGE_SIZE_MB
+  );
 }
@@ -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,
@@ -9,8 +9,13 @@ import {
  isYesterday,
 } from "date-fns";
 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[];
@@ -25,6 +30,12 @@ export const RecentHttpResponsesDropdown = function ResponsePane({
  onPinnedResponseId,
 }: Props) {
  const deleteAllResponses = useDeleteHttpResponses(activeResponse?.requestId);
+  const movedActionsBannerId = "response-actions-moved-to-response-menu-2026-07-02-v2";
+  const { value: dismissedMovedActions } = useKeyValue<boolean>({
+    namespace: "global",
+    key: ["dismiss-banner", movedActionsBannerId],
+    fallback: false,
+  });
  const latestResponseId = responses[0]?.id ?? "n/a";
  const responseHistoryItems: DropdownItem[] = [];
  let lastHistoryGroup: string | null = null;
@@ -115,6 +126,20 @@ export const RecentHttpResponsesDropdown = function ResponsePane({
          hidden: latestResponseId === activeResponse.id,
          disabled: responses.length === 0,
        },
+        {
+          type: "content",
+          hidden: dismissedMovedActions === true,
+          label: (
+            <DismissibleBanner
+              id={movedActionsBannerId}
+              color="info"
+              size="xs"
+              className="max-w-72"
+            >
+              <p>Copy and save actions moved to the Response tab menu.</p>
+            </DismissibleBanner>
+          ),
+        },
        {
          type: "separator",
          label: "Recent",
@@ -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;
 }
@@ -0,0 +1,102 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { lazy, Suspense } from "react";
+import { useHttpRequestBody } from "../hooks/useHttpRequestBody";
+import { getMimeTypeFromContentType, languageFromContentType } from "../lib/contentType";
+import { LoadingIcon } from "@yaakapp-internal/ui";
+import { 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 })),
+);
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function RequestBodyViewer({ response }: Props) {
+  return <RequestBodyViewerInner key={response.id} response={response} />;
+}
+
+function RequestBodyViewerInner({ response }: Props) {
+  const { data, isLoading, error } = useHttpRequestBody(response);
+
+  if (isLoading) {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+
+  if (error) {
+    return <EmptyStateText>Error loading request body: {error.message}</EmptyStateText>;
+  }
+
+  if (data?.bodyText == null || data.bodyText.length === 0) {
+    return <EmptyStateText>No request body</EmptyStateText>;
+  }
+
+  const { bodyText, body } = data;
+
+  // Try to detect language from content-type header that was sent
+  const contentTypeHeader = response.requestHeaders.find(
+    (h) => h.name.toLowerCase() === "content-type",
+  );
+  const contentType = contentTypeHeader?.value ?? null;
+  const mimeType = contentType ? getMimeTypeFromContentType(contentType).essence : null;
+  const language = languageFromContentType(contentType, bodyText);
+
+  // Route to appropriate viewer based on content type
+  if (mimeType?.match(/^multipart/i)) {
+    const boundary = contentType?.split("boundary=")[1] ?? "unknown";
+    // Create a copy because parseMultipart may detach the buffer
+    const bodyCopy = new Uint8Array(body);
+    return (
+      <MultipartViewer data={bodyCopy} boundary={boundary} idPrefix={`request.${response.id}`} />
+    );
+  }
+
+  if (mimeType?.match(/^image\/svg/i)) {
+    return <SvgViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^image/i)) {
+    return <ImageViewer data={body.buffer} />;
+  }
+
+  if (mimeType?.match(/^audio/i)) {
+    return <AudioViewer data={body} />;
+  }
+
+  if (mimeType?.match(/^video/i)) {
+    return <VideoViewer data={body} />;
+  }
+
+  if (mimeType?.match(/csv|tab-separated/i)) {
+    return <CsvViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^text\/html/i)) {
+    return <WebPageViewer html={bodyText} />;
+  }
+
+  if (mimeType?.match(/pdf/i)) {
+    return (
+      <Suspense fallback={<LoadingIcon />}>
+        <PdfViewer data={body} />
+      </Suspense>
+    );
+  }
+
+  return (
+    <TextViewer text={bodyText} language={language} stateKey={`request.body.${response.id}`} />
+  );
+}
@@ -1,20 +1,38 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
-import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { RequestMethodDropdown as BaseRequestMethodDropdown } from "@yaakapp-internal/ui";
-import { useAtomValue } from "jotai";
-import { memo, useCallback } from "react";
+import { patchModel } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { memo, useCallback, useMemo } from "react";
+import { showPrompt } from "../lib/prompt";
+import { Button } from "./core/Button";
+import type { DropdownItem } from "./core/Dropdown";
+import { HttpMethodTag, HttpMethodTagRaw } from "./core/HttpMethodTag";
+import { Icon } from "@yaakapp-internal/ui";
+import type { RadioDropdownItem } from "./core/RadioDropdown";
+import { RadioDropdown } from "./core/RadioDropdown";

 type Props = {
  request: HttpRequest;
  className?: string;
 };

-/** The shared method menu, writing to the request and coloured by the user's setting */
+const radioItems: RadioDropdownItem<string>[] = [
+  "GET",
+  "PUT",
+  "POST",
+  "PATCH",
+  "DELETE",
+  "OPTIONS",
+  "QUERY",
+  "HEAD",
+].map((m) => ({
+  value: m,
+  label: <HttpMethodTagRaw method={m} />,
+}));
+
 export const RequestMethodDropdown = memo(function RequestMethodDropdown({
  request,
  className,
 }: Props) {
-  const settings = useAtomValue(settingsAtom);
  const handleChange = useCallback(
    async (method: string) => {
      await patchModel(request, { method });
@@ -22,12 +40,39 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
    [request],
  );

+  const itemsAfter = useMemo<DropdownItem[]>(
+    () => [
+      {
+        key: "custom",
+        label: "CUSTOM",
+        leftSlot: <Icon icon="sparkles" />,
+        onSelect: async () => {
+          const newMethod = await showPrompt({
+            id: "custom-method",
+            label: "Http Method",
+            title: "Custom Method",
+            confirmText: "Save",
+            description: "Enter a custom method name",
+            placeholder: "CUSTOM",
+          });
+          if (newMethod == null) return;
+          await handleChange(newMethod);
+        },
+      },
+    ],
+    [handleChange],
+  );
+
  return (
-    <BaseRequestMethodDropdown
-      method={request.method}
-      colored={settings.coloredMethods}
+    <RadioDropdown
+      value={request.method}
+      items={radioItems}
+      itemsAfter={itemsAfter}
      onChange={handleChange}
-      className={className}
-    />
+    >
+      <Button size="xs" className={classNames(className, "text-text-subtle hover:text")}>
+        <HttpMethodTag request={request} noAlias />
+      </Button>
+    </RadioDropdown>
  );
 });
@@ -1,17 +1,14 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
 import classNames from "classnames";
 import { useMemo } from "react";
 import type { JSX } from "react/jsx-runtime";
-import { CountBadge } from "../CountBadge";
-import { DetailsBanner } from "../DetailsBanner";
-import { useEditorHost } from "../EditorHost";
-import { KeyValueRows } from "../KeyValueRow";
-import { KeyValueRow } from "./ResponseHeaders";
-import type { HttpResponseView } from "./types";
+import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
+import { CountBadge } from "./core/CountBadge";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";

 interface Props {
-  response: HttpResponseView;
-  /** Only the cookies sent or only those received, for a pane that shows one side */
-  side?: "sent" | "received";
+  response: HttpResponse;
 }

 interface ParsedCookie {
@@ -83,41 +80,45 @@ function parseSetCookieHeader(setCookieHeader: string): ParsedCookie {
  return cookie;
 }

-/** The cookies a response's headers sent and received, the latest value of each name winning */
-export function parseCookieHeaders({ sent, received }: HttpResponseView["cookieHeaders"]) {
-  const sentMap = new Map<string, { name: string; value: string }>();
-  const receivedMap = new Map<string, ParsedCookie>();
+export function ResponseCookies({ response }: Props) {
+  const { data: events } = useHttpResponseEvents(response);

-  for (const header of sent) {
-    for (const cookie of parseCookieHeader(header)) {
-      sentMap.set(cookie.name, cookie);
+  const { sentCookies, receivedCookies } = useMemo(() => {
+    if (!events) return { sentCookies: [], receivedCookies: [] };
+
+    // Use Maps to deduplicate by cookie name (latest value wins)
+    const sentMap = new Map<string, { name: string; value: string }>();
+    const receivedMap = new Map<string, ParsedCookie>();
+
+    for (const event of events) {
+      const e = event.event;
+
+      // Cookie headers sent (header_up with name=cookie)
+      if (e.type === "header_up" && e.name.toLowerCase() === "cookie") {
+        const cookies = parseCookieHeader(e.value);
+        for (const cookie of cookies) {
+          sentMap.set(cookie.name, cookie);
+        }
+      }
+
+      // Set-Cookie headers received (header_down with name=set-cookie)
+      if (e.type === "header_down" && e.name.toLowerCase() === "set-cookie") {
+        const cookie = parseSetCookieHeader(e.value);
+        receivedMap.set(cookie.name, cookie);
+      }
    }
-  }
-  for (const header of received) {
-    const cookie = parseSetCookieHeader(header);
-    receivedMap.set(cookie.name, cookie);
-  }

-  return {
-    sentCookies: Array.from(sentMap.values()),
-    receivedCookies: Array.from(receivedMap.values()),
-  };
-}
-
-export function ResponseCookies({ response, side }: Props) {
-  const { useDetailsBannerStoredValue } = useEditorHost();
-  const { sentCookies, receivedCookies } = useMemo(
-    () => parseCookieHeaders(response.cookieHeaders),
-    [response.cookieHeaders],
-  );
+    return {
+      sentCookies: Array.from(sentMap.values()),
+      receivedCookies: Array.from(receivedMap.values()),
+    };
+  }, [events]);

  return (
    <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
-      {side !== "received" && (
      <DetailsBanner
        defaultOpen
-        useStoredValue={useDetailsBannerStoredValue}
-        storageKey={`${response.ownerId}.sent_cookies`}
+        storageKey={`${response.requestId}.sent_cookies`}
        summary={
          <h2 className="flex items-center">
            Sent Cookies <CountBadge showZero count={sentCookies.length} />
@@ -137,13 +138,10 @@ export function ResponseCookies({ response, side }: Props) {
          </KeyValueRows>
        )}
      </DetailsBanner>
-      )}

-      {side !== "sent" && (
      <DetailsBanner
        defaultOpen
-        useStoredValue={useDetailsBannerStoredValue}
-        storageKey={`${response.ownerId}.received_cookies`}
+        storageKey={`${response.requestId}.received_cookies`}
        summary={
          <h2 className="flex items-center">
            Received Cookies <CountBadge showZero count={receivedCookies.length} />
@@ -218,7 +216,6 @@ export function ResponseCookies({ response, side }: Props) {
          </div>
        )}
      </DetailsBanner>
-      )}
    </div>
  );
 }
@@ -0,0 +1,110 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { format, formatDistanceToNowStrict } from "date-fns";
+import { useMemo } from "react";
+import { CountBadge } from "./core/CountBadge";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { IconButton } from "./core/IconButton";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { platform } from "@yaakapp-internal/platform";
+
+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>}>
+        <KeyValueRows>
+          <KeyValueRow labelColor="secondary" label="Sent">
+            <time
+              dateTime={new Date(`${response.createdAt}Z`).toISOString()}
+              title={formatDistanceToNowStrict(`${response.createdAt}Z`, { addSuffix: true })}
+            >
+              {format(`${response.createdAt}Z`, "MMM d, yyyy, h:mm:ss a O")}
+            </time>
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Request URL">
+            <div className="flex items-center gap-1">
+              <span className="select-text cursor-text">{response.url}</span>
+              <IconButton
+                iconSize="sm"
+                className="inline-block w-auto h-auto! opacity-50 hover:opacity-100"
+                icon="external_link"
+                onClick={() => platform.openUrl(response.url)}
+                title="Open in browser"
+              />
+            </div>
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Remote Address">
+            {response.remoteAddr ?? <span className="text-text-subtlest">--</span>}
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Version">
+            {response.version ?? <span className="text-text-subtlest">--</span>}
+          </KeyValueRow>
+        </KeyValueRows>
+      </DetailsBanner>
+      <DetailsBanner
+        storageKey={`${response.requestId}.request_headers`}
+        summary={
+          <h2 className="flex items-center">
+            Request Headers <CountBadge showZero count={requestHeaders.length} />
+          </h2>
+        }
+      >
+        {requestHeaders.length === 0 ? (
+          <NoHeaders />
+        ) : (
+          <KeyValueRows>
+            {requestHeaders.map((h, i) => (
+              // oxlint-disable-next-line react/no-array-index-key
+              <KeyValueRow labelColor="primary" key={i} label={h.name}>
+                {h.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+      <DetailsBanner
+        defaultOpen
+        storageKey={`${response.requestId}.response_headers`}
+        summary={
+          <h2 className="flex items-center">
+            Response Headers <CountBadge showZero count={responseHeaders.length} />
+          </h2>
+        }
+      >
+        {responseHeaders.length === 0 ? (
+          <NoHeaders />
+        ) : (
+          <KeyValueRows>
+            {responseHeaders.map((h, i) => (
+              // oxlint-disable-next-line react/no-array-index-key
+              <KeyValueRow labelColor="info" key={i} label={h.name}>
+                {h.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+    </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,20 +1,15 @@
+import { useSearch } from "@tanstack/react-router";
 import { platform } from "@yaakapp-internal/platform";
 import { useLicense } from "@yaakapp-internal/license";
 import { pluginsAtom, settingsAtom } from "@yaakapp-internal/models";
-import {
-  CountBadge,
-  SETTINGS_TAB_GENERAL,
-  SETTINGS_TAB_INTERFACE,
-  SETTINGS_TAB_LICENSE,
-  SETTINGS_TAB_THEME,
-  SettingsDialog,
-  type SettingsTabDef,
-} 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 { SettingsAgents } from "./SettingsAgents";
+import { CountBadge } from "../core/CountBadge";
+import { TabContent, type TabItem, Tabs } from "../core/Tabs/Tabs";
 import { SettingsCertificates } from "./SettingsCertificates";
 import { SettingsGeneral } from "./SettingsGeneral";
 import { SettingsHotkeys } from "./SettingsHotkeys";
@@ -25,98 +20,141 @@ import { SettingsProxy } from "./SettingsProxy";
 import { SettingsTheme } from "./SettingsTheme";

 interface Props {
-  tab?: SettingsTabWithSubtab | null;
-  /** Set when Settings is in a dialog rather than owning a window. */
  hide?: () => void;
 }

-const TAB_GENERAL = SETTINGS_TAB_GENERAL;
-const TAB_INTERFACE = SETTINGS_TAB_INTERFACE;
-const TAB_THEME = SETTINGS_TAB_THEME;
+const TAB_GENERAL = "general";
+const TAB_INTERFACE = "interface";
+const TAB_THEME = "theme";
 const TAB_SHORTCUTS = "shortcuts";
 const TAB_PROXY = "proxy";
 const TAB_CERTIFICATES = "certificates";
 const TAB_PLUGINS = "plugins";
-const TAB_AGENTS = "agents";
-const TAB_LICENSE = SETTINGS_TAB_LICENSE;
+const TAB_LICENSE = "license";
 const tabs = [
  TAB_GENERAL,
  TAB_THEME,
  TAB_INTERFACE,
  TAB_SHORTCUTS,
  TAB_PLUGINS,
-  TAB_AGENTS,
  TAB_CERTIFICATES,
  TAB_PROXY,
  TAB_LICENSE,
 ] as const;
 export type SettingsTab = (typeof tabs)[number];
-export type SettingsTabWithSubtab = SettingsTab | `${SettingsTab}:${string}`;

-export default function Settings({ tab, hide }: Props) {
+export default function Settings({ hide }: Props) {
+  const { tab: tabFromQuery } = useSearch({ from: "/workspaces/$workspaceId/settings" });
  // Parse tab and subtab (e.g., "plugins:installed")
-  const [mainTab, subtab] = tab?.split(":") ?? [];
+  const [mainTab, subtab] = tabFromQuery?.split(":") ?? [];
  const settings = useAtomValue(settingsAtom);
  const plugins = useAtomValue(pluginsAtom);
  const licenseCheck = useLicense();

-  // Close settings window on escape. In a dialog, the dialog handles Escape itself.
+  // Close settings window on escape
  // TODO: Could this be put in a better place? Eg. in Rust key listener when creating the window
  useKeyPressEvent("Escape", async () => {
-    if (hide == null) await platform.window.close();
+    if (hide != null) {
+      // It's being shown in a dialog, so close the dialog
+      hide();
+    } else {
+      // It's being shown in a window, so close the window
+      await platform.window.close();
+    }
  });

-  const tabDefs: Record<SettingsTab, Omit<SettingsTabDef, "value" | "label">> = {
-    [TAB_GENERAL]: { icon: "settings", content: <SettingsGeneral /> },
-    [TAB_THEME]: { icon: "palette", content: <SettingsTheme /> },
-    [TAB_INTERFACE]: { icon: "columns_2", content: <SettingsInterface /> },
-    [TAB_SHORTCUTS]: { icon: "keyboard", content: <SettingsHotkeys /> },
-    [TAB_PLUGINS]: {
-      icon: "puzzle",
-      rightSlot: <CountBadge count={plugins.filter((p) => p.source !== "bundled").length} />,
-      content: <SettingsPlugins defaultSubtab={mainTab === TAB_PLUGINS ? subtab : undefined} />,
-      contentClassName: "h-full grid grid-rows-1",
-    },
-    [TAB_AGENTS]: {
-      icon: "sparkles",
-      hidden: !platform.capabilities.agents,
-      content: <SettingsAgents />,
-    },
-    [TAB_CERTIFICATES]: {
-      icon: "shield_check",
-      rightSlot: <CountBadge count={settings.clientCertificates.length} />,
-      content: <SettingsCertificates />,
-    },
-    [TAB_PROXY]: {
-      icon: "wifi",
-      rightSlot: settings.proxy?.type === "enabled" ? <CountBadge count /> : null,
-      content: <SettingsProxy />,
-    },
-    [TAB_LICENSE]: {
-      icon: "key_round",
-      hidden: !appInfo.featureLicense,
-      rightSlot:
-        licenseCheck.check.data?.status === "personal_use" ? (
-          <CountBadge count color="notice" />
-        ) : null,
-      content: <SettingsLicense />,
-    },
-  };
-
  return (
-    <SettingsDialog
-      defaultTab={mainTab}
-      titlebar={
-        hide
-          ? null
-          : {
-              osType: platform.osType(),
-              hideWindowControls: settings.hideWindowControls,
-              useNativeTitlebar: settings.useNativeTitlebar,
-              interfaceScale: settings.interfaceScale,
-            }
-      }
-      tabs={tabs.map((value) => ({ value, label: capitalize(value), ...tabDefs[value] }))}
-    />
+    <div className={classNames("grid grid-rows-[auto_minmax(0,1fr)] h-full")}>
+      {hide ? (
+        <span />
+      ) : (
+        <HeaderSize
+          data-tauri-drag-region
+          ignoreControlsSpacing
+          onlyXWindowControl
+          size="md"
+          className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
+          osType={platform.osType()}
+          hideWindowControls={settings.hideWindowControls}
+          useNativeTitlebar={settings.useNativeTitlebar}
+          interfaceScale={settings.interfaceScale}
+        >
+          <HStack
+            space={2}
+            justifyContent="center"
+            className="w-full h-full grid grid-cols-[1fr_auto] pointer-events-none"
+          >
+            <div className={classNames(platform.osType() === "macos" ? "text-center" : "pl-2")}>Settings</div>
+          </HStack>
+        </HeaderSize>
+      )}
+      <Tabs
+        layout="horizontal"
+        defaultValue={mainTab || tabFromQuery}
+        addBorders
+        tabListClassName="min-w-40 bg-surface x-theme-sidebar border-r border-border pl-3"
+        label="Settings"
+        tabs={tabs.map(
+          (value): TabItem => ({
+            value,
+            label: capitalize(value),
+            hidden: !appInfo.featureLicense && value === TAB_LICENSE,
+            leftSlot:
+              value === TAB_GENERAL ? (
+                <Icon icon="settings" className="text-secondary" />
+              ) : value === TAB_THEME ? (
+                <Icon icon="palette" className="text-secondary" />
+              ) : value === TAB_INTERFACE ? (
+                <Icon icon="columns_2" className="text-secondary" />
+              ) : value === TAB_SHORTCUTS ? (
+                <Icon icon="keyboard" className="text-secondary" />
+              ) : value === TAB_CERTIFICATES ? (
+                <Icon icon="shield_check" className="text-secondary" />
+              ) : value === TAB_PROXY ? (
+                <Icon icon="wifi" className="text-secondary" />
+              ) : value === TAB_PLUGINS ? (
+                <Icon icon="puzzle" className="text-secondary" />
+              ) : value === TAB_LICENSE ? (
+                <Icon icon="key_round" className="text-secondary" />
+              ) : null,
+            rightSlot:
+              value === TAB_CERTIFICATES ? (
+                <CountBadge count={settings.clientCertificates.length} />
+              ) : value === TAB_PLUGINS ? (
+                <CountBadge count={plugins.filter((p) => p.source !== "bundled").length} />
+              ) : value === TAB_PROXY && settings.proxy?.type === "enabled" ? (
+                <CountBadge count />
+              ) : value === TAB_LICENSE && licenseCheck.check.data?.status === "personal_use" ? (
+                <CountBadge count color="notice" />
+              ) : null,
+          }),
+        )}
+      >
+        <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsGeneral />
+        </TabContent>
+        <TabContent value={TAB_INTERFACE} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsInterface />
+        </TabContent>
+        <TabContent value={TAB_THEME} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsTheme />
+        </TabContent>
+        <TabContent value={TAB_SHORTCUTS} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsHotkeys />
+        </TabContent>
+        <TabContent value={TAB_PLUGINS} className="h-full grid grid-rows-1">
+          <SettingsPlugins defaultSubtab={mainTab === TAB_PLUGINS ? subtab : undefined} />
+        </TabContent>
+        <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsProxy />
+        </TabContent>
+        <TabContent value={TAB_CERTIFICATES} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsCertificates />
+        </TabContent>
+        <TabContent value={TAB_LICENSE} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsLicense />
+        </TabContent>
+      </Tabs>
+    </div>
  );
 }
@@ -1,131 +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, Icon, InlineCode, SegmentedControl, SettingsPage } 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 { 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 (
-    <SettingsPage
-      title="Agents"
-      description="Connect AI coding agents like Claude Code and Cursor to Yaak."
-    >
-      <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>
-    </SettingsPage>
-  );
-}
@@ -1,6 +1,6 @@
 import type { ClientCertificate } from "@yaakapp-internal/models";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { HStack, InlineCode, SettingsPage, VStack } from "@yaakapp-internal/ui";
+import { Heading, HStack, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useRef } from "react";
 import { showConfirmDelete } from "../../lib/confirm";
@@ -218,19 +218,24 @@ export function SettingsCertificates() {
  };

  return (
-    <SettingsPage
-      title="Client Certificates"
-      description="Add and manage TLS certificates on a per domain basis"
-      actions={
-        <Button variant="border" size="sm" color="secondary" onClick={handleAdd}>
-          Add Certificate
-        </Button>
-      }
-      banner={
-        <CommercialUseBanner source="client-certificates" title="Using certificates for work?" />
-      }
-    >
-      {certificates.length > 0 ? (
+    <VStack space={3}>
+      <div className="mb-3">
+        <HStack justifyContent="between" alignItems="start">
+          <div>
+            <Heading>Client Certificates</Heading>
+            <p className="text-text-subtle">
+              Add and manage TLS certificates on a per domain basis
+            </p>
+          </div>
+          <Button variant="border" size="sm" color="secondary" onClick={handleAdd}>
+            Add Certificate
+          </Button>
+        </HStack>
+      </div>
+
+      <CommercialUseBanner source="client-certificates" title="Using certificates for work?" />
+
+      {certificates.length > 0 && (
        <VStack space={3}>
          {certificates.map((cert, index) => (
            <CertificateEditor
@@ -243,7 +248,7 @@ export function SettingsCertificates() {
            />
          ))}
        </VStack>
-      ) : null}
-    </SettingsPage>
+      )}
+    </VStack>
  );
 }
@@ -1,17 +1,32 @@
-import { settingsAtom } from "@yaakapp-internal/models";
-import { SettingsGeneral as SharedSettingsGeneral } from "@yaakapp-internal/ui";
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { Heading, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
-import { useSettingsView } from "../../hooks/useSettingsView";
+import { useCheckForUpdates } from "../../hooks/useCheckForUpdates";
+import { appInfo } from "../../lib/appInfo";
+import { revealInFinderText } from "../../lib/reveal";
+import { CargoFeature } from "../CargoFeature";
 import { CommercialUseBanner } from "../CommercialUseBanner";
 import { DismissibleBanner } from "../core/DismissibleBanner";
+import { IconButton } from "../core/IconButton";
+import { platform } from "@yaakapp-internal/platform";
+import {
+  ModelSettingRowBoolean,
+  ModelSettingSelectControl,
+  SettingValue,
+  SettingRow,
+  SettingRowBoolean,
+  SettingRowSelect,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";

 const WORKSPACE_SETTINGS_MOVED_AT = "2026-06-30";

 export function SettingsGeneral() {
  const settings = useAtomValue(settingsAtom);
-  const bound = useSettingsView();
+  const checkForUpdates = useCheckForUpdates();

-  if (settings == null || bound == null) {
+  if (settings == null) {
    return null;
  }

@@ -19,24 +34,147 @@ export function SettingsGeneral() {
    settings.createdAt.slice(0, 10) < WORKSPACE_SETTINGS_MOVED_AT;

  return (
-    <SharedSettingsGeneral
-      view={bound.view}
-      callbacks={bound.callbacks}
-      banner={<CommercialUseBanner source="settings-general" title="Using Yaak for work?" />}
-      extraSections={
-        showWorkspaceSettingsMovedBanner && (
+    <VStack space={1.5} className="mb-4">
+      <div>
+        <Heading>General</Heading>
+        <p className="text-text-subtle">
+          Configure general settings for update behavior and more.
+        </p>
+      </div>
+      <div className="mt-3 mb-5">
+        <CommercialUseBanner source="settings-general" title="Using Yaak for work?" />
+      </div>
+      <SettingsList className="space-y-8">
+        <CargoFeature feature="updater">
+          <SettingsSection title="Updates">
+            <SettingRow
+              title="Update Channel"
+              description="Choose whether Yaak should use stable releases or beta releases."
+            >
+              <div className="grid grid-cols-[12rem_auto] gap-1">
+                <ModelSettingSelectControl
+                  model={settings}
+                  modelKey="updateChannel"
+                  label="Update Channel"
+                  selectClassName="w-full!"
+                  options={[
+                    { label: "Stable", value: "stable" },
+                    { label: "Beta", value: "beta" },
+                  ]}
+                />
+                <IconButton
+                  variant="border"
+                  size="sm"
+                  title="Check for updates"
+                  icon="refresh"
+                  spin={checkForUpdates.isPending}
+                  onClick={() => checkForUpdates.mutateAsync()}
+                />
+              </div>
+            </SettingRow>
+
+            <SettingRowSelect
+              title="Update Behavior"
+              description="Choose whether updates are installed automatically or manually."
+              name="autoupdate"
+              value={settings.autoupdate ? "auto" : "manual"}
+              onChange={(v) =>
+                patchModel(settings, { autoupdate: v === "auto" })
+              }
+              options={[
+                { label: "Automatic", value: "auto" },
+                { label: "Manual", value: "manual" },
+              ]}
+            />
+
+            <ModelSettingRowBoolean
+              model={settings}
+              modelKey="autoDownloadUpdates"
+              title="Automatically download updates"
+              description="Download Yaak updates in the background so they are ready to install."
+              disabled={!settings.autoupdate}
+            />
+
+            <ModelSettingRowBoolean
+              model={settings}
+              modelKey="checkNotifications"
+              title="Check for notifications"
+              description="Periodically ping Yaak servers to check for relevant notifications."
+            />
+
+            <SettingRowBoolean
+              title="Send anonymous usage statistics"
+              description="Yaak is local-first and does not collect analytics or usage data."
+              disabled
+              checked={false}
+              onChange={() => {}}
+            />
+          </SettingsSection>
+        </CargoFeature>
+
+        <CargoFeature feature="license">
+          <SettingsSection title="Feedback">
+            <SettingRowBoolean
+              title="Prompt for feedback"
+              description="Show rare one-time prompts asking how new features are working."
+              checked={settings.promptFeedback}
+              onChange={(promptFeedback) => patchModel(settings, { promptFeedback })}
+            />
+          </SettingsSection>
+        </CargoFeature>
+
+        {showWorkspaceSettingsMovedBanner && (
          <DismissibleBanner
            id="workspace-settings-moved-2026-06-30"
            color="info"
            className="w-full p-4 max-w-xl mr-auto"
          >
            <p>
-              Workspace specific settings have moved to <b>Workspace Settings</b>, accessible from
-              the workspace switcher menu.
+              Workspace specific settings have moved to{" "}
+              <b>Workspace Settings</b>, accessible from the workspace switcher
+              menu.
            </p>
          </DismissibleBanner>
-        )
-      }
-    />
+        )}
+
+        <SettingsSection title="App Info">
+          <SettingRow title="Version" description="Current Yaak version.">
+            <SettingValue value={appInfo.version} />
+          </SettingRow>
+          <SettingRow
+            title="Data Directory"
+            description="Where Yaak stores application data."
+            controlClassName="min-w-0 max-w-[min(42rem,55vw)] gap-2"
+          >
+            <SettingValue
+              value={appInfo.appDataDir}
+              actions={[
+                {
+                  title: revealInFinderText,
+                  icon: "folder_open",
+                  onClick: () => platform.revealItemInDir(appInfo.appDataDir),
+                },
+              ]}
+            />
+          </SettingRow>
+          <SettingRow
+            title="Logs Directory"
+            description="Where Yaak writes application logs."
+            controlClassName="min-w-0 max-w-[min(42rem,55vw)] gap-2"
+          >
+            <SettingValue
+              value={appInfo.appLogDir}
+              actions={[
+                {
+                  title: revealInFinderText,
+                  icon: "folder_open",
+                  onClick: () => platform.revealItemInDir(appInfo.appLogDir),
+                },
+              ]}
+            />
+          </SettingRow>
+        </SettingsSection>
+      </SettingsList>
+    </VStack>
  );
 }
@@ -1,8 +1,8 @@
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
 import {
+  Heading,
  HStack,
  Icon,
-  SettingsPage,
  Table,
  TableBody,
  TableCell,
@@ -94,58 +94,59 @@ export function SettingsHotkeys() {
  }

  return (
-    <SettingsPage
-      title="Keyboard Shortcuts"
-      description="Click the menu button to add, remove, or reset keyboard shortcuts."
-    >
-      <VStack space={3}>
-        <PlainInput
-          label="Filter"
-          placeholder="Filter shortcuts..."
-          defaultValue={filter}
-          onChange={setFilter}
-          hideLabel
-          containerClassName="max-w-xs"
-        />
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableHeaderCell>Scope</TableHeaderCell>
-              <TableHeaderCell>Action</TableHeaderCell>
-              <TableHeaderCell>Shortcut</TableHeaderCell>
-              <TableHeaderCell></TableHeaderCell>
-            </TableRow>
-          </TableHead>
-          {/* key={filter} forces re-render on filter change to fix Safari table rendering bug */}
-          <TableBody key={filter}>
-            {filteredActions.map((action) => (
-              <HotkeyRow
-                key={action}
-                action={action}
-                currentKeys={hotkeys[action] ?? []}
-                defaultKeys={defaultHotkeys[action]}
-                onSave={async (keys) => {
-                  const newHotkeys = { ...settings.hotkeys };
-                  if (arraysEqual(keys, defaultHotkeys[action])) {
-                    // Remove from settings if it matches default (use default)
-                    delete newHotkeys[action];
-                  } else {
-                    // Store the keys (including empty array to disable)
-                    newHotkeys[action] = keys;
-                  }
-                  await patchModel(settings, { hotkeys: newHotkeys });
-                }}
-                onReset={async () => {
-                  const newHotkeys = { ...settings.hotkeys };
+    <VStack space={3} className="mb-4">
+      <div className="mb-3">
+        <Heading>Keyboard Shortcuts</Heading>
+        <p className="text-text-subtle">
+          Click the menu button to add, remove, or reset keyboard shortcuts.
+        </p>
+      </div>
+      <PlainInput
+        label="Filter"
+        placeholder="Filter shortcuts..."
+        defaultValue={filter}
+        onChange={setFilter}
+        hideLabel
+        containerClassName="max-w-xs"
+      />
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Scope</TableHeaderCell>
+            <TableHeaderCell>Action</TableHeaderCell>
+            <TableHeaderCell>Shortcut</TableHeaderCell>
+            <TableHeaderCell></TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        {/* key={filter} forces re-render on filter change to fix Safari table rendering bug */}
+        <TableBody key={filter}>
+          {filteredActions.map((action) => (
+            <HotkeyRow
+              key={action}
+              action={action}
+              currentKeys={hotkeys[action]}
+              defaultKeys={defaultHotkeys[action]}
+              onSave={async (keys) => {
+                const newHotkeys = { ...settings.hotkeys };
+                if (arraysEqual(keys, defaultHotkeys[action])) {
+                  // Remove from settings if it matches default (use default)
                  delete newHotkeys[action];
-                  await patchModel(settings, { hotkeys: newHotkeys });
-                }}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      </VStack>
-    </SettingsPage>
+                } else {
+                  // Store the keys (including empty array to disable)
+                  newHotkeys[action] = keys;
+                }
+                await patchModel(settings, { hotkeys: newHotkeys });
+              }}
+              onReset={async () => {
+                const newHotkeys = { ...settings.hotkeys };
+                delete newHotkeys[action];
+                await patchModel(settings, { hotkeys: newHotkeys });
+              }}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </VStack>
  );
 }

@@ -1,30 +1,59 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useFonts } from "@yaakapp-internal/fonts";
 import { useLicense } from "@yaakapp-internal/license";
-import type { Settings } from "@yaakapp-internal/models";
+import type { EditorKeymap, Settings } from "@yaakapp-internal/models";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { SettingsInterface as SharedSettingsInterface, VStack } from "@yaakapp-internal/ui";
+import { clamp, Heading, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
+import { useState } from "react";
 import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
-import { useSettingsView } from "../../hooks/useSettingsView";
 import { showConfirm } from "../../lib/confirm";
 import { pricingUrl } from "../../lib/pricingUrl";
+import { rpc } from "../../lib/rpc";
 import { CargoFeature } from "../CargoFeature";
+import { Button } from "../core/Button";
+import { Checkbox } from "../core/Checkbox";
 import { Link } from "../core/Link";
-import { SettingRowBoolean, SettingRowSelect, SettingsSection } from "../core/SettingRow";
+import {
+  ModelSettingRowBoolean,
+  ModelSettingRowSelect,
+  SettingRow,
+  SettingRowBoolean,
+  SettingRowSelect,
+  SettingSelectControl,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";
+
+const NULL_FONT_VALUE = "__NULL_FONT__";
+
+const fontSizeOptions = [
+  8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+].map((n) => ({ label: `${n}`, value: `${n}` }));
+
+const keymaps: { value: EditorKeymap; label: string }[] = [
+  { value: "default", label: "Default" },
+  { value: "vim", label: "Vim" },
+  { value: "vscode", label: "VSCode" },
+  { value: "emacs", label: "Emacs" },
+];

 export function SettingsInterface() {
  const workspace = useAtomValue(activeWorkspaceAtom);
  const settings = useAtomValue(settingsAtom);
-  const bound = useSettingsView();
+  const fonts = useFonts();

-  if (settings == null || workspace == null || bound == null) {
+  if (settings == null || workspace == null) {
    return null;
  }

  return (
-    <SharedSettingsInterface
-      view={bound.view}
-      callbacks={bound.callbacks}
-      leadingSections={
+    <VStack space={1.5} className="mb-4">
+      <div className="mb-3">
+        <Heading>Interface</Heading>
+        <p className="text-text-subtle">Tweak settings related to the user interface.</p>
+      </div>
+      <SettingsList className="space-y-8">
        <SettingsSection title="Workspaces">
          <SettingRowSelect
            title="Open workspace behavior"
@@ -49,13 +78,151 @@ export function SettingsInterface() {
            ]}
          />
        </SettingsSection>
-      }
-      trailingSections={
+
+        <SettingsSection title="Fonts">
+          <SettingRow
+            title="Interface font"
+            description="Font used for Yaak interface controls."
+            controlClassName="gap-1"
+          >
+            {fonts.data && (
+              <SettingSelectControl
+                name="uiFont"
+                label="Interface font"
+                selectClassName="w-72!"
+                value={settings.interfaceFont ?? NULL_FONT_VALUE}
+                defaultValue={NULL_FONT_VALUE}
+                options={[
+                  { label: "System default", value: NULL_FONT_VALUE },
+                  ...fonts.data.uiFonts.map((f) => ({ label: f, value: f })),
+                  ...fonts.data.editorFonts.map((f) => ({ label: f, value: f })),
+                ]}
+                onChange={async (v) => {
+                  const interfaceFont = v === NULL_FONT_VALUE ? null : v;
+                  await patchModel(settings, { interfaceFont });
+                }}
+              />
+            )}
+            <SettingSelectControl
+              name="interfaceFontSize"
+              label="Interface Font Size"
+              selectClassName="w-20!"
+              value={`${settings.interfaceFontSize}`}
+              defaultValue="14"
+              options={fontSizeOptions}
+              onChange={(v) => patchModel(settings, { interfaceFontSize: Number.parseInt(v, 10) })}
+            />
+          </SettingRow>
+
+          <SettingRow
+            title="Editor font"
+            description="Font used in request and response editors."
+            controlClassName="gap-1"
+          >
+            {fonts.data && (
+              <SettingSelectControl
+                name="editorFont"
+                label="Editor font"
+                selectClassName="w-72!"
+                value={settings.editorFont ?? NULL_FONT_VALUE}
+                defaultValue={NULL_FONT_VALUE}
+                options={[
+                  { label: "System default", value: NULL_FONT_VALUE },
+                  ...fonts.data.editorFonts.map((f) => ({ label: f, value: f })),
+                ]}
+                onChange={async (v) => {
+                  const editorFont = v === NULL_FONT_VALUE ? null : v;
+                  await patchModel(settings, { editorFont });
+                }}
+              />
+            )}
+            <SettingSelectControl
+              name="editorFontSize"
+              label="Editor Font Size"
+              selectClassName="w-20!"
+              value={`${settings.editorFontSize}`}
+              defaultValue="12"
+              options={fontSizeOptions}
+              onChange={(v) =>
+                patchModel(settings, {
+                  editorFontSize: clamp(Number.parseInt(v, 10) || 14, 8, 30),
+                })
+              }
+            />
+          </SettingRow>
+        </SettingsSection>
+
+        <SettingsSection title="Editor">
+          <ModelSettingRowSelect
+            model={settings}
+            modelKey="editorKeymap"
+            title="Editor keymap"
+            description="Keyboard shortcut preset used by text editors."
+            options={keymaps}
+          />
+          <ModelSettingRowBoolean
+            model={settings}
+            modelKey="editorSoftWrap"
+            title="Wrap editor lines"
+            description="Wrap long lines in request and response editors."
+          />
+          <ModelSettingRowBoolean
+            model={settings}
+            modelKey="coloredMethods"
+            title="Colorize request methods"
+            description="Use method-specific colors for HTTP request methods."
+          />
+        </SettingsSection>
+
+        <SettingsSection title="Window">
+          <NativeTitlebarSetting settings={settings} />
+          {platform.osType() !== "macos" && (
+            <ModelSettingRowBoolean
+              model={settings}
+              modelKey="hideWindowControls"
+              title="Hide window controls"
+              description="Hide the close, maximize, and minimize controls on Windows or Linux."
+            />
+          )}
+        </SettingsSection>
+
        <CargoFeature feature="license">
          <LicenseSettings settings={settings} />
        </CargoFeature>
-      }
-    />
+      </SettingsList>
+    </VStack>
+  );
+}
+
+function NativeTitlebarSetting({ settings }: { settings: Settings }) {
+  const [nativeTitlebar, setNativeTitlebar] = useState(settings.useNativeTitlebar);
+
+  return (
+    <SettingRow
+      title="Native title bar"
+      description="Use the operating system's standard title bar and window controls."
+      controlClassName="gap-2"
+    >
+      <Checkbox
+        hideLabel
+        size="md"
+        checked={nativeTitlebar}
+        title="Native title bar"
+        onChange={setNativeTitlebar}
+      />
+      {settings.useNativeTitlebar !== nativeTitlebar && (
+        <Button
+          color="primary"
+          size="xs"
+          onClick={async () => {
+            await patchModel(settings, { useNativeTitlebar: nativeTitlebar });
+            await rpc("cmd_restart");
+          }}
+        >
+          Apply and Restart
+        </Button>
+      )}
+    </SettingRow>
  );
 }

@@ -1,6 +1,17 @@
-import { SettingsLicense as SharedSettingsLicense } from "@yaakapp-internal/ui";
-import { useSettingsView } from "../../hooks/useSettingsView";
+import { useLicense } from "@yaakapp-internal/license";
+import { Banner, HStack, Icon, VStack } from "@yaakapp-internal/ui";
+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";
+import { Link } from "../core/Link";
+import { PlainInput } from "../core/PlainInput";
+import { Separator } from "../core/Separator";
+import { platform } from "@yaakapp-internal/platform";

 export function SettingsLicense() {
  return (
@@ -11,7 +22,166 @@ export function SettingsLicense() {
 }

 function SettingsLicenseCmp() {
-  const bound = useSettingsView();
-  if (bound == null) return null;
-  return <SharedSettingsLicense view={bound.view} callbacks={bound.callbacks} />;
+  const { check, activate, deactivate } = useLicense();
+  const [key, setKey] = useState<string>("");
+  const [activateFormVisible, toggleActivateFormVisible] = useToggle(false);
+
+  if (check.isPending) {
+    return null;
+  }
+
+  const renderBanner = () => {
+    if (!check.data) return null;
+
+    switch (check.data.status) {
+      case "active":
+        return <Banner color="success">Your license is active 🥳</Banner>;
+
+      case "trialing":
+        return (
+          <Banner color="info" className="max-w-lg">
+            <p className="w-full">
+              <strong>
+                {pluralizeCount("day", differenceInDays(check.data.data.end, new Date()))}
+              </strong>{" "}
+              left to evaluate Yaak for commercial use.
+              <br />
+              <span className="opacity-50">Personal use is always free, forever.</span>
+              <Separator className="my-2" />
+              <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
+                <Link noUnderline href={pricingUrl(`app.license.learn.${check.data.status}`)}>
+                  Learn More
+                </Link>
+              </div>
+            </p>
+          </Banner>
+        );
+
+      case "personal_use":
+        return (
+          <Banner color="notice" className="max-w-lg">
+            <p className="w-full">
+              Your commercial-use trial has ended.
+              <br />
+              <span className="opacity-50">
+                You may continue using Yaak for personal use only.
+                <br />A license is required for commercial use.
+              </span>
+              <Separator className="my-2" />
+              <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
+                <Link noUnderline href={pricingUrl(`app.license.learn.${check.data.status}`)}>
+                  Learn More
+                </Link>
+              </div>
+            </p>
+          </Banner>
+        );
+
+      case "inactive":
+        return (
+          <Banner color="danger">
+            Your license is invalid. Please <Link href="https://yaak.app/dashboard">Sign In</Link>{" "}
+            for more details
+          </Banner>
+        );
+
+      case "expired":
+        return (
+          <Banner color="notice">
+            Your license expired{" "}
+            <strong>{formatDate(check.data.data.periodEnd, "MMMM dd, yyyy")}</strong>. Please{" "}
+            <Link href="https://yaak.app/dashboard">Resubscribe</Link> to continue receiving
+            updates.
+            {check.data.data.changesUrl && (
+              <>
+                <br />
+                <Link href={check.data.data.changesUrl}>What's new in latest builds</Link>
+              </>
+            )}
+          </Banner>
+        );
+
+      case "past_due":
+        return (
+          <Banner color="danger">
+            <strong>Your payment method needs attention.</strong>
+            <br />
+            To re-activate your license, please{" "}
+            <Link href={check.data.data.billingUrl}>update your billing info</Link>.
+          </Banner>
+        );
+
+      case "error":
+        return (
+          <Banner color="danger">
+            License check failed: {check.data.data.message} (Code: {check.data.data.code})
+          </Banner>
+        );
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6 max-w-xl">
+      {renderBanner()}
+
+      {check.error && <Banner color="danger">{check.error}</Banner>}
+      {activate.error && <Banner color="danger">{activate.error}</Banner>}
+
+      {check.data?.status === "active" ? (
+        <HStack space={2}>
+          <Button variant="border" color="secondary" size="sm" onClick={() => deactivate.mutate()}>
+            Deactivate License
+          </Button>
+          <Button
+            color="secondary"
+            size="sm"
+            onClick={() => platform.openUrl("https://yaak.app/dashboard?intent=app.license.support")}
+            rightSlot={<Icon icon="external_link" />}
+          >
+            Direct Support
+          </Button>
+        </HStack>
+      ) : (
+        <HStack space={2}>
+          <Button variant="border" color="secondary" size="sm" onClick={toggleActivateFormVisible}>
+            Activate License
+          </Button>
+          <Button
+            size="sm"
+            color="primary"
+            rightSlot={<Icon icon="external_link" />}
+            onClick={() =>
+              platform.openUrl(pricingUrl(`app.license.purchase.${check.data?.status ?? "unknown"}`))
+            }
+          >
+            Purchase License
+          </Button>
+        </HStack>
+      )}
+
+      {activateFormVisible && (
+        <VStack
+          as="form"
+          space={3}
+          className="max-w-sm"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            await activate.mutateAsync({ licenseKey: key });
+            toggleActivateFormVisible();
+          }}
+        >
+          <PlainInput
+            autoFocus
+            label="License Key"
+            name="key"
+            onChange={setKey}
+            placeholder="YK1-XXXXX-XXXXX-XXXXX-XXXXX"
+          />
+          <Button type="submit" color="primary" size="sm" isLoading={activate.isPending}>
+            Submit
+          </Button>
+        </VStack>
+      )}
+    </div>
+  );
 }
@@ -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()],
@@ -1,6 +1,6 @@
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
 import type { ProxySetting } from "@yaakapp-internal/models";
-import { InlineCode, SettingsPage } from "@yaakapp-internal/ui";
+import { Heading, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { CommercialUseBanner } from "../CommercialUseBanner";
 import {
@@ -26,11 +26,15 @@ export function SettingsProxy() {
  };

  return (
-    <SettingsPage
-      title="Proxy"
-      description="Configure a proxy server for HTTP requests. Useful for corporate firewalls, debugging traffic, or routing through specific infrastructure."
-      banner={<CommercialUseBanner source="proxy-settings" title="Using a proxy for work?" />}
-    >
+    <VStack space={1.5} className="mb-4">
+      <div className="mb-3">
+        <Heading>Proxy</Heading>
+        <p className="text-text-subtle">
+          Configure a proxy server for HTTP requests. Useful for corporate firewalls, debugging
+          traffic, or routing through specific infrastructure.
+        </p>
+      </div>
+      <CommercialUseBanner source="proxy-settings" title="Using a proxy for work?" />
      <SettingsList className="space-y-8">
        <SettingsSection title="Proxy">
          <SettingRowSelect
@@ -156,7 +160,7 @@ export function SettingsProxy() {
          </>
        )}
      </SettingsList>
-    </SettingsPage>
+    </VStack>
  );
 }

@@ -1,15 +1,173 @@
-import { SettingsTheme as SharedSettingsTheme } from "@yaakapp-internal/ui";
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { Heading, HStack, Icon, type IconProps, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
+import { lazy, Suspense } from "react";
 import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
-import { useSettingsView } from "../../hooks/useSettingsView";
+import { useResolvedAppearance } from "../../hooks/useResolvedAppearance";
+import { useResolvedTheme } from "../../hooks/useResolvedTheme";
+import type { ButtonProps } from "../core/Button";
+import { IconButton } from "../core/IconButton";
+import { Link } from "../core/Link";
+import type { SelectProps } from "../core/Select";
+import {
+  ModelSettingRowSelect,
+  SettingRowSelect,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";
+
+const Editor = lazy(() => import("../core/Editor/Editor").then((m) => ({ default: m.Editor })));
+
+const buttonColors: ButtonProps["color"][] = [
+  "primary",
+  "info",
+  "success",
+  "notice",
+  "warning",
+  "danger",
+  "secondary",
+  "default",
+];
+
+const icons: IconProps["icon"][] = [
+  "info",
+  "box",
+  "update",
+  "alert_triangle",
+  "arrow_big_right_dash",
+  "download",
+  "copy",
+  "magic_wand",
+  "settings",
+  "trash",
+  "sparkles",
+  "pencil",
+  "paste",
+  "search",
+  "send_horizontal",
+];

 export function SettingsTheme() {
  const workspace = useAtomValue(activeWorkspaceAtom);
-  const bound = useSettingsView();
+  const settings = useAtomValue(settingsAtom);
+  const appearance = useResolvedAppearance();
+  const activeTheme = useResolvedTheme();

-  if (workspace == null || bound == null) {
+  if (settings == null || workspace == null || activeTheme.data == null) {
    return null;
  }

-  return <SharedSettingsTheme view={bound.view} callbacks={bound.callbacks} />;
+  const lightThemes: SelectProps<string>["options"] = activeTheme.data.themes
+    .filter((theme) => !theme.dark)
+    .map((theme) => ({
+      label: theme.label,
+      value: theme.id,
+    }));
+
+  const darkThemes: SelectProps<string>["options"] = activeTheme.data.themes
+    .filter((theme) => theme.dark)
+    .map((theme) => ({
+      label: theme.label,
+      value: theme.id,
+    }));
+
+  return (
+    <VStack space={1.5} className="mb-4">
+      <div className="mb-3">
+        <Heading>Theme</Heading>
+        <p className="text-text-subtle">
+          Make Yaak your own by selecting a theme, or{" "}
+          <Link href="https://yaak.app/docs/plugin-development/plugins-quick-start">
+            Create Your Own
+          </Link>
+        </p>
+      </div>
+      <SettingsList className="space-y-8">
+        <SettingsSection title="Theme">
+          <ModelSettingRowSelect
+            model={settings}
+            modelKey="appearance"
+            title="Appearance"
+            description="Choose whether Yaak follows your system appearance or uses a fixed mode."
+            options={[
+              { label: "Automatic", value: "system" },
+              { label: "Light", value: "light" },
+              { label: "Dark", value: "dark" },
+            ]}
+          />
+          {(settings.appearance === "system" || settings.appearance === "light") && (
+            <SettingRowSelect
+              name="lightTheme"
+              title="Light theme"
+              description="Theme used when Yaak is in light mode."
+              value={activeTheme.data.light.id}
+              options={lightThemes}
+              onChange={(themeLight) => patchModel(settings, { themeLight })}
+            />
+          )}
+          {(settings.appearance === "system" || settings.appearance === "dark") && (
+            <SettingRowSelect
+              name="darkTheme"
+              title="Dark theme"
+              description="Theme used when Yaak is in dark mode."
+              value={activeTheme.data.dark.id}
+              options={darkThemes}
+              onChange={(themeDark) => patchModel(settings, { themeDark })}
+            />
+          )}
+        </SettingsSection>
+
+        <SettingsSection title="Preview">
+          <VStack
+            space={3}
+            className="mt-4 w-full bg-surface p-3 border border-dashed border-border-subtle rounded-sm overflow-x-auto"
+          >
+            <HStack className="text" space={1.5}>
+              <Icon icon={appearance === "dark" ? "moon" : "sun"} />
+              <strong>{activeTheme.data.active.label}</strong>
+              <em>(preview)</em>
+            </HStack>
+            <HStack space={1.5} className="w-full">
+              {buttonColors.map((c, i) => (
+                <IconButton
+                  key={c}
+                  color={c}
+                  size="2xs"
+                  iconSize="xs"
+                  icon={icons[i % icons.length] ?? "info"}
+                  iconClassName="text"
+                  title={`${c}`}
+                />
+              ))}
+              {buttonColors.map((c, i) => (
+                <IconButton
+                  key={c}
+                  color={c}
+                  variant="border"
+                  size="2xs"
+                  iconSize="xs"
+                  icon={icons[i % icons.length] ?? "info"}
+                  iconClassName="text"
+                  title={`${c}`}
+                />
+              ))}
+            </HStack>
+            <Suspense>
+              <Editor
+                defaultValue={[
+                  "let foo = { // Demo code editor",
+                  '  foo: ("bar" || "baz" ?? \'qux\'),',
+                  "  baz: [1, 10.2, null, false, true],",
+                  "};",
+                ].join("\n")}
+                heightMode="auto"
+                language="javascript"
+                stateKey={null}
+              />
+            </Suspense>
+          </VStack>
+        </SettingsSection>
+      </SettingsList>
+    </VStack>
+  );
 }
@@ -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",
@@ -63,10 +63,13 @@ import { isSidebarFocused } from "../lib/scopes";
 import { navigateToRequestOrFolderOrWorkspace } from "../lib/setWorkspaceSearchParams";
 import type { ContextMenuProps, DropdownItem } from "./core/Dropdown";
 import { ContextMenu, Dropdown } from "./core/Dropdown";
-import type { Node as QueryNode, Schema } from "@yaakapp-internal/query";
-import { formatField, parseQuery, QueryMatcher } from "@yaakapp-internal/query";
-import { queryFilter } from "@yaakapp-internal/ui/editor";
+import type { FieldDef } from "./core/Editor/filter/extension";
+import { filter } from "./core/Editor/filter/extension";
+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,
@@ -74,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";
@@ -110,7 +112,7 @@ function Sidebar({ className }: { className?: string }) {
  const activeWorkspaceId = useAtomValue(activeWorkspaceAtom)?.id;
  const treeId = `tree.${activeWorkspaceId ?? "unknown"}`;
  const filterText = useAtomValue(sidebarFilterAtom);
-  const [tree, fieldValues, emptyFilterSuggestions] = useAtomValue(sidebarTreeAtom) ?? [];
+  const [tree, allFields, emptyFilterSuggestions] = useAtomValue(sidebarTreeAtom) ?? [];

  const wrapperRef = useRef<HTMLElement>(null);
  const treeRef = useRef<TreeHandle>(null);
@@ -551,18 +553,18 @@ function Sidebar({ className }: { className?: string }) {
  const filterCompartmentMountExtRef = useRef<Extension | null>(null);
  if (filterCompartmentMountExtRef.current == null) {
    filterCompartmentMountExtRef.current = filterLanguageCompartmentRef.current.of(
-      queryFilter({ schema: sidebarFilterSchema, values: fieldValues }),
+      filter({ fields: allFields ?? [] }),
    );
  }

  useEffect(() => {
    const view = filterRef.current;
    if (!view) return;
-    const ext = queryFilter({ schema: sidebarFilterSchema, values: fieldValues });
+    const ext = filter({ fields: allFields ?? [] });
    view.dispatch({
      effects: filterLanguageCompartmentRef.current.reconfigure(ext),
    });
-  }, [fieldValues]);
+  }, [allFields]);

  if (tree == null || hidden) {
    return null;
@@ -850,44 +852,16 @@ function setSidebarFilterText(text: string) {
  jotaiStore.set(sidebarFilterAtom, { text, key: `${Math.random()}` });
 }

-/**
- * The fields `getItemFields` fills in, each with what it is and a term using it, as completion
- * shows them. Bare words match `getItemText` by word prefix
- */
-const sidebarFilterFields: [name: string, info: string, example: string][] = [
-  ["method", "GET, POST, …", "@method:post"],
-  ["url", "Request URL", "@url:*/users*"],
-  ["name", "Request name", '@name:"Get user"'],
-  ["type", "http, grpc or ws", "@type:grpc"],
-  ["folder", "Parent folder", "@folder:auth"],
-  ["grpc_service", "gRPC service", "@grpc_service:*Greeter"],
-  ["grpc_method", "gRPC method", "@grpc_method:SayHello"],
-];
-const sidebarFilterColumns = sidebarFilterFields.map(([name]) => name);
-const sidebarFilterSchema: Schema = {
-  fields: sidebarFilterFields.map(([name, info, example]) => ({
-    name,
-    kind: { type: "text" },
-    info,
-    example,
-  })),
-  freeText: "fuzzy",
-};
-
-function getSidebarSuggestionValue(ast: QueryNode | null, query: string) {
+function getSidebarSuggestionValue(ast: Ast | null) {
  if (ast == null) return null;

  if (ast.type === "Term" || ast.type === "Phrase") {
-    const value = ast.text.trim();
+    const value = ast.value.trim();
    return value.length > 0 ? value : null;
  }

  if (ast.type === "Field") {
-    const raw =
-      ast.value.type === "text"
-        ? ast.value.text
-        : query.slice(ast.valueSpan.start, ast.valueSpan.end);
-    const value = raw.trim();
+    const value = ast.value.trim();
    return value.length > 0 ? value : null;
  }

@@ -909,7 +883,7 @@ const sidebarSuggestionFieldOrder = [
 ];

 const sidebarTreeAtom = atom<
-  [TreeNode<SidebarModel>, Record<string, string[]>, SidebarFilterSuggestion[]] | null
+  [TreeNode<SidebarModel>, FieldDef[], SidebarFilterSuggestion[]] | null
 >((get) => {
  const allModels = get(memoAllPotentialChildrenAtom);
  const activeWorkspace = get(activeWorkspaceAtom);
@@ -930,18 +904,15 @@ const sidebarTreeAtom = atom<
    return null;
  }

-  const suggestionValue = getSidebarSuggestionValue(parseQuery(filter.text), filter.text);
-  const matcher = new QueryMatcher(filter.text, sidebarFilterSchema);
-
-  // Every request goes into one flat table (its text, then a cell per column), matched in a
-  // single call after the tree is built
-  const leaves: TreeNode<SidebarModel>[] = [];
-  const cells: (string | null)[] = [];
+  const queryAst = parseQuery(filter.text);
+  const suggestionValue = getSidebarSuggestionValue(queryAst);

+  // returns true if this node OR any child matches the filter
  const allFields: Record<string, Set<string>> = {};
  const suggestionFields = new Set<string>();
-  const build = (node: TreeNode<SidebarModel>, depth: number) => {
+  const build = (node: TreeNode<SidebarModel>, depth: number): boolean => {
    const childItems = childrenMap[node.item.id] ?? [];
+    let matchesSelf = true;
    const fields = getItemFields(node);
    const model = node.item.model;
    const isLeafNode = !(model === "folder" || model === "workspace");
@@ -959,44 +930,38 @@ const sidebarTreeAtom = atom<
      }
    }

-    if (isLeafNode && !matcher.isEmpty) {
-      leaves.push(node);
-      cells.push(getItemText(node.item));
-      for (const column of sidebarFilterColumns) cells.push(fields[column] ?? null);
+    if (queryAst != null) {
+      matchesSelf = isLeafNode && evaluate(queryAst, { text: getItemText(node.item), fields });
    }

+    let matchesChild = false;
+
    // Recurse to children
    node.children = !isLeafNode ? [] : undefined;

    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) {
        const childNode = { item, parent: node, depth };
-        build(childNode, depth + 1);
+        const childMatches = build(childNode, depth + 1);
+        if (childMatches) {
+          matchesChild = true;
+        }
        node.children.push(childNode);
      }
    }
-  };

-  // Hide a node IFF nothing in its subtree matches; with no query, nothing is hidden
-  let matched: Set<TreeNode<SidebarModel>> | null = null;
-  const markHidden = (node: TreeNode<SidebarModel>): boolean => {
-    let visible = matched == null || matched.has(node);
-    for (const child of node.children ?? []) {
-      if (markHidden(child)) visible = true;
-    }
-    node.hidden = !visible;
-    return visible;
+    // hide node IFF nothing in its subtree matches
+    const anyMatch = matchesSelf || matchesChild;
+    node.hidden = !anyMatch;
+
+    return anyMatch;
  };

  const root: TreeNode<SidebarModel> = {
@@ -1006,20 +971,15 @@ const sidebarTreeAtom = atom<
    depth: 0,
  };

+  // Build tree and mark visibility in one pass
  build(root, 1);
-  if (!matcher.isEmpty) {
-    const rows = matcher.matchingRows(sidebarFilterColumns, cells);
-    matched = new Set(Array.from(rows, (i) => leaves[i]!));
-  }
-  matcher.free();
-  markHidden(root);

-  // Values offered after `@field:`. URLs and names are left out: nearly every one is unique,
-  // so a list of them is noise rather than a shortcut.
-  const fieldValues: Record<string, string[]> = {};
+  const fields: FieldDef[] = [];
  for (const [name, values] of Object.entries(allFields)) {
-    if (name === "url" || name === "name") continue;
-    fieldValues[name] = Array.from(values);
+    fields.push({
+      name,
+      values: Array.from(values).filter((v) => v.length < 20),
+    });
  }
  const suggestions = Array.from(suggestionFields)
    .sort((a, b) => {
@@ -1030,9 +990,9 @@ const sidebarTreeAtom = atom<
    })
    .map((field) => ({
      field,
-      filterText: formatField(field, suggestionValue ?? ""),
+      filterText: formatFieldFilter(field, suggestionValue ?? ""),
    }));
-  return [root, fieldValues, suggestions] as const;
+  return [root, fields, suggestions] as const;
 });

 const sidebarGitStatusByModelIdAtom = atom<Record<string, GitStatus>>((get) => {
@@ -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>
  );
 }
@@ -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>
+  );
+};
@@ -1,14 +1,113 @@
-import { UrlBar as BaseUrlBar, type UrlBarProps } from "@yaakapp-internal/ui";
-import { memo } from "react";
+import type { HttpRequest } from "@yaakapp-internal/models";
+import type { IconProps } from "@yaakapp-internal/ui";
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { FormEvent, ReactNode } from "react";
+import { memo, useCallback, useRef, useState } from "react";
+import { useHotKey } from "../hooks/useHotKey";
+import { IconButton } from "./core/IconButton";
+import type { InputHandle, InputProps } from "./core/Input";
+import { Input } from "./core/Input";

-type Props = Omit<UrlBarProps, "sendHotkeyAction" | "focusHotkeyAction" | "readOnly"> & {
+type Props = Pick<HttpRequest, "url"> & {
+  className?: string;
+  placeholder: string;
  onSend: () => void;
  onUrlChange: (url: string) => void;
+  onPaste?: (v: string) => void;
+  onPasteOverwrite?: InputProps["onPasteOverwrite"];
  onCancel: () => void;
+  submitIcon?: IconProps["icon"] | null;
  isLoading: boolean;
+  forceUpdateKey: string;
+  rightSlot?: ReactNode;
+  leftSlot?: ReactNode;
+  autocomplete?: InputProps["autocomplete"];
+  stateKey: InputProps["stateKey"];
 };

-/** The shared URL bar, sending and focusing on the client's hotkeys */
-export const UrlBar = memo(function UrlBar(props: Props) {
-  return <BaseUrlBar {...props} sendHotkeyAction="request.send" focusHotkeyAction="url_bar.focus" />;
+export const UrlBar = memo(function UrlBar({
+  forceUpdateKey,
+  onUrlChange,
+  url,
+  placeholder,
+  className,
+  onSend,
+  onCancel,
+  onPaste,
+  onPasteOverwrite,
+  submitIcon = "send_horizontal",
+  autocomplete,
+  leftSlot,
+  rightSlot,
+  isLoading,
+  stateKey,
+}: Props) {
+  const inputRef = useRef<InputHandle>(null);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+
+  const handleInitInputRef = useCallback((h: InputHandle | null) => {
+    inputRef.current = h;
+  }, []);
+
+  useHotKey("url_bar.focus", () => {
+    inputRef.current?.selectAll();
+  });
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isLoading) onCancel();
+    else onSend();
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={classNames("x-theme-urlBar", className)}>
+      <Input
+        setRef={handleInitInputRef}
+        autocompleteFunctions
+        autocompleteVariables
+        stateKey={stateKey}
+        size="sm"
+        wrapLines={isFocused}
+        hideLabel
+        language="url"
+        className="px-1.5 py-0.5"
+        label="Enter URL"
+        name="url"
+        autocomplete={autocomplete}
+        forceUpdateKey={forceUpdateKey}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        onPaste={onPaste}
+        onPasteOverwrite={onPasteOverwrite}
+        onChange={onUrlChange}
+        defaultValue={url}
+        placeholder={placeholder}
+        leftSlot={leftSlot}
+        rightSlot={
+          <HStack space={0.5}>
+            {rightSlot && <div className="py-0.5 h-full">{rightSlot}</div>}
+            {submitIcon !== null && (
+              <div className="py-0.5 h-full">
+                <IconButton
+                  size="xs"
+                  iconSize="md"
+                  title="Send Request"
+                  type="submit"
+                  className="w-8 mr-0.5 h-full!"
+                  iconColor="secondary"
+                  icon={isLoading ? "x" : submitIcon}
+                  hotkeyAction="request.send"
+                  onMouseDown={(e) => {
+                    // Prevent the button from taking focus
+                    e.preventDefault();
+                  }}
+                />
+              </div>
+            )}
+          </HStack>
+        }
+      />
+    </form>
+  );
 });
@@ -1,11 +1,8 @@
-import {
-  type EditablePair,
-  type PairEditorHandle,
-  type PairEditorProps,
-  UrlParametersEditor as BaseUrlParametersEditor,
-} from "@yaakapp-internal/ui";
+import { VStack } from "@yaakapp-internal/ui";
 import { useCallback, useRef } from "react";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
+import type { EditablePair, PairEditorHandle, PairEditorProps } from "./core/PairEditor";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";

 type Props = {
  forceUpdateKey: string;
@@ -14,7 +11,6 @@ type Props = {
  onChange: PairEditorProps["onChange"];
 };

-/** The shared parameters editor, wired to the request editor's focus events */
 export function UrlParametersEditor({ pairs, forceUpdateKey, onChange, stateKey }: Props) {
  const pairEditorRef = useRef<PairEditorHandle>(null);
  const handleInitPairEditorRef = useCallback((ref: PairEditorHandle) => {
@@ -37,12 +33,22 @@ export function UrlParametersEditor({ pairs, forceUpdateKey, onChange, stateKey
  );

  return (
-    <BaseUrlParametersEditor
-      setRef={handleInitPairEditorRef}
-      forceUpdateKey={forceUpdateKey + urlParametersKey}
-      onChange={onChange}
-      pairs={pairs}
-      stateKey={stateKey}
-    />
+    <VStack className="h-full">
+      <PairOrBulkEditor
+        setRef={handleInitPairEditorRef}
+        allowMultilineValues
+        forceUpdateKey={forceUpdateKey + urlParametersKey}
+        nameAutocompleteFunctions
+        nameAutocompleteVariables
+        namePlaceholder="param_name"
+        onChange={onChange}
+        pairs={pairs}
+        preferenceName="url_parameters"
+        stateKey={stateKey}
+        valueAutocompleteFunctions
+        valueAutocompleteVariables
+        valuePlaceholder="Value"
+      />
+    </VStack>
  );
 }
@@ -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;
@@ -109,8 +110,6 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
    [activeRequest.url, activeRequest.urlParameters, handleRenamePathPlaceholder],
  );

-  const hasDescription = activeRequest.description.trim().length > 0;
-
  const tabs = useMemo<TabItem[]>(() => {
    return [
      {
@@ -132,10 +131,9 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
      {
        value: TAB_DESCRIPTION,
        label: "Info",
-        rightSlot: hasDescription && <CountBadge count={true} />,
      },
    ];
-  }, [authTab, hasDescription, headersTab, numSettingsOverrides, urlParameterPairs.length]);
+  }, [authTab, headersTab, numSettingsOverrides, urlParameterPairs.length]);

  const { activeResponse } = usePinnedHttpResponse(activeRequestId);
  const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
@@ -1,14 +1,6 @@
 import type { WebsocketEvent, WebsocketRequest } from "@yaakapp-internal/models";
-import {
-  HStack,
-  hexdump,
-  HexdumpViewer,
-  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";
 import { useFormatText } from "../hooks/useFormatText";
@@ -18,9 +10,10 @@ import {
  setPinnedWebsocketConnectionId,
  useWebsocketEvents,
 } from "../hooks/usePinnedWebsocketConnection";
+import { useStateWithDeps } from "../hooks/useStateWithDeps";
+import { languageFromContentType } from "../lib/contentType";
 import { Button } from "./core/Button";
 import { Editor } from "./core/Editor/LazyEditor";
-import { renderEditor } from "./core/Editor/renderEditor";
 import { type EventDetailAction, EventDetailHeader, EventViewer } from "./core/EventViewer";
 import { EventViewerRow } from "./core/EventViewerRow";
 import { HotkeyList } from "./core/HotkeyList";
@@ -124,10 +117,10 @@ function WebsocketEventRow({
    messageType === "error"
      ? "alert_triangle"
      : messageType === "close" || messageType === "open"
-        ? "info"
-        : isServer
-          ? "arrow_big_down_dash"
-          : "arrow_big_up_dash";
+      ? "info"
+      : isServer
+        ? "arrow_big_down_dash"
+        : "arrow_big_up_dash";

  const content =
    messageType === "close" ? (
@@ -174,7 +167,7 @@ function WebsocketEventDetail({
 }) {
  const message = useMemo(() => {
    if (hexDump) {
-      return event.message ? hexdump(event.message) : "";
+      return event.message ? hexy(event.message) : "";
    }
    return event.message ? new TextDecoder("utf-8").decode(Uint8Array.from(event.message)) : "";
  }, [event.message, hexDump]);
@@ -234,8 +227,6 @@ function WebsocketEventDetail({
        </VStack>
      ) : event.message.length === 0 ? (
        <EmptyStateText>No Content</EmptyStateText>
-      ) : hexDump ? (
-        <HexdumpViewer data={event.message} renderEditor={renderEditor} />
      ) : (
        <Editor
          language={language}
@@ -1,10 +1,10 @@
 import { platform } from "@yaakapp-internal/platform";
 import { settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
-import { Banner, HeaderSize, HeaderTint, HStack, SidebarLayout } from "@yaakapp-internal/ui";
+import { Banner, HeaderSize, HStack, SidebarLayout } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import * as m from "motion/react-m";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
  getActiveCookieJar,
  useEnsureActiveCookieJar,
@@ -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";
@@ -61,8 +60,15 @@ export function Workspace() {
  const activeEnvironment = useAtomValue(activeEnvironmentAtom);
  const [floating, setFloating] = useState(false);

+  const environmentBgStyle = useMemo(() => {
+    if (activeEnvironment?.color == null) return undefined;
+    const background = `linear-gradient(to right, ${activeEnvironment.color} 15%, transparent 40%)`;
+    return { background };
+  }, [activeEnvironment?.color]);
+
+  // We're loading still
  if (workspaces.length === 0) {
-    return <RedirectToLatestWorkspace />;
+    return null;
  }

  const header = (
@@ -75,7 +81,13 @@ export function Workspace() {
      useNativeTitlebar={settings.useNativeTitlebar}
      interfaceScale={settings.interfaceScale}
    >
-      <HeaderTint color={activeEnvironment?.color ?? null} />
+      <div className="absolute inset-0 pointer-events-none">
+        <div style={environmentBgStyle} className="absolute inset-0 opacity-[0.07]" />
+        <div
+          style={environmentBgStyle}
+          className="absolute left-0 right-0 -bottom-px h-px opacity-20"
+        />
+      </div>
      <WorkspaceHeader className="pointer-events-none" floatingSidebar={floating} />
    </HeaderSize>
  );
@@ -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,177 +0,0 @@
-// @vitest-environment happy-dom
-import type { Workspace, WorkspaceMeta } from "@yaakapp-internal/models";
-import { workspaceMetasAtom } from "@yaakapp-internal/models";
-import { getDefaultStore, type PrimitiveAtom } from "jotai";
-import { act, type ReactNode } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, expect, test, vi } from "vite-plus/test";
-import { WorkspaceSettingsDialog } from "./WorkspaceSettingsDialog";
-
-const mocks = vi.hoisted(() => ({
-  rpc: vi.fn<(cmd: string, payload: unknown) => Promise<unknown>>(),
-  mergeModelsInStore: vi.fn(),
-  deleteModelWithConfirm: vi.fn<(model: unknown) => Promise<boolean>>(),
-  workspace: {
-    id: "wk_test",
-    model: "workspace",
-    name: "Broken",
-    settingDnsOverrides: [],
-  } as unknown as Workspace,
-  workspaceMeta: {
-    id: "wm_test",
-    model: "workspace_meta",
-    workspaceId: "wk_test",
-    settingSyncDir: "/sync/broken",
-    encryptionKey: null,
-  } as WorkspaceMeta,
-}));
-const { workspace, workspaceMeta } = mocks;
-
-vi.mock("@yaakapp-internal/models", async () => {
-  const { atom } = await import("jotai");
-  return {
-    workspacesAtom: atom([mocks.workspace]),
-    // Starts empty in each test: the workspace failed to load, so the store has no meta for it
-    workspaceMetasAtom: atom<WorkspaceMeta[]>([]),
-    mergeModelsInStore: mocks.mergeModelsInStore,
-    patchModel: vi.fn(),
-  };
-});
-vi.mock("@yaakapp-internal/ui", () => ({
-  Banner: ({ children }: { children: ReactNode }) => <div role="alert">{children}</div>,
-  CountBadge: () => null,
-  HStack: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  InlineCode: ({ children }: { children: ReactNode }) => <code>{children}</code>,
-}));
-vi.mock("../hooks/useAuthTab", () => ({ useAuthTab: () => [] }));
-vi.mock("../hooks/useHeadersTab", () => ({ useHeadersTab: () => [] }));
-vi.mock("../hooks/useInheritedHeaders", () => ({ useInheritedHeaders: () => [] }));
-vi.mock("../lib/deleteModelWithConfirm", () => ({
-  deleteModelWithConfirm: mocks.deleteModelWithConfirm,
-}));
-vi.mock("../lib/dialog", () => ({ showDialog: vi.fn() }));
-vi.mock("../lib/router", () => ({ router: { navigate: vi.fn() } }));
-vi.mock("../lib/rpc", () => ({ rpc: mocks.rpc }));
-vi.mock("./CopyIconButton", () => ({ CopyIconButton: () => null }));
-vi.mock("./core/Button", () => ({
-  Button: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => (
-    <button type="button" onClick={onClick}>
-      {children}
-    </button>
-  ),
-}));
-vi.mock("./core/PlainInput", () => ({
-  PlainInput: ({ label, defaultValue }: { label: string; defaultValue: string }) => (
-    <input aria-label={label} defaultValue={defaultValue} />
-  ),
-}));
-vi.mock("./core/SettingRow", () => ({
-  SettingsList: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  SettingsSection: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-}));
-// Render every tab at once so the test can see all of them
-vi.mock("./core/Tabs/Tabs", () => ({
-  Tabs: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  TabContent: ({ children, value }: { children: ReactNode; value: string }) => (
-    <div data-tab={value}>{children}</div>
-  ),
-}));
-vi.mock("./DnsOverridesEditor", () => ({ DnsOverridesEditor: () => null }));
-vi.mock("./HeadersEditor", () => ({ HeadersEditor: () => null }));
-vi.mock("./HttpAuthenticationEditor", () => ({ HttpAuthenticationEditor: () => null }));
-vi.mock("./MarkdownEditor", () => ({ MarkdownEditor: () => null }));
-vi.mock("./ModelSettingsEditor", () => ({ ModelSettingsEditor: () => null }));
-vi.mock("./SyncToFilesystemSetting", () => ({
-  SyncToFilesystemSetting: ({ value }: { value: { filePath: string | null } }) => (
-    <div data-testid="sync-setting">{value.filePath}</div>
-  ),
-}));
-vi.mock("./WorkspaceEncryptionSetting", () => ({
-  WorkspaceEncryptionSetting: () => <div data-testid="encryption-setting" />,
-}));
-
-let root: Root;
-let host: HTMLDivElement;
-beforeEach(() => {
-  vi.clearAllMocks();
-  // Behave like the real store: merged models land in the atom the dialog reads
-  const store = getDefaultStore();
-  const metasAtom = workspaceMetasAtom as unknown as PrimitiveAtom<WorkspaceMeta[]>;
-  store.set(metasAtom, []);
-  mocks.mergeModelsInStore.mockImplementation((_model: string, models: WorkspaceMeta[]) =>
-    store.set(metasAtom, (prev) => [...prev, ...models]),
-  );
-  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  host = document.createElement("div");
-  document.body.append(host);
-  root = createRoot(host);
-});
-
-afterEach(async () => {
-  await act(async () => root.unmount());
-  host.remove();
-  vi.unstubAllGlobals();
-});
-
-async function render() {
-  await act(async () =>
-    root.render(<WorkspaceSettingsDialog workspaceId="wk_test" hide={() => {}} />),
-  );
-}
-
-function tab(value: string) {
-  const el = host.querySelector(`[data-tab="${value}"]`);
-  if (el == null) throw new Error(`No ${value} tab`);
-  return el;
-}
-
-function deleteButton() {
-  return Array.from(host.querySelectorAll("button")).find(
-    (b) => b.textContent === "Delete Workspace",
-  );
-}
-
-test("a workspace with no meta in the store still offers Delete", async () => {
-  mocks.rpc.mockReturnValue(new Promise(() => {}));
-  mocks.deleteModelWithConfirm.mockResolvedValue(false);
-  await render();
-
-  expect(host.textContent).not.toContain("not found");
-  const button = deleteButton();
-  expect(button).toBeDefined();
-
-  await act(async () => button?.click());
-  expect(mocks.deleteModelWithConfirm).toHaveBeenCalledWith(workspace, { confirmName: "Broken" });
-});
-
-test("a missing meta is fetched, put in the store, and its settings rendered", async () => {
-  mocks.rpc.mockResolvedValue(workspaceMeta);
-  await render();
-
-  expect(mocks.rpc).toHaveBeenCalledWith("cmd_get_workspace_meta", { workspaceId: "wk_test" });
-  expect(mocks.mergeModelsInStore).toHaveBeenCalledWith("workspace_meta", [workspaceMeta]);
-
-  const settings = tab("settings");
-  expect(settings.querySelector('[data-testid="sync-setting"]')?.textContent).toBe("/sync/broken");
-  expect(settings.querySelector('[data-testid="encryption-setting"]')).not.toBeNull();
-  expect(host.querySelector('[role="alert"]')).toBeNull();
-});
-
-test("a meta that cannot be loaded shows the error only where sync and encryption go", async () => {
-  mocks.rpc.mockRejectedValue("database is locked");
-  await render();
-
-  // The error is the one banner, inside the Settings tab, in place of sync and encryption
-  const banners = host.querySelectorAll('[role="alert"]');
-  expect(banners).toHaveLength(1);
-  expect(tab("settings").contains(banners[0] ?? null)).toBe(true);
-  expect(banners[0]?.textContent).toContain("database is locked");
-  expect(host.querySelector('[data-testid="sync-setting"]')).toBeNull();
-  expect(host.querySelector('[data-testid="encryption-setting"]')).toBeNull();
-  expect(mocks.mergeModelsInStore).not.toHaveBeenCalled();
-
-  // The workspace's own settings and Delete still render
-  const general = tab("general");
-  expect(general.querySelector<HTMLInputElement>('input[aria-label="Name"]')?.value).toBe("Broken");
-  expect(general.contains(deleteButton() ?? null)).toBe(true);
-});
@@ -1,22 +1,15 @@
-import type { WorkspaceMeta } from "@yaakapp-internal/models";
-import {
-  mergeModelsInStore,
-  patchModel,
-  workspaceMetasAtom,
-  workspacesAtom,
-} from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode, CountBadge } from "@yaakapp-internal/ui";
+import { patchModel, workspaceMetasAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
-import { useEffect, useState } from "react";
 import { useAuthTab } from "../hooks/useAuthTab";
 import { useHeadersTab } from "../hooks/useHeadersTab";
 import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
 import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
 import { showDialog } from "../lib/dialog";
 import { router } from "../lib/router";
-import { rpc } from "../lib/rpc";
 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";
@@ -55,10 +48,6 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
  const authTab = useAuthTab(TAB_AUTH, workspace ?? null);
  const headersTab = useHeadersTab(TAB_HEADERS, workspace ?? null);
  const inheritedHeaders = useInheritedHeaders(workspace ?? null);
-  const workspaceMetaError = useEnsureWorkspaceMeta(
-    workspaceId,
-    workspace != null && workspaceMeta == null,
-  );

  if (workspace == null) {
    return (
@@ -68,6 +57,13 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
    );
  }

+  if (workspaceMeta == null)
+    return (
+      <Banner color="danger">
+        <InlineCode>WorkspaceMeta</InlineCode> not found for workspace
+      </Banner>
+    );
+
  return (
    <Tabs
      defaultValue={tab ?? DEFAULT_TAB}
@@ -110,26 +106,15 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
      <TabContent value={TAB_SETTINGS} className="overflow-y-auto h-full px-4">
        <SettingsList className="space-y-8 pb-3">
          <SettingsSection title={null}>
-            {workspaceMeta != null ? (
-              <>
-                <SyncToFilesystemSetting
-                  layout="settings"
-                  value={{ filePath: workspaceMeta.settingSyncDir }}
-                  onCreateNewWorkspace={hide}
-                  onChange={({ filePath }) =>
-                    patchModel(workspaceMeta, { settingSyncDir: filePath })
-                  }
-                />
-                <div className="mt-4">
-                  <WorkspaceEncryptionSetting layout="settings" size="xs" />
-                </div>
-              </>
-            ) : workspaceMetaError != null ? (
-              <Banner color="danger">
-                Sync and encryption settings are unavailable because{" "}
-                <InlineCode>WorkspaceMeta</InlineCode> could not be loaded: {workspaceMetaError}
-              </Banner>
-            ) : null}
+            <SyncToFilesystemSetting
+              layout="settings"
+              value={{ filePath: workspaceMeta.settingSyncDir }}
+              onCreateNewWorkspace={hide}
+              onChange={({ filePath }) => patchModel(workspaceMeta, { settingSyncDir: filePath })}
+            />
+            <div className="mt-4">
+              <WorkspaceEncryptionSetting layout="settings" size="xs" />
+            </div>
          </SettingsSection>
          <ModelSettingsEditor model={workspace} showSectionTitles />
        </SettingsList>
@@ -193,34 +178,6 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
  );
 }

-/**
- * The meta row normally reaches the store when the workspace loads, which also creates it if it
- * is missing. If that load failed (for example on a corrupt row elsewhere in the workspace), the
- * store never gets it, so ask for it directly. Returns the error if that fails too.
- */
-function useEnsureWorkspaceMeta(workspaceId: string, missing: boolean): string | null {
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!missing) return;
-    let cancelled = false;
-    setError(null);
-    rpc<WorkspaceMeta>("cmd_get_workspace_meta", { workspaceId }).then(
-      (meta) => {
-        if (!cancelled) mergeModelsInStore("workspace_meta", [meta]);
-      },
-      (err) => {
-        if (!cancelled) setError(String(err));
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [workspaceId, missing]);
-
-  return error;
-}
-
 WorkspaceSettingsDialog.show = (workspaceId: string, tab?: WorkspaceSettingsTab) => {
  showDialog({
    id: "workspace-settings",
@@ -1,9 +1,7 @@
 import { useVirtualizer, type Virtualizer } from "@tanstack/react-virtual";
-import classNames from "classnames";
 import type { ReactElement, ReactNode, UIEvent } from "react";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { Icon } from "../Icon";
-import { IconButton } from "../IconButton";
+import { IconButton } from "./IconButton";

 interface Props<T> {
  data: T[];
@@ -13,14 +11,6 @@ interface Props<T> {
  focusable?: boolean;
  /** Callback to expose the virtualizer for keyboard navigation */
  onVirtualizerReady?: (virtualizer: Virtualizer<HTMLDivElement, Element>) => void;
-  /**
-   * Holds and catches up as the proxy's flow list does: once scrolled away from the end (or
-   * `holdSignal` changes), new items wait under a pill counting them, which scrolls back down.
-   * Without it, a button locks the scroll to the bottom again.
-   */
-  catchUp?: { label: (count: number) => string };
-  /** Holds the scroll where it is whenever this changes, as selecting an item does */
-  holdSignal?: unknown;
 }

 export function AutoScroller<T>({
@@ -29,15 +19,9 @@ export function AutoScroller<T>({
  header,
  focusable = false,
  onVirtualizerReady,
-  catchUp,
-  holdSignal,
 }: Props<T>) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [autoScroll, setAutoScroll] = useState<boolean>(true);
-  // How many items there were when the scroll was held, to count the new ones
-  const [heldAt, setHeldAt] = useState<number>(0);
-  const latestLength = useRef(data.length);
-  latestLength.current = data.length;

  // The virtualizer
  const rowVirtualizer = useVirtualizer({
@@ -51,11 +35,6 @@ export function AutoScroller<T>({
    onVirtualizerReady?.(rowVirtualizer);
  }, [rowVirtualizer, onVirtualizerReady]);

-  const hold = useCallback(() => {
-    setAutoScroll(false);
-    setHeldAt(latestLength.current);
-  }, []);
-
  // Scroll to new items
  const handleScroll = useCallback(
    (e: UIEvent<HTMLDivElement>) => {
@@ -65,21 +44,12 @@ export function AutoScroller<T>({
      const pixelsFromBottom = el.scrollHeight - (el.scrollTop + el.clientHeight);
      const newAutoScroll = pixelsFromBottom <= 0;
      if (newAutoScroll !== autoScroll) {
-        if (newAutoScroll) setAutoScroll(true);
-        else hold();
+        setAutoScroll(newAutoScroll);
      }
    },
-    [autoScroll, hold],
+    [autoScroll],
  );

-  // Selecting an item holds the list where it is
-  const lastHoldSignal = useRef(holdSignal);
-  useLayoutEffect(() => {
-    if (Object.is(lastHoldSignal.current, holdSignal)) return;
-    lastHoldSignal.current = holdSignal;
-    if (catchUp != null && autoScroll) hold();
-  }, [autoScroll, catchUp, hold, holdSignal]);
-
  // Scroll to bottom on count change
  useLayoutEffect(() => {
    if (!autoScroll) return;
@@ -92,11 +62,9 @@ export function AutoScroller<T>({
    el.scrollTop = el.scrollHeight;
  }, [autoScroll, data.length]);

-  const newCount = data.length - heldAt;
-
  return (
    <div className="h-full w-full relative grid grid-rows-[auto_minmax(0,1fr)]">
-      {!autoScroll && catchUp == null && (
+      {!autoScroll && (
        <div className="absolute bottom-0 right-0 m-2">
          <IconButton
            title="Lock scroll to bottom"
@@ -109,21 +77,6 @@ export function AutoScroller<T>({
          />
        </div>
      )}
-      {!autoScroll && catchUp != null && newCount > 0 && (
-        <button
-          type="button"
-          onClick={() => setAutoScroll(true)}
-          className={classNames(
-            "absolute bottom-3 left-1/2 -translate-x-1/2 z-10",
-            "flex items-center gap-1.5 h-6 px-3 rounded-full",
-            "bg-surface border border-border shadow-lg text-text text-xs tabular-nums",
-            "hover:bg-surface-highlight",
-          )}
-        >
-          <Icon icon="arrow_down_to_line" size="sm" color="primary" />
-          {catchUp.label(newCount)}
-        </button>
-      )}
      {header ?? <span aria-hidden />}
      <div
        ref={containerRef}
@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vite-plus/test";
+import { parseBulkPairLine } from "./BulkPairEditor";
+
+describe("parseBulkPairLine", () => {
+  test("parses colon-space pairs as name and value", () => {
+    expect(parseBulkPairLine("foo: bar")).toMatchObject({
+      enabled: true,
+      name: "foo",
+      value: "bar",
+    });
+  });
+
+  test("preserves colon-without-space lines as a name with an empty value", () => {
+    expect(parseBulkPairLine("foo:bar")).toMatchObject({
+      enabled: true,
+      name: "foo:bar",
+      value: "",
+    });
+  });
+
+  test("preserves malformed lines instead of dropping their contents", () => {
+    expect(parseBulkPairLine("not a pair")).toMatchObject({
+      enabled: true,
+      name: "not a pair",
+      value: "",
+    });
+  });
+
+  test("unescapes newlines in parsed values", () => {
+    expect(parseBulkPairLine("foo: bar\\nbaz")).toMatchObject({
+      enabled: true,
+      name: "foo",
+      value: "bar\nbaz",
+    });
+  });
+});
@@ -0,0 +1,63 @@
+import { useCallback, useMemo } from "react";
+import { generateId } from "../../lib/generateId";
+import { Editor } from "./Editor/LazyEditor";
+import type { Pair, PairEditorProps, PairWithId } from "./PairEditor";
+
+type Props = PairEditorProps;
+
+export function BulkPairEditor({
+  pairs,
+  onChange,
+  namePlaceholder,
+  valuePlaceholder,
+  forceUpdateKey,
+  forcedEnvironmentId,
+  stateKey,
+}: Props) {
+  const pairsText = useMemo(() => {
+    return pairs
+      .filter((p) => !(p.name.trim() === "" && p.value.trim() === ""))
+      .map(formatBulkPairLine)
+      .join("\n");
+  }, [pairs]);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      const pairs = text
+        .split("\n")
+        .filter((l: string) => l.trim())
+        .map(parseBulkPairLine);
+      onChange(pairs);
+    },
+    [onChange],
+  );
+
+  return (
+    <Editor
+      autocompleteFunctions
+      autocompleteVariables
+      stateKey={`bulk_pair.${stateKey}`}
+      forcedEnvironmentId={forcedEnvironmentId}
+      forceUpdateKey={forceUpdateKey}
+      placeholder={`${namePlaceholder ?? "name"}: ${valuePlaceholder ?? "value"}`}
+      defaultValue={pairsText}
+      language="pairs"
+      onChange={handleChange}
+    />
+  );
+}
+
+export function formatBulkPairLine(pair: Pair) {
+  const value = pair.value.replaceAll("\n", "\\n");
+  return `${pair.name}: ${value}`;
+}
+
+export function parseBulkPairLine(line: string): PairWithId {
+  const [, name, value] = line.match(/^([^:]+):\s+(.*)$/) ?? [];
+  return {
+    enabled: true,
+    name: (name ?? line).trim(),
+    value: (value ?? "").replaceAll("\\n", "\n").trim(),
+    id: generateId(),
+  };
+}