Yaak Proxy: the rejected card claims decryption only when the list decrypts

Once an address is no longer passed through, the foot said the next
connection will be decrypted even when the list excludes it or the
certificate is untrusted. It now says so only when the list still
decrypts the connection, and keeps the trust line while untrusted.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>

.agents/plugins/marketplace.json

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

.claude-plugin/marketplace.json

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

.gitattributes

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

.github/workflows/ci.yml

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

.github/workflows/release-app.yml

@@ -2,10 +2,24 @@ 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'
+    if: github.repository == 'mountain-loop/yaak' && github.event_name == 'push'
     permissions:
       contents: write
 
@@ -290,3 +304,178 @@ jobs:
           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

.gitignore

@@ -59,3 +59,6 @@ flatpak/node-sources.json
 # Claude Code local settings
 .claude/settings.local.json
 .claude/worktrees/
+
+# Headless screenshots taken while working
+.shots/

Cargo.toml

@@ -11,12 +11,15 @@ 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",
@@ -38,8 +41,10 @@ members = [
   "crates-tauri/yaak-fonts",
   "crates-tauri/yaak-license",
   "crates-tauri/yaak-mac-window",
+  "crates-tauri/yaak-proxy-helper",
   "crates-tauri/yaak-system-appearance",
   "crates-tauri/yaak-tauri-utils",
+  "crates-tauri/yaak-updater",
   "crates-tauri/yaak-window",
 ]
 
@@ -57,7 +62,7 @@ reqwest = { version = "0.13.5", default-features = false, features = [
   "native-tls",
 ] }
 rustls = { version = "0.23.34", default-features = false }
-rustls-platform-verifier = "0.6.2"
+rustls-platform-verifier = "0.7.1"
 schemars = { version = "0.8.22", features = ["chrono"] }
 serde = "1.0.228"
 serde_json = "1.0.145"
@@ -85,12 +90,15 @@ 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" }
@@ -106,8 +114,10 @@ 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]

apps/yaak-client/commands/commands.test.tsx

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

apps/yaak-client/commands/commands.tsx

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

apps/yaak-client/commands/createEnvironment.tsx

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

apps/yaak-client/commands/moveToWorkspace.tsx

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

apps/yaak-client/commands/openWorkspaceFromSyncDir.tsx

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

apps/yaak-client/components/ClientEditorHost.tsx

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

apps/yaak-client/components/ConfirmLargeRequestBody.tsx

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

apps/yaak-client/components/ConfirmLargeResponse.tsx

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

apps/yaak-client/components/ConfirmLargeResponseRequest.tsx

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

apps/yaak-client/components/CookieDialog.tsx

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

apps/yaak-client/components/CopyIconButton.tsx

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

apps/yaak-client/components/CreateEnvironmentDialog.tsx

@@ -5,8 +5,8 @@ import { ColorIndicator } from "./ColorIndicator";
 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;

apps/yaak-client/components/CreateWorkspaceDialog.tsx

@@ -1,7 +1,7 @@
 import { gitMutations } from "@yaakapp-internal/git";
 import type { WorkspaceMeta } from "@yaakapp-internal/models";
 import { createGlobalModel, updateModel } from "@yaakapp-internal/models";
-import { VStack } from "@yaakapp-internal/ui";
+import { VStack, Label } from "@yaakapp-internal/ui";
 import { useId, useState } from "react";
 import { router } from "../lib/router";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
@@ -9,7 +9,6 @@ import { rpc } from "../lib/rpc";
 import { showErrorToast } from "../lib/toast";
 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";

apps/yaak-client/components/DynamicForm.tsx

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

apps/yaak-client/components/EmptyStateText.tsx

@@ -1,24 +1 @@
-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>
-  );
-}
+export { EmptyStateText } from "@yaakapp-internal/ui";

apps/yaak-client/components/EnvironmentEditDialog.tsx

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

apps/yaak-client/components/EnvironmentSharableTooltip.tsx

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

apps/yaak-client/components/ErrorBoundary.tsx

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

apps/yaak-client/components/ExportDataDialog.tsx

@@ -5,7 +5,6 @@ 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 { Checkbox } from "./core/Checkbox";
@@ -13,6 +12,7 @@ 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;

apps/yaak-client/components/FolderLayout.tsx

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

apps/yaak-client/components/FolderSettingsDialog.tsx

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

apps/yaak-client/components/FormUrlencodedEditor.tsx

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

apps/yaak-client/components/GrpcEditor.tsx

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

apps/yaak-client/components/GrpcProtoSelectionDialog.tsx

@@ -3,11 +3,11 @@ import { Banner, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useActiveRequest } from "../hooks/useActiveRequest";
 import { useGrpc } from "../hooks/useGrpc";
 import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
-import { pluralizeCount } from "../lib/pluralize";
 import { DialogFooter } from "./core/Dialog";
 import { PathList } from "./core/PathList";
 import { Link } from "./core/Link";
 import { platform } from "@yaakapp-internal/platform";
+import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   onDone: () => void;

apps/yaak-client/components/GrpcRequestPane.tsx

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

apps/yaak-client/components/GrpcResponsePane.tsx

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

apps/yaak-client/components/HeadersEditor.tsx

@@ -1,181 +1 @@
-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 { validateHttpHeader } from "../lib/validateHttpHeader";
-import { CountBadge } from "./core/CountBadge";
-import { DetailsBanner } from "./core/DetailsBanner";
-import type { GenericCompletion, GenericCompletionConfig } from "./core/Editor/genericCompletion";
-import type { InputProps } from "./core/Input";
-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
-        },
-  ),
-};
+export { HeadersEditor } from "@yaakapp-internal/ui";

apps/yaak-client/components/HttpAuthenticationEditor.tsx

@@ -6,7 +6,7 @@ import type {
   Workspace,
 } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode } from "@yaakapp-internal/ui";
+import { HStack, Icon, InlineCode, SegmentedControl } from "@yaakapp-internal/ui";
 import { useCallback } from "react";
 import { openFolderSettings } from "../commands/openFolderSettings";
 import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
@@ -21,7 +21,6 @@ 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";
 

apps/yaak-client/components/HttpRequestPane.tsx

@@ -1,9 +1,16 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
 import { getModel, patchModel, patchModelDebounced } from "@yaakapp-internal/models";
 import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
-import classNames from "classnames";
+import {
+  CountBadge,
+  type EditablePair,
+  type ExtraPaneTab,
+  HttpRequestPaneView,
+  InlineCode,
+  languageFromContentType,
+} from "@yaakapp-internal/ui";
 import { atom, useAtomValue } from "jotai";
-import type { CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { lazy, Suspense, useCallback, useMemo, useRef, useState } from "react";
 import { importCurl, looksLikeCurl } from "../commands/importCurl";
 import { allRequestUrlsAtom } from "../hooks/useAllRequests";
@@ -15,10 +22,8 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
 import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
-import { languageFromContentType } from "../lib/contentType";
-import { generateId } from "../lib/generateId";
-import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
-import { convertRequestBody } from "../lib/requestBodyConversion";
+import { fireAndForget } from "../lib/fireAndForget";
+import { httpRequestToView } from "../lib/httpViews";
 import {
   BODY_TYPE_BINARY,
   BODY_TYPE_FORM_MULTIPART,
@@ -30,30 +35,24 @@ 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, TabContent, Tabs } from "./core/Tabs/Tabs";
-import { EmptyStateText } from "./EmptyStateText";
-import { FormMultipartEditor } from "./FormMultipartEditor";
-import { FormUrlencodedEditor } from "./FormUrlencodedEditor";
-import { HeadersEditor } from "./HeadersEditor";
+import { setActiveTab } from "./core/Tabs/Tabs";
 import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
-import { JsonBodyEditor } from "./JsonBodyEditor";
 import { MarkdownEditor } from "./MarkdownEditor";
-import { RequestMethodDropdown } from "./RequestMethodDropdown";
 import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
-import { UrlBar } from "./UrlBar";
+import { RequestMethodDropdown } from "./RequestMethodDropdown";
 import { UrlParametersEditor } from "./UrlParameterEditor";
+import { generateId } from "@yaakapp-internal/lib/generateId";
 
 const GraphQLEditor = lazy(() =>
   import("./graphql/GraphQLEditor").then((m) => ({ default: m.GraphQLEditor })),
@@ -167,9 +166,9 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
 
   const hasDescription = activeRequest.description.trim().length > 0;
 
-  const tabs = useMemo<TabItem[]>(
-    () => [
-      {
+  const bodyTab = useMemo<TabItem>(
+    () =>
+      ({
         value: TAB_BODY,
         rightSlot: numParams > 0 ? <CountBadge count={numParams} /> : null,
         options: {
@@ -246,36 +245,8 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
             }
           },
         },
-      },
-      {
-        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",
-        rightSlot: hasDescription && <CountBadge count={true} />,
-      },
-    ],
-    [
-      activeRequest,
-      authTab,
-      contentType,
-      handleContentTypeChange,
-      hasDescription,
-      headersTab,
-      numParams,
-      numSettingsOverrides,
-      urlParameterPairs.length,
-    ],
+      }) satisfies TabItem,
+    [activeRequest, contentType, handleContentTypeChange, numParams],
   );
 
   const { mutate: sendRequest } = useSendAnyHttpRequest();
@@ -337,154 +308,152 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
     [activeRequest],
   );
 
-  return (
-    <div
-      style={style}
-      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"}
+  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}
           />
-          <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>
+        ) : (
+          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
+      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}
+    />
   );
 }
 

apps/yaak-client/components/HttpResponsePane.tsx

@@ -1,50 +1,36 @@
 import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
-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 {
+  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 { 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 { useResponseBodyBytes, useResponseBodyText } from "../hooks/useResponseBodyText";
-import { useResponseBodyUrl } from "../hooks/useResponseBodyUrl";
+import { useRecentFilters } from "../hooks/useRecentFilters";
 import { useResponseViewMode } from "../hooks/useResponseViewMode";
 import { useSaveResponse } from "../hooks/useSaveResponse";
 import { useTimelineViewMode } from "../hooks/useTimelineViewMode";
-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 { httpResponseToView } from "../lib/httpViews";
+import { getCookieCounts } from "../lib/model_util";
+import { CopyButton } from "./CopyButton";
 import { HotkeyList } from "./core/HotkeyList";
-import { HttpResponseDurationTag } from "./core/HttpResponseDurationTag";
-import { HttpStatusTag } from "./core/HttpStatusTag";
+import { IconButton } from "./core/IconButton";
 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 { 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 })),
-);
+import { RecentFiltersDropdown } from "./responseViewers/RecentFiltersDropdown";
 
 interface Props {
   style?: CSSProperties;
@@ -52,10 +38,6 @@ 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";
@@ -65,12 +47,11 @@ 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(
@@ -83,280 +64,181 @@ 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 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: [
-            {
-              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,
-            },
-          ],
-        },
-      },
-      {
-        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 responseView = useMemo(
+    () => (activeResponse == null ? null : httpResponseToView(activeResponse, responseEvents.data)),
+    [activeResponse, responseEvents.data],
   );
 
-  const cancel = useCancelHttpResponse(activeResponse?.id ?? null);
+  const extraTabs = useMemo<ExtraPaneTab[]>(
+    () =>
+      activeResponse == null
+        ? []
+        : [
+            {
+              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} />
+              ),
+            },
+          ],
+    [activeResponse, responseEvents.data?.length, setTimelineViewMode, timelineViewMode],
+  );
+
+  const renderBodyViewer = useCallback(
+    ({ mimeType, viewMode }: HostBodyViewerArgs) =>
+      activeResponse != null && mimeType?.match(/^text\/event-stream/i) && viewMode === "pretty" ? (
+        <EventStreamViewer response={activeResponse} />
+      ) : null,
+    [activeResponse],
+  );
 
   return (
-    <div
+    <HttpResponsePaneView
       style={style}
-      className={classNames(
-        className,
-        "x-theme-responsePane",
-        "max-h-full h-full",
-        "bg-surface rounded-md border border-border-subtle overflow-hidden",
-        "relative",
-      )}
-    >
-      {activeResponse == null ? (
+      className={className}
+      response={responseView}
+      body={body}
+      requestBody={requestBody}
+      emptyState={
         <HotkeyList hotkeys={["request.send", "model.create", "sidebar.focus", "url_bar.focus"]} />
-      ) : (
-        <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",
-            )}
-          >
-            {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",
+      }
+      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>
                 )}
-              >
-                <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>
+                {redirectDropWarning.droppedHeaders.length > 0 && (
+                  <span>
+                    Headers dropped:{" "}
+                    <span className="font-mono">
+                      {redirectDropWarning.droppedHeaders.join(", ")}
                     </span>
-                  </Tooltip>
-                ) : (
-                  <span />
+                  </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>
+                <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>
+        ) : null
+      }
+      statusLineRight={
+        activeResponse != null && (
+          <RecentHttpResponsesDropdown
+            responses={responses}
+            activeResponse={activeResponse}
+            onPinnedResponseId={setPinnedResponseId}
+          />
+        )
+      }
+    />
   );
 }
 
+/** 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 {
@@ -404,58 +286,3 @@ 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} />;
-}

apps/yaak-client/components/HttpResponseTimeline.tsx

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

apps/yaak-client/components/ImportDataDialog.tsx

@@ -5,11 +5,18 @@ import {
   type ImportSource,
   type Workspace,
 } from "@yaakapp-internal/models";
-import { Banner, FormattedError, HStack, Icon, VStack } from "@yaakapp-internal/ui";
+import {
+  Banner,
+  FormattedError,
+  HStack,
+  Icon,
+  VStack,
+  IconTooltip,
+  SegmentedControl,
+} from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { errorMessage } from "../lib/errorMessage";
-import { pluralize } from "../lib/pluralize";
 import { CommercialUseBanner } from "./CommercialUseBanner";
 import {
   ImportSourceList,
@@ -22,9 +29,8 @@ import type { CheckboxTreeNode } from "./core/CheckboxTree";
 import { CheckboxTree } from "./core/CheckboxTree";
 import { Chip } from "./core/Chip";
 import { DialogFooter } from "./core/Dialog";
-import { IconTooltip } from "./core/IconTooltip";
 import { Select } from "./core/Select";
-import { SegmentedControl } from "./core/SegmentedControl";
+import { pluralize } from "@yaakapp-internal/lib/pluralize";
 
 interface Props {
   currentWorkspace: Workspace | null;

apps/yaak-client/components/JsonBodyEditor.tsx

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

apps/yaak-client/components/LargeValueDialog.tsx

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

apps/yaak-client/components/MarkdownEditor.tsx

@@ -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";

apps/yaak-client/components/MoveToWorkspaceDialog.tsx

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

apps/yaak-client/components/RecentGrpcConnectionsDropdown.tsx

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

apps/yaak-client/components/RecentHttpResponsesDropdown.tsx

@@ -1,6 +1,6 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { deleteModel } from "@yaakapp-internal/models";
-import { HStack, Icon } from "@yaakapp-internal/ui";
+import { HStack, Icon, formatMillis, HttpStatusTag, SizeTag } from "@yaakapp-internal/ui";
 import {
   differenceInHours,
   differenceInMinutes,
@@ -9,13 +9,8 @@ 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[];
@@ -30,12 +25,6 @@ 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;
@@ -126,20 +115,6 @@ 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",

apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx

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

apps/yaak-client/components/RequestBodyViewer.tsx

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

apps/yaak-client/components/RequestMethodDropdown.tsx

@@ -1,38 +1,20 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
-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";
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { RequestMethodDropdown as BaseRequestMethodDropdown } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { memo, useCallback } from "react";
 
 type Props = {
   request: HttpRequest;
   className?: string;
 };
 
-const radioItems: RadioDropdownItem<string>[] = [
-  "GET",
-  "PUT",
-  "POST",
-  "PATCH",
-  "DELETE",
-  "OPTIONS",
-  "QUERY",
-  "HEAD",
-].map((m) => ({
-  value: m,
-  label: <HttpMethodTagRaw method={m} />,
-}));
-
+/** The shared method menu, writing to the request and coloured by the user's setting */
 export const RequestMethodDropdown = memo(function RequestMethodDropdown({
   request,
   className,
 }: Props) {
+  const settings = useAtomValue(settingsAtom);
   const handleChange = useCallback(
     async (method: string) => {
       await patchModel(request, { method });
@@ -40,39 +22,12 @@ 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 (
-    <RadioDropdown
-      value={request.method}
-      items={radioItems}
-      itemsAfter={itemsAfter}
+    <BaseRequestMethodDropdown
+      method={request.method}
+      colored={settings.coloredMethods}
       onChange={handleChange}
-    >
-      <Button size="xs" className={classNames(className, "text-text-subtle hover:text")}>
-        <HttpMethodTag request={request} noAlias />
-      </Button>
-    </RadioDropdown>
+      className={className}
+    />
   );
 });

apps/yaak-client/components/ResponseHeaders.tsx

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

apps/yaak-client/components/ResponseInfo.tsx

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

apps/yaak-client/components/SelectFile.tsx

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

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

@@ -1,14 +1,20 @@
 import { platform } from "@yaakapp-internal/platform";
 import { useLicense } from "@yaakapp-internal/license";
 import { pluginsAtom, settingsAtom } from "@yaakapp-internal/models";
-import { HeaderSize, HStack, Icon } from "@yaakapp-internal/ui";
-import classNames from "classnames";
+import {
+  CountBadge,
+  SETTINGS_TAB_GENERAL,
+  SETTINGS_TAB_INTERFACE,
+  SETTINGS_TAB_LICENSE,
+  SETTINGS_TAB_THEME,
+  SettingsDialog,
+  type SettingsTabDef,
+} from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useKeyPressEvent } from "react-use";
 import { appInfo } from "../../lib/appInfo";
 import { capitalize } from "../../lib/capitalize";
-import { CountBadge } from "../core/CountBadge";
-import { TabContent, type TabItem, Tabs } from "../core/Tabs/Tabs";
+import { SettingsAgents } from "./SettingsAgents";
 import { SettingsCertificates } from "./SettingsCertificates";
 import { SettingsGeneral } from "./SettingsGeneral";
 import { SettingsHotkeys } from "./SettingsHotkeys";
@@ -24,20 +30,22 @@ interface Props {
   hide?: () => void;
 }
 
-const TAB_GENERAL = "general";
-const TAB_INTERFACE = "interface";
-const TAB_THEME = "theme";
+const TAB_GENERAL = SETTINGS_TAB_GENERAL;
+const TAB_INTERFACE = SETTINGS_TAB_INTERFACE;
+const TAB_THEME = SETTINGS_TAB_THEME;
 const TAB_SHORTCUTS = "shortcuts";
 const TAB_PROXY = "proxy";
 const TAB_CERTIFICATES = "certificates";
 const TAB_PLUGINS = "plugins";
-const TAB_LICENSE = "license";
+const TAB_AGENTS = "agents";
+const TAB_LICENSE = SETTINGS_TAB_LICENSE;
 const tabs = [
   TAB_GENERAL,
   TAB_THEME,
   TAB_INTERFACE,
   TAB_SHORTCUTS,
   TAB_PLUGINS,
+  TAB_AGENTS,
   TAB_CERTIFICATES,
   TAB_PROXY,
   TAB_LICENSE,
@@ -58,98 +66,57 @@ export default function Settings({ tab, hide }: Props) {
     if (hide == null) 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 (
-    <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}
-        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>
+    <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] }))}
+    />
   );
 }

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

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

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

@@ -1,6 +1,6 @@
 import type { ClientCertificate } from "@yaakapp-internal/models";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { Heading, HStack, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { HStack, InlineCode, SettingsPage, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useRef } from "react";
 import { showConfirmDelete } from "../../lib/confirm";
@@ -218,24 +218,19 @@ export function SettingsCertificates() {
   };
 
   return (
-    <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 && (
+    <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}>
           {certificates.map((cert, index) => (
             <CertificateEditor
@@ -248,7 +243,7 @@ export function SettingsCertificates() {
             />
           ))}
         </VStack>
-      )}
-    </VStack>
+      ) : null}
+    </SettingsPage>
   );
 }

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

@@ -1,32 +1,17 @@
-import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { Heading, VStack } from "@yaakapp-internal/ui";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { SettingsGeneral as SharedSettingsGeneral } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
-import { useCheckForUpdates } from "../../hooks/useCheckForUpdates";
-import { appInfo } from "../../lib/appInfo";
-import { revealInFinderText } from "../../lib/reveal";
-import { CargoFeature } from "../CargoFeature";
+import { useSettingsView } from "../../hooks/useSettingsView";
 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 checkForUpdates = useCheckForUpdates();
+  const bound = useSettingsView();
 
-  if (settings == null) {
+  if (settings == null || bound == null) {
     return null;
   }
 
@@ -34,147 +19,24 @@ export function SettingsGeneral() {
     settings.createdAt.slice(0, 10) < WORKSPACE_SETTINGS_MOVED_AT;
 
   return (
-    <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 && (
+    <SharedSettingsGeneral
+      view={bound.view}
+      callbacks={bound.callbacks}
+      banner={<CommercialUseBanner source="settings-general" title="Using Yaak for work?" />}
+      extraSections={
+        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>
+        )
+      }
+    />
   );
 }

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

@@ -1,8 +1,8 @@
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
 import {
-  Heading,
   HStack,
   Icon,
+  SettingsPage,
   Table,
   TableBody,
   TableCell,
@@ -94,59 +94,58 @@ export function SettingsHotkeys() {
   }
 
   return (
-    <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)
+    <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 };
                   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 };
-                delete newHotkeys[action];
-                await patchModel(settings, { hotkeys: newHotkeys });
-              }}
-            />
-          ))}
-        </TableBody>
-      </Table>
-    </VStack>
+                  await patchModel(settings, { hotkeys: newHotkeys });
+                }}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </VStack>
+    </SettingsPage>
   );
 }
 

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

@@ -1,59 +1,30 @@
-import { platform } from "@yaakapp-internal/platform";
-import { useFonts } from "@yaakapp-internal/fonts";
 import { useLicense } from "@yaakapp-internal/license";
-import type { EditorKeymap, Settings } from "@yaakapp-internal/models";
+import type { Settings } from "@yaakapp-internal/models";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { clamp, Heading, VStack } from "@yaakapp-internal/ui";
+import { SettingsInterface as SharedSettingsInterface, 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 {
-  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" },
-];
+import { SettingRowBoolean, SettingRowSelect, SettingsSection } from "../core/SettingRow";
 
 export function SettingsInterface() {
   const workspace = useAtomValue(activeWorkspaceAtom);
   const settings = useAtomValue(settingsAtom);
-  const fonts = useFonts();
+  const bound = useSettingsView();
 
-  if (settings == null || workspace == null) {
+  if (settings == null || workspace == null || bound == null) {
     return null;
   }
 
   return (
-    <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">
+    <SharedSettingsInterface
+      view={bound.view}
+      callbacks={bound.callbacks}
+      leadingSections={
         <SettingsSection title="Workspaces">
           <SettingRowSelect
             title="Open workspace behavior"
@@ -78,151 +49,13 @@ export function SettingsInterface() {
             ]}
           />
         </SettingsSection>
-
-        <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>
-
+      }
+      trailingSections={
         <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>
+      }
+    />
   );
 }
 

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

@@ -1,17 +1,6 @@
-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 { SettingsLicense as SharedSettingsLicense } from "@yaakapp-internal/ui";
+import { useSettingsView } from "../../hooks/useSettingsView";
 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 (
@@ -22,166 +11,7 @@ export function SettingsLicense() {
 }
 
 function SettingsLicenseCmp() {
-  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>
-  );
+  const bound = useSettingsView();
+  if (bound == null) return null;
+  return <SharedSettingsLicense view={bound.view} callbacks={bound.callbacks} />;
 }

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

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

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

@@ -1,6 +1,6 @@
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
 import type { ProxySetting } from "@yaakapp-internal/models";
-import { Heading, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { InlineCode, SettingsPage } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { CommercialUseBanner } from "../CommercialUseBanner";
 import {
@@ -26,15 +26,11 @@ export function SettingsProxy() {
   };
 
   return (
-    <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?" />
+    <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?" />}
+    >
       <SettingsList className="space-y-8">
         <SettingsSection title="Proxy">
           <SettingRowSelect
@@ -160,7 +156,7 @@ export function SettingsProxy() {
           </>
         )}
       </SettingsList>
-    </VStack>
+    </SettingsPage>
   );
 }
 

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

@@ -1,173 +1,15 @@
-import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { Heading, HStack, Icon, type IconProps, VStack } from "@yaakapp-internal/ui";
+import { SettingsTheme as SharedSettingsTheme } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
-import { lazy, Suspense } from "react";
 import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
-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",
-];
+import { useSettingsView } from "../../hooks/useSettingsView";
 
 export function SettingsTheme() {
   const workspace = useAtomValue(activeWorkspaceAtom);
-  const settings = useAtomValue(settingsAtom);
-  const appearance = useResolvedAppearance();
-  const activeTheme = useResolvedTheme();
+  const bound = useSettingsView();
 
-  if (settings == null || workspace == null || activeTheme.data == null) {
+  if (workspace == null || bound == null) {
     return null;
   }
 
-  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>
-  );
+  return <SharedSettingsTheme view={bound.view} callbacks={bound.callbacks} />;
 }

apps/yaak-client/components/SettingsDropdown.tsx

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

apps/yaak-client/components/Sidebar.tsx

@@ -63,13 +63,10 @@ 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 { 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 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 { HttpMethodTag } from "./core/HttpMethodTag";
-import { HttpStatusTag } from "./core/HttpStatusTag";
 import {
   Icon,
   LoadingIcon,
@@ -77,6 +74,7 @@ import {
   isSelectedFamily,
   selectedIdsFamily,
   InlineCode,
+  HttpStatusTag,
 } from "@yaakapp-internal/ui";
 import type { TreeNode, TreeHandle, TreeProps, TreeItemProps } from "@yaakapp-internal/ui";
 import { IconButton } from "./core/IconButton";
@@ -112,7 +110,7 @@ function Sidebar({ className }: { className?: string }) {
   const activeWorkspaceId = useAtomValue(activeWorkspaceAtom)?.id;
   const treeId = `tree.${activeWorkspaceId ?? "unknown"}`;
   const filterText = useAtomValue(sidebarFilterAtom);
-  const [tree, allFields, emptyFilterSuggestions] = useAtomValue(sidebarTreeAtom) ?? [];
+  const [tree, fieldValues, emptyFilterSuggestions] = useAtomValue(sidebarTreeAtom) ?? [];
 
   const wrapperRef = useRef<HTMLElement>(null);
   const treeRef = useRef<TreeHandle>(null);
@@ -553,18 +551,18 @@ function Sidebar({ className }: { className?: string }) {
   const filterCompartmentMountExtRef = useRef<Extension | null>(null);
   if (filterCompartmentMountExtRef.current == null) {
     filterCompartmentMountExtRef.current = filterLanguageCompartmentRef.current.of(
-      filter({ fields: allFields ?? [] }),
+      queryFilter({ schema: sidebarFilterSchema, values: fieldValues }),
     );
   }
 
   useEffect(() => {
     const view = filterRef.current;
     if (!view) return;
-    const ext = filter({ fields: allFields ?? [] });
+    const ext = queryFilter({ schema: sidebarFilterSchema, values: fieldValues });
     view.dispatch({
       effects: filterLanguageCompartmentRef.current.reconfigure(ext),
     });
-  }, [allFields]);
+  }, [fieldValues]);
 
   if (tree == null || hidden) {
     return null;
@@ -852,16 +850,44 @@ function setSidebarFilterText(text: string) {
   jotaiStore.set(sidebarFilterAtom, { text, key: `${Math.random()}` });
 }
 
-function getSidebarSuggestionValue(ast: Ast | null) {
+/**
+ * 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) {
   if (ast == null) return null;
 
   if (ast.type === "Term" || ast.type === "Phrase") {
-    const value = ast.value.trim();
+    const value = ast.text.trim();
     return value.length > 0 ? value : null;
   }
 
   if (ast.type === "Field") {
-    const value = ast.value.trim();
+    const raw =
+      ast.value.type === "text"
+        ? ast.value.text
+        : query.slice(ast.valueSpan.start, ast.valueSpan.end);
+    const value = raw.trim();
     return value.length > 0 ? value : null;
   }
 
@@ -883,7 +909,7 @@ const sidebarSuggestionFieldOrder = [
 ];
 
 const sidebarTreeAtom = atom<
-  [TreeNode<SidebarModel>, FieldDef[], SidebarFilterSuggestion[]] | null
+  [TreeNode<SidebarModel>, Record<string, string[]>, SidebarFilterSuggestion[]] | null
 >((get) => {
   const allModels = get(memoAllPotentialChildrenAtom);
   const activeWorkspace = get(activeWorkspaceAtom);
@@ -904,15 +930,18 @@ const sidebarTreeAtom = atom<
     return null;
   }
 
-  const queryAst = parseQuery(filter.text);
-  const suggestionValue = getSidebarSuggestionValue(queryAst);
+  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)[] = [];
 
-  // 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): boolean => {
+  const build = (node: TreeNode<SidebarModel>, depth: number) => {
     const childItems = childrenMap[node.item.id] ?? [];
-    let matchesSelf = true;
     const fields = getItemFields(node);
     const model = node.item.model;
     const isLeafNode = !(model === "folder" || model === "workspace");
@@ -930,12 +959,12 @@ const sidebarTreeAtom = atom<
       }
     }
 
-    if (queryAst != null) {
-      matchesSelf = isLeafNode && evaluate(queryAst, { text: getItemText(node.item), fields });
+    if (isLeafNode && !matcher.isEmpty) {
+      leaves.push(node);
+      cells.push(getItemText(node.item));
+      for (const column of sidebarFilterColumns) cells.push(fields[column] ?? null);
     }
 
-    let matchesChild = false;
-
     // Recurse to children
     node.children = !isLeafNode ? [] : undefined;
 
@@ -953,19 +982,21 @@ const sidebarTreeAtom = atom<
 
       for (const item of childItems) {
         const childNode = { item, parent: node, depth };
-        const childMatches = build(childNode, depth + 1);
-        if (childMatches) {
-          matchesChild = true;
-        }
+        build(childNode, depth + 1);
         node.children.push(childNode);
       }
     }
+  };
 
-    // hide node IFF nothing in its subtree matches
-    const anyMatch = matchesSelf || matchesChild;
-    node.hidden = !anyMatch;
-
-    return anyMatch;
+  // 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;
   };
 
   const root: TreeNode<SidebarModel> = {
@@ -975,15 +1006,20 @@ 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);
 
-  const fields: FieldDef[] = [];
+  // 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[]> = {};
   for (const [name, values] of Object.entries(allFields)) {
-    fields.push({
-      name,
-      values: Array.from(values).filter((v) => v.length < 20),
-    });
+    if (name === "url" || name === "name") continue;
+    fieldValues[name] = Array.from(values);
   }
   const suggestions = Array.from(suggestionFields)
     .sort((a, b) => {
@@ -994,9 +1030,9 @@ const sidebarTreeAtom = atom<
     })
     .map((field) => ({
       field,
-      filterText: formatFieldFilter(field, suggestionValue ?? ""),
+      filterText: formatField(field, suggestionValue ?? ""),
     }));
-  return [root, fields, suggestions] as const;
+  return [root, fieldValues, suggestions] as const;
 });
 
 const sidebarGitStatusByModelIdAtom = atom<Record<string, GitStatus>>((get) => {

apps/yaak-client/components/TemplateFunctionDialog.test.tsx

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

apps/yaak-client/components/TemplateFunctionDialog.tsx

@@ -24,8 +24,11 @@ import { showDialog } from "../lib/dialog";
 import { convertTemplateToInsecure } from "../lib/encryption";
 import { jotaiStore } from "../lib/jotai";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
+import {
+  collectEditableArgumentValues,
+  preserveUnchangedArgumentExpressions,
+} from "../lib/templateFunctionArguments";
 import { DialogFooter } from "./core/Dialog";
-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";
@@ -48,7 +51,11 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
     }
 
     (async () => {
-      const initial = collectArgumentValues(initialTokens, templateFunction);
+      const initial = await collectEditableArgumentValues(
+        initialTokens,
+        templateFunction,
+        templateTokensToString,
+      );
 
       // HACK: Replace the secure() function's encrypted `value` arg with the decrypted version so
       //  we can display it in the editor input.
@@ -74,6 +81,7 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
     <InitializedTemplateFunctionDialog
       {...props}
       templateFunction={templateFunction}
+      initialTokens={initialTokens}
       initialArgValues={initialArgValues}
     />
   );
@@ -82,10 +90,11 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
 function InitializedTemplateFunctionDialog({
   templateFunction: { name, previewType: ogPreviewType },
   initialArgValues,
+  initialTokens,
   hide,
   onChange,
   model,
-}: Omit<Props, "initialTokens"> & {
+}: Props & {
   initialArgValues: Record<string, string | boolean>;
 }) {
   const previewType = ogPreviewType == null ? "live" : ogPreviewType;
@@ -111,12 +120,17 @@ function InitializedTemplateFunctionDialog({
           val: {
             type: "fn",
             name,
-            args: argTokens,
+            args: preserveUnchangedArgumentExpressions(
+              argTokens,
+              initialTokens,
+              initialArgValues,
+              argValues,
+            ),
           },
         },
       ],
     };
-  }, [argValues, name]);
+  }, [argValues, initialArgValues, initialTokens, name]);
 
   const tagText = useTemplateTokensToString(tokens);
   const templateFunction = useTemplateFunctionConfig(name, argValues, model);

apps/yaak-client/components/Toasts.tsx

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

apps/yaak-client/components/UrlBar.tsx

@@ -1,113 +1,14 @@
-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";
+import { UrlBar as BaseUrlBar, type UrlBarProps } from "@yaakapp-internal/ui";
+import { memo } from "react";
 
-type Props = Pick<HttpRequest, "url"> & {
-  className?: string;
-  placeholder: string;
+type Props = Omit<UrlBarProps, "sendHotkeyAction" | "focusHotkeyAction" | "readOnly"> & {
   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"];
 };
 
-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>
-  );
+/** 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" />;
 });

apps/yaak-client/components/UrlParameterEditor.tsx

@@ -1,8 +1,11 @@
-import { VStack } from "@yaakapp-internal/ui";
+import {
+  type EditablePair,
+  type PairEditorHandle,
+  type PairEditorProps,
+  UrlParametersEditor as BaseUrlParametersEditor,
+} 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;
@@ -11,6 +14,7 @@ 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) => {
@@ -33,22 +37,12 @@ export function UrlParametersEditor({ pairs, forceUpdateKey, onChange, stateKey
   );
 
   return (
-    <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>
+    <BaseUrlParametersEditor
+      setRef={handleInitPairEditorRef}
+      forceUpdateKey={forceUpdateKey + urlParametersKey}
+      onChange={onChange}
+      pairs={pairs}
+      stateKey={stateKey}
+    />
   );
 }

apps/yaak-client/components/WebsocketRequestPane.tsx

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

apps/yaak-client/components/WebsocketResponsePane.tsx

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

apps/yaak-client/components/Workspace.tsx

@@ -1,10 +1,10 @@
 import { platform } from "@yaakapp-internal/platform";
 import { settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
-import { Banner, HeaderSize, HStack, SidebarLayout } from "@yaakapp-internal/ui";
+import { Banner, HeaderSize, HeaderTint, HStack, SidebarLayout } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import * as m from "motion/react-m";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import {
   getActiveCookieJar,
   useEnsureActiveCookieJar,
@@ -61,12 +61,6 @@ 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]);
-
   if (workspaces.length === 0) {
     return <RedirectToLatestWorkspace />;
   }
@@ -81,13 +75,7 @@ export function Workspace() {
       useNativeTitlebar={settings.useNativeTitlebar}
       interfaceScale={settings.interfaceScale}
     >
-      <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>
+      <HeaderTint color={activeEnvironment?.color ?? null} />
       <WorkspaceHeader className="pointer-events-none" floatingSidebar={floating} />
     </HeaderSize>
   );

apps/yaak-client/components/WorkspaceEncryptionSetting.tsx

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

apps/yaak-client/components/WorkspaceSettingsDialog.test.tsx

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

apps/yaak-client/components/WorkspaceSettingsDialog.tsx

@@ -1,15 +1,22 @@
-import { patchModel, workspaceMetasAtom, workspacesAtom } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
+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 { 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";
@@ -48,6 +55,10 @@ 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 (
@@ -57,13 +68,6 @@ 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}
@@ -106,15 +110,26 @@ 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}>
-            <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>
+            {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}
           </SettingsSection>
           <ModelSettingsEditor model={workspace} showSectionTitles />
         </SettingsList>
@@ -178,6 +193,34 @@ 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",

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

@@ -1,36 +0,0 @@
-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",
-    });
-  });
-});

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

@@ -1,63 +0,0 @@
-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(),
-  };
-}

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

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

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

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

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

@@ -1,200 +1,2 @@
-import type { DialogSize } from "@yaakapp-internal/plugins";
-import { Heading, HStack, Overlay } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import * as m from "motion/react-m";
-import type { ReactNode } from "react";
-import { createContext, useContext, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import { Button, type ButtonProps } from "./Button";
-import { IconButton } from "./IconButton";
-
-export interface DialogProps {
-  children: ReactNode;
-  open: boolean;
-  onClose?: () => void;
-  /** Block dismissal from the backdrop, Escape key, and built-in close button. */
-  disableClose?: boolean;
-  title?: ReactNode;
-  description?: ReactNode;
-  className?: string;
-  size?: DialogSize;
-  /** Hide the built-in close button without changing backdrop or Escape behavior. */
-  hideX?: boolean;
-  noPadding?: boolean;
-  noScroll?: boolean;
-  vAlign?: "top" | "center";
-}
-
-export function Dialog({
-  children,
-  className,
-  size = "full",
-  open,
-  onClose,
-  disableClose,
-  title,
-  description,
-  hideX,
-  noPadding,
-  noScroll,
-  vAlign = "center",
-}: DialogProps) {
-  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
-  const [footerEl, setFooterEl] = useState<HTMLDivElement | null>(null);
-  const descriptionId = useMemo(
-    () => (description ? Math.random().toString(36).slice(2) : undefined),
-    [description],
-  );
-
-  return (
-    <Overlay open={open} onClose={disableClose ? undefined : onClose} portalName="dialog">
-      <div
-        role="dialog"
-        className={classNames(
-          "py-4 x-theme-dialog absolute inset-0 pointer-events-none",
-          "h-full flex flex-col items-center justify-center",
-          vAlign === "top" && "justify-start",
-          vAlign === "center" && "justify-center",
-        )}
-        aria-labelledby={titleId}
-        aria-describedby={descriptionId}
-        tabIndex={-1}
-        onKeyDown={(e) => {
-          // NOTE: We handle Escape on the element itself so that it doesn't close multiple
-          //   dialogs and can be intercepted by children if needed.
-          if (e.key === "Escape") {
-            if (!disableClose) onClose?.();
-            e.stopPropagation();
-            e.preventDefault();
-          }
-        }}
-      >
-        <m.div
-          initial={{ top: 5, scale: 0.97 }}
-          animate={{ top: 0, scale: 1 }}
-          className={classNames(
-            className,
-            "grid grid-rows-[auto_auto_minmax(0,1fr)_auto]",
-            "grid-cols-1", // must be here for inline code blocks to correctly break words
-            "relative bg-surface pointer-events-auto",
-            "rounded-lg",
-            "border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]",
-            "min-h-40",
-            "max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]",
-            size === "sm" && "w-120",
-            size === "md" && "w-200",
-            size === "lg" && "w-280",
-            size === "full" && "w-screen h-screen",
-            size === "dynamic" && "min-w-80 max-w-[100vw]",
-          )}
-        >
-          {title ? (
-            <Heading className="px-6 mt-4 mb-2" level={1} id={titleId}>
-              {title}
-            </Heading>
-          ) : (
-            <span />
-          )}
-
-          {description ? (
-            <div className="min-h-0 px-6 text-text-subtle mb-3" id={descriptionId}>
-              {description}
-            </div>
-          ) : (
-            <span />
-          )}
-
-          <div
-            className={classNames(
-              "h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1",
-              !noPadding && "px-6 py-2",
-              !noScroll && "overflow-y-auto overflow-x-hidden",
-            )}
-          >
-            <DialogFooterSlot.Provider value={footerEl}>{children}</DialogFooterSlot.Provider>
-          </div>
-
-          <div ref={setFooterEl} className="contents" />
-
-          {/*Put close at the end so that it's the last thing to be tabbed to*/}
-          {!disableClose && !hideX && (
-            <div className="ml-auto absolute right-1 top-1">
-              <IconButton
-                className="opacity-70 hover:opacity-100"
-                onClick={onClose}
-                title="Close dialog (Esc)"
-                aria-label="Close"
-                size="sm"
-                icon="x"
-              />
-            </div>
-          )}
-        </m.div>
-      </div>
-    </Overlay>
-  );
-}
-
-const DialogFooterSlot = createContext<HTMLDivElement | null>(null);
-
-export interface DialogFooterAction {
-  label: string;
-  onClick?: () => void;
-  /** Submit the form with this id, which can be anywhere in the dialog body */
-  form?: string;
-  color?: ButtonProps["color"];
-  variant?: ButtonProps["variant"];
-  disabled?: boolean;
-  isLoading?: boolean;
-  autoFocus?: boolean;
-  leftSlot?: ReactNode;
-  rightSlot?: ReactNode;
-}
-
-/**
- * The action row at the bottom of a dialog. Render it anywhere in the dialog's content and it is
- * placed below the scrolling body, outside its padding. `inline` drops the divider for small
- * dialogs whose body never scrolls.
- */
-export function DialogFooter({
-  actions,
-  leftSlot,
-  inline,
-}: {
-  actions: DialogFooterAction[];
-  leftSlot?: ReactNode;
-  inline?: boolean;
-}) {
-  const slot = useContext(DialogFooterSlot);
-  const footer = (
-    <footer
-      className={classNames(
-        "px-6 flex items-center gap-3",
-        inline ? "pt-1 pb-4" : "py-3 border-t border-border-subtle",
-      )}
-    >
-      {leftSlot != null && <div className="mr-auto min-w-0">{leftSlot}</div>}
-      <HStack space={2} justifyContent="end" className="ml-auto shrink-0">
-        {actions.map((action, i) => (
-          <Button
-            // Labels change with state ("Cloning...", "Apply 3 Changes"), so they can't be keys
-            key={i}
-            type={action.form != null ? "submit" : "button"}
-            form={action.form}
-            color={action.color ?? "secondary"}
-            variant={action.variant ?? (action.color == null ? "border" : "solid")}
-            disabled={action.disabled}
-            isLoading={action.isLoading}
-            autoFocus={action.autoFocus}
-            leftSlot={action.leftSlot}
-            rightSlot={action.rightSlot}
-            onClick={action.onClick}
-          >
-            {action.label}
-          </Button>
-        ))}
-      </HStack>
-    </footer>
-  );
-  return slot == null ? footer : createPortal(footer, slot);
-}
+export type { DialogFooterAction, DialogProps } from "@yaakapp-internal/ui";
+export { Dialog, DialogFooter } from "@yaakapp-internal/ui";

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

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

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

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

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

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

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

@@ -1,78 +0,0 @@
-@top Query { Expr }
-
-@skip { space+ }
-@tokens {
-  space { $[ \t\r\n]+ }
-
-  LParen { "(" }
-  RParen { ")" }
-  At { "@" }
-  Colon  { ":" }
-  Not  { "-" | "NOT" }
-
-  // Keywords (case-insensitive)
-  And    { "AND" }
-  Or     { "OR" }
-
-  // "quoted phrase" with simple escapes: \" and \\
-  Phrase { '"' (!["\\] | "\\" _)* '"' }
-
-  // Bare words run until filter syntax or whitespace. Leading '-' remains unary
-  // negation, but '-' may appear after the first character.
-  Word { ![ \t\r\n():"@-] ![ \t\r\n():"@]* }
-  FieldValueWord { ![ \t\r\n"] ![ \t\r\n]* }
-
-  @precedence { Not, And, Or, Word }
-}
-
-@detectDelim
-
-// Precedence: NOT (highest) > AND > OR (lowest)
-// We also allow implicit AND in your parser/evaluator, but for highlighting,
-// this grammar parses explicit AND/OR/NOT + adjacency as a sequence (Seq).
-Expr {
-  OrExpr
-}
-
-OrExpr {
-  AndExpr (Or AndExpr)*
-}
-
-AndExpr {
-  Unary (And Unary | Unary)*  // allow implicit AND by adjacency: Unary Unary
-}
-
-Unary {
-  Not Unary
-| Primary
-}
-
-Primary {
-  Group
-| Field
-| Phrase
-| Term
-}
-
-Group {
-  LParen Expr RParen
-}
-
-Field {
-  FieldName Colon FieldValue
-}
-
-FieldName {
-  At? Word
-}
-
-FieldValue {
-  Phrase
-| FieldValueWord
-}
-
-Term {
-  Word
-}
-
-@external propSource highlight from "./highlight"

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

@@ -1,42 +0,0 @@
-import { describe, expect, test } from "vite-plus/test";
-import { parser } from "./filter";
-
-function getNodeNames(input: string): string[] {
-  const tree = parser.parse(input);
-  const nodes: string[] = [];
-  const cursor = tree.cursor();
-  do {
-    if (cursor.name !== "Query") {
-      nodes.push(cursor.name);
-    }
-  } while (cursor.next());
-  return nodes;
-}
-
-describe("filter grammar", () => {
-  test("parses URL-like field values as one value", () => {
-    const nodes = getNodeNames("@url:yaak.app/foo-bar");
-
-    expect(nodes).not.toContain("⚠");
-    expect(nodes).toContain("FieldValue");
-    expect(nodes).toContain("FieldValueWord");
-  });
-
-  test("parses punctuation-heavy field values as one value", () => {
-    const nodes = getNodeNames("@url:yaa$&#*@tsrna(*)");
-
-    expect(nodes).not.toContain("⚠");
-    expect(nodes).toContain("FieldValue");
-    expect(nodes).toContain("FieldValueWord");
-  });
-
-  test("parses operator-looking field values as one value", () => {
-    const negativeValueNodes = getNodeNames("@url:-foo");
-    const operatorWordNodes = getNodeNames("@url:AND");
-
-    expect(negativeValueNodes).not.toContain("⚠");
-    expect(negativeValueNodes).toContain("FieldValueWord");
-    expect(operatorWordNodes).not.toContain("⚠");
-    expect(operatorWordNodes).toContain("FieldValueWord");
-  });
-});

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

@@ -1,22 +0,0 @@
-// This file was generated by lezer-generator. You probably shouldn't edit it.
-import {LRParser} from "@lezer/lr"
-import {highlight} from "./highlight"
-export const parser = LRParser.deserialize({
-  version: 14,
-  states: "%WOVQPOOPhOPOOOVQPO'#CfOmQPO'#ChO!_QPO'#ChO!dQPO'#CgOOQO'#Cc'#CcOVQPO'#CaOOQO'#Ca'#CaO!iQPO'#C`O!yQPO'#C_OOQO'#C^'#C^QOQPOOPOOO'#Cr'#CrP#UOPO)C>lO#]QPO,59QOOQO,59S,59SO#bQQO,59ROOQO,58{,58{OVQPO'#CsOOQO'#Cs'#CsO#jQPO,58zOVQPO'#CtO#zQPO,58yPOOO-E6p-E6pOOQO1G.l1G.lOOQO'#Cl'#ClOOQO1G.m1G.mOOQO,59_,59_OOQO-E6q-E6qOOQO,59`,59`OOQO-E6r-E6r",
-  stateData: "$]~OkPQ~OUVOXQO]SO^ROaUO~Ok]O~OUcXXcX]cX^cX_[XacXdcXecXicXWcX~O^`O~O_aO~OdcOeSXiSXWSX~PVOefOiRXWRX~Ok]O~Qj]WiO~OajObjO~OdcOeSaiSaWSa~PVOefOiRaWRa~OUde^e~",
-  goto: "#^iPPjpt{P![PP!e!e!nPPP!wPP!ePP!z#Q#WQ[OR_QTZOQSYOQRnfUXOQfQbVSdXeRlc_WOQVXcef_UOQVXcef_TOQVXcefRkaQ^PRh^QeXRmeQgYRog",
-  nodeNames: "⚠ Query Expr OrExpr AndExpr Unary Not Primary RParen LParen Group Field FieldName At Word Colon FieldValue Phrase FieldValueWord Term And Or",
-  maxTerm: 27,
-  nodeProps: [
-    ["openedBy", 8,"LParen"],
-    ["closedBy", 9,"RParen"]
-  ],
-  propSources: [highlight],
-  skippedNodes: [0,22],
-  repeatNodeCount: 3,
-  tokenData: "2h~RiOX!pXY$hYZ$hZ]!p]^$h^p!ppq$hqr!prs$ysx!pxy&gyz'Qz}!p}!O'k!O![!p![!](U!]!b!p!b!c(o!c!d)Y!d!p!p!p!q,q!q!r0Y!r;'S!p;'S;=`$b<%lO!pR!w^bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!pQ#xUbQOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sQ$_P;=`<%l#sR$eP;=`<%l!p~$mSk~XY$hYZ$h]^$hpq$h~$|VOr$yrs%cs#O$y#O#P%h#P;'S$y;'S;=`&a<%lO$y~%hOa~~%kRO;'S$y;'S;=`%t;=`O$y~%wWOr$yrs%cs#O$y#O#P%h#P;'S$y;'S;=`&a;=`<%l$y<%lO$y~&dP;=`<%l$yR&nUbQXPOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR'XUbQWPOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR'rUbQUPOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR(]U_PbQOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR(vU]PbQOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR)a`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!p!p!p!q*c!q;'S!p;'S;=`$b<%lO!pR*j`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!f!p!f!g+l!g;'S!p;'S;=`$b<%lO!pR+u^bQdP^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!pR,x`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!q!p!q!r-z!r;'S!p;'S;=`$b<%lO!pR.R`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!v!p!v!w/T!w;'S!p;'S;=`$b<%lO!pR/^^bQUP^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!pR0a`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!t!p!t!u1c!u;'S!p;'S;=`$b<%lO!pR1l^bQeP^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!p",
-  tokenizers: [0, 1],
-  topRules: {"Query":[0,1]},
-  tokenPrec: 145
-})

apps/yaak-client/components/core/Editor/filter/format.test.ts

@@ -1,43 +0,0 @@
-import { describe, expect, test } from "vite-plus/test";
-import { formatFieldFilter } from "./format";
-import { evaluate, parseQuery } from "./query";
-
-function matchesFormattedUrl(value: string) {
-  return evaluate(parseQuery(formatFieldFilter("url", value)), {
-    fields: { url: value },
-  });
-}
-
-describe("formatFieldFilter", () => {
-  test("keeps URL-like values bare", () => {
-    expect(formatFieldFilter("url", "yaak.app/foo-bar")).toBe("@url:yaak.app/foo-bar");
-    expect(matchesFormattedUrl("yaak.app/foo-bar")).toBe(true);
-  });
-
-  test("keeps non-syntax punctuation bare", () => {
-    expect(formatFieldFilter("url", "yaa$&#*@tsrna(*)")).toBe("@url:yaa$&#*@tsrna(*)");
-    expect(matchesFormattedUrl("yaa$&#*@tsrna(*)")).toBe(true);
-  });
-
-  test("keeps values that start with an operator token bare", () => {
-    expect(formatFieldFilter("url", "-foo")).toBe("@url:-foo");
-    expect(matchesFormattedUrl("-foo")).toBe(true);
-  });
-
-  test("keeps boolean operator words bare", () => {
-    expect(formatFieldFilter("url", "AND")).toBe("@url:AND");
-    expect(formatFieldFilter("url", "or")).toBe("@url:or");
-    expect(formatFieldFilter("url", "Not")).toBe("@url:Not");
-    expect(matchesFormattedUrl("AND")).toBe(true);
-  });
-
-  test("escapes quoted values", () => {
-    expect(formatFieldFilter("url", 'say "hi"')).toBe('@url:"say \\"hi\\""');
-    expect(matchesFormattedUrl('say "hi"')).toBe(true);
-  });
-
-  test("quotes values that start with a quote", () => {
-    expect(formatFieldFilter("url", '"hi"')).toBe('@url:"\\"hi\\""');
-    expect(matchesFormattedUrl('"hi"')).toBe(true);
-  });
-});

apps/yaak-client/components/core/Editor/filter/format.ts

@@ -1,7 +0,0 @@
-const bareFieldValue = /^[^\s"]\S*$/;
-
-export function formatFieldFilter(field: string, value: string) {
-  const escapedValue = value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
-  const filterValue = bareFieldValue.test(value) ? value : `"${escapedValue}"`;
-  return `@${field}:${filterValue}`;
-}

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

@@ -1,22 +0,0 @@
-import { styleTags, tags as t } from "@lezer/highlight";
-
-export const highlight = styleTags({
-  // Boolean operators
-  And: t.operatorKeyword,
-  Or: t.operatorKeyword,
-  Not: t.operatorKeyword,
-
-  // Structural punctuation
-  LParen: t.paren,
-  RParen: t.paren,
-  Colon: t.punctuation,
-  Minus: t.operator,
-
-  // Literals
-  Phrase: t.string, // "quoted string"
-
-  // Fields
-  "FieldName/At": t.attributeName,
-  "FieldName/Word": t.attributeName,
-  "FieldValue/FieldValueWord": t.attributeValue,
-});

apps/yaak-client/components/core/Editor/filter/query.ts

@@ -1,308 +0,0 @@
-// query.ts
-// A tiny query language parser with NOT/AND/OR, parentheses, phrases, negation, and field:value.
-
-import { fuzzyMatch } from "fuzzbunny";
-/////////////////////////
-// AST
-/////////////////////////
-
-export type Ast =
-  | { type: "Term"; value: string } // foo
-  | { type: "Phrase"; value: string } // "hi there"
-  | { type: "Field"; field: string; value: string } // method:POST or title:"exact phrase"
-  | { type: "Not"; node: Ast } // -foo or NOT foo
-  | { type: "And"; left: Ast; right: Ast } // a AND b
-  | { type: "Or"; left: Ast; right: Ast }; // a OR b
-
-/////////////////////////
-// Tokenizer
-/////////////////////////
-type Tok =
-  | { kind: "LPAREN" }
-  | { kind: "RPAREN" }
-  | { kind: "AND" }
-  | { kind: "OR" }
-  | { kind: "NOT" } // explicit NOT
-  | { kind: "MINUS" } // unary minus before term/phrase/paren group
-  | { kind: "COLON" }
-  | { kind: "WORD"; text: string } // bareword (unquoted)
-  | { kind: "PHRASE"; text: string } // "quoted phrase"
-  | { kind: "EOF" };
-
-const isSpace = (c: string) => /\s/.test(c);
-const isWordStart = (c: string) => c !== "" && !isSpace(c) && !/[():"@-]/.test(c);
-const isWordChar = (c: string) => c !== "" && !isSpace(c) && !/[():"@]/.test(c);
-
-export function tokenize(input: string): Tok[] {
-  const toks: Tok[] = [];
-  let i = 0;
-  const n = input.length;
-
-  const peek = () => input[i] ?? "";
-  const advance = () => input[i++];
-
-  const readWord = () => {
-    let s = "";
-    while (i < n && isWordChar(peek())) s += advance();
-    return s;
-  };
-
-  const readFieldValue = () => {
-    let s = "";
-    while (i < n && !isSpace(peek())) s += advance();
-    return s;
-  };
-
-  const readPhrase = () => {
-    // assumes current char is opening quote
-    advance(); // consume opening "
-    let s = "";
-    while (i < n) {
-      const c = advance();
-      if (c === `"`) break;
-      if (c === "\\" && i < n) {
-        // escape \" and \\ (simple)
-        const next = advance();
-        s += next;
-      } else {
-        s += c;
-      }
-    }
-    return s;
-  };
-
-  while (i < n) {
-    const c = peek();
-
-    if (isSpace(c)) {
-      i++;
-      continue;
-    }
-
-    if (c === "(") {
-      toks.push({ kind: "LPAREN" });
-      i++;
-      continue;
-    }
-    if (c === ")") {
-      toks.push({ kind: "RPAREN" });
-      i++;
-      continue;
-    }
-    if (c === ":") {
-      toks.push({ kind: "COLON" });
-      i++;
-      if (peek() && !isSpace(peek()) && peek() !== `"`) {
-        toks.push({ kind: "WORD", text: readFieldValue() });
-      }
-      continue;
-    }
-    if (c === `"`) {
-      const text = readPhrase();
-      toks.push({ kind: "PHRASE", text });
-      continue;
-    }
-    if (c === "-") {
-      toks.push({ kind: "MINUS" });
-      i++;
-      continue;
-    }
-
-    // WORD / AND / OR / NOT
-    if (isWordStart(c)) {
-      const w = readWord();
-      const upper = w.toUpperCase();
-      if (upper === "AND") toks.push({ kind: "AND" });
-      else if (upper === "OR") toks.push({ kind: "OR" });
-      else if (upper === "NOT") toks.push({ kind: "NOT" });
-      else toks.push({ kind: "WORD", text: w });
-      continue;
-    }
-
-    // Unknown char—skip to be forgiving
-    i++;
-  }
-
-  toks.push({ kind: "EOF" });
-  return toks;
-}
-
-class Parser {
-  private i = 0;
-  constructor(private toks: Tok[]) {}
-
-  private peek(): Tok {
-    return this.toks[this.i] ?? { kind: "EOF" };
-  }
-  private advance(): Tok {
-    return this.toks[this.i++] ?? { kind: "EOF" };
-  }
-  private at(kind: Tok["kind"]) {
-    return this.peek().kind === kind;
-  }
-
-  // Top-level: parse OR-precedence chain, allowing implicit AND.
-  parse(): Ast | null {
-    if (this.at("EOF")) return null;
-    const expr = this.parseOr();
-    if (!this.at("EOF")) {
-      // Optionally, consume remaining tokens or throw
-    }
-    return expr;
-  }
-
-  // Precedence: NOT (highest), AND, OR (lowest)
-  private parseOr(): Ast {
-    let node = this.parseAnd();
-    while (this.at("OR")) {
-      this.advance();
-      const rhs = this.parseAnd();
-      node = { type: "Or", left: node, right: rhs };
-    }
-    return node;
-  }
-
-  private parseAnd(): Ast {
-    let node = this.parseUnary();
-    // Implicit AND: if next token starts a primary, treat as AND.
-    while (this.at("AND") || this.startsPrimary()) {
-      if (this.at("AND")) this.advance();
-      const rhs = this.parseUnary();
-      node = { type: "And", left: node, right: rhs };
-    }
-    return node;
-  }
-
-  private parseUnary(): Ast {
-    if (this.at("NOT") || this.at("MINUS")) {
-      this.advance();
-      const node = this.parseUnary();
-      return { type: "Not", node };
-    }
-    return this.parsePrimaryOrField();
-  }
-
-  private startsPrimary(): boolean {
-    const k = this.peek().kind;
-    return k === "WORD" || k === "PHRASE" || k === "LPAREN" || k === "MINUS" || k === "NOT";
-  }
-
-  private parsePrimaryOrField(): Ast {
-    // Parenthesized group
-    if (this.at("LPAREN")) {
-      this.advance();
-      const inside = this.parseOr();
-      // if (!this.at('RPAREN')) throw new Error("Missing closing ')'");
-      this.advance();
-      return inside;
-    }
-
-    // Phrase
-    if (this.at("PHRASE")) {
-      const t = this.advance() as Extract<Tok, { kind: "PHRASE" }>;
-      return { type: "Phrase", value: t.text };
-    }
-
-    // Field or bare word
-    if (this.at("WORD")) {
-      const wordTok = this.advance() as Extract<Tok, { kind: "WORD" }>;
-
-      if (this.at("COLON")) {
-        // field:value or field:"phrase"
-        this.advance(); // :
-        let value: string;
-        if (this.at("PHRASE")) {
-          const p = this.advance() as Extract<Tok, { kind: "PHRASE" }>;
-          value = p.text;
-        } else if (this.at("WORD")) {
-          const w = this.advance() as Extract<Tok, { kind: "WORD" }>;
-          value = w.text;
-        } else {
-          // Anything else after colon is treated literally as a single Term token.
-          const t = this.advance();
-          value = tokText(t);
-        }
-        return { type: "Field", field: wordTok.text, value };
-      }
-
-      // plain term
-      return { type: "Term", value: wordTok.text };
-    }
-
-    const w = this.advance() as Extract<Tok, { kind: "WORD" }>;
-    return { type: "Phrase", value: "text" in w ? w.text : "" };
-  }
-}
-
-function tokText(t: Tok): string {
-  if ("text" in t) return t.text;
-
-  switch (t.kind) {
-    case "COLON":
-      return ":";
-    case "LPAREN":
-      return "(";
-    case "RPAREN":
-      return ")";
-    default:
-      return "";
-  }
-}
-
-export function parseQuery(q: string): Ast | null {
-  if (q.trim() === "") return null;
-  const toks = tokenize(q);
-  const parser = new Parser(toks);
-  return parser.parse();
-}
-
-export type Doc = {
-  text?: string;
-  fields?: Record<string, unknown>;
-};
-
-type Technique = "substring" | "fuzzy" | "strict";
-
-function includes(hay: string | undefined, needle: string, technique: Technique): boolean {
-  if (!hay || !needle) return false;
-  if (technique === "strict") return hay === needle;
-  if (technique === "fuzzy") return !!fuzzyMatch(hay, needle);
-  return hay.indexOf(needle) !== -1;
-}
-
-export function evaluate(ast: Ast | null, doc: Doc): boolean {
-  if (!ast) return true; // Match everything if no query is provided
-
-  const text = (doc.text ?? "").toLowerCase();
-  const fieldsNorm: Record<string, string[]> = {};
-
-  for (const [k, v] of Object.entries(doc.fields ?? {})) {
-    if (!(typeof v === "string" || Array.isArray(v))) continue;
-    fieldsNorm[k.toLowerCase()] = Array.isArray(v)
-      ? v.filter((v) => typeof v === "string").map((s) => s.toLowerCase())
-      : [String(v ?? "").toLowerCase()];
-  }
-
-  const evalNode = (node: Ast): boolean => {
-    switch (node.type) {
-      case "Term":
-        return includes(text, node.value.toLowerCase(), "fuzzy");
-      case "Phrase":
-        // Quoted phrases match exactly
-        return includes(text, node.value.toLowerCase(), "substring");
-      case "Field": {
-        const vals = fieldsNorm[node.field.toLowerCase()] ?? [];
-        if (vals.length === 0) return false;
-        return vals.some((v) => includes(v, node.value.toLowerCase(), "substring"));
-      }
-      case "Not":
-        return !evalNode(node.node);
-      case "And":
-        return evalNode(node.left) && evalNode(node.right);
-      case "Or":
-        return evalNode(node.left) || evalNode(node.right);
-    }
-  };
-
-  return evalNode(ast);
-}

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

@@ -1,15 +1,8 @@
-import type { Completion, CompletionContext } from "@codemirror/autocomplete";
-import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import type { CompletionContext } from "@codemirror/autocomplete";
+import type { GenericCompletionConfig } from "@yaakapp-internal/ui";
 import { defaultBoost } from "./twig/completion";
 
-export type GenericCompletion = GenericCompletionOption & {
-  apply?: Completion["apply"];
-};
-
-export interface GenericCompletionConfig {
-  minMatch?: number;
-  options: GenericCompletion[];
-}
+export type { GenericCompletion, GenericCompletionConfig } from "@yaakapp-internal/ui";
 
 /**
  * Complete options, always matching until the start of the line

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

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

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

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

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

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

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

@@ -4,9 +4,9 @@ import { json } from "@codemirror/lang-json";
 import { EditorState, type Extension, type TransactionSpec } from "@codemirror/state";
 import type { EditorView } from "@codemirror/view";
 import { describe, expect, test } from "vite-plus/test";
-import { singleLineExtensions } from "../singleLine";
 import { twigCompletion, type TwigCompletionOption } from "./completion";
 import { parser } from "./twig";
+import { singleLineExtensions } from "@yaakapp-internal/ui/editor";
 
 const options: TwigCompletionOption[] = [
   { name: "someVar", label: "someVar", type: "variable", value: "value", onClick: () => {} },

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

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

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

@@ -1,312 +1,2 @@
-import type { Virtualizer } from "@tanstack/react-virtual";
-import { Banner, HStack, SplitLayout } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { format } from "date-fns";
-import type { ReactNode } from "react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { useEventViewerKeyboard } from "../../hooks/useEventViewerKeyboard";
-import { CopyIconButton } from "../CopyIconButton";
-import { AutoScroller } from "./AutoScroller";
-import { Button } from "./Button";
-import { IconButton } from "./IconButton";
-import type { SelectProps } from "./Select";
-import { Select } from "./Select";
-import { Separator } from "./Separator";
-
-interface EventViewerProps<T> {
-  /** Array of events to display */
-  events: T[];
-
-  /** Get unique key for each event */
-  getEventKey: (event: T, index: number) => string;
-
-  /** Render the event row - receives event, index, isActive, and onClick */
-  renderRow: (props: {
-    event: T;
-    index: number;
-    isActive: boolean;
-    onClick: () => void;
-  }) => ReactNode;
-
-  /** Render the detail pane for the selected event */
-  renderDetail?: (props: { event: T; index: number; onClose: () => void }) => ReactNode;
-
-  /** Optional header above the event list (e.g., connection status) */
-  header?: ReactNode;
-
-  /** Error message to display as a banner */
-  error?: string | null;
-
-  /** Key for SplitLayout state persistence */
-  splitLayoutStorageKey: string;
-
-  /** Default ratio for the split (0.0 - 1.0) */
-  defaultRatio?: number;
-
-  /** Enable keyboard navigation (arrow keys) */
-  enableKeyboardNav?: boolean;
-
-  /** Loading state */
-  isLoading?: boolean;
-
-  /** Message to show while loading */
-  loadingMessage?: string;
-
-  /** Message to show when no events */
-  emptyMessage?: string;
-
-  /** Callback when active index changes (for controlled state in parent) */
-  onActiveIndexChange?: (index: number | null) => void;
-}
-
-export function EventViewer<T>({
-  events,
-  getEventKey,
-  renderRow,
-  renderDetail,
-  header,
-  error,
-  splitLayoutStorageKey,
-  defaultRatio = 0.4,
-  enableKeyboardNav = true,
-  isLoading = false,
-  loadingMessage = "Loading events...",
-  emptyMessage = "No events recorded",
-  onActiveIndexChange,
-}: EventViewerProps<T>) {
-  const [activeIndex, setActiveIndexInternal] = useState<number | null>(null);
-  const [isPanelOpen, setIsPanelOpen] = useState(false);
-
-  // Wrap setActiveIndex to notify parent
-  const setActiveIndex = useCallback(
-    (indexOrUpdater: number | null | ((prev: number | null) => number | null)) => {
-      setActiveIndexInternal((prev) => {
-        const newIndex =
-          typeof indexOrUpdater === "function" ? indexOrUpdater(prev) : indexOrUpdater;
-        onActiveIndexChange?.(newIndex);
-        return newIndex;
-      });
-    },
-    [onActiveIndexChange],
-  );
-  const containerRef = useRef<HTMLDivElement>(null);
-  const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element> | null>(null);
-
-  const activeEvent = useMemo(
-    () => (activeIndex != null ? events[activeIndex] : null),
-    [activeIndex, events],
-  );
-
-  // Check if the event list container is focused
-  const isContainerFocused = useCallback(() => {
-    return containerRef.current?.contains(document.activeElement) ?? false;
-  }, []);
-
-  // Keyboard navigation
-  useEventViewerKeyboard({
-    totalCount: events.length,
-    activeIndex,
-    setActiveIndex,
-    virtualizer: virtualizerRef.current,
-    isContainerFocused,
-    enabled: enableKeyboardNav,
-    closePanel: () => setIsPanelOpen(false),
-    openPanel: () => setIsPanelOpen(true),
-  });
-
-  // Handle virtualizer ready callback
-  const handleVirtualizerReady = useCallback(
-    (virtualizer: Virtualizer<HTMLDivElement, Element>) => {
-      virtualizerRef.current = virtualizer;
-    },
-    [],
-  );
-
-  // Handle row click - select and open panel, scroll into view
-  const handleRowClick = useCallback(
-    (index: number) => {
-      setActiveIndex(index);
-      setIsPanelOpen(true);
-      // Scroll to ensure selected item is visible after panel opens
-      requestAnimationFrame(() => {
-        virtualizerRef.current?.scrollToIndex(index, { align: "auto" });
-      });
-    },
-    [setActiveIndex],
-  );
-
-  const handleClose = useCallback(() => {
-    setIsPanelOpen(false);
-  }, []);
-
-  if (isLoading) {
-    return <div className="p-3 text-text-subtlest italic">{loadingMessage}</div>;
-  }
-
-  if (events.length === 0 && !error) {
-    return <div className="p-3 text-text-subtlest italic">{emptyMessage}</div>;
-  }
-
-  return (
-    <div ref={containerRef} className="h-full">
-      <SplitLayout
-        layout="vertical"
-        storageKey={splitLayoutStorageKey}
-        defaultRatio={defaultRatio}
-        minHeightPx={72}
-        firstSlot={({ style }) => (
-          <div style={style} className="w-full h-full grid grid-rows-[auto_minmax(0,1fr)]">
-            {header ?? <span aria-hidden />}
-            <AutoScroller
-              data={events}
-              focusable={enableKeyboardNav}
-              onVirtualizerReady={handleVirtualizerReady}
-              header={
-                error && (
-                  <Banner color="danger" className="m-3">
-                    {error}
-                  </Banner>
-                )
-              }
-              render={(event, index) => (
-                <div key={getEventKey(event, index)}>
-                  {renderRow({
-                    event,
-                    index,
-                    isActive: index === activeIndex,
-                    onClick: () => handleRowClick(index),
-                  })}
-                </div>
-              )}
-            />
-          </div>
-        )}
-        secondSlot={
-          activeEvent != null && renderDetail && isPanelOpen
-            ? ({ style }) => (
-                <div style={style} className="grid grid-rows-[auto_minmax(0,1fr)] bg-surface">
-                  <div className="pb-3 px-2">
-                    <Separator />
-                  </div>
-                  <div className="mx-2 overflow-y-auto">
-                    {renderDetail({
-                      event: activeEvent,
-                      index: activeIndex ?? 0,
-                      onClose: handleClose,
-                    })}
-                  </div>
-                </div>
-              )
-            : null
-        }
-      />
-    </div>
-  );
-}
-
-export type EventDetailAction =
-  | {
-      type?: "button";
-      /** Unique key for React */
-      key: string;
-      /** Button label */
-      label: string;
-      /** Optional icon */
-      icon?: ReactNode;
-      /** Click handler */
-      onClick: () => void;
-    }
-  | {
-      type: "select";
-      /** Unique key for React */
-      key: string;
-      /** Select label */
-      label: string;
-      /** Selected value */
-      value: string;
-      /** Select options */
-      options: SelectProps<string>["options"];
-      /** Change handler */
-      onChange: (value: string) => void;
-    };
-
-interface EventDetailHeaderProps {
-  title: string;
-  prefix?: ReactNode;
-  timestamp?: string;
-  actions?: EventDetailAction[];
-  copyText?: string | (() => Promise<string | null>);
-  onClose?: () => void;
-}
-
-export function EventDetailHeader({
-  title,
-  prefix,
-  timestamp,
-  actions,
-  copyText,
-  onClose,
-}: EventDetailHeaderProps) {
-  const formattedTime = timestamp ? format(new Date(`${timestamp}Z`), "HH:mm:ss.SSS") : null;
-
-  return (
-    <div className="flex items-center justify-between gap-2 mb-2 h-xs">
-      <HStack space={2} className="items-center min-w-0">
-        {prefix}
-        <h3 className="font-semibold select-auto cursor-auto truncate">{title}</h3>
-      </HStack>
-      <HStack space={2} className="items-center">
-        {actions?.map((action) =>
-          action.type === "select" ? (
-            <div key={action.key} className="w-32">
-              <Select
-                name={action.key}
-                label={action.label}
-                hideLabel
-                size="xs"
-                value={action.value}
-                options={action.options}
-                onChange={action.onChange}
-              />
-            </div>
-          ) : (
-            <Button
-              key={action.key}
-              type="button"
-              variant="border"
-              size="xs"
-              onClick={action.onClick}
-            >
-              {action.icon}
-              {action.label}
-            </Button>
-          ),
-        )}
-        {copyText != null && (
-          <CopyIconButton text={copyText} size="xs" title="Copy" variant="border" iconSize="sm" />
-        )}
-        {formattedTime && (
-          <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
-        )}
-        {onClose != null && (
-          <div
-            className={classNames(
-              copyText != null ||
-                formattedTime ||
-                ((actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3"),
-            )}
-          >
-            <IconButton
-              color="custom"
-              className="text-text-subtle -mr-3"
-              size="xs"
-              icon="x"
-              title="Close event panel"
-              onClick={onClose}
-            />
-          </div>
-        )}
-      </HStack>
-    </div>
-  );
-}
+export type { EventDetailAction } from "@yaakapp-internal/ui";
+export { EventDetailHeader, EventViewer } from "@yaakapp-internal/ui";

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

@@ -1,38 +1 @@
-import classNames from "classnames";
-import { format } from "date-fns";
-import type { ReactNode } from "react";
-
-interface EventViewerRowProps {
-  isActive: boolean;
-  onClick: () => void;
-  icon: ReactNode;
-  content: ReactNode;
-  timestamp?: string;
-}
-
-export function EventViewerRow({
-  isActive,
-  onClick,
-  icon,
-  content,
-  timestamp,
-}: EventViewerRowProps) {
-  return (
-    <div className="px-1">
-      <button
-        type="button"
-        onClick={onClick}
-        className={classNames(
-          "w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left",
-          "px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-hidden focus:text-text rounded-sm",
-          isActive && "bg-surface-active text-text!",
-          "text-text-subtle hover:text",
-        )}
-      >
-        {icon}
-        <div className="w-full truncate">{content}</div>
-        {timestamp && <div className="opacity-50">{format(`${timestamp}Z`, "HH:mm:ss.SSS")}</div>}
-      </button>
-    </div>
-  );
-}
+export { EventViewerRow } from "@yaakapp-internal/ui";

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

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