Wait for pending edits before a boundary snapshot, and time each request on its own

Boundary snapshots flushed the debounced writes but didn't wait for them, so the snapshot could read the row before the edit it was meant to keep. They now await flushAllModelWrites first. A closing window can't await, so it sends the writes and then the snapshot straight behind them: in the browser the worker keeps that order, and on the desktop the snapshot can still win, leaving the edit saved but unversioned until its next send. The idle tracker kept one timer for all requests, so a write to any request, from another window or sync, restarted the active one's countdown. Each request now has its own, cleared when it fires or when that request is captured at a boundary. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Version the browser send from the read it was prepared from
2026-11-14 20:53:43 +01:00 · 2026-11-10 14:42:11 -07:00 · 2026-11-10 14:42:11 -07:00 · 2026-11-10 14:39:11 -07:00 · 2026-11-10 14:27:51 -07:00 · 2026-11-10 14:15:52 -07:00
447 changed files with 58042 additions and 7986 deletions
@@ -59,3 +59,6 @@ flatpak/node-sources.json
 # Claude Code local settings
 .claude/settings.local.json
 .claude/worktrees/
+
+# Headless screenshots taken while working
+.shots/
@@ -1231,7 +1231,7 @@ dependencies = [
 "encode_unicode",
 "libc",
 "once_cell",
- "unicode-width",
+ "unicode-width 0.2.2",
 "windows-sys 0.59.0",
 ]

@@ -1243,7 +1243,7 @@ checksum = "4fe5f465a4f6fee88fad41b85d990f84c835335e85b5d9e6e63e0d06d28cba7c"
 dependencies = [
 "encode_unicode",
 "libc",
- "unicode-width",
+ "unicode-width 0.2.2",
 "windows-sys 0.61.2",
 ]

@@ -1522,17 +1522,15 @@ checksum = "d0a5c400df2834b80a4c3327b3aad3a4c4cd4de0629063962b03235697506a28"

 [[package]]
 name = "crossterm"
-version = "0.29.0"
+version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d8b9f2e4c67f833b660cdb0a3523065869fb35570177239812ed4c905aeff87b"
+checksum = "e64e6c0fbe2c17357405f7c758c1ef960fce08bdfb2c03d88d2a18d7e09c4b67"
 dependencies = [
- "bitflags 2.11.0",
+ "bitflags 1.3.2",
 "crossterm_winapi",
- "derive_more 2.1.1",
- "document-features",
- "mio",
+ "libc",
+ "mio 0.8.11",
 "parking_lot",
- "rustix 1.1.5",
 "signal-hook",
 "signal-hook-mio",
 "winapi",
@@ -3657,7 +3655,7 @@ checksum = "9433806cd6b4ec1aba79c021c7e4c58fb4c3b9977c085062e611ac929998fb0c"
 dependencies = [
 "console 0.16.4",
 "portable-atomic",
- "unicode-width",
+ "unicode-width 0.2.2",
 "unit-prefix",
 "web-time",
 ]
@@ -3712,17 +3710,20 @@ dependencies = [

 [[package]]
 name = "inquire"
-version = "0.9.4"
+version = "0.7.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6654738b8024300cf062d04a1c13c10c8e2cea598ec1c47dc9b6641159429756"
+checksum = "0fddf93031af70e75410a2511ec04d49e758ed2f26dad3404a934e0fb45cc12a"
 dependencies = [
 "bitflags 2.11.0",
 "crossterm",
 "dyn-clone",
 "fuzzy-matcher",
+ "fxhash",
+ "newline-converter",
+ "once_cell",
 "tempfile",
 "unicode-segmentation",
- "unicode-width",
+ "unicode-width 0.1.14",
 ]

 [[package]]
@@ -4155,6 +4156,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "95b4103cffefa72eb8428cb6b47d6627161e51c2739fc5e3b734584157bc642a"
 dependencies = [
 "cc",
+ "openssl-sys",
 "pkg-config",
 "vcpkg",
 ]
@@ -4466,6 +4468,18 @@ dependencies = [
 "simd-adler32",
 ]

+[[package]]
+name = "mio"
+version = "0.8.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4a650543ca06a924e8b371db273b2756685faae30f8487da1b56505a8f78b0c"
+dependencies = [
+ "libc",
+ "log 0.4.34",
+ "wasi 0.11.0+wasi-snapshot-preview1",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "mio"
 version = "1.2.4"
@@ -4561,6 +4575,15 @@ version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "650eef8c711430f1a879fdd01d4745a7deea475becfb90269c06775983bbf086"

+[[package]]
+name = "newline-converter"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47b6b097ecb1cbfed438542d16e84fd7ad9b0c76c8a65b7f9039212a3d14dc7f"
+dependencies = [
+ "unicode-segmentation",
+]
+
 [[package]]
 name = "nibble_vec"
 version = "0.1.0"
@@ -4649,7 +4672,7 @@ dependencies = [
 "kqueue",
 "libc",
 "log 0.4.34",
- "mio",
+ "mio 1.2.4",
 "notify-types",
 "objc2-core-foundation",
 "objc2-core-services",
@@ -5282,7 +5305,7 @@ dependencies = [
 "textwrap",
 "thiserror 2.0.21",
 "unicode-segmentation",
- "unicode-width",
+ "unicode-width 0.2.2",
 ]

 [[package]]
@@ -6458,6 +6481,70 @@ dependencies = [
 "prost",
 ]

+[[package]]
+name = "protoc-bin-vendored"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8760a25b6ff9c620324822737e468478fa092234190d2e449760344354896ed9"
+dependencies = [
+ "protoc-bin-vendored-linux-aarch_64",
+ "protoc-bin-vendored-linux-ppcle_64",
+ "protoc-bin-vendored-linux-s390_64",
+ "protoc-bin-vendored-linux-x86_32",
+ "protoc-bin-vendored-linux-x86_64",
+ "protoc-bin-vendored-macos-aarch_64",
+ "protoc-bin-vendored-macos-x86_64",
+ "protoc-bin-vendored-win32",
+]
+
+[[package]]
+name = "protoc-bin-vendored-linux-aarch_64"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73fa2624782ca04cd44f51554566717377acd240e4c0016d757dd74fccc9324f"
+
+[[package]]
+name = "protoc-bin-vendored-linux-ppcle_64"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2417e9817fa237dab803ad4dda7357a111656e242959cc6b8f9a1a583367d42"
+
+[[package]]
+name = "protoc-bin-vendored-linux-s390_64"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4d189c34636356a46a7ed3188233dc8a88c431278cc54d4a19b096a2d270e985"
+
+[[package]]
+name = "protoc-bin-vendored-linux-x86_32"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "171e39f1e846e5f322ced1ac3b8d4cd3a3833ca24b6e5d58b3632574fe6204fa"
+
+[[package]]
+name = "protoc-bin-vendored-linux-x86_64"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "873cdcc097593432086661aa432b8078f1cd87bfb02847c332e98ae2c119e966"
+
+[[package]]
+name = "protoc-bin-vendored-macos-aarch_64"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eeb72df001783b8297847fe8f5f874ee400fd742c843d60583e8c23d96977c7f"
+
+[[package]]
+name = "protoc-bin-vendored-macos-x86_64"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b04652167eca899dda05f32f5481adeaf25c623a98ce2fc146a001cc59a2add7"
+
+[[package]]
+name = "protoc-bin-vendored-win32"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "263a3f48f01e7309e857138bd47f785585b4a005e8e56c6d2824ce91195999c3"
+
 [[package]]
 name = "quick-error"
 version = "1.2.3"
@@ -7016,7 +7103,7 @@ version = "0.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "77dff57c9de498bb1eb5b1ce682c2e3a0ae956b266fa0933c3e151b87b078967"
 dependencies = [
- "unicode-width",
+ "unicode-width 0.2.2",
 "yansi",
 ]

@@ -7041,7 +7128,7 @@ dependencies = [
 "kqueue",
 "libc",
 "log 0.4.34",
- "mio",
+ "mio 1.2.4",
 "rolldown-notify-types",
 "walkdir",
 "windows-sys 0.61.2",
@@ -8171,7 +8258,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b75a19a7a740b25bc7944bdee6172368f988763b744e3d4dfe753f6b4ece40cc"
 dependencies = [
 "libc",
- "mio",
+ "mio 0.8.11",
 "signal-hook",
 ]

@@ -9232,7 +9319,7 @@ checksum = "c13547615a44dc9c452a8a534638acdf07120d4b6847c8178705da06306a3057"
 dependencies = [
 "smawk",
 "unicode-linebreak",
- "unicode-width",
+ "unicode-width 0.2.2",
 ]

 [[package]]
@@ -9385,7 +9472,7 @@ checksum = "b52fd3255258d26fac7264ab5a76b53c13367136dc011d3d6ad4f8ed070396a3"
 dependencies = [
 "bytes",
 "libc",
- "mio",
+ "mio 1.2.4",
 "pin-project-lite",
 "signal-hook-registry",
 "socket2",
@@ -10003,6 +10090,12 @@ version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"

+[[package]]
+name = "unicode-width"
+version = "0.1.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7dd6e30e90baa6f72411720665d41d89b9a3d039dc45b8faea1ddd07f617f6af"
+
 [[package]]
 name = "unicode-width"
 version = "0.2.2"
@@ -10812,6 +10905,15 @@ dependencies = [
 "windows-targets 0.42.2",
 ]

+[[package]]
+name = "windows-sys"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
+dependencies = [
+ "windows-targets 0.48.5",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.52.0"
@@ -11475,6 +11577,7 @@ dependencies = [
 name = "yaak-commands"
 version = "0.0.0"
 dependencies = [
+ "rusqlite",
 "serde_json",
 "tempfile",
 "thiserror 2.0.21",
@@ -11511,9 +11614,11 @@ dependencies = [
 "base32",
 "base64 0.23.1",
 "chacha20poly1305",
+ "dbus-secret-service",
 "keyring",
 "log 0.4.34",
 "serde",
+ "tempfile",
 "thiserror 2.0.21",
 "yaak-models",
 ]
@@ -11527,6 +11632,7 @@ dependencies = [
 "include_dir",
 "log 0.4.34",
 "nanoid",
+ "openssl-sys",
 "r2d2",
 "r2d2_sqlite",
 "rusqlite",
@@ -11534,6 +11640,7 @@ dependencies = [
 "sea-query-rusqlite",
 "serde",
 "serde_json",
+ "tempfile",
 "thiserror 2.0.21",
 "ts-rs",
 "uuid",
@@ -11776,12 +11883,17 @@ dependencies = [
 name = "yaak-proxy"
 version = "0.1.0"
 dependencies = [
+ "base64 0.23.1",
+ "block2 0.6.1",
 "bytes",
+ "dispatch2",
+ "flate2",
 "futures-util",
 "http",
 "http-body-util",
 "hyper",
 "hyper-util",
+ "libc",
 "log 0.4.34",
 "pem",
 "rcgen",
@@ -11793,6 +11905,7 @@ dependencies = [
 "tokio",
 "tokio-rustls",
 "tokio-tungstenite",
+ "tower-service",
 ]

 [[package]]
@@ -11815,7 +11928,10 @@ dependencies = [
 "base64 0.23.1",
 "bytes",
 "chrono",
+ "core-foundation 0.9.4",
+ "encoding_rs",
 "flate2",
+ "futures-util",
 "http-body-util",
 "hyper",
 "hyper-util",
@@ -11827,6 +11943,7 @@ dependencies = [
 "objc2-foundation 0.3.2",
 "objc2-service-management",
 "plist",
+ "protoc-bin-vendored",
 "r2d2",
 "r2d2_sqlite",
 "reqwest",
@@ -11834,22 +11951,39 @@ dependencies = [
 "sea-query",
 "serde",
 "serde_json",
+ "system-configuration",
 "tempfile",
 "tokio",
+ "tonic",
+ "tonic-reflection",
 "ts-rs",
 "url",
 "yaak-common",
+ "yaak-crypto",
 "yaak-database",
 "yaak-filter",
+ "yaak-grpc",
 "yaak-http",
 "yaak-lifecycle",
 "yaak-models",
 "yaak-proxy",
 "yaak-proxy-helper",
+ "yaak-query",
 "yaak-rpc",
 "yaak-templates",
 ]

+[[package]]
+name = "yaak-query"
+version = "0.1.0"
+dependencies = [
+ "serde",
+ "serde-wasm-bindgen",
+ "serde_json",
+ "ts-rs",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "yaak-rpc"
 version = "0.0.0"
@@ -19,6 +19,7 @@ members = [
  "crates/yaak-mcp",
  "crates/yaak-models",
  "crates/yaak-plugins",
+  "crates/yaak-query",
  "crates/yaak-sse",
  "crates/yaak-sync",
  "crates/yaak-templates",
@@ -96,6 +97,7 @@ 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" }
@@ -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>;
+}
@@ -1,60 +0,0 @@
-import type { HttpResponse } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
-import { type ReactNode, useMemo } from "react";
-import { useSaveResponse } from "../hooks/useSaveResponse";
-import { useToggle } from "../hooks/useToggle";
-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";
-
-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}</>;
-}
@@ -1,55 +0,0 @@
-import type { HttpResponse } from "@yaakapp-internal/models";
-import { Banner, HStack, InlineCode, SizeTag } from "@yaakapp-internal/ui";
-import { type ReactNode, useMemo } from "react";
-import { getRequestBodyText as getHttpResponseRequestBodyText } from "../hooks/useHttpRequestBody";
-import { useToggle } from "../hooks/useToggle";
-import { isProbablyTextContentType } from "../lib/contentType";
-import { getContentTypeFromHeaders } from "../lib/model_util";
-import { CopyButton } from "./CopyButton";
-import { Button } from "./core/Button";
-
-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}</>;
-}
@@ -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";
@@ -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}`}
-    />
-  );
-}
@@ -1,180 +1 @@
-import type { HttpRequestHeader } from "@yaakapp-internal/models";
-import { HStack, CountBadge } from "@yaakapp-internal/ui";
-import { acceptLanguages } from "../lib/data/acceptLanguages";
-import { cacheControlDirectives } from "../lib/data/cacheControl";
-import { charsets } from "../lib/data/charsets";
-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 { 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";
@@ -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";

@@ -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,8 +22,8 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
 import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
-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,
@@ -28,28 +35,22 @@ 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 type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
 import { getUrlCompletionConfig } from "./core/Editor/url/completion";
-import { Editor } from "./core/Editor/LazyEditor";
-import { InlineCode, languageFromContentType, CountBadge } from "@yaakapp-internal/ui";
 import { 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";

@@ -165,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: {
@@ -244,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();
@@ -335,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}
+    />
  );
 }

@@ -1,56 +1,38 @@
 import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
 import {
-  Banner,
-  HStack,
-  Icon,
-  LoadingIcon,
-  VStack,
  CountBadge,
-  HttpResponseDurationTag,
-  HttpStatusTag,
-  SizeTag,
+  type ExtraPaneTab,
+  type HostBodyViewerArgs,
+  HStack,
+  HttpResponsePaneView,
+  Icon,
+  type ResponseTextViewerExtras,
+  type TextFilterApi,
  Tooltip,
-  AudioViewer,
-  CsvViewer,
-  ImageViewer,
-  SvgViewer,
-  VideoViewer,
+  VStack,
 } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import type { ComponentType, CSSProperties } from "react";
-import { lazy, Suspense, useMemo } from "react";
+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 { httpResponseToView } from "../lib/httpViews";
+import { getCookieCounts } from "../lib/model_util";
+import { CopyButton } from "./CopyButton";
 import { HotkeyList } from "./core/HotkeyList";
+import { IconButton } from "./core/IconButton";
 import { PillButton } from "./core/PillButton";
-import type { TabItem } from "./core/Tabs/Tabs";
-import { TabContent, Tabs } from "./core/Tabs/Tabs";
-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 { RequestVersionDropdown } from "./RequestVersionDropdown";
 import { EventStreamViewer } from "./responseViewers/EventStreamViewer";
-import { HTMLOrTextViewer } from "./responseViewers/HTMLOrTextViewer";
-import { MultipartViewer } from "./responseViewers/MultipartViewer";
-
-const PdfViewer = lazy(() =>
-  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
-);
+import { RecentFiltersDropdown } from "./responseViewers/RecentFiltersDropdown";

 interface Props {
  style?: CSSProperties;
@@ -58,10 +40,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";
@@ -71,12 +49,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(
@@ -89,280 +66,184 @@ 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>
-            )}
+                <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 && (
+          <HStack space={1}>
+            <RequestVersionDropdown response={activeResponse} />
+            <RecentHttpResponsesDropdown
+              responses={responses}
+              activeResponse={activeResponse}
+              onPinnedResponseId={setPinnedResponseId}
+            />
          </HStack>
-
-          <div className="overflow-hidden flex flex-col min-h-0">
-            {activeResponse?.error && (
-              <Banner color="danger" className="mx-3 mt-1 shrink-0">
-                {activeResponse.error}
-              </Banner>
-            )}
-            {/* Show tabs if we have any data (headers, body, etc.) even if there's an error */}
-            <Tabs
-              tabs={tabs}
-              label="Response"
-              className="ml-3 mr-3 mb-3 min-h-0 flex-1"
-              tabListClassName="mt-0.5 -mb-1.5"
-              storageKey="http_response_tabs"
-              activeTabKey={activeRequestId}
-            >
-              <TabContent value={TAB_BODY}>
-                <ErrorBoundary name="Http Response Viewer">
-                  <Suspense>
-                    <ConfirmLargeResponse response={activeResponse}>
-                      {activeResponse.state === "initialized" ? (
-                        <EmptyStateText>
-                          <VStack space={3}>
-                            <HStack space={3}>
-                              <LoadingIcon className="text-text-subtlest" />
-                              Sending Request
-                            </HStack>
-                            <Button size="sm" variant="border" onClick={() => cancel.mutate()}>
-                              Cancel
-                            </Button>
-                          </VStack>
-                        </EmptyStateText>
-                      ) : activeResponse.state === "closed" &&
-                        (activeResponse.contentLength ?? 0) === 0 ? (
-                        <EmptyStateText>Empty</EmptyStateText>
-                      ) : mimeType?.match(/^text\/event-stream/i) && viewMode === "pretty" ? (
-                        <EventStreamViewer response={activeResponse} />
-                      ) : mimeType?.match(/^image\/svg/) ? (
-                        <HttpSvgViewer response={activeResponse} />
-                      ) : mimeType?.match(/^image/i) ? (
-                        <EnsureCompleteResponse response={activeResponse} Component={ImageViewer} />
-                      ) : mimeType?.match(/^audio/i) ? (
-                        <EnsureCompleteResponse response={activeResponse} Component={AudioViewer} />
-                      ) : mimeType?.match(/^video/i) ? (
-                        <EnsureCompleteResponse response={activeResponse} Component={VideoViewer} />
-                      ) : mimeType?.match(/^multipart/i) && viewMode === "pretty" ? (
-                        <HttpMultipartViewer response={activeResponse} />
-                      ) : mimeType?.match(/pdf/i) ? (
-                        <EnsureCompleteResponse response={activeResponse} Component={PdfViewer} />
-                      ) : mimeType?.match(/csv|tab-separated/i) && viewMode === "pretty" ? (
-                        <HttpCsvViewer className="pb-2" response={activeResponse} />
-                      ) : (
-                        <HTMLOrTextViewer
-                          textViewerClassName="-mr-2 bg-surface" // Pull to the right
-                          response={activeResponse}
-                          pretty={viewMode === "pretty"}
-                        />
-                      )}
-                    </ConfirmLargeResponse>
-                  </Suspense>
-                </ErrorBoundary>
-              </TabContent>
-              <TabContent value={TAB_REQUEST}>
-                <ConfirmLargeResponseRequest response={activeResponse}>
-                  <RequestBodyViewer response={activeResponse} />
-                </ConfirmLargeResponseRequest>
-              </TabContent>
-              <TabContent value={TAB_HEADERS}>
-                <ResponseHeaders response={activeResponse} />
-              </TabContent>
-              <TabContent value={TAB_COOKIES}>
-                <ResponseCookies response={activeResponse} />
-              </TabContent>
-              <TabContent value={TAB_TIMELINE}>
-                <HttpResponseTimeline response={activeResponse} viewMode={timelineViewMode} />
-              </TabContent>
-            </Tabs>
-          </div>
-        </div>
-      )}
-    </div>
+        )
+      }
+    />
  );
 }

+/** The client's additions to the response text viewer: filter history, save and copy */
+function useResponseTextViewerExtras(
+  response: HttpResponse | null,
+): ResponseTextViewerExtras | undefined {
+  const filterStateKey = `response.body.${response?.requestId ?? ""}`;
+  const { recentFilters, addFilter, removeFilter, togglePin, clearFilters } =
+    useRecentFilters(filterStateKey);
+  const saveResponse = useSaveResponse(response);
+  const copyResponse = useCopyHttpResponse(response);
+  const filterLeftSlot = useCallback(
+    (filter: TextFilterApi) => (
+      <div className="py-0.5 flex">
+        <RecentFiltersDropdown
+          recentFilters={recentFilters}
+          activeFilter={filter.appliedFilter}
+          onSelect={filter.replaceFilter}
+          onRemove={removeFilter}
+          onTogglePin={togglePin}
+          onClear={clearFilters}
+        />
+      </div>
+    ),
+    [recentFilters, removeFilter, togglePin, clearFilters],
+  );
+
+  if (response == null) return undefined;
+  const actionsDisabled = response.state !== "closed" && response.status >= 100;
+  return {
+    filterStateKey,
+    onFilterApplied: addFilter,
+    filterLeftSlot,
+    footerActions: [
+      <IconButton
+        key="save"
+        size="sm"
+        icon="save"
+        title="Save response to file"
+        disabled={actionsDisabled}
+        onClick={() => saveResponse.mutate()}
+        className="border !border-border-subtle"
+      />,
+      <IconButton
+        key="copy"
+        size="sm"
+        icon="copy"
+        title="Copy response body"
+        disabled={actionsDisabled}
+        onClick={() => copyResponse.mutate()}
+        className="border !border-border-subtle"
+      />,
+    ],
+  };
+}
+
+function renderCopyButton(getText: () => Promise<string | null>) {
+  return <CopyButton color="secondary" variant="border" size="xs" text={getText} />;
+}
+
 function getRedirectDropWarning(
  events: HttpResponseEvent[] | undefined,
 ): RedirectDropWarning | null {
@@ -410,58 +291,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} />;
-}
@@ -5,7 +5,15 @@ import {
  type ImportSource,
  type Workspace,
 } from "@yaakapp-internal/models";
-import { Banner, FormattedError, HStack, Icon, VStack, IconTooltip } 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";
@@ -22,7 +30,6 @@ import { CheckboxTree } from "./core/CheckboxTree";
 import { Chip } from "./core/Chip";
 import { DialogFooter } from "./core/Dialog";
 import { Select } from "./core/Select";
-import { SegmentedControl } from "./core/SegmentedControl";
 import { pluralize } from "@yaakapp-internal/lib/pluralize";

 interface Props {
@@ -1,121 +0,0 @@
-import { linter } from "@codemirror/lint";
-import type { HttpRequest } from "@yaakapp-internal/models";
-import { patchModel } from "@yaakapp-internal/models";
-import { Banner, Icon, IconTooltip } from "@yaakapp-internal/ui";
-import { 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";
-
-interface Props {
-  forceUpdateKey: string;
-  heightMode: EditorProps["heightMode"];
-  request: HttpRequest;
-}
-
-export function JsonBodyEditor({ forceUpdateKey, heightMode, request }: Props) {
-  const handleChange = useCallback(
-    (text: string) => patchModel(request, { body: { ...request.body, text } }),
-    [request],
-  );
-
-  const autoFix = request.body?.sendJsonComments !== true;
-
-  const lintExtension = useMemo(
-    () =>
-      linter(
-        jsonParseLinter(
-          autoFix
-            ? { allowComments: true, allowTrailingCommas: true }
-            : { allowComments: false, allowTrailingCommas: false },
-        ),
-      ),
-    [autoFix],
-  );
-
-  const hasComments = useMemo(
-    () => textLikelyContainsJsonComments(request.body?.text ?? ""),
-    [request.body?.text],
-  );
-
-  const { value: bannerDismissed, set: setBannerDismissed } = useKeyValue<boolean>({
-    namespace: "no_sync",
-    key: ["json-fix-3", request.workspaceId],
-    fallback: false,
-  });
-
-  const handleToggleAutoFix = useCallback(() => {
-    const newBody = { ...request.body };
-    if (autoFix) {
-      newBody.sendJsonComments = true;
-    } else {
-      delete newBody.sendJsonComments;
-    }
-    fireAndForget(patchModel(request, { body: newBody }));
-  }, [request, autoFix]);
-
-  const handleDropdownOpen = useCallback(() => {
-    if (!bannerDismissed) {
-      fireAndForget(setBannerDismissed(true));
-    }
-  }, [bannerDismissed, setBannerDismissed]);
-
-  const showBanner = hasComments && autoFix && !bannerDismissed;
-
-  const stripMessage = "Automatically strip comments and trailing commas before sending";
-  const actions = useMemo<EditorProps["actions"]>(
-    () => [
-      showBanner && (
-        <Banner color="notice" className="opacity-100! h-sm py-0! px-2! flex items-center text-xs">
-          <p className="inline-flex items-center gap-1 min-w-0">
-            <span className="truncate">Auto-fix enabled</span>
-            <Icon icon="arrow_right" size="sm" className="opacity-disabled" />
-          </p>
-        </Banner>
-      ),
-      <div key="settings" className="opacity-100! shadow!">
-        <Dropdown
-          onOpen={handleDropdownOpen}
-          items={
-            [
-              {
-                label: "Automatically Fix JSON",
-                keepOpenOnSelect: true,
-                onSelect: handleToggleAutoFix,
-                rightSlot: <IconTooltip content={stripMessage} />,
-                leftSlot: (
-                  <Icon icon={autoFix ? "check_square_checked" : "check_square_unchecked"} />
-                ),
-              },
-            ] satisfies DropdownItem[]
-          }
-        >
-          <IconButton size="sm" variant="border" icon="settings" title="JSON Settings" />
-        </Dropdown>
-      </div>,
-    ],
-    [handleDropdownOpen, handleToggleAutoFix, autoFix, showBanner],
-  );
-
-  return (
-    <Editor
-      forceUpdateKey={forceUpdateKey}
-      autocompleteFunctions
-      autocompleteVariables
-      placeholder="..."
-      heightMode={heightMode}
-      defaultValue={`${request.body?.text ?? ""}`}
-      language="json"
-      onChange={handleChange}
-      stateKey={`json.${request.id}`}
-      actions={actions}
-      lintExtension={lintExtension}
-    />
-  );
-}
@@ -1,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";
@@ -1,105 +0,0 @@
-import type { HttpResponse } from "@yaakapp-internal/models";
-import { lazy, Suspense } from "react";
-import { useHttpRequestBody } from "../hooks/useHttpRequestBody";
-import { getMimeTypeFromContentType } from "../lib/contentType";
-import {
-  LoadingIcon,
-  languageFromContentType,
-  AudioViewer,
-  CsvViewer,
-  ImageViewer,
-  SvgViewer,
-  VideoViewer,
-  WebPageViewer,
-} from "@yaakapp-internal/ui";
-import { EmptyStateText } from "./EmptyStateText";
-import { MultipartViewer } from "./responseViewers/MultipartViewer";
-import { TextViewer } from "./responseViewers/TextViewer";
-
-const PdfViewer = lazy(() =>
-  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
-);
-
-interface Props {
-  response: HttpResponse;
-}
-
-export function RequestBodyViewer({ response }: Props) {
-  return <RequestBodyViewerInner key={response.id} response={response} />;
-}
-
-function RequestBodyViewerInner({ response }: Props) {
-  const { data, isLoading, error } = useHttpRequestBody(response);
-
-  if (isLoading) {
-    return (
-      <EmptyStateText>
-        <LoadingIcon />
-      </EmptyStateText>
-    );
-  }
-
-  if (error) {
-    return <EmptyStateText>Error loading request body: {error.message}</EmptyStateText>;
-  }
-
-  if (data?.bodyText == null || data.bodyText.length === 0) {
-    return <EmptyStateText>No request body</EmptyStateText>;
-  }
-
-  const { bodyText, body } = data;
-
-  // Try to detect language from content-type header that was sent
-  const contentTypeHeader = response.requestHeaders.find(
-    (h) => h.name.toLowerCase() === "content-type",
-  );
-  const contentType = contentTypeHeader?.value ?? null;
-  const mimeType = contentType ? getMimeTypeFromContentType(contentType).essence : null;
-  const language = languageFromContentType(contentType, bodyText);
-
-  // Route to appropriate viewer based on content type
-  if (mimeType?.match(/^multipart/i)) {
-    const boundary = contentType?.split("boundary=")[1] ?? "unknown";
-    // Create a copy because parseMultipart may detach the buffer
-    const bodyCopy = new Uint8Array(body);
-    return (
-      <MultipartViewer data={bodyCopy} boundary={boundary} idPrefix={`request.${response.id}`} />
-    );
-  }
-
-  if (mimeType?.match(/^image\/svg/i)) {
-    return <SvgViewer text={bodyText} />;
-  }
-
-  if (mimeType?.match(/^image/i)) {
-    return <ImageViewer data={body.buffer} />;
-  }
-
-  if (mimeType?.match(/^audio/i)) {
-    return <AudioViewer data={body} />;
-  }
-
-  if (mimeType?.match(/^video/i)) {
-    return <VideoViewer data={body} />;
-  }
-
-  if (mimeType?.match(/csv|tab-separated/i)) {
-    return <CsvViewer text={bodyText} />;
-  }
-
-  if (mimeType?.match(/^text\/html/i)) {
-    return <WebPageViewer html={bodyText} />;
-  }
-
-  if (mimeType?.match(/pdf/i)) {
-    return (
-      <Suspense fallback={<LoadingIcon />}>
-        <PdfViewer data={body} />
-      </Suspense>
-    );
-  }
-
-  return (
-    <TextViewer text={bodyText} language={language} stateKey={`request.body.${response.id}`} />
-  );
-}
@@ -1,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}
+    />
  );
 });
@@ -0,0 +1,79 @@
+import type { HttpResponse, RequestVersionComparison } from "@yaakapp-internal/models";
+import { Icon } from "@yaakapp-internal/ui";
+import { stringify } from "yaml";
+import { useRequestVersion } from "../hooks/useRequestVersion";
+import { showDialog } from "../lib/dialog";
+import { restoreRequestVersion } from "../lib/restoreRequestVersion";
+import { Button } from "./core/Button";
+import { DiffViewer } from "./core/Editor/DiffViewer";
+import { Dropdown } from "./core/Dropdown";
+
+interface Props {
+  response: Pick<HttpResponse, "requestId" | "versionId">;
+}
+
+/**
+ * Offers the request a response was sent from, when that is no longer the
+ * request you have.
+ *
+ * Hidden while the two agree, which is the overwhelmingly common case and the
+ * one where there is nothing to say. Responses recorded before versioning
+ * existed have no version and stay quiet forever.
+ */
+export function RequestVersionDropdown({ response }: Props) {
+  const comparison = useRequestVersion(response.versionId, response.requestId);
+  if (comparison == null || !comparison.differs) {
+    return null;
+  }
+
+  return (
+    <Dropdown
+      items={[
+        {
+          label: "View Diff",
+          leftSlot: <Icon icon="git_branch" />,
+          onSelect: () => showRequestVersionDiff(comparison),
+        },
+        {
+          label: "Restore This Version",
+          leftSlot: <Icon icon="history" />,
+          onSelect: () => restoreRequestVersion(comparison.version),
+        },
+      ]}
+    >
+      <Button
+        size="2xs"
+        variant="border"
+        color="notice"
+        className="font-sans"
+        title="This request has changed since this response was sent"
+        forDropdown
+      >
+        Request Changed
+      </Button>
+    </Dropdown>
+  );
+}
+
+function showRequestVersionDiff(comparison: RequestVersionComparison) {
+  showDialog({
+    id: "request-version-diff",
+    title: "Request Changes Since This Response",
+    size: "full",
+    noPadding: true,
+    render: () => (
+      <div className="h-full flex flex-col px-4 pb-4">
+        <DiffViewer
+          original={toYaml(comparison.version.document)}
+          modified={toYaml(comparison.currentDocument)}
+          className="flex-1 min-h-0"
+        />
+      </div>
+    ),
+  });
+}
+
+/** Matches how the Git dialog renders a model for diffing. */
+function toYaml(document: unknown): string {
+  return stringify(document, { indent: 2, lineWidth: 0 });
+}
@@ -1,63 +0,0 @@
-import type { HttpResponse } from "@yaakapp-internal/models";
-import { platform } from "@yaakapp-internal/platform";
-import { HeadersTable, KeyValueRows } from "@yaakapp-internal/ui";
-import { format, formatDistanceToNowStrict } from "date-fns";
-import { DetailsBanner, useDetailsBannerStoredValue } from "./core/DetailsBanner";
-import { IconButton } from "./core/IconButton";
-import { KeyValueRow } from "./core/KeyValueRow";
-
-interface Props {
-  response: HttpResponse;
-}
-
-export function ResponseHeaders({ response }: Props) {
-  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>
-      <HeadersTable
-        title="Request Headers"
-        headers={response.requestHeaders}
-        labelColor="primary"
-        storageKey={`${response.requestId}.request_headers`}
-        useStoredValue={useDetailsBannerStoredValue}
-      />
-      <HeadersTable
-        defaultOpen
-        title="Response Headers"
-        headers={response.headers}
-        labelColor="info"
-        storageKey={`${response.requestId}.response_headers`}
-        useStoredValue={useDetailsBannerStoredValue}
-      />
-    </div>
-  );
-}
@@ -1,13 +1,19 @@
 import { platform } from "@yaakapp-internal/platform";
 import { useLicense } from "@yaakapp-internal/license";
 import { pluginsAtom, settingsAtom } from "@yaakapp-internal/models";
-import { HeaderSize, HStack, Icon, CountBadge } from "@yaakapp-internal/ui";
-import 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 { TabContent, type TabItem, Tabs } from "../core/Tabs/Tabs";
 import { SettingsAgents } from "./SettingsAgents";
 import { SettingsCertificates } from "./SettingsCertificates";
 import { SettingsGeneral } from "./SettingsGeneral";
@@ -24,15 +30,15 @@ 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_AGENTS = "agents";
-const TAB_LICENSE = "license";
+const TAB_LICENSE = SETTINGS_TAB_LICENSE;
 const tabs = [
  TAB_GENERAL,
  TAB_THEME,
@@ -60,105 +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) ||
-              (!platform.capabilities.agents && value === TAB_AGENTS),
-            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_AGENTS ? (
-                <Icon icon="sparkles" 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_AGENTS} className="overflow-y-auto h-full px-6 py-4!">
-          <SettingsAgents />
-        </TabContent>
-        <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-6 py-4!">
-          <SettingsProxy />
-        </TabContent>
-        <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] }))}
+    />
  );
 }
@@ -1,7 +1,7 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { platform } from "@yaakapp-internal/platform";
 import type { AgentSetupStatus, AppMetaData } from "@yaakapp-internal/rpc-schema";
-import { Banner, Heading, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { Banner, Heading, Icon, InlineCode, SegmentedControl, VStack } from "@yaakapp-internal/ui";
 import { useEffect } from "react";
 import { useKeyValue } from "../../hooks/useKeyValue";
 import { usePluginInfos } from "../../hooks/usePluginInfo";
@@ -14,7 +14,6 @@ import {
 import { appInfo } from "../../lib/appInfo";
 import { rpc } from "../../lib/rpc";
 import { Link } from "../core/Link";
-import { SegmentedControl } from "../core/SegmentedControl";
 import {
  SettingCommand,
  SettingSnippet,
@@ -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>
+        )
+      }
+    />
  );
 }
@@ -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>
+      }
+    />
  );
 }

@@ -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 { 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";
-import { pluralizeCount } from "@yaakapp-internal/lib/pluralize";

 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} />;
 }
@@ -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} />;
 }
@@ -63,11 +63,9 @@ 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 {
  Icon,
@@ -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) => {
@@ -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" />;
 });
@@ -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}
+    />
  );
 }
@@ -1,13 +1,14 @@
 import type { WebsocketEvent, WebsocketRequest } from "@yaakapp-internal/models";
 import {
  HStack,
+  hexdump,
+  HexdumpViewer,
  Icon,
  LoadingIcon,
  VStack,
  useStateWithDeps,
  languageFromContentType,
 } from "@yaakapp-internal/ui";
-import { hexy } from "hexy";
 import { useAtomValue } from "jotai";
 import { useMemo, useState } from "react";
 import { useFormatText } from "../hooks/useFormatText";
@@ -19,6 +20,7 @@ import {
 } from "../hooks/usePinnedWebsocketConnection";
 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";
@@ -122,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" ? (
@@ -172,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]);
@@ -232,6 +234,8 @@ function WebsocketEventDetail({
        </VStack>
      ) : event.message.length === 0 ? (
        <EmptyStateText>No Content</EmptyStateText>
+      ) : hexDump ? (
+        <HexdumpViewer data={event.message} renderEditor={renderEditor} />
      ) : (
        <Editor
          language={language}
@@ -1,10 +1,10 @@
 import { platform } from "@yaakapp-internal/platform";
 import { settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
-import { Banner, HeaderSize, 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>
  );
@@ -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);
+});
@@ -1,12 +1,20 @@
-import { patchModel, workspaceMetasAtom, workspacesAtom } from "@yaakapp-internal/models";
+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 { PlainInput } from "./core/PlainInput";
@@ -47,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 (
@@ -56,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}
@@ -105,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>
@@ -177,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",
@@ -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"
@@ -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");
-  });
-});
@@ -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
-})
@@ -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);
-  });
-});
@@ -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}`;
-}
@@ -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,
-});
@@ -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);
-}
@@ -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
@@ -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";
@@ -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";
@@ -1,31 +1 @@
-import classNames from "classnames";
-import type { ReactNode } from "react";
-import { Fragment } from "react";
-import type { HotkeyAction } from "../../hooks/useHotKey";
-import { Hotkey } from "./Hotkey";
-import { HotkeyLabel } from "./HotkeyLabel";
-
-interface Props {
-  hotkeys: HotkeyAction[];
-  bottomSlot?: ReactNode;
-  className?: string;
-}
-
-export const HotkeyList = ({ hotkeys, bottomSlot, className }: Props) => {
-  return (
-    <div className={classNames(className, "h-full flex items-center justify-center")}>
-      <div className="grid gap-2 grid-cols-[auto_auto]">
-        {hotkeys.map((hotkey) => (
-          <Fragment key={hotkey}>
-            <HotkeyLabel className="truncate" action={hotkey} />
-            {/* Keep this grid cell when Hotkey renders nothing so later rows stay aligned. */}
-            <div className="ml-4">
-              <Hotkey action={hotkey} />
-            </div>
-          </Fragment>
-        ))}
-        {bottomSlot}
-      </div>
-    </div>
-  );
-};
+export { HotkeyList } from "@yaakapp-internal/ui";
@@ -3,16 +3,43 @@ import { platform } from "@yaakapp-internal/platform";
 import classNames from "classnames";
 import type { HTMLAttributes } from "react";
 import { appInfo } from "../../lib/appInfo";
-import { Icon } from "@yaakapp-internal/ui";
+import { ExternalLink, isYaakUrl } from "@yaakapp-internal/ui";

 interface Props extends HTMLAttributes<HTMLAnchorElement> {
  href: string;
  noUnderline?: boolean;
 }

+/** Tags a link to yaak.app with which app it came from */
+export function withYaakRef(href: string): string {
+  if (!isYaakUrl(href)) return href;
+  const url = new URL(href);
+  url.searchParams.set("ref", appInfo.identifier);
+  return url.toString();
+}
+
+/** Opens a link outside the app, tagged as `Link` tags it */
+export function openExternalUrl(href: string) {
+  void platform.openUrl(withYaakRef(href));
+}
+
 export function Link({ href, children, noUnderline, className, ...other }: Props) {
  const isExternal = href.match(/^https?:\/\//);

+  if (isExternal) {
+    return (
+      <ExternalLink
+        href={withYaakRef(href)}
+        noUnderline={noUnderline}
+        onOpen={openExternalUrl}
+        className={className}
+        {...other}
+      >
+        {children}
+      </ExternalLink>
+    );
+  }
+
  className = classNames(
    className,
    "relative",
@@ -20,37 +47,6 @@ export function Link({ href, children, noUnderline, className, ...other }: Props
    !noUnderline && "underline",
  );

-  if (isExternal) {
-    const isYaakLink = href.startsWith("https://yaak.app");
-    let finalHref = href;
-    if (isYaakLink) {
-      const url = new URL(href);
-      url.searchParams.set("ref", appInfo.identifier);
-      finalHref = url.toString();
-    }
-    return (
-      // eslint-disable-next-line react/jsx-no-target-blank
-      <a
-        href={finalHref}
-        target="_blank"
-        rel={isYaakLink ? undefined : "noopener noreferrer"}
-        onClick={(e) => {
-          e.preventDefault();
-          void platform.openUrl(finalHref);
-        }}
-        className={className}
-        {...other}
-      >
-        <span className="pr-5">{children}</span>
-        <Icon
-          className="inline absolute right-0.5 top-[0.3em] opacity-70 group-hover:opacity-100"
-          size="xs"
-          icon="external_link"
-        />
-      </a>
-    );
-  }
-
  return (
    <RouterLink to={href} className={className} {...other}>
      {children}
@@ -1,970 +1,8 @@
-import type { DragEndEvent, DragMoveEvent, DragStartEvent } from "@dnd-kit/core";
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  pointerWithin,
-  useDraggable,
-  useDroppable,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import classNames from "classnames";
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { WrappedEnvironmentVariable } from "../../hooks/useEnvironmentVariables";
-import { useRandomKey } from "../../hooks/useRandomKey";
-import { useToggle } from "../../hooks/useToggle";
-import { showDialog } from "../../lib/dialog";
-import { computeSideForDragMove, DropMarker, languageFromContentType } from "@yaakapp-internal/ui";
-import { showPrompt } from "../../lib/prompt";
-import { SelectFile } from "../SelectFile";
-import { Button } from "./Button";
-import { Checkbox } from "./Checkbox";
-import type { DropdownItem } from "./Dropdown";
-import { Dropdown } from "./Dropdown";
-import type { EditorProps } from "./Editor/Editor";
-import type { GenericCompletionConfig } from "./Editor/genericCompletion";
-import { Editor } from "./Editor/LazyEditor";
-import { Icon } from "@yaakapp-internal/ui";
-import { IconButton } from "./IconButton";
-import type { InputHandle, InputProps } from "./Input";
-import { Input } from "./Input";
-import { ensurePairId } from "./PairEditor.util";
-import type { RadioDropdownItem } from "./RadioDropdown";
-import { RadioDropdown } from "./RadioDropdown";
-import { platform } from "@yaakapp-internal/platform";
-
-export interface PairEditorHandle {
-  /**
-   * Focus a row's name field once it's able to take focus. Focus can't land immediately when the
-   * row isn't mounted yet or the editor is hidden — eg. sitting in a tab that's still becoming
-   * active — so this retries for up to ~1s. A newer focus request cancels a pending one.
-   */
-  focusName(id: string): void;
-  /** Focus a row's value field. See {@link PairEditorHandle.focusName} for timing. */
-  focusValue(id: string): void;
-}
-
-/** ~1s at 60fps, plenty for a tab switch to land without spinning forever if it never does */
-const MAX_FOCUS_ATTEMPTS = 60;
-
-export type PairEditorProps = {
-  allowFileValues?: boolean;
-  allowMultilineValues?: boolean;
-  className?: string;
-  forcedEnvironmentId?: string;
-  forceUpdateKey?: string;
-  nameAutocomplete?: GenericCompletionConfig;
-  nameAutocompleteFunctions?: boolean;
-  nameAutocompleteVariables?: boolean;
-  namePlaceholder?: string;
-  nameValidate?: InputProps["validate"];
-  noScroll?: boolean;
-  onChange: (pairs: PairWithId[]) => void;
-  pairs: EditablePair[];
-  stateKey: InputProps["stateKey"];
-  setRef?: (n: PairEditorHandle) => void;
-  valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
-  valueAutocompleteFunctions?: boolean;
-  valueAutocompleteVariables?: boolean | "environment";
-  valuePlaceholder?: string;
-  valueType?: InputProps["type"] | ((pair: Pair) => InputProps["type"]);
-  valueValidate?: InputProps["validate"];
-};
-
-export type Pair = {
-  id?: string;
-  enabled?: boolean;
-  name: string;
-  value: string;
-  contentType?: string;
-  filename?: string;
-  isFile?: boolean;
-};
-
-export type PairWithId = Pair & {
-  id: string;
-};
-
-/**
- * A pair as handed to the editor. Adds behaviour that only the editor cares about, so the plain
- * `Pair` stays the shape that gets written to models.
- */
-export type EditablePair = Pair & {
-  /**
-   * When set, name edits are held until the field blurs and then committed through this, instead
-   * of calling `onChange` on every keystroke. Return false to reject the new name, which reverts
-   * the field. For names that can't be written directly, like a URL path placeholder that lives
-   * in the URL itself.
-   */
-  commitName?: (name: string) => boolean;
-};
-
-type EditablePairWithId = EditablePair & {
-  id: string;
-};
-
-/** Strip the editor-only fields, so they can never reach a model write */
-function toPairData({ commitName: _commitName, ...pair }: EditablePairWithId): PairWithId {
-  return pair;
-}
-
-/** Max number of pairs to show before prompting the user to reveal the rest */
-const MAX_INITIAL_PAIRS = 30;
-
-// Keyed on `stateKey` so no state survives a change of owner. Row ids alone can't tell owners
-// apart — two pair sets can share ids (eg. one duplicated from the other), and the same-rows
-// fast path below would swap in the new data without rebuilding the row editors, leaving any
-// still-focused input showing the old owner's text.
-export function PairEditor(props: PairEditorProps) {
-  return <PairEditorInner key={props.stateKey} {...props} />;
-}
-
-function PairEditorInner({
-  allowFileValues,
-  allowMultilineValues,
-  className,
-  forcedEnvironmentId,
-  forceUpdateKey,
-  nameAutocomplete,
-  nameAutocompleteFunctions,
-  nameAutocompleteVariables,
-  namePlaceholder,
-  nameValidate,
-  noScroll,
-  onChange,
-  pairs: originalPairs,
-  stateKey,
-  valueAutocomplete,
-  valueAutocompleteFunctions,
-  valueAutocompleteVariables,
-  valuePlaceholder,
-  valueType,
-  valueValidate,
-  setRef,
-}: PairEditorProps) {
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const [isDragging, setIsDragging] = useState<EditablePairWithId | null>(null);
-  const [pairs, setPairs] = useState<EditablePairWithId[]>([]);
-  const [showAll, toggleShowAll] = useToggle(false);
-  // NOTE: Use local force update key because we trigger an effect on forceUpdateKey change. If
-  //  we simply pass forceUpdateKey to the editor, the data set by useEffect will be stale.
-  const [localForceUpdateKey, regenerateLocalForceUpdateKey] = useRandomKey();
-
-  const rowsRef = useRef<Record<string, RowHandle | null>>({});
-
-  const pendingFocusFrame = useRef<number | null>(null);
-  useEffect(
-    () => () => {
-      if (pendingFocusFrame.current != null) cancelAnimationFrame(pendingFocusFrame.current);
-    },
-    [],
-  );
-
-  const focusWhenReady = useCallback((id: string, field: "name" | "value") => {
-    if (pendingFocusFrame.current != null) cancelAnimationFrame(pendingFocusFrame.current);
-
-    let attemptsLeft = MAX_FOCUS_ATTEMPTS;
-    const attempt = () => {
-      pendingFocusFrame.current = null;
-      const row = rowsRef.current[id];
-      const landed = field === "name" ? row?.focusName() : row?.focusValue();
-      if (landed || --attemptsLeft <= 0) return;
-      pendingFocusFrame.current = requestAnimationFrame(attempt);
-    };
-    attempt();
-  }, []);
-
-  const handle = useMemo<PairEditorHandle>(
-    () => ({
-      focusName(id: string) {
-        focusWhenReady(id, "name");
-      },
-      focusValue(id: string) {
-        focusWhenReady(id, "value");
-      },
-    }),
-    [focusWhenReady],
-  );
-
-  const initPairEditorRow = useCallback(
-    (id: string, n: RowHandle | null) => {
-      const isLast = id === pairs[pairs.length - 1]?.id;
-      if (isLast) return; // Never add the last pair
-
-      rowsRef.current[id] = n;
-      const validHandles = Object.values(rowsRef.current).filter((v) => v != null);
-
-      // Use >= because more might be added if an ID of one changes (eg. editing placeholder in URL regenerates fresh pairs every keystroke)
-      const ready = validHandles.length >= pairs.length - 1;
-      if (ready) {
-        setRef?.(handle);
-      }
-    },
-    [handle, pairs, setRef],
-  );
-
-  // oxlint-disable-next-line react-hooks/exhaustive-deps -- Only care about forceUpdateKey
-  useEffect(() => {
-    // Remove empty headers on initial render and ensure they all have valid ids (pairs didn't use to have IDs)
-    const newPairs: EditablePairWithId[] = [];
-    for (let i = 0; i < originalPairs.length; i++) {
-      const p = originalPairs[i];
-      if (!p) continue; // Make TS happy
-      if (isPairEmpty(p)) continue;
-      newPairs.push(ensurePairId(p));
-    }
-
-    // When the reset holds the exact same rows (eg. renaming a URL path placeholder, which keeps
-    // every row id), swap the data in without rebuilding the row editors. Unfocused inputs re-seed
-    // themselves when `defaultValue` changes, and a rebuild would drop the user's focus and
-    // selection — like tabbing from a placeholder's name into its value.
-    const trailingPair = pairs[pairs.length - 1];
-    const sameRows =
-      trailingPair != null &&
-      isPairEmpty(trailingPair) &&
-      pairs.length === newPairs.length + 1 &&
-      newPairs.every((p, i) => p.id === pairs[i]?.id);
-    if (sameRows) {
-      setPairs([...newPairs, trailingPair]);
-      return;
-    }
-
-    // Add empty last pair if there is none
-    const lastPair = newPairs[newPairs.length - 1];
-    if (lastPair == null || !isPairEmpty(lastPair)) {
-      newPairs.push(emptyPair());
-    }
-
-    setPairs(newPairs);
-    regenerateLocalForceUpdateKey();
-  }, [forceUpdateKey]);
-
-  const setPairsAndSave = useCallback(
-    (fn: (pairs: EditablePairWithId[]) => EditablePairWithId[]) => {
-      setPairs((oldPairs) => {
-        const pairs = fn(oldPairs);
-        onChange(pairs.map(toPairData));
-        return pairs;
-      });
-    },
-    [onChange],
-  );
-
-  const handleChange = useCallback(
-    (pair: EditablePairWithId) =>
-      setPairsAndSave((pairs) => pairs.map((p) => (pair.id !== p.id ? p : pair))),
-    [setPairsAndSave],
-  );
-
-  const handleDelete = useCallback(
-    (pair: Pair, focusPrevious: boolean) => {
-      if (focusPrevious) {
-        const index = pairs.findIndex((p) => p.id === pair.id);
-        const id = pairs[index - 1]?.id ?? null;
-        rowsRef.current[id ?? "n/a"]?.focusName();
-      }
-      return setPairsAndSave((oldPairs) => oldPairs.filter((p) => p.id !== pair.id));
-    },
-    [setPairsAndSave, pairs],
-  );
-
-  const handleFocusName = useCallback(
-    (pair: Pair) => {
-      const isLast = pair.id === pairs[pairs.length - 1]?.id;
-      if (isLast) setPairs([...pairs, emptyPair()]);
-    },
-    [pairs],
-  );
-
-  const handleFocusValue = useCallback(
-    (pair: Pair) => {
-      const isLast = pair.id === pairs[pairs.length - 1]?.id;
-      if (isLast) setPairs([...pairs, emptyPair()]);
-    },
-    [pairs],
-  );
-
-  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
-
-  // dnd-kit: show the “between rows” marker while hovering
-  const onDragMove = useCallback(
-    (e: DragMoveEvent) => {
-      const overId = e.over?.id as string | undefined;
-      if (!overId) return setHoveredIndex(null);
-
-      const overPair = pairs.find((p) => p.id === overId);
-      if (overPair == null) return setHoveredIndex(null);
-
-      const side = computeSideForDragMove(overPair.id, e);
-      const overIndex = pairs.findIndex((p) => p.id === overId);
-      const hoveredIndex = overIndex + (side === "before" ? 0 : 1);
-
-      setHoveredIndex(hoveredIndex);
-    },
-    [pairs],
-  );
-
-  const onDragStart = useCallback(
-    (e: DragStartEvent) => {
-      const pair = pairs.find((p) => p.id === e.active.id);
-      setIsDragging(pair ?? null);
-    },
-    [pairs],
-  );
-
-  const onDragCancel = useCallback(() => setIsDragging(null), []);
-
-  const onDragEnd = useCallback(
-    (e: DragEndEvent) => {
-      setIsDragging(null);
-      setHoveredIndex(null);
-      const activeId = e.active.id as string | undefined;
-      const overId = e.over?.id as string | undefined;
-      if (!activeId || !overId) return;
-
-      const from = pairs.findIndex((p) => p.id === activeId);
-      const baseTo = pairs.findIndex((p) => p.id === overId);
-      const to = hoveredIndex ?? (baseTo === -1 ? from : baseTo);
-
-      if (from !== -1 && to !== -1 && from !== to) {
-        setPairsAndSave((ps) => {
-          const next = [...ps];
-          const [moved] = next.splice(from, 1);
-          if (moved === undefined) return ps; // Make TS happy
-          next.splice(to > from ? to - 1 : to, 0, moved);
-          return next;
-        });
-      }
-    },
-    [pairs, hoveredIndex, setPairsAndSave],
-  );
-
-  return (
-    <div
-      className={classNames(
-        className,
-        "@container relative",
-        "pb-2 mb-auto h-full",
-        !noScroll && "overflow-y-auto max-h-full",
-        // Move over the width of the drag handle
-        "-mr-2 pr-2",
-        // Pad to make room for the drag divider
-        "pt-0.5",
-        "grid grid-rows-[auto_1fr]",
-      )}
-    >
-      <div>
-        <DndContext
-          autoScroll
-          sensors={sensors}
-          onDragMove={onDragMove}
-          onDragEnd={onDragEnd}
-          onDragStart={onDragStart}
-          onDragCancel={onDragCancel}
-          collisionDetection={pointerWithin}
-        >
-          {pairs.map((p, i) => {
-            if (!showAll && i > MAX_INITIAL_PAIRS) return null;
-
-            const isLast = i === pairs.length - 1;
-            return (
-              <Fragment key={p.id}>
-                {hoveredIndex === i && <DropMarker />}
-                <PairEditorRow
-                  setRef={initPairEditorRow}
-                  allowFileValues={allowFileValues}
-                  allowMultilineValues={allowMultilineValues}
-                  className="py-1"
-                  forcedEnvironmentId={forcedEnvironmentId}
-                  forceUpdateKey={localForceUpdateKey}
-                  index={i}
-                  isLast={isLast}
-                  isDraggingGlobal={!!isDragging}
-                  nameAutocomplete={nameAutocomplete}
-                  nameAutocompleteFunctions={nameAutocompleteFunctions}
-                  nameAutocompleteVariables={nameAutocompleteVariables}
-                  namePlaceholder={namePlaceholder}
-                  nameValidate={nameValidate}
-                  onChange={handleChange}
-                  onDelete={handleDelete}
-                  onFocusName={handleFocusName}
-                  onFocusValue={handleFocusValue}
-                  pair={p}
-                  stateKey={stateKey}
-                  valueAutocomplete={valueAutocomplete}
-                  valueAutocompleteFunctions={valueAutocompleteFunctions}
-                  valueAutocompleteVariables={valueAutocompleteVariables}
-                  valuePlaceholder={valuePlaceholder}
-                  valueType={valueType}
-                  valueValidate={valueValidate}
-                />
-              </Fragment>
-            );
-          })}
-          {!showAll && pairs.length > MAX_INITIAL_PAIRS && (
-            <Button onClick={toggleShowAll} variant="border" className="m-2" size="xs">
-              Show {pairs.length - MAX_INITIAL_PAIRS} More
-            </Button>
-          )}
-          <DragOverlay dropAnimation={null}>
-            {isDragging && (
-              <PairEditorRow
-                namePlaceholder={namePlaceholder}
-                valuePlaceholder={valuePlaceholder}
-                className="opacity-80"
-                pair={isDragging}
-                index={0}
-                stateKey={null}
-              />
-            )}
-          </DragOverlay>
-        </DndContext>
-      </div>
-
-      <div
-        // There's a weird bug where clicking below one of the above Codemirror inputs will cause
-        // it to focus. Putting this element here prevents that
-        aria-hidden
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      />
-    </div>
-  );
-}
-
-type PairEditorRowProps = {
-  className?: string;
-  pair: EditablePairWithId;
-  forceFocusNamePairId?: string | null;
-  forceFocusValuePairId?: string | null;
-  onChange?: (pair: EditablePairWithId) => void;
-  onDelete?: (pair: EditablePairWithId, focusPrevious: boolean) => void;
-  onFocusName?: (pair: EditablePairWithId) => void;
-  onFocusValue?: (pair: EditablePairWithId) => void;
-  onSubmit?: (pair: EditablePairWithId) => void;
-  isLast?: boolean;
-  disabled?: boolean;
-  disableDrag?: boolean;
-  index: number;
-  isDraggingGlobal?: boolean;
-  setRef?: (id: string, n: RowHandle | null) => void;
-} & Pick<
+export type {
+  EditablePair,
+  Pair,
+  PairEditorHandle,
  PairEditorProps,
-  | "allowFileValues"
-  | "allowMultilineValues"
-  | "forcedEnvironmentId"
-  | "forceUpdateKey"
-  | "nameAutocomplete"
-  | "nameAutocompleteVariables"
-  | "namePlaceholder"
-  | "nameValidate"
-  | "nameAutocompleteFunctions"
-  | "stateKey"
-  | "valueAutocomplete"
-  | "valueAutocompleteFunctions"
-  | "valueAutocompleteVariables"
-  | "valuePlaceholder"
-  | "valueType"
-  | "valueValidate"
->;
-
-interface RowHandle {
-  focusName(): boolean;
-  focusValue(): boolean;
-}
-
-export function PairEditorRow({
-  allowFileValues,
-  allowMultilineValues,
-  className,
-  disableDrag,
-  disabled,
-  forceUpdateKey,
-  forcedEnvironmentId,
-  index,
-  isLast,
-  nameAutocomplete,
-  nameAutocompleteFunctions,
-  nameAutocompleteVariables,
-  namePlaceholder,
-  nameValidate,
-  isDraggingGlobal,
-  onChange,
-  onDelete,
-  onFocusName,
-  onFocusValue,
-  pair,
-  stateKey,
-  valueAutocomplete,
-  valueAutocompleteFunctions,
-  valueAutocompleteVariables,
-  valuePlaceholder,
-  valueType,
-  valueValidate,
-  setRef,
-}: PairEditorRowProps) {
-  const nameInputRef = useRef<InputHandle>(null);
-  const valueInputRef = useRef<InputHandle>(null);
-  const handle = useRef<RowHandle>({
-    focusName() {
-      nameInputRef.current?.focus();
-      return nameInputRef.current?.isFocused() ?? false;
-    },
-    focusValue() {
-      valueInputRef.current?.focus();
-      return valueInputRef.current?.isFocused() ?? false;
-    },
-  });
-
-  const initNameInputRef = useCallback(
-    (n: InputHandle | null) => {
-      nameInputRef.current = n;
-      if (nameInputRef.current && valueInputRef.current) {
-        setRef?.(pair.id, handle.current);
-      }
-    },
-    [pair.id, setRef],
-  );
-
-  const initValueInputRef = useCallback(
-    (n: InputHandle | null) => {
-      valueInputRef.current = n;
-      if (nameInputRef.current && valueInputRef.current) {
-        setRef?.(pair.id, handle.current);
-      }
-    },
-    [pair.id, setRef],
-  );
-
-  const handleFocusName = useCallback(() => onFocusName?.(pair), [onFocusName, pair]);
-  const handleFocusValue = useCallback(() => onFocusValue?.(pair), [onFocusValue, pair]);
-  const handleDelete = useCallback(() => onDelete?.(pair, false), [onDelete, pair]);
-
-  const handleChangeEnabled = useMemo(
-    () => (enabled: boolean) => onChange?.({ ...pair, enabled }),
-    [onChange, pair],
-  );
-
-  // The name being typed into a deferred-commit field, before it's committed or reverted
-  const pendingName = useRef<string | null>(null);
-
-  const handleChangeName = useMemo(
-    () => (name: string) => {
-      // Keep the edit local until commit. Writing on every keystroke would reset the editor from
-      // beneath the cursor, since the pairs are derived from the name being edited.
-      if (pair.commitName != null) pendingName.current = name;
-      else onChange?.({ ...pair, name });
-    },
-    [onChange, pair],
-  );
-
-  const revertName = useCallback(() => {
-    const nameInput = nameInputRef.current;
-    if (nameInput != null) {
-      const changes = { from: 0, to: nameInput.value().length, insert: pair.name };
-      nameInput.dispatch({ changes });
-    }
-    pendingName.current = null;
-  }, [pair.name]);
-
-  const handleBlurName = useCallback(() => {
-    if (pair.commitName == null) return;
-
-    const name = pendingName.current;
-    pendingName.current = null;
-    if (name == null || name === pair.name) return;
-    if (!pair.commitName(name)) revertName();
-  }, [pair, revertName]);
-
-  const handleChangeValueText = useMemo(
-    () => (value: string) => onChange?.({ ...pair, value, isFile: false }),
-    [onChange, pair],
-  );
-
-  const handleChangeValueFile = useMemo(
-    () =>
-      ({ filePath }: { filePath: string | null }) =>
-        onChange?.({ ...pair, value: filePath ?? "", isFile: true }),
-    [onChange, pair],
-  );
-
-  const handleChangeValueContentType = useMemo(
-    () => (contentType: string) => onChange?.({ ...pair, contentType }),
-    [onChange, pair],
-  );
-
-  const handleChangeValueFilename = useMemo(
-    () => (filename: string) => onChange?.({ ...pair, filename }),
-    [onChange, pair],
-  );
-
-  const handleEditMultiLineValue = useCallback(
-    () =>
-      showDialog({
-        id: "pair-edit-multiline",
-        size: "dynamic",
-        title: <>Edit {pair.name}</>,
-        render: ({ hide }) => (
-          <MultilineEditDialog
-            hide={hide}
-            onChange={handleChangeValueText}
-            defaultValue={pair.value}
-            contentType={pair.contentType ?? null}
-          />
-        ),
-      }),
-    [handleChangeValueText, pair.contentType, pair.name, pair.value],
-  );
-
-  const defaultItems = useMemo(
-    (): DropdownItem[] => [
-      {
-        label: "Edit Multi-line",
-        onSelect: handleEditMultiLineValue,
-        hidden: !allowMultilineValues,
-      },
-      {
-        label: "Delete",
-        onSelect: handleDelete,
-        color: "danger",
-      },
-    ],
-    [allowMultilineValues, handleDelete, handleEditMultiLineValue],
-  );
-
-  const { attributes, listeners, setNodeRef: setDraggableRef } = useDraggable({ id: pair.id });
-  const { setNodeRef: setDroppableRef } = useDroppable({ id: pair.id });
-
-  // Filter out the current pair name
-  const valueAutocompleteVariablesFiltered = useMemo<EditorProps["autocompleteVariables"]>(() => {
-    if (valueAutocompleteVariables === "environment") {
-      return (v: WrappedEnvironmentVariable): boolean => v.variable.name !== pair.name;
-    }
-    return valueAutocompleteVariables;
-  }, [pair.name, valueAutocompleteVariables]);
-
-  const handleSetRef = useCallback(
-    (n: HTMLDivElement | null) => {
-      setDraggableRef(n);
-      setDroppableRef(n);
-    },
-    [setDraggableRef, setDroppableRef],
-  );
-
-  // Skip the trailing placeholder row. It exists to start a new pair, so a picker there would
-  // imply it's already a real row. `Input` handles the rest, including having no options to show.
-  const showOptionsPicker = !isLast;
-
-  return (
-    <div
-      ref={handleSetRef}
-      className={classNames(
-        className,
-        "group/pair-row grid grid-cols-[auto_auto_minmax(0,1fr)_auto]",
-        "grid-rows-1 items-center",
-        !pair.enabled && "opacity-60",
-      )}
-    >
-      <Checkbox
-        hideLabel
-        title={pair.enabled ? "Disable item" : "Enable item"}
-        disabled={isLast || disabled}
-        checked={isLast ? false : !!pair.enabled}
-        className={classNames(isLast && "opacity-disabled!")}
-        onChange={handleChangeEnabled}
-      />
-      {!isLast && !disableDrag ? (
-        <div
-          {...attributes}
-          {...listeners}
-          className={classNames(
-            "py-2 h-7 w-4 flex items-center",
-            "justify-center opacity-0 group-hover/pair-row:opacity-70",
-          )}
-        >
-          <Icon size="sm" icon="grip_vertical" className="pointer-events-none" />
-        </div>
-      ) : (
-        <span className="w-4" />
-      )}
-      <div
-        className={classNames(
-          "grid items-center",
-          "@xs:gap-2 @xs:grid-rows-1! @xs:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]!",
-          "gap-0.5 grid-cols-1 grid-rows-2",
-        )}
-      >
-        <Input
-          setRef={initNameInputRef}
-          hideLabel
-          stateKey={`name.${pair.id}.${stateKey}`}
-          disabled={disabled}
-          wrapLines={false}
-          readOnly={isDraggingGlobal}
-          size="sm"
-          required={!isLast && !!pair.enabled && !!pair.value}
-          validate={nameValidate}
-          forcedEnvironmentId={forcedEnvironmentId}
-          forceUpdateKey={forceUpdateKey}
-          containerClassName={classNames("bg-surface", isLast && "border-dashed")}
-          defaultValue={pair.name}
-          label="Name"
-          name={`name[${index}]`}
-          onBlur={handleBlurName}
-          onChange={handleChangeName}
-          onFocus={handleFocusName}
-          placeholder={namePlaceholder ?? "name"}
-          autocomplete={nameAutocomplete}
-          autocompleteVariables={nameAutocompleteVariables}
-          autocompleteFunctions={nameAutocompleteFunctions}
-          showOptionsPicker={showOptionsPicker}
-        />
-        <div className="w-full grid grid-cols-[minmax(0,1fr)_auto] gap-1 items-center">
-          {pair.isFile ? (
-            <SelectFile
-              disabled={disabled}
-              inline
-              size="xs"
-              filePath={pair.value}
-              nameOverride={pair.filename || null}
-              onChange={handleChangeValueFile}
-            />
-          ) : pair.value.includes("\n") ? (
-            <Button
-              color="secondary"
-              size="sm"
-              onClick={handleEditMultiLineValue}
-              title={pair.value}
-              className="text-xs font-mono"
-            >
-              {pair.value.split("\n").join(" ")}
-            </Button>
-          ) : (
-            <Input
-              setRef={initValueInputRef}
-              hideLabel
-              stateKey={`value.${pair.id}.${stateKey}`}
-              wrapLines={false}
-              size="sm"
-              disabled={disabled}
-              readOnly={isDraggingGlobal}
-              containerClassName={classNames("bg-surface", isLast && "border-dashed")}
-              validate={valueValidate}
-              forcedEnvironmentId={forcedEnvironmentId}
-              forceUpdateKey={forceUpdateKey}
-              defaultValue={pair.value}
-              label="Value"
-              name={`value[${index}]`}
-              onChange={handleChangeValueText}
-              onFocus={handleFocusValue}
-              type={isLast ? "text" : typeof valueType === "function" ? valueType(pair) : valueType}
-              placeholder={valuePlaceholder ?? "value"}
-              autocomplete={valueAutocomplete?.(pair.name)}
-              autocompleteFunctions={valueAutocompleteFunctions}
-              autocompleteVariables={valueAutocompleteVariablesFiltered}
-              showOptionsPicker={showOptionsPicker}
-            />
-          )}
-        </div>
-      </div>
-      {allowFileValues ? (
-        <FileActionsDropdown
-          pair={pair}
-          onChangeFile={handleChangeValueFile}
-          onChangeText={handleChangeValueText}
-          onChangeContentType={handleChangeValueContentType}
-          onChangeFilename={handleChangeValueFilename}
-          onDelete={handleDelete}
-          editMultiLine={handleEditMultiLineValue}
-        />
-      ) : (
-        <Dropdown items={defaultItems}>
-          <IconButton
-            iconSize="sm"
-            size="xs"
-            // Ellipsis rather than a chevron: the name and value fields now carry chevrons for
-            // picking a suggestion, and this menu acts on the row instead of filling in a field.
-            icon={isLast || disabled ? "empty" : "ellipsis_vertical"}
-            title="More actions"
-            className="text-text-subtlest"
-          />
-        </Dropdown>
-      )}
-    </div>
-  );
-}
-
-const fileItems: RadioDropdownItem<string>[] = [
-  { label: "Text", value: "text" },
-  { label: "File", value: "file" },
-];
-
-function FileActionsDropdown({
-  pair,
-  onChangeFile,
-  onChangeText,
-  onChangeContentType,
-  onChangeFilename,
-  onDelete,
-  editMultiLine,
-}: {
-  pair: Pair;
-  onChangeFile: ({ filePath }: { filePath: string | null }) => void;
-  onChangeText: (text: string) => void;
-  onChangeContentType: (contentType: string) => void;
-  onChangeFilename: (filename: string) => void;
-  onDelete: () => void;
-  editMultiLine: () => void;
-}) {
-  const onChange = useCallback(
-    (v: string) => {
-      if (v === "file") onChangeFile({ filePath: "" });
-      else onChangeText("");
-    },
-    [onChangeFile, onChangeText],
-  );
-
-  const itemsAfter = useMemo<DropdownItem[]>(
-    () => [
-      {
-        label: "Edit Multi-Line",
-        leftSlot: <Icon icon="file_code" />,
-        hidden: pair.isFile,
-        onSelect: editMultiLine,
-      },
-      {
-        label: "Set Content-Type",
-        leftSlot: <Icon icon="pencil" />,
-        onSelect: async () => {
-          const contentType = await showPrompt({
-            id: "content-type",
-            title: "Override Content-Type",
-            label: "Content-Type",
-            required: false,
-            placeholder: "text/plain",
-            defaultValue: pair.contentType ?? "",
-            confirmText: "Set",
-            description: "Leave blank to auto-detect",
-          });
-          if (contentType == null) return;
-          onChangeContentType(contentType);
-        },
-      },
-      {
-        label: "Set File Name",
-        leftSlot: <Icon icon="file_code" />,
-        onSelect: async () => {
-          console.log("PAIR", pair);
-          const defaultFilename = await platform.files.basename(pair.value ?? "");
-          const filename = await showPrompt({
-            id: "filename",
-            title: "Override Filename",
-            label: "Filename",
-            required: false,
-            placeholder: defaultFilename ?? "myfile.png",
-            defaultValue: pair.filename,
-            confirmText: "Set",
-            description: "Leave blank to use the name of the selected file",
-          });
-          if (filename == null) return;
-          onChangeFilename(filename);
-        },
-      },
-      {
-        label: "Unset File",
-        leftSlot: <Icon icon="x" />,
-        hidden: pair.isFile,
-        onSelect: async () => {
-          onChangeFile({ filePath: null });
-        },
-      },
-      {
-        label: "Delete",
-        onSelect: onDelete,
-        variant: "danger",
-        leftSlot: <Icon icon="trash" />,
-        color: "danger",
-      },
-    ],
-    [
-      editMultiLine,
-      onChangeContentType,
-      onChangeFile,
-      onDelete,
-      pair.contentType,
-      pair.isFile,
-      onChangeFilename,
-      pair.filename,
-      pair,
-    ],
-  );
-
-  return (
-    <RadioDropdown
-      value={pair.isFile ? "file" : "text"}
-      onChange={onChange}
-      items={fileItems}
-      itemsAfter={itemsAfter}
-    >
-      <IconButton
-        iconSize="sm"
-        size="xs"
-        // Matches the plain row menu, so the actions column reads the same for file and text rows
-        icon="ellipsis_vertical"
-        title="Select form data type"
-        className="text-text-subtlest"
-      />
-    </RadioDropdown>
-  );
-}
-
-function emptyPair(): EditablePairWithId {
-  return ensurePairId({ enabled: true, name: "", value: "" });
-}
-
-function isPairEmpty(pair: Pair): boolean {
-  return !pair.name && !pair.value;
-}
-
-function MultilineEditDialog({
-  defaultValue,
-  contentType,
-  onChange,
-  hide,
-}: {
-  defaultValue: string;
-  contentType: string | null;
-  onChange: (value: string) => void;
-  hide: () => void;
-}) {
-  const [value, setValue] = useState<string>(defaultValue);
-  const language = languageFromContentType(contentType, value);
-  return (
-    <div className="w-screen max-w-160 h-[50vh] max-h-full grid grid-rows-[minmax(0,1fr)_auto]">
-      <Editor
-        heightMode="auto"
-        defaultValue={defaultValue}
-        language={language}
-        onChange={setValue}
-        stateKey={null}
-        autocompleteFunctions
-        autocompleteVariables
-      />
-      <div>
-        <Button
-          color="primary"
-          className="ml-auto my-2"
-          onClick={() => {
-            onChange(value);
-            hide();
-          }}
-        >
-          Done
-        </Button>
-      </div>
-    </div>
-  );
-}
+  PairWithId,
+} from "@yaakapp-internal/ui";
+export { PairEditor, PairEditorRow } from "@yaakapp-internal/ui";
@@ -1,10 +1 @@
-import type { Pair, PairWithId } from "./PairEditor";
-import { generateId } from "@yaakapp-internal/lib/generateId";
-
-// NOTE: Generic so callers keep whatever they passed in (eg. an EditablePair stays editable)
-export function ensurePairId<T extends Pair>(p: T): T & PairWithId {
-  if (typeof p.id === "string") {
-    return p as T & PairWithId;
-  }
-  return { ...p, id: p.id ?? generateId() };
-}
+export { ensurePairId } from "@yaakapp-internal/ui";
@@ -1,38 +1 @@
-import classNames from "classnames";
-import { useKeyValue } from "../../hooks/useKeyValue";
-import { BulkPairEditor } from "./BulkPairEditor";
-import { IconButton } from "./IconButton";
-import type { PairEditorProps } from "./PairEditor";
-import { PairEditor } from "./PairEditor";
-
-interface Props extends PairEditorProps {
-  preferenceName: string;
-  forcedEnvironmentId?: string;
-}
-
-export function PairOrBulkEditor({ preferenceName, ...props }: Props) {
-  const { value: useBulk, set: setUseBulk } = useKeyValue<boolean>({
-    namespace: "global",
-    key: ["bulk_edit", preferenceName],
-    fallback: false,
-  });
-
-  return (
-    <div className="relative h-full w-full group/wrapper">
-      {useBulk ? <BulkPairEditor {...props} /> : <PairEditor {...props} />}
-      <div className="absolute right-0 bottom-0">
-        <IconButton
-          size="sm"
-          variant="border"
-          title={useBulk ? "Enable form edit" : "Enable bulk edit"}
-          className={classNames(
-            "transition-opacity opacity-0 group-hover:opacity-80 hover:opacity-100! shadow",
-            "bg-surface hover:text group-hover/wrapper:opacity-100",
-          )}
-          onClick={() => setUseBulk((b) => !b)}
-          icon={useBulk ? "table" : "file_code"}
-        />
-      </div>
-    </div>
-  );
-}
+export { PairOrBulkEditor } from "@yaakapp-internal/ui";
@@ -1,14 +1 @@
-import classNames from "classnames";
-import type { ButtonProps } from "./Button";
-import { Button } from "./Button";
-
-export function PillButton({ className, ...props }: ButtonProps) {
-  return (
-    <Button
-      size="2xs"
-      variant="border"
-      className={classNames(className, "rounded-full! mx-1 px-3!")}
-      {...props}
-    />
-  );
-}
+export { PillButton } from "@yaakapp-internal/ui";
@@ -1,69 +1,2 @@
-import type { ReactNode } from "react";
-import { useMemo } from "react";
-import type { DropdownItem, DropdownItemSeparator, DropdownProps } from "./Dropdown";
-import { Dropdown } from "./Dropdown";
-import { Icon } from "@yaakapp-internal/ui";
-
-export type RadioDropdownItem<T = string | null> =
-  | {
-      type?: "default";
-      label: ReactNode;
-      shortLabel?: ReactNode;
-      value: T;
-      rightSlot?: ReactNode;
-    }
-  | DropdownItemSeparator;
-
-export interface RadioDropdownProps<T = string | null> {
-  value: T;
-  onChange: (value: T) => void;
-  itemsBefore?: DropdownItem[];
-  items: RadioDropdownItem<T>[];
-  itemsAfter?: DropdownItem[];
-  children: DropdownProps["children"];
-}
-
-export function RadioDropdown<T = string | null>({
-  value,
-  items,
-  itemsAfter,
-  itemsBefore,
-  onChange,
-  children,
-}: RadioDropdownProps<T>) {
-  const dropdownItems = useMemo(
-    () => [
-      ...((itemsBefore
-        ? [
-            ...itemsBefore,
-            {
-              type: "separator",
-              hidden: itemsBefore[itemsBefore.length - 1]?.type === "separator",
-            },
-          ]
-        : []) as DropdownItem[]),
-      ...items.map((item) => {
-        if (item.type === "separator") {
-          return item;
-        }
-        return {
-          key: item.value,
-          label: item.label,
-          rightSlot: item.rightSlot,
-          onSelect: () => onChange(item.value),
-          leftSlot: <Icon icon={value === item.value ? "check" : "empty"} />,
-        } as DropdownItem;
-      }),
-      ...((itemsAfter
-        ? [{ type: "separator", hidden: itemsAfter[0]?.type === "separator" }, ...itemsAfter]
-        : []) as DropdownItem[]),
-    ],
-    [itemsBefore, items, itemsAfter, value, onChange],
-  );
-
-  return (
-    <Dropdown fullWidth items={dropdownItems}>
-      {children}
-    </Dropdown>
-  );
-}
+export type { RadioDropdownItem, RadioDropdownProps } from "@yaakapp-internal/ui";
+export { RadioDropdown } from "@yaakapp-internal/ui";
@@ -1,148 +1,2 @@
-import { platform } from "@yaakapp-internal/platform";
-import { HStack, Label } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import type { CSSProperties, ReactNode } from "react";
-import { useState } from "react";
-import type { ButtonProps } from "./Button";
-import { Button } from "./Button";
-import type { RadioDropdownItem } from "./RadioDropdown";
-import { RadioDropdown } from "./RadioDropdown";
-
-export interface SelectProps<T extends string> {
-  name: string;
-  label: string;
-  labelPosition?: "top" | "left";
-  labelClassName?: string;
-  hideLabel?: boolean;
-  value: T;
-  help?: ReactNode;
-  leftSlot?: ReactNode;
-  options: RadioDropdownItem<T>[];
-  onChange: (value: T) => void;
-  defaultValue?: T;
-  size?: ButtonProps["size"];
-  className?: string;
-  disabled?: boolean;
-  filterable?: boolean;
-}
-
-export function Select<T extends string>({
-  labelPosition = "top",
-  name,
-  help,
-  labelClassName,
-  disabled,
-  hideLabel,
-  label,
-  value,
-  options,
-  leftSlot,
-  onChange,
-  className,
-  defaultValue,
-  filterable,
-  size = "md",
-}: SelectProps<T>) {
-  const [focused, setFocused] = useState<boolean>(false);
-  const id = `input-${name}`;
-  const isInvalidSelection = options.find((o) => "value" in o && o.value === value) == null;
-
-  const handleChange = (value: T) => {
-    onChange?.(value);
-  };
-
-  return (
-    <div
-      className={classNames(
-        className,
-        "x-theme-input",
-        "w-full",
-        "pointer-events-auto", // Just in case we're placing in disabled parent
-        labelPosition === "left" && "grid grid-cols-[auto_1fr] items-center gap-2",
-        labelPosition === "top" && "flex-row gap-0.5",
-      )}
-    >
-      <Label htmlFor={id} visuallyHidden={hideLabel} className={labelClassName} help={help}>
-        {label}
-      </Label>
-      {platform.osType() === "macos" && !filterable ? (
-        <HStack
-          space={2}
-          className={classNames(
-            "w-full rounded-md text text-sm font-mono",
-            "pl-2",
-            "border",
-            focused && !disabled ? "border-border-focus" : "border-border",
-            disabled && "border-dotted",
-            isInvalidSelection && "border-danger",
-            size === "xs" && "h-xs",
-            size === "sm" && "h-sm",
-            size === "md" && "h-md",
-          )}
-        >
-          {leftSlot && <div>{leftSlot}</div>}
-          <select
-            value={value}
-            style={selectBackgroundStyles}
-            onChange={(e) => handleChange(e.target.value as T)}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-            disabled={disabled}
-            className={classNames(
-              "pr-7 w-full outline-hidden bg-transparent disabled:opacity-disabled",
-              "leading-none rounded-none", // Center the text better vertically
-            )}
-          >
-            {isInvalidSelection && <option value={"__NONE__"}>-- Select an Option --</option>}
-            {options.map((o) => {
-              if (o.type === "separator") return null;
-              return (
-                <option key={o.value} value={o.value}>
-                  {o.label}
-                  {o.value === defaultValue && " (default)"}
-                </option>
-              );
-            })}
-          </select>
-        </HStack>
-      ) : (
-        // Use custom "select" component until Tauri can be configured to have select menus not always appear in
-        // light mode
-        <RadioDropdown
-          value={value}
-          onChange={handleChange}
-          items={options.map((o) =>
-            o.type === "separator" || o.value !== defaultValue
-              ? o
-              : { ...o, label: <>{o.label} (default)</> },
-          )}
-        >
-          <Button
-            className={classNames(
-              "w-full text-sm font-mono",
-              disabled && "border-dotted",
-              isInvalidSelection && "border-danger",
-            )}
-            justify="start"
-            variant="input"
-            size={size}
-            leftSlot={leftSlot}
-            disabled={disabled}
-            forDropdown
-          >
-            {options.find((o) => o.type !== "separator" && o.value === value)?.label ?? "--"}
-          </Button>
-        </RadioDropdown>
-      )}
-    </div>
-  );
-}
-
-const selectBackgroundStyles: CSSProperties = {
-  backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
-  backgroundPosition: "right 0.3rem center",
-  backgroundRepeat: "no-repeat",
-  backgroundSize: "1.5em 1.5em",
-  appearance: "none",
-  printColorAdjust: "exact",
-};
+export type { SelectProps } from "@yaakapp-internal/ui";
+export { Select } from "@yaakapp-internal/ui";
@@ -1,260 +1,36 @@
 import type { AnyModel } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
-import { Icon } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import type { ReactNode } from "react";
-import { CopyIconButton } from "../CopyIconButton";
-import { Checkbox } from "./Checkbox";
-import { IconButton, type IconButtonProps } from "./IconButton";
-import { PlainInput } from "./PlainInput";
-import type { RadioDropdownItem } from "./RadioDropdown";
-import { Select } from "./Select";
+import {
+  SettingRow,
+  type SettingRowBaseProps,
+  SettingRowBoolean,
+  SettingRowNumber,
+  SettingRowSelect,
+  SettingRowText,
+  SettingSelectControl,
+} from "@yaakapp-internal/ui";
 import { SelectFile } from "../SelectFile";

+export type { SettingRowBaseProps, SettingSnippetLanguage } from "@yaakapp-internal/ui";
+export {
+  SettingCommand,
+  SettingOverrideRow,
+  SettingRow,
+  SettingRowBoolean,
+  SettingRowNumber,
+  SettingRowSelect,
+  SettingRowText,
+  SettingSelectControl,
+  SettingSnippet,
+  SettingsList,
+  SettingsSection,
+  SettingValue,
+} from "@yaakapp-internal/ui";
+
 type ModelKeyOfValue<T, V> = {
  [K in keyof T]-?: T[K] extends V ? K : never;
 }[keyof T];

-type SettingRowBaseProps = {
-  className?: string;
-  controlClassName?: string;
-  description?: ReactNode;
-  disabled?: boolean;
-  title: ReactNode;
-};
-
-export function SettingsList({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={classNames("w-full", className)}>{children}</div>;
-}
-
-export function SettingsSection({
-  children,
-  className,
-  description,
-  title,
-}: {
-  children: ReactNode;
-  className?: string;
-  description?: ReactNode;
-  title: ReactNode | null;
-}) {
-  const showHeader = title != null || description != null;
-
-  return (
-    <section className={classNames(className, "w-full")}>
-      {showHeader && (
-        <div className="border-b border-border-subtle pb-2">
-          {title != null && <div className="text-text-subtle">{title}</div>}
-          {description != null && <p className="mt-1 text-sm text-text-subtlest">{description}</p>}
-        </div>
-      )}
-      <div className="[&>*:last-child]:border-b-0">{children}</div>
-    </section>
-  );
-}
-
-export function SettingRow({
-  children,
-  className,
-  controlClassName,
-  description,
-  disabled,
-  title,
-}: {
-  children: ReactNode;
-} & SettingRowBaseProps) {
-  return (
-    <div
-      aria-disabled={disabled || undefined}
-      className={classNames(
-        className,
-        "@container border-b border-border-subtle py-4",
-        disabled && "opacity-disabled",
-      )}
-    >
-      <div
-        className={classNames(
-          "grid grid-cols-1 gap-2",
-          "@[30rem]:grid-cols-[minmax(0,1fr)_auto] items-center",
-        )}
-      >
-        <div className="min-w-0">
-          <div className="text text-text">{title}</div>
-          {description != null && (
-            <div className="mt-1 max-w-2xl text-sm text-text-subtle">{description}</div>
-          )}
-        </div>
-        <div
-          className={classNames(
-            "flex min-w-0 items-center justify-start @[40rem]:justify-end",
-            controlClassName,
-          )}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function SettingValue({
-  actions,
-  className,
-  copyText,
-  enableCopy = true,
-  value,
-}: {
-  actions?: SettingValueAction[];
-  className?: string;
-  copyText?: string;
-  enableCopy?: boolean;
-  value: ReactNode;
-}) {
-  const textValue = typeof value === "string" || typeof value === "number" ? `${value}` : null;
-  const textToCopy = copyText ?? textValue;
-
-  return (
-    <>
-      <span
-        className={classNames(
-          className,
-          "cursor-text select-text truncate font-mono text-editor text-text-subtle pr-1.5",
-        )}
-      >
-        {value}
-      </span>
-      {actions?.map((action) => (
-        <IconButton
-          key={action.title}
-          icon={action.icon}
-          title={action.title}
-          size="2xs"
-          iconSize="sm"
-          onClick={action.onClick}
-        />
-      ))}
-      {enableCopy && textToCopy != null && (
-        <CopyIconButton size="2xs" text={textToCopy} title="Copy value" />
-      )}
-    </>
-  );
-}
-
-/**
- * A command or config to copy, set as a block: its title, an optional line
- * saying which file it goes in, then the snippet at full width with the copy
- * button on it. One-line shell commands and multi-line JSON get the same block.
- */
-export function SettingCommand({
-  className,
-  description,
-  disabled,
-  done,
-  language,
-  snippet,
-  title,
-}: {
-  description?: ReactNode;
-  disabled?: boolean;
-  /** A short word shown with a check beside the title once the step is detected as done */
-  done?: ReactNode;
-  language: SettingSnippetLanguage;
-  snippet: string;
-  title: ReactNode;
-} & Pick<SettingRowBaseProps, "className">) {
-  return (
-    <div
-      aria-disabled={disabled || undefined}
-      className={classNames(
-        className,
-        "border-b border-border-subtle py-4",
-        disabled && "opacity-disabled",
-      )}
-    >
-      <div className="flex min-w-0 items-center gap-2 text text-text">
-        <span>{title}</span>
-        {done != null && done !== false && (
-          <span className="inline-flex items-center gap-1 text-sm text-success">
-            <Icon icon="check" size="sm" />
-            {done}
-          </span>
-        )}
-      </div>
-      {description != null && (
-        <div className="mt-1 max-w-2xl text-sm text-text-subtle">{description}</div>
-      )}
-      <SettingSnippet className="mt-3" language={language} snippet={snippet} />
-    </div>
-  );
-}
-
-export type SettingSnippetLanguage = "shell" | "json" | "text";
-
-/** The snippet half of a `SettingCommand`, for places with their own title, like a banner. */
-export function SettingSnippet({
-  className,
-  language,
-  snippet,
-}: {
-  className?: string;
-  language: SettingSnippetLanguage;
-  snippet: string;
-}) {
-  const prompt = language === "shell";
-
-  return (
-    <div
-      className={classNames(
-        className,
-        "flex items-start gap-2 rounded-md border border-border-subtle bg-surface-highlight/40 py-1.5 pr-1.5 pl-3",
-      )}
-    >
-      <div className="flex min-h-sm min-w-0 flex-1 items-center font-mono text-editor text-text">
-        <span className="cursor-text select-text whitespace-pre-wrap [overflow-wrap:anywhere]">
-          {prompt && (
-            <span aria-hidden className="mr-2 select-none text-text-subtlest">
-              $
-            </span>
-          )}
-          {snippet}
-        </span>
-      </div>
-      <CopyIconButton size="sm" variant="border" title="Copy" text={snippet} className="shrink-0" />
-    </div>
-  );
-}
-
-type SettingValueAction = {
-  icon: IconButtonProps["icon"];
-  onClick: () => void;
-  title: string;
-};
-
-export function SettingRowBoolean({
-  checked,
-  checkboxSize = "md",
-  onChange,
-  title,
-  ...props
-}: {
-  checked: boolean;
-  checkboxSize?: "sm" | "md";
-  onChange: (checked: boolean) => void;
-} & SettingRowBaseProps) {
-  return (
-    <SettingRow title={title} {...props}>
-      <Checkbox
-        hideLabel
-        size={checkboxSize}
-        checked={checked}
-        disabled={props.disabled}
-        title={title}
-        onChange={onChange}
-      />
-    </SettingRow>
-  );
-}
-
 export function ModelSettingRowBoolean<M extends AnyModel, K extends ModelKeyOfValue<M, boolean>>({
  model,
  modelKey,
@@ -272,50 +48,6 @@ export function ModelSettingRowBoolean<M extends AnyModel, K extends ModelKeyOfV
  );
 }

-export function SettingRowNumber({
-  inputClassName,
-  inputWidthClassName = "w-48!",
-  name,
-  onChange,
-  placeholder,
-  required,
-  title,
-  type = "number",
-  validate,
-  value,
-  ...props
-}: {
-  inputClassName?: string;
-  inputWidthClassName?: string;
-  name: string;
-  onChange: (value: number) => void;
-  placeholder?: string;
-  required?: boolean;
-  type?: "number";
-  validate?: (value: string) => boolean;
-  value: number;
-} & SettingRowBaseProps) {
-  return (
-    <SettingRow title={title} {...props}>
-      <PlainInput
-        required={required}
-        hideLabel
-        size="sm"
-        name={name}
-        label={typeof title === "string" ? title : name}
-        placeholder={placeholder}
-        defaultValue={`${value}`}
-        validate={validate}
-        onChange={(value) => onChange(Number.parseInt(value, 10) || 0)}
-        type={type}
-        className={inputClassName}
-        containerClassName={inputWidthClassName}
-        disabled={props.disabled}
-      />
-    </SettingRow>
-  );
-}
-
 export function ModelSettingRowNumber<M extends AnyModel, K extends ModelKeyOfValue<M, number>>({
  model,
  modelKey,
@@ -334,47 +66,6 @@ export function ModelSettingRowNumber<M extends AnyModel, K extends ModelKeyOfVa
  );
 }

-export function SettingRowText({
-  inputClassName,
-  inputWidthClassName = "w-80!",
-  name,
-  onChange,
-  placeholder,
-  required,
-  title,
-  type = "text",
-  value,
-  ...props
-}: {
-  inputClassName?: string;
-  inputWidthClassName?: string;
-  name: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  required?: boolean;
-  type?: "text" | "password";
-  value: string;
-} & SettingRowBaseProps) {
-  return (
-    <SettingRow title={title} {...props}>
-      <PlainInput
-        required={required}
-        hideLabel
-        size="sm"
-        name={name}
-        label={typeof title === "string" ? title : name}
-        placeholder={placeholder}
-        defaultValue={value}
-        onChange={onChange}
-        type={type}
-        className={inputClassName}
-        containerClassName={inputWidthClassName}
-        disabled={props.disabled}
-      />
-    </SettingRow>
-  );
-}
-
 export function ModelSettingRowText<M extends AnyModel, K extends ModelKeyOfValue<M, string>>({
  model,
  modelKey,
@@ -438,74 +129,6 @@ export function SettingRowDirectory({
  return <SettingRowFile directory noun={noun} {...props} />;
 }

-export function SettingRowSelect<T extends string>({
-  defaultValue,
-  name,
-  onChange,
-  options,
-  selectClassName = "w-48!",
-  title,
-  value,
-  ...props
-}: {
-  defaultValue?: T;
-  name: string;
-  onChange: (value: T) => void;
-  options: RadioDropdownItem<T>[];
-  selectClassName?: string;
-  value: T;
-} & SettingRowBaseProps) {
-  return (
-    <SettingRow title={title} {...props}>
-      <SettingSelectControl
-        name={name}
-        label={typeof title === "string" ? title : name}
-        value={value}
-        defaultValue={defaultValue}
-        selectClassName={selectClassName}
-        disabled={props.disabled}
-        onChange={onChange}
-        options={options}
-      />
-    </SettingRow>
-  );
-}
-
-export function SettingSelectControl<T extends string>({
-  defaultValue,
-  disabled,
-  label,
-  name,
-  onChange,
-  options,
-  selectClassName = "w-48!",
-  value,
-}: {
-  defaultValue?: T;
-  disabled?: boolean;
-  label: string;
-  name: string;
-  onChange: (value: T) => void;
-  options: RadioDropdownItem<T>[];
-  selectClassName?: string;
-  value: T;
-}) {
-  return (
-    <Select
-      hideLabel
-      name={name}
-      value={value}
-      defaultValue={defaultValue}
-      label={label}
-      size="sm"
-      className={selectClassName}
-      disabled={disabled}
-      onChange={onChange}
-      options={options}
-    />
-  );
-}
-
 export function ModelSettingSelectControl<
  M extends AnyModel,
  K extends ModelKeyOfValue<M, string>,
@@ -549,51 +172,3 @@ export function ModelSettingRowSelect<
    />
  );
 }
-
-export function SettingOverrideRow({
-  children,
-  className,
-  controlClassName,
-  description,
-  disabled,
-  onResetOverride,
-  overridden,
-  resetTitle = "Reset override",
-  title,
-}: {
-  children: ReactNode;
-  className?: string;
-  controlClassName?: string;
-  description?: ReactNode;
-  disabled?: boolean;
-  onResetOverride: () => void;
-  overridden: boolean;
-  resetTitle?: string;
-  title: ReactNode;
-}) {
-  return (
-    <SettingRow
-      className={className}
-      controlClassName={controlClassName}
-      description={description}
-      disabled={disabled}
-      title={
-        <span className="inline-flex items-center gap-1.5">
-          {title}
-          {overridden && (
-            <IconButton
-              icon="undo_2"
-              size="2xs"
-              iconSize="sm"
-              title={resetTitle}
-              className="text-text-subtle"
-              onClick={onResetOverride}
-            />
-          )}
-        </span>
-      }
-    >
-      {children}
-    </SettingRow>
-  );
-}
@@ -1,99 +1,28 @@
 import {
-  Icon,
-  type StoredValue,
  TabContent as BaseTabContent,
  type TabContentProps,
-  type TabItem as BaseTabItem,
+  type TabItem,
  Tabs as BaseTabs,
-  type TabsProps as BaseTabsProps,
+  type TabsProps,
  type TabsRef,
  type TabsStorage,
 } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import type { ReactNode } from "react";
-import { forwardRef, memo, useMemo } from "react";
-import { useKeyValue } from "../../../hooks/useKeyValue";
+import { forwardRef, memo } from "react";
 import { ErrorBoundary } from "../../ErrorBoundary";
-import { Button } from "../Button";
-import type { RadioDropdownProps } from "../RadioDropdown";
-import { RadioDropdown } from "../RadioDropdown";

-export type { TabsRef };
+export type { TabItem, TabsRef };

-export type TabItem =
-  | Extract<BaseTabItem, { label: string }>
-  | {
-      value: string;
-      options: Omit<RadioDropdownProps, "children">;
-      leftSlot?: ReactNode;
-      rightSlot?: ReactNode;
-    };
-
-type Props = Omit<BaseTabsProps, "tabs" | "useStoredValue"> & { tabs: TabItem[] };
-
-export const Tabs = forwardRef<TabsRef, Props>(function Tabs({ tabs, ...props }, ref) {
-  const baseTabs = useMemo(() => tabs.map(toBaseTab), [tabs]);
-  return <BaseTabs ref={ref} tabs={baseTabs} useStoredValue={useTabsStoredValue} {...props} />;
-});
+// The client's EditorHostProvider keeps tab order and the active tab in its key-value store
+export const Tabs = forwardRef<TabsRef, Omit<TabsProps, "useStoredValue">>(
+  function Tabs(props, ref) {
+    return <BaseTabs ref={ref} {...props} />;
+  },
+);

 export const TabContent = memo(function TabContent(props: Omit<TabContentProps, "ErrorBoundary">) {
  return <BaseTabContent {...props} ErrorBoundary={ErrorBoundary} />;
 });

-function toBaseTab(tab: TabItem): BaseTabItem {
-  if (!("options" in tab)) return tab;
-  const { options } = tab;
-  return {
-    value: tab.value,
-    leftSlot: tab.leftSlot,
-    rightSlot: tab.rightSlot,
-    renderButton: ({ buttonProps, isActive }) => {
-      const option = options.items.find((i) => "value" in i && i.value === options.value);
-      return (
-        <RadioDropdown
-          key={tab.value}
-          items={options.items}
-          itemsAfter={options.itemsAfter}
-          itemsBefore={options.itemsBefore}
-          value={options.value}
-          onChange={options.onChange}
-        >
-          <Button
-            leftSlot={tab.leftSlot}
-            rightSlot={
-              <div className="flex items-center">
-                {tab.rightSlot}
-                <Icon
-                  size="sm"
-                  icon="chevron_down"
-                  className={classNames(
-                    "ml-1",
-                    isActive ? "text-text-subtle" : "text-text-subtlest",
-                  )}
-                />
-              </div>
-            }
-            {...buttonProps}
-          >
-            {option && "shortLabel" in option && option.shortLabel
-              ? option.shortLabel
-              : (option?.label ?? "Unknown")}
-          </Button>
-        </RadioDropdown>
-      );
-    },
-  };
-}
-
-function useTabsStoredValue<T extends StoredValue>(key: string | string[] | null, fallback: T) {
-  const { value, set } = useKeyValue<T>({
-    namespace: "no_sync",
-    key: key ?? ["tabs", "default"],
-    fallback,
-  });
-  return [value ?? fallback, set] as const;
-}
-
 /**
 * Programmatically set the active tab for a Tabs component that uses storageKey + activeTabKey.
 * This is useful when you need to change the tab from outside the component (e.g., in response to an event).
@@ -1,6 +1,15 @@
 import type { HttpResponse } from "@yaakapp-internal/models";
 import { extractSseValueAtPath, type ServerSentEvent } from "@yaakapp-internal/sse";
-import { HStack, Icon, InlineCode, SplitLayout, VStack, IconTooltip } from "@yaakapp-internal/ui";
+import {
+  EventStreamViewer as SharedEventStreamViewer,
+  HStack,
+  Icon,
+  InlineCode,
+  SplitLayout,
+  type StreamEvent,
+  VStack,
+  IconTooltip,
+} from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { CSSProperties, ReactNode } from "react";
 import { Fragment, useMemo, useState } from "react";
@@ -20,8 +29,7 @@ import type { DropdownItem } from "../core/Dropdown";
 import { Dropdown } from "../core/Dropdown";
 import type { EditorProps } from "../core/Editor/Editor";
 import { Editor } from "../core/Editor/LazyEditor";
-import { EventDetailHeader, EventViewer } from "../core/EventViewer";
-import { EventViewerRow } from "../core/EventViewerRow";
+import { EventDetailHeader } from "../core/EventViewer";
 import { IconButton } from "../core/IconButton";
 import { Input } from "../core/Input";
 import { Select } from "../core/Select";
@@ -62,6 +70,7 @@ function ActualEventStreamViewer({ response }: Props) {
  });
  const summarySettings = useSseSummaryResultKeyPath({ response });
  const events = useResponseBodyEventSource(response);
+  const streamEvents = useMemo(() => (events.data ?? []).map(toStreamEvent), [events.data]);
  const summary = useResponseBodySseSummary(response, summarySettings.resultKeyPath);
  const showExtractedText = summarySettings.resultKeyPath != null;
  const showResultKeyPathWarning =
@@ -105,10 +114,7 @@ function ActualEventStreamViewer({ response }: Props) {
        ),
      },
    ],
-    [
-      applyToDetailsSetting,
-      filterEventPreviewsSetting,
-    ],
+    [applyToDetailsSetting, filterEventPreviewsSetting],
  );

  return (
@@ -175,30 +181,21 @@ function ActualEventStreamViewer({ response }: Props) {
        resizeHandleClassName="hover:bg-surface-highlight active:bg-surface-highlight"
        firstSlot={({ style }) => (
          <div style={style} className="min-h-0">
-            <EventViewer
-              events={events.data ?? []}
-              getEventKey={(_, index) => String(index)}
+            <SharedEventStreamViewer
+              events={streamEvents}
              error={events.error ? String(events.error) : null}
              splitLayoutStorageKey="sse_events"
              defaultRatio={0.4}
-              renderRow={({ event, index, isActive, onClick }) => (
-                <EventViewerRow
-                  isActive={isActive}
-                  onClick={onClick}
-                  icon={<Icon color="info" title="Server Message" icon="arrow_big_down_dash" />}
-                  content={
-                    <HStack space={2} className="items-center">
-                      <EventLabels event={event} index={index} isActive={isActive} />
-                      <span className="truncate text-xs">
-                        {getEventPreview(event, summarySettings.resultKeyPath, filterEventPreviews)}
-                      </span>
-                    </HStack>
-                  }
-                />
-              )}
+              getPreview={(event) =>
+                getEventPreview(
+                  sseEventOf(events.data, event),
+                  summarySettings.resultKeyPath,
+                  filterEventPreviews,
+                )
+              }
              renderDetail={({ event, index, onClose }) => (
                <EventDetail
-                  event={event}
+                  event={sseEventOf(events.data, event)}
                  index={index}
                  applyJsonPath={applyToDetails}
                  resultKeyPath={summarySettings.resultKeyPath}
@@ -312,6 +309,23 @@ function SseSummaryFooter({
  );
 }

+/** An SSE event as the shared viewer lists it: received, with its id (or place) and type */
+function toStreamEvent(event: ServerSentEvent, index: number): StreamEvent {
+  return {
+    key: String(index),
+    direction: "received",
+    kind: event.eventType || null,
+    labels: [String(event.id ?? index), ...(event.eventType ? [event.eventType] : [])],
+    timestamp: null,
+    size: null,
+    preview: event.data,
+  };
+}
+
+function sseEventOf(events: ServerSentEvent[] | undefined, event: StreamEvent): ServerSentEvent {
+  return events?.[Number(event.key)] ?? { data: "", eventType: "", id: null, retry: null };
+}
+
 function getEventPreview(
  event: ServerSentEvent,
  resultKeyPath: string | null,
@@ -1,118 +0,0 @@
-import type { HttpResponse } from "@yaakapp-internal/models";
-import { useQueryClient } from "@tanstack/react-query";
-import { languageFromContentType, type TextFilterApi, WebPageViewer } from "@yaakapp-internal/ui";
-import type { CodeEditorProps } from "@yaakapp-internal/ui/editor";
-import { useCallback } from "react";
-import { useCopyHttpResponse } from "../../hooks/useCopyHttpResponse";
-import { useRecentFilters } from "../../hooks/useRecentFilters";
-import { responseBodyTextQuery, useResponseBodyText } from "../../hooks/useResponseBodyText";
-import { useSaveResponse } from "../../hooks/useSaveResponse";
-import { getContentTypeFromHeaders } from "../../lib/model_util";
-import { IconButton } from "../core/IconButton";
-import { EmptyStateText } from "../EmptyStateText";
-import { RecentFiltersDropdown } from "./RecentFiltersDropdown";
-import { TextViewer } from "./TextViewer";
-
-interface Props {
-  response: HttpResponse;
-  pretty: boolean;
-  textViewerClassName?: string;
-}
-
-export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Props) {
-  const rawTextBody = useResponseBodyText({ response, filter: null });
-  const contentType = getContentTypeFromHeaders(response.headers);
-  const language = languageFromContentType(contentType, rawTextBody.data ?? "");
-
-  if (rawTextBody.isLoading || response.state === "initialized") {
-    return null;
-  }
-
-  if (language === "html" && pretty) {
-    return <WebPageViewer html={rawTextBody.data ?? ""} baseUrl={response.url} />;
-  }
-  if (rawTextBody.data == null) {
-    return <EmptyStateText>Empty response</EmptyStateText>;
-  }
-  return (
-    <HttpTextViewer
-      response={response}
-      text={rawTextBody.data}
-      language={language}
-      pretty={pretty}
-      className={textViewerClassName}
-    />
-  );
-}
-
-interface HttpTextViewerProps {
-  response: HttpResponse;
-  text: string;
-  language: CodeEditorProps["language"];
-  pretty: boolean;
-  className?: string;
-}
-
-function HttpTextViewer({ response, text, language, pretty, className }: HttpTextViewerProps) {
-  const queryClient = useQueryClient();
-  const filterStateKey = `response.body.${response.requestId}`;
-  // Shares the response body query's cache, so applying and showing a filter cost one RPC
-  const filterText = useCallback(
-    (f: string) => queryClient.fetchQuery(responseBodyTextQuery({ response, filter: f })),
-    [queryClient, response],
-  );
-  const { recentFilters, addFilter, removeFilter, togglePin, clearFilters } =
-    useRecentFilters(filterStateKey);
-  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],
-  );
-  const saveResponse = useSaveResponse(response);
-  const copyResponse = useCopyHttpResponse(response);
-  const actionsDisabled = response.state !== "closed" && response.status >= 100;
-
-  return (
-    <TextViewer
-      text={text}
-      language={language}
-      stateKey={`response.body.${response.id}`}
-      pretty={pretty}
-      className={className}
-      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"
-        />,
-      ]}
-      filterText={filterText}
-      filterStateKey={filterStateKey}
-      onFilterApplied={addFilter}
-      filterLeftSlot={filterLeftSlot}
-    />
-  );
-}
@@ -243,6 +243,7 @@ export function useHotkeyContextValue(): HotkeyContextValue {
    () => ({
      os: platform.osType(),
      bindingFor: (action: HotkeyAction) => hotkeys[action] ?? null,
+      labelFor: (action: HotkeyAction) => hotkeyLabels[action],
      register: registerHotkey,
    }),
    [hotkeys],
@@ -0,0 +1,64 @@
+import { useQueryClient } from "@tanstack/react-query";
+import type { HttpResponse } from "@yaakapp-internal/models";
+import type { HttpBodyLoader, HttpBodyResult } from "@yaakapp-internal/ui";
+import { useMemo } from "react";
+import { getResponseBodyText } from "../lib/responseBody";
+import { getRequestBodyText, useHttpRequestBody } from "./useHttpRequestBody";
+import {
+  responseBodyTextQuery,
+  useResponseBodyBytes,
+  useResponseBodyText,
+} from "./useResponseBodyText";
+import { useResponseBodyUrl } from "./useResponseBodyUrl";
+
+interface QueryLike<T> {
+  data: T | undefined;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+function result<T>({ data, isLoading, error }: QueryLike<T>): HttpBodyResult<T> {
+  return { data, isLoading, error };
+}
+
+const noUrl: HttpBodyResult<string | null> = { data: null, isLoading: false, error: null };
+
+/** Reads a response's stored body the ways the shared viewers ask for it */
+export function useResponseBodyLoader(response: HttpResponse | null): HttpBodyLoader | null {
+  const queryClient = useQueryClient();
+  return useMemo(() => {
+    if (response == null) return null;
+    return {
+      useText: () => result(useResponseBodyText({ response, filter: null })),
+      useBytes: () => result(useResponseBodyBytes({ response })),
+      useUrl: (enabled: boolean) => {
+        // Waiting on a URL that isn't asked for yet still counts as loading
+        const url = useResponseBodyUrl(enabled ? response : null);
+        return { data: url.data, isLoading: url.isPending, error: url.error };
+      },
+      // Shares the response body query's cache, so applying and showing a filter cost one RPC
+      filterText: (filter: string) =>
+        queryClient.fetchQuery(responseBodyTextQuery({ response, filter })),
+      getText: () => getResponseBodyText({ response, filter: null }),
+    };
+  }, [queryClient, response]);
+}
+
+/** Reads the body a response's request was sent with */
+export function useRequestBodyLoader(response: HttpResponse | null): HttpBodyLoader | null {
+  return useMemo(() => {
+    if (response == null) return null;
+    return {
+      useText: () => {
+        const body = useHttpRequestBody(response);
+        return { ...result(body), data: body.data?.bodyText ?? null };
+      },
+      useBytes: () => {
+        const body = useHttpRequestBody(response);
+        return { ...result(body), data: body.data?.body ?? null };
+      },
+      useUrl: () => noUrl,
+      getText: () => getRequestBodyText(response).then((d) => d?.bodyText ?? ""),
+    };
+  }, [response]);
+}
@@ -1,5 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { HttpResponse } from "@yaakapp-internal/models";
+import { decodeBodyText } from "@yaakapp-internal/lib/decodeBodyText";
+import { getContentTypeFromHeaders } from "../lib/model_util";
 import { rpc } from "../lib/rpc";

 export function useHttpRequestBody(response: HttpResponse | null) {
@@ -27,6 +29,6 @@ export async function getRequestBodyText(response: HttpResponse | null) {
  }

  const body = new Uint8Array(data);
-  const bodyText = new TextDecoder("utf-8", { fatal: false }).decode(body);
+  const bodyText = decodeBodyText(body, getContentTypeFromHeaders(response.requestHeaders));
  return { body, bodyText };
 }
@@ -0,0 +1,133 @@
+// @vitest-environment happy-dom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { RequestVersionComparison } from "@yaakapp-internal/models";
+import { atom, getDefaultStore } from "jotai";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+const mocks = vi.hoisted(() => ({
+  rpc: vi.fn<(cmd: string, args: { versionId: string }) => Promise<unknown>>(),
+}));
+
+vi.mock("../lib/rpc", () => ({ rpc: mocks.rpc }));
+vi.mock("./useAllRequests", async () => {
+  const { atom } = await import("jotai");
+  return { allRequestsAtom: atom([{ id: "rq_1", updatedAt: "t1" }]) };
+});
+
+function comparison(versionId: string): RequestVersionComparison {
+  return {
+    version: { id: versionId, modelId: "rq_1" },
+    currentDocument: {},
+    differs: true,
+  } as unknown as RequestVersionComparison;
+}
+
+/** Each version's comparison resolves only when the test says so. */
+function deferredRpc() {
+  const pending = new Map<string, () => void>();
+  mocks.rpc.mockImplementation(
+    (_cmd, { versionId }) =>
+      new Promise((resolve) => pending.set(versionId, () => resolve(comparison(versionId)))),
+  );
+  return async (versionId: string) => {
+    await vi.waitFor(() => expect(pending.has(versionId)).toBe(true));
+    await act(async () => pending.get(versionId)?.());
+  };
+}
+
+describe("useRequestVersion", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let seen: (RequestVersionComparison | null)[];
+  let useRequestVersion: typeof import("./useRequestVersion").useRequestVersion;
+  let allRequestsAtom: ReturnType<typeof atom<{ id: string; updatedAt: string }[]>>;
+  const queryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  let client: QueryClient;
+
+  function Probe({ versionId }: { versionId: string | null }) {
+    seen.push(useRequestVersion(versionId, "rq_1"));
+    return null;
+  }
+
+  async function show(versionId: string | null) {
+    await act(async () =>
+      root.render(
+        <QueryClientProvider client={client}>
+          <Probe versionId={versionId} />
+        </QueryClientProvider>,
+      ),
+    );
+  }
+
+  const current = () => seen[seen.length - 1];
+
+  /** Wait for the comparison for a version to reach the component. */
+  async function answered(versionId: string) {
+    await vi.waitFor(() => expect(current()?.version.id).toBe(versionId));
+  }
+
+  beforeEach(async () => {
+    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    ({ useRequestVersion } = await import("./useRequestVersion"));
+    ({ allRequestsAtom } = (await import("./useAllRequests")) as unknown as {
+      allRequestsAtom: typeof allRequestsAtom;
+    });
+    getDefaultStore().set(allRequestsAtom, [{ id: "rq_1", updatedAt: "t1" }]);
+    client = queryClient();
+    seen = [];
+    container = document.createElement("div");
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    client.clear();
+    mocks.rpc.mockReset();
+  });
+
+  test("a response with no version has no comparison, even right after one that had", async () => {
+    const resolve = deferredRpc();
+    await show("mv_a");
+    await resolve("mv_a");
+    await answered("mv_a");
+
+    seen = [];
+    await show(null);
+    expect(seen.length).toBeGreaterThan(0);
+    expect(seen.every((c) => c == null)).toBe(true);
+  });
+
+  test("switching versions never shows the previous version's comparison", async () => {
+    const resolve = deferredRpc();
+    await show("mv_a");
+    await resolve("mv_a");
+    await answered("mv_a");
+
+    seen = [];
+    await show("mv_b");
+    // Still loading: nothing, rather than mv_a's answer
+    expect(seen.length).toBeGreaterThan(0);
+    expect(seen.every((c) => c == null)).toBe(true);
+
+    await resolve("mv_b");
+    await answered("mv_b");
+  });
+
+  test("an edit to the live request keeps the answer while it refetches", async () => {
+    const resolve = deferredRpc();
+    await show("mv_a");
+    await resolve("mv_a");
+    await answered("mv_a");
+
+    seen = [];
+    await act(async () =>
+      getDefaultStore().set(allRequestsAtom, [{ id: "rq_1", updatedAt: "t2" }]),
+    );
+    // The refetch is pending, but the dropdown does not flicker away meanwhile
+    expect(seen.length).toBeGreaterThan(0);
+    expect(seen.every((c) => c?.version.id === "mv_a")).toBe(true);
+    expect(mocks.rpc).toHaveBeenCalledTimes(2);
+  });
+});
@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+import type { RequestVersionComparison } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { allRequestsAtom } from "./useAllRequests";
+import { rpc } from "../lib/rpc";
+
+/**
+ * The request version a response was sent from, alongside the request as it
+ * stands now.
+ *
+ * Refetches when the live request is written, which is what keeps the "has this
+ * changed?" answer honest while someone edits. The comparison itself is the
+ * backend's — the frontend never hashes anything.
+ *
+ * Only ever answers for the version asked about: a response with no version
+ * gets nothing, and switching responses never shows the last one's comparison
+ * while the new one loads.
+ */
+export function useRequestVersion(
+  versionId: string | null | undefined,
+  requestId: string | null,
+): RequestVersionComparison | null {
+  const requests = useAtomValue(allRequestsAtom);
+  const liveUpdatedAt = requests.find((r) => r.id === requestId)?.updatedAt;
+
+  const { data } = useQuery({
+    // Keep the last answer across edits to the live request, but never across
+    // versions, or a response would borrow another response's comparison
+    placeholderData: (prev, prevQuery) => (prevQuery?.queryKey[1] === versionId ? prev : undefined),
+    queryKey: ["request_version", versionId, liveUpdatedAt],
+    enabled: versionId != null,
+    queryFn: () =>
+      rpc<RequestVersionComparison>("models_request_version", { versionId: versionId! }),
+  });
+
+  return versionId != null && data?.version.id === versionId ? data : null;
+}
@@ -1,4 +1,9 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
+// Loaded once as the file is collected (the mocks below are hoisted above it), so the first
+// transform of its module graph, the shared UI package among it, is not timed against whichever
+// test imports it first. Each test still gets the module fresh after `vi.resetModules()`, which
+// reuses that transform.
+import "./useSendAnyHttpRequest";

 const mocks = vi.hoisted(() => ({
  platform: { httpProxyUrl: "https://web.yaak.test" as string | null },
@@ -0,0 +1,76 @@
+import { useFonts } from "@yaakapp-internal/fonts";
+import { useLicense } from "@yaakapp-internal/license";
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
+import type { SettingsCallbacks, SettingsView } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { openExternalUrl } from "../components/core/Link";
+import { appInfo } from "../lib/appInfo";
+import { pricingUrl } from "../lib/pricingUrl";
+import { revealInFinderText } from "../lib/reveal";
+import { rpc } from "../lib/rpc";
+import {
+  licenseStatusFromCheck,
+  settingsValuesFromModel,
+  themesViewFromResolved,
+} from "../lib/settingsView";
+import { useCheckForUpdates } from "./useCheckForUpdates";
+import { useResolvedAppearance } from "./useResolvedAppearance";
+import { useResolvedTheme } from "./useResolvedTheme";
+
+/** Binds the shared settings tabs to the client's settings model, themes, fonts and license */
+export function useSettingsView(): { view: SettingsView; callbacks: SettingsCallbacks } | null {
+  const settings = useAtomValue(settingsAtom);
+  const appearance = useResolvedAppearance();
+  const activeTheme = useResolvedTheme();
+  const fonts = useFonts();
+  const { check, activate, deactivate } = useLicense();
+  const checkForUpdates = useCheckForUpdates();
+
+  if (settings == null) {
+    return null;
+  }
+
+  const view: SettingsView = {
+    app: {
+      name: "Yaak",
+      version: appInfo.version,
+      dataDir: appInfo.appDataDir,
+      logDir: appInfo.appLogDir,
+      revealPathLabel: revealInFinderText,
+    },
+    values: settingsValuesFromModel(settings),
+    themes: themesViewFromResolved(activeTheme.data, appearance),
+    fonts: fonts.data ?? null,
+    windowControlsSetting: platform.osType() !== "macos",
+    updates: appInfo.featureUpdater ? { checking: checkForUpdates.isPending } : null,
+    feedbackPrompts: appInfo.featureLicense,
+    license: appInfo.featureLicense
+      ? {
+          pending: check.isPending,
+          status: licenseStatusFromCheck(check.data),
+          checkError: check.error ?? null,
+          activateError: activate.error ?? null,
+          activating: activate.isPending,
+        }
+      : null,
+  };
+
+  const callbacks: SettingsCallbacks = {
+    onChange: async (patch) => {
+      await patchModel(settings, patch);
+    },
+    onApplyNativeTitlebar: async (useNativeTitlebar) => {
+      await patchModel(settings, { useNativeTitlebar });
+      await rpc("cmd_restart");
+    },
+    onCheckForUpdates: () => checkForUpdates.mutate(),
+    onActivateLicense: (licenseKey) => activate.mutateAsync({ licenseKey }),
+    onDeactivateLicense: () => deactivate.mutate(),
+    onOpenUrl: openExternalUrl,
+    onRevealPath: (path) => platform.revealItemInDir(path),
+    pricingUrl,
+  };
+
+  return { view, callbacks };
+}
@@ -1,7 +1,2 @@
-import { useCallback, useState } from "react";
-
-export function useToggle(initialValue = false) {
-  const [value, setValue] = useState<boolean>(initialValue);
-  const toggle = useCallback(() => setValue((v) => !v), []);
-  return [value, toggle, setValue] as const;
-}
+// From its own entry rather than the package index, so tests that mock the index keep it
+export { useToggle } from "@yaakapp-internal/ui/useToggle";
@@ -1,6 +1,11 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
 import type { DialogInstance } from "../components/Dialogs";
+// Loaded once as the file is collected (the mocks below are hoisted above it), so the first
+// transform of its module graph, the shared UI package among it, is not timed against whichever
+// test imports it first. Each test still gets the module fresh after `vi.resetModules()`, which
+// reuses that transform.
+import "./confirmWebProxy";

 const mocks = vi.hoisted(() => ({
  platform: { httpProxyUrl: "https://web.yaak.app" },
@@ -1,44 +1 @@
-import { MIMEType } from "whatwg-mimetype";
-
-export function isJSON(content: string | null | undefined): boolean {
-  if (typeof content !== "string") return false;
-
-  try {
-    JSON.parse(content);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-export function isProbablyTextContentType(contentType: string | null): boolean {
-  if (contentType == null) return false;
-
-  const mimeType = getMimeTypeFromContentType(contentType).essence;
-  const normalized = mimeType.toLowerCase();
-
-  // Check if it starts with "text/"
-  if (normalized.startsWith("text/")) {
-    return true;
-  }
-
-  // Common text mimetypes and suffixes
-  return [
-    "application/json",
-    "application/xml",
-    "application/javascript",
-    "application/yaml",
-    "+json",
-    "+xml",
-    "+yaml",
-    "+text",
-  ].some((textType) => normalized === textType || normalized.endsWith(textType));
-}
-
-export function getMimeTypeFromContentType(contentType: string): MIMEType {
-  try {
-    return new MIMEType(contentType);
-  } catch {
-    return new MIMEType("text/plain");
-  }
-}
+export { getMimeTypeFromContentType, isJSON, isProbablyTextContentType } from "@yaakapp-internal/ui/mimeType";
@@ -0,0 +1,122 @@
+import type { ModelVersionReason } from "@yaakapp-internal/models";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { EditSessionTracker } from "./editSessionTracker";
+
+type Capture = [requestId: string, reason: ModelVersionReason];
+
+function tracker(idleMs = 1000) {
+  const captured: Capture[] = [];
+  return {
+    captured,
+    tracker: new EditSessionTracker((id, reason) => captured.push([id, reason]), idleMs),
+  };
+}
+
+describe("EditSessionTracker", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  test("captures a request once it has been left alone", () => {
+    const { tracker: t, captured } = tracker();
+    t.noteEdit("rq_1");
+
+    vi.advanceTimersByTime(999);
+    expect(captured).toEqual([]);
+
+    vi.advanceTimersByTime(1);
+    expect(captured).toEqual([["rq_1", "idle"]]);
+  });
+
+  test("a burst of edits is one capture, not one per keystroke", () => {
+    const { tracker: t, captured } = tracker();
+    for (let i = 0; i < 10; i++) {
+      t.noteEdit("rq_1");
+      vi.advanceTimersByTime(500);
+    }
+    expect(captured).toEqual([]);
+
+    vi.advanceTimersByTime(1000);
+    expect(captured).toEqual([["rq_1", "idle"]]);
+  });
+
+  test("each request keeps its own countdown when two are edited in turn", () => {
+    const { tracker: t, captured } = tracker();
+    t.noteEdit("rq_a");
+    vi.advanceTimersByTime(600);
+    // An edit to B, from this window, another one, or sync, must not touch A's countdown
+    t.noteEdit("rq_b");
+    vi.advanceTimersByTime(400);
+    expect(captured).toEqual([["rq_a", "idle"]]);
+
+    // B keeps writing; A is done and stays done
+    t.noteEdit("rq_b");
+    vi.advanceTimersByTime(999);
+    expect(captured).toEqual([["rq_a", "idle"]]);
+    vi.advanceTimersByTime(1);
+    expect(captured).toEqual([
+      ["rq_a", "idle"],
+      ["rq_b", "idle"],
+    ]);
+  });
+
+  test("a boundary capture settles that request's countdown, and only that one", () => {
+    const { tracker: t, captured } = tracker();
+    t.noteActiveRequest("rq_a");
+    t.noteEdit("rq_a");
+    t.noteEdit("rq_b");
+    t.noteActiveRequest("rq_c");
+    expect(captured).toEqual([["rq_a", "switch"]]);
+
+    vi.advanceTimersByTime(1000);
+    // A was already captured when it was left; B's countdown still ran
+    expect(captured).toEqual([
+      ["rq_a", "switch"],
+      ["rq_b", "idle"],
+    ]);
+  });
+
+  test("a close can bring its own snapshot", () => {
+    const { tracker: t, captured } = tracker();
+    const onClose: Capture[] = [];
+    t.noteActiveRequest("rq_1");
+    t.noteEdit("rq_1");
+    t.noteBoundary((id, reason) => onClose.push([id, reason]));
+    vi.advanceTimersByTime(1000);
+    expect(onClose).toEqual([["rq_1", "switch"]]);
+    expect(captured).toEqual([]);
+  });
+
+  test("captures the request being left, not the one being opened", () => {
+    const { tracker: t, captured } = tracker();
+    t.noteActiveRequest("rq_1");
+    expect(captured).toEqual([]);
+
+    t.noteActiveRequest("rq_2");
+    expect(captured).toEqual([["rq_1", "switch"]]);
+  });
+
+  test("re-selecting the same request is not a boundary", () => {
+    const { tracker: t, captured } = tracker();
+    t.noteActiveRequest("rq_1");
+    t.noteActiveRequest("rq_1");
+    expect(captured).toEqual([]);
+  });
+
+  test("blur and close capture the request still on screen", () => {
+    const { tracker: t, captured } = tracker();
+    t.noteActiveRequest("rq_1");
+    t.noteBoundary();
+    t.noteBoundary();
+    expect(captured).toEqual([
+      ["rq_1", "switch"],
+      ["rq_1", "switch"],
+    ]);
+  });
+
+  test("nothing is captured before a request is open", () => {
+    const { tracker: t, captured } = tracker();
+    t.noteBoundary();
+    t.noteActiveRequest(null);
+    expect(captured).toEqual([]);
+  });
+});
@@ -0,0 +1,78 @@
+import type { ModelVersionReason } from "@yaakapp-internal/models";
+
+/**
+ * How long a request has to sit untouched before its edits become a version.
+ * Long enough that typing a URL is one version rather than forty, short enough
+ * that walking away from a half-finished edit still records it.
+ */
+export const IDLE_MS = 60_000;
+
+type Snapshot = (requestId: string, reason: ModelVersionReason) => void;
+
+/**
+ * When a request's editing session ends.
+ *
+ * The backend versions a request on every send, which covers "what produced
+ * this response". This covers the rest: an edit someone made and then walked
+ * away from, which no send would ever have captured.
+ *
+ * It deliberately knows nothing about *what* changed. Versions are
+ * content-addressed, so a boundary that turns out to have nothing behind it
+ * costs one query and creates nothing — which is what lets this stay a few
+ * timers instead of a change-tracking system.
+ */
+export class EditSessionTracker {
+  /**
+   * One idle countdown per request. Writes arrive for any request — from other
+   * windows and sync too — and an edit to one must never restart or cancel
+   * another's countdown.
+   */
+  private timers = new Map<string, ReturnType<typeof setTimeout>>();
+  private activeRequestId: string | null = null;
+
+  constructor(
+    private readonly snapshot: Snapshot,
+    private readonly idleMs: number = IDLE_MS,
+  ) {}
+
+  /** A request was written. Restarts that request's idle countdown. */
+  noteEdit(requestId: string) {
+    this.clearTimer(requestId);
+    this.timers.set(
+      requestId,
+      setTimeout(() => {
+        this.timers.delete(requestId);
+        this.snapshot(requestId, "idle");
+      }, this.idleMs),
+    );
+  }
+
+  /** The user moved to a different request, so the one they left is finished. */
+  noteActiveRequest(requestId: string | null) {
+    if (requestId === this.activeRequestId) return;
+    const left = this.activeRequestId;
+    this.activeRequestId = requestId;
+    if (left != null) this.capture(left, this.snapshot);
+  }
+
+  /**
+   * The window lost focus or is closing. A close can't wait for anything, so it
+   * passes its own snapshot function.
+   */
+  noteBoundary(snapshot: Snapshot = this.snapshot) {
+    if (this.activeRequestId != null) this.capture(this.activeRequestId, snapshot);
+  }
+
+  /** Capture at a boundary, which also settles any idle countdown still pending */
+  private capture(requestId: string, snapshot: Snapshot) {
+    this.clearTimer(requestId);
+    snapshot(requestId, "switch");
+  }
+
+  private clearTimer(requestId: string) {
+    const timer = this.timers.get(requestId);
+    if (timer == null) return;
+    clearTimeout(timer);
+    this.timers.delete(requestId);
+  }
+}
@@ -0,0 +1,83 @@
+import type { HttpRequest, HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
+import { describe, expect, test } from "vite-plus/test";
+import { cookieHeadersFromEvents, httpRequestToView, httpResponseToView } from "./httpViews";
+
+function event(e: HttpResponseEvent["event"]): HttpResponseEvent {
+  return { event: e } as HttpResponseEvent;
+}
+
+describe("httpRequestToView", () => {
+  test("maps the request and reads its content type from the headers", () => {
+    const request = {
+      id: "rq_1",
+      method: "POST",
+      url: "https://yaak.app",
+      headers: [{ name: "content-type", value: "application/json", enabled: true }],
+      urlParameters: [{ name: "a", value: "1", enabled: true }],
+      bodyType: "application/json",
+      body: { text: "{}" },
+    } as unknown as HttpRequest;
+
+    expect(httpRequestToView(request)).toEqual({
+      id: "rq_1",
+      method: "POST",
+      url: "https://yaak.app",
+      headers: request.headers,
+      urlParameters: request.urlParameters,
+      bodyType: "application/json",
+      body: { text: "{}" },
+      contentType: "application/json",
+      auth: null,
+    });
+  });
+});
+
+describe("httpResponseToView", () => {
+  test("keys state to the request and puts the stored time in UTC", () => {
+    const response = {
+      id: "rs_1",
+      requestId: "rq_1",
+      state: "closed",
+      status: 200,
+      statusReason: "OK",
+      url: "https://yaak.app",
+      headers: [{ name: "Content-Type", value: "text/plain" }],
+      requestHeaders: [],
+      contentLength: 10,
+      contentLengthCompressed: 4,
+      requestContentLength: 0,
+      createdAt: "2026-11-04T22:10:00.123",
+      elapsed: 30,
+      elapsedHeaders: 20,
+      elapsedDns: 5,
+      error: null,
+      remoteAddr: null,
+      version: "HTTP/1.1",
+    } as unknown as HttpResponse;
+
+    expect(httpResponseToView(response, undefined)).toMatchObject({
+      id: "rs_1",
+      ownerId: "rq_1",
+      contentType: "text/plain",
+      startedAt: "2026-11-04T22:10:00.123Z",
+      elapsedMs: 30,
+      elapsedHeadersMs: 20,
+      elapsedDnsMs: 5,
+      contentLengthCompressed: 4,
+      cookieHeaders: { sent: [], received: [] },
+    });
+  });
+});
+
+describe("cookieHeadersFromEvents", () => {
+  test("collects Cookie headers sent and Set-Cookie headers received", () => {
+    const events = [
+      event({ type: "header_up", name: "Cookie", value: "a=1" }),
+      event({ type: "header_up", name: "Accept", value: "*/*" }),
+      event({ type: "header_down", name: "set-cookie", value: "b=2" }),
+      event({ type: "header_down", name: "Content-Type", value: "text/plain" }),
+    ];
+    expect(cookieHeadersFromEvents(events)).toEqual({ sent: ["a=1"], received: ["b=2"] });
+    expect(cookieHeadersFromEvents(undefined)).toEqual({ sent: [], received: [] });
+  });
+});
@@ -0,0 +1,64 @@
+import type { HttpRequest, HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
+import type { HttpRequestView, HttpResponseView } from "@yaakapp-internal/ui";
+import { getContentTypeFromHeaders } from "./model_util";
+
+/** A request as the shared request pane shows it. Auth stays with the client's own editor */
+export function httpRequestToView(request: HttpRequest): HttpRequestView {
+  return {
+    id: request.id,
+    method: request.method,
+    url: request.url,
+    headers: request.headers,
+    urlParameters: request.urlParameters,
+    bodyType: request.bodyType,
+    body: request.body,
+    contentType: getContentTypeFromHeaders(request.headers),
+    auth: null,
+  };
+}
+
+/** A response as the shared response pane shows it, with its cookies from the send's events */
+export function httpResponseToView(
+  response: HttpResponse,
+  events: HttpResponseEvent[] | undefined,
+): HttpResponseView {
+  return {
+    id: response.id,
+    ownerId: response.requestId,
+    state: response.state,
+    status: response.status,
+    statusReason: response.statusReason,
+    url: response.url,
+    headers: response.headers,
+    requestHeaders: response.requestHeaders,
+    contentType: getContentTypeFromHeaders(response.headers),
+    contentLength: response.contentLength,
+    contentLengthCompressed: response.contentLengthCompressed,
+    requestContentLength: response.requestContentLength,
+    // Stored as UTC without a zone
+    startedAt: `${response.createdAt}Z`,
+    elapsedMs: response.elapsed,
+    elapsedHeadersMs: response.elapsedHeaders,
+    elapsedDnsMs: response.elapsedDns,
+    error: response.error,
+    remoteAddr: response.remoteAddr,
+    version: response.version,
+    cookieHeaders: cookieHeadersFromEvents(events),
+  };
+}
+
+/** The `Cookie` headers sent and `Set-Cookie` headers received, from a send's events */
+export function cookieHeadersFromEvents(
+  events: HttpResponseEvent[] | undefined,
+): HttpResponseView["cookieHeaders"] {
+  const sent: string[] = [];
+  const received: string[] = [];
+  for (const { event } of events ?? []) {
+    if (event.type === "header_up" && event.name.toLowerCase() === "cookie") {
+      sent.push(event.value);
+    } else if (event.type === "header_down" && event.name.toLowerCase() === "set-cookie") {
+      received.push(event.value);
+    }
+  }
+  return { sent, received };
+}
@@ -5,16 +5,17 @@ import type {
  HttpResponseEvent,
  HttpResponseHeader,
 } from "@yaakapp-internal/models";
-import { getMimeTypeFromContentType } from "./contentType";

-export const BODY_TYPE_NONE = null;
-export const BODY_TYPE_GRAPHQL = "graphql";
-export const BODY_TYPE_JSON = "application/json";
-export const BODY_TYPE_BINARY = "binary";
-export const BODY_TYPE_OTHER = "other";
-export const BODY_TYPE_FORM_URLENCODED = "application/x-www-form-urlencoded";
-export const BODY_TYPE_FORM_MULTIPART = "multipart/form-data";
-export const BODY_TYPE_XML = "text/xml";
+export {
+  BODY_TYPE_BINARY,
+  BODY_TYPE_FORM_MULTIPART,
+  BODY_TYPE_FORM_URLENCODED,
+  BODY_TYPE_GRAPHQL,
+  BODY_TYPE_JSON,
+  BODY_TYPE_NONE,
+  BODY_TYPE_OTHER,
+  BODY_TYPE_XML,
+} from "@yaakapp-internal/ui/httpTypes";

 export function cookieDomain(cookie: Cookie): string {
  if (cookie.domain === "NotPresent" || cookie.domain === "Empty") {
@@ -46,14 +47,6 @@ export function getContentTypeFromHeaders(headers: HttpResponseHeader[] | null):
  return headers?.find((h) => h.name.toLowerCase() === "content-type")?.value ?? null;
 }

-export function getCharsetFromContentType(headers: HttpResponseHeader[]): string | null {
-  const contentType = getContentTypeFromHeaders(headers);
-  if (contentType == null) return null;
-
-  const mimeType = getMimeTypeFromContentType(contentType);
-  return mimeType.parameters.get("charset") ?? null;
-}
-
 export function isBaseEnvironment(environment: Environment): boolean {
  return environment.parentModel === "workspace";
 }
@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+const mocks = vi.hoisted(() => ({
+  calls: [] as string[],
+  finishWrites: null as (() => void) | null,
+  flushAllModelWrites: vi.fn(),
+  rpc: vi.fn(),
+}));
+
+vi.mock("@yaakapp-internal/models", () => ({
+  flushAllModelWrites: mocks.flushAllModelWrites,
+  flushAllPendingPatches: vi.fn(),
+}));
+vi.mock("@yaakapp-internal/platform", () => ({ platform: {} }));
+vi.mock("../hooks/useActiveRequestId", () => ({ activeRequestIdAtom: null }));
+vi.mock("./jotai", () => ({ jotaiStore: {} }));
+vi.mock("./rpc", () => ({ rpc: mocks.rpc }));
+
+describe("snapshotRequestVersion", () => {
+  beforeEach(() => {
+    mocks.calls = [];
+    mocks.flushAllModelWrites.mockImplementation(
+      () =>
+        new Promise<void>((resolve) => {
+          mocks.calls.push("flush");
+          mocks.finishWrites = () => {
+            mocks.calls.push("writes landed");
+            resolve();
+          };
+        }),
+    );
+    mocks.rpc.mockImplementation(async (cmd: string) => {
+      mocks.calls.push(cmd);
+      return { id: "mv_1" };
+    });
+  });
+
+  test("asks for the snapshot only once pending writes have landed", async () => {
+    const { snapshotRequestVersion } = await import("./requestVersions");
+    snapshotRequestVersion("rq_1", "switch");
+    await Promise.resolve();
+    expect(mocks.calls).toEqual(["flush"]);
+
+    mocks.finishWrites?.();
+    await vi.waitFor(() =>
+      expect(mocks.calls).toEqual(["flush", "writes landed", "models_snapshot_request"]),
+    );
+    expect(mocks.rpc).toHaveBeenCalledWith("models_snapshot_request", {
+      requestId: "rq_1",
+      reason: "switch",
+    });
+  });
+
+  test("a failed write still lets the snapshot go ahead", async () => {
+    mocks.flushAllModelWrites.mockRejectedValue(new Error("write failed"));
+    const { snapshotRequestVersion } = await import("./requestVersions");
+    snapshotRequestVersion("rq_1", "idle");
+    await vi.waitFor(() => expect(mocks.rpc).toHaveBeenCalledTimes(1));
+  });
+});
@@ -0,0 +1,75 @@
+import { flushAllModelWrites, flushAllPendingPatches } from "@yaakapp-internal/models";
+import type { ModelPayload, ModelVersion, ModelVersionReason } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
+import { EditSessionTracker } from "./editSessionTracker";
+import { activeRequestIdAtom } from "../hooks/useActiveRequestId";
+import { jotaiStore } from "./jotai";
+import { rpc } from "./rpc";
+
+const REQUEST_MODELS = ["http_request", "grpc_request", "websocket_request"];
+
+/**
+ * Ask the backend to capture a request's current content.
+ *
+ * Quiet by design: a version that fails to write is not worth a toast, because
+ * every caller below is reacting to the user leaving rather than asking for
+ * anything.
+ */
+export function snapshotRequestVersion(requestId: string, reason: ModelVersionReason) {
+  captureRequestVersion(requestId, reason).catch((err: unknown) => {
+    console.warn("Failed to snapshot request version", err);
+  });
+}
+
+async function captureRequestVersion(requestId: string, reason: ModelVersionReason) {
+  // Edits reach the database on a debounce. Wait until every pending write has
+  // landed, or the snapshot can read the row before the edit this boundary is
+  // meant to capture. A write that failed leaves nothing newer to wait for.
+  await flushAllModelWrites().catch((err: unknown) => {
+    console.warn("A pending write failed before a request snapshot", err);
+  });
+  await rpc<ModelVersion>("models_snapshot_request", { requestId, reason });
+}
+
+/**
+ * The same, for a window that is closing, where nothing can be awaited.
+ *
+ * The pending writes go out first and the snapshot right behind them. In the
+ * browser that is enough: the worker runs commands in the order they arrive.
+ * On the desktop each command runs on its own, so the snapshot can still reach
+ * the database before the last write does. The edit itself is saved either
+ * way, and the request's next send versions it.
+ */
+function snapshotRequestVersionOnClose(requestId: string, reason: ModelVersionReason) {
+  flushAllPendingPatches();
+  rpc<ModelVersion>("models_snapshot_request", { requestId, reason }).catch((err: unknown) => {
+    console.warn("Failed to snapshot request version", err);
+  });
+}
+
+export function initRequestVersionSnapshots() {
+  const tracker = new EditSessionTracker(snapshotRequestVersion);
+
+  platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+    for (const payload of payloads) {
+      if (payload.change.type !== "upsert") continue;
+      if (!REQUEST_MODELS.includes(payload.model.model)) continue;
+      tracker.noteEdit(payload.model.id);
+    }
+  });
+
+  tracker.noteActiveRequest(jotaiStore.get(activeRequestIdAtom));
+  jotaiStore.sub(activeRequestIdAtom, () => {
+    tracker.noteActiveRequest(jotaiStore.get(activeRequestIdAtom));
+  });
+
+  platform.window.onFocusChanged((focused) => {
+    if (!focused) tracker.noteBoundary();
+  });
+
+  // Closing is the last boundary there is. Nothing can be awaited here, but the
+  // write is already on its way and the backend outlives the window.
+  window.addEventListener("beforeunload", () =>
+    tracker.noteBoundary(snapshotRequestVersionOnClose),
+  );
+}
@@ -3,7 +3,9 @@ import type { FilterResponse } from "@yaakapp-internal/plugins";
 import type { ServerSentEvent, SseSummary } from "@yaakapp-internal/sse";
 import { candidateJsonPayloadsFromSseText, computeSseSummary } from "@yaakapp-internal/sse";
 import { rpc } from "./rpc";
+import { decodeBodyText } from "@yaakapp-internal/lib/decodeBodyText";
 import { platform } from "@yaakapp-internal/platform";
+import { getContentTypeFromHeaders } from "./model_util";

 /**
 * Reading a response body means naming the response, never the file it lives
@@ -74,5 +76,6 @@ export async function getResponseBodyBytes(

 async function getResponseBodyDecoded(response: HttpResponse): Promise<string | null> {
  const bytes = await getResponseBodyBytes(response);
-  return bytes == null ? null : new TextDecoder("utf-8").decode(bytes);
+  if (bytes == null) return null;
+  return decodeBodyText(bytes, getContentTypeFromHeaders(response.headers));
 }
@@ -0,0 +1,54 @@
+import type { ModelVersion } from "@yaakapp-internal/models";
+import { beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+const mocks = vi.hoisted(() => ({
+  calls: [] as string[],
+  flushAllModelWrites: vi.fn(),
+  mergeModelsInStore: vi.fn(),
+  wasUpdatedExternally: vi.fn(),
+  rpc: vi.fn(),
+}));
+
+vi.mock("@yaakapp-internal/models", () => ({
+  flushAllModelWrites: mocks.flushAllModelWrites,
+  mergeModelsInStore: mocks.mergeModelsInStore,
+}));
+vi.mock("../hooks/useRequestUpdateKey", () => ({
+  wasUpdatedExternally: mocks.wasUpdatedExternally,
+}));
+vi.mock("./rpc", () => ({ rpc: mocks.rpc }));
+vi.mock("./toast", () => ({ showToast: vi.fn() }));
+
+const restored = { model: "http_request", id: "rq_1", url: "https://example.com/one" };
+const version = { id: "mv_1", modelId: "rq_1" } as ModelVersion;
+
+describe("applyRequestVersion", () => {
+  beforeEach(() => {
+    mocks.calls = [];
+    mocks.flushAllModelWrites.mockImplementation(async () => mocks.calls.push("flush"));
+    mocks.rpc.mockImplementation(async (cmd: string) => {
+      mocks.calls.push(cmd);
+      return restored;
+    });
+    mocks.mergeModelsInStore.mockImplementation(() => mocks.calls.push("store"));
+    mocks.wasUpdatedExternally.mockImplementation(() => mocks.calls.push("editors"));
+  });
+
+  test("puts the restored request in the store before editors re-read it", async () => {
+    const { applyRequestVersion } = await import("./restoreRequestVersion");
+    await applyRequestVersion(version);
+
+    expect(mocks.calls).toEqual(["flush", "models_restore_request_version", "store", "editors"]);
+    expect(mocks.mergeModelsInStore).toHaveBeenCalledWith("http_request", [restored]);
+    expect(mocks.wasUpdatedExternally).toHaveBeenCalledWith("rq_1");
+  });
+
+  test("a failed restore leaves the store and editors alone", async () => {
+    mocks.rpc.mockRejectedValue(new Error("no such version"));
+    const { applyRequestVersion } = await import("./restoreRequestVersion");
+
+    await expect(applyRequestVersion(version)).rejects.toThrow("no such version");
+    expect(mocks.mergeModelsInStore).not.toHaveBeenCalled();
+    expect(mocks.wasUpdatedExternally).not.toHaveBeenCalled();
+  });
+});
@@ -0,0 +1,44 @@
+import { flushAllModelWrites, mergeModelsInStore } from "@yaakapp-internal/models";
+import type { AnyModel, ModelVersion } from "@yaakapp-internal/models";
+import { wasUpdatedExternally } from "../hooks/useRequestUpdateKey";
+import { fireAndForget } from "./fireAndForget";
+import { rpc } from "./rpc";
+import { showToast } from "./toast";
+
+/**
+ * Put an old version's content back into the live request.
+ *
+ * The backend captures whatever the request currently holds before
+ * overwriting it, so this is not a destructive action even when the last edit
+ * was never versioned — but the request is still rewritten under the user's
+ * cursor, so it is announced.
+ */
+export function restoreRequestVersion(version: ModelVersion) {
+  fireAndForget(
+    (async () => {
+      await applyRequestVersion(version);
+      showToast({
+        id: "request-version-restored",
+        color: "success",
+        message: "Restored the request that produced this response",
+      });
+    })(),
+  );
+}
+
+/** The restore itself, in the order the editors need it. */
+export async function applyRequestVersion(version: ModelVersion): Promise<void> {
+  // The backend restores from the database, so anything still sitting in a
+  // debounce has to land first — otherwise it would overwrite the restore
+  await flushAllModelWrites();
+  const restored = await rpc<AnyModel>("models_restore_request_version", {
+    versionId: version.id,
+  });
+  // Editors re-read from the store when told to, and the change event can
+  // arrive after this resolves, so put the restored request there first. The
+  // event re-applying it later changes nothing.
+  mergeModelsInStore(restored.model, [restored]);
+  // The write came from this window, so the store's echo suppression would
+  // otherwise leave open editors showing what was there before
+  wasUpdatedExternally(restored.id);
+}
@@ -0,0 +1,126 @@
+import type { LicenseCheckStatus } from "@yaakapp-internal/license";
+import type { Settings } from "@yaakapp-internal/models";
+import { describe, expect, test } from "vite-plus/test";
+import {
+  licenseStatusFromCheck,
+  settingsValuesFromModel,
+  themesViewFromResolved,
+} from "./settingsView";
+
+describe("settingsValuesFromModel", () => {
+  test("picks the shared tabs' values and nothing client-only", () => {
+    const settings = {
+      model: "settings",
+      id: "st_1",
+      appearance: "dark",
+      themeLight: "yaak-light",
+      themeDark: "hotdog",
+      interfaceFont: "Inter",
+      interfaceFontSize: 15,
+      editorFont: null,
+      editorFontSize: 13,
+      editorKeymap: "emacs",
+      editorSoftWrap: false,
+      coloredMethods: true,
+      useNativeTitlebar: true,
+      hideWindowControls: true,
+      updateChannel: "beta",
+      autoupdate: false,
+      autoDownloadUpdates: false,
+      checkNotifications: false,
+      promptFeedback: false,
+      openWorkspaceNewWindow: true,
+      hideLicenseBadge: true,
+      clientCertificates: [],
+    } as unknown as Settings;
+
+    expect(settingsValuesFromModel(settings)).toEqual({
+      appearance: "dark",
+      themeLight: "yaak-light",
+      themeDark: "hotdog",
+      interfaceFont: "Inter",
+      interfaceFontSize: 15,
+      editorFont: null,
+      editorFontSize: 13,
+      editorKeymap: "emacs",
+      editorSoftWrap: false,
+      coloredMethods: true,
+      useNativeTitlebar: true,
+      hideWindowControls: true,
+      updateChannel: "beta",
+      autoupdate: false,
+      autoDownloadUpdates: false,
+      checkNotifications: false,
+      promptFeedback: false,
+    });
+  });
+});
+
+describe("licenseStatusFromCheck", () => {
+  test("is null without a check", () => {
+    expect(licenseStatusFromCheck(null)).toBeNull();
+    expect(licenseStatusFromCheck(undefined)).toBeNull();
+  });
+
+  test("keeps what each state's copy needs", () => {
+    const cases: [LicenseCheckStatus, unknown][] = [
+      [
+        { status: "active", data: { periodEnd: "2027-01-01", cancelAt: null } },
+        { status: "active" },
+      ],
+      [
+        { status: "trialing", data: { end: "2026-11-20" } },
+        { status: "trialing", trialEnd: "2026-11-20" },
+      ],
+      [{ status: "personal_use", data: { trial_ended: "2026-01-01" } }, { status: "personal_use" }],
+      [{ status: "inactive", data: { status: "canceled" } }, { status: "inactive" }],
+      [
+        {
+          status: "expired",
+          data: {
+            changes: 3,
+            changesUrl: "https://yaak.app/changes",
+            billingUrl: "https://yaak.app/billing",
+            periodEnd: "2026-03-04",
+          },
+        },
+        { status: "expired", periodEnd: "2026-03-04", changesUrl: "https://yaak.app/changes" },
+      ],
+      [
+        { status: "past_due", data: { billingUrl: "https://yaak.app/billing", periodEnd: "x" } },
+        { status: "past_due", billingUrl: "https://yaak.app/billing" },
+      ],
+      [
+        { status: "error", data: { message: "Boom", code: "E1" } },
+        { status: "error", message: "Boom", code: "E1" },
+      ],
+    ];
+    for (const [check, expected] of cases) {
+      expect(licenseStatusFromCheck(check)).toEqual(expected);
+    }
+  });
+});
+
+describe("themesViewFromResolved", () => {
+  const light = { id: "yaak-light", label: "Yaak", dark: false, base: {} };
+  const dark = { id: "yaak-dark", label: "Yaak", dark: true, base: {} };
+
+  test("is null while the themes load", () => {
+    expect(themesViewFromResolved(undefined, "dark")).toBeNull();
+  });
+
+  test("keeps each theme's id, label and darkness, and the resolved appearance", () => {
+    expect(
+      themesViewFromResolved({ themes: [dark, light], light, dark, active: dark }, "dark"),
+    ).toEqual({
+      themes: [
+        { id: "yaak-dark", label: "Yaak", dark: true },
+        { id: "yaak-light", label: "Yaak", dark: false },
+      ],
+      light: { id: "yaak-light", label: "Yaak", dark: false },
+      dark: { id: "yaak-dark", label: "Yaak", dark: true },
+      active: { id: "yaak-dark", label: "Yaak", dark: true },
+      resolvedAppearance: "dark",
+    });
+  });
+});
@@ -0,0 +1,84 @@
+import type { LicenseCheckStatus } from "@yaakapp-internal/license";
+import type { Settings } from "@yaakapp-internal/models";
+import type {
+  SettingsLicenseStatus,
+  SettingsThemeOption,
+  SettingsThemesView,
+  SettingsValues,
+} from "@yaakapp-internal/ui";
+
+/** The values the shared settings tabs read, picked off the client's `Settings` model */
+export function settingsValuesFromModel(settings: Settings): SettingsValues {
+  return {
+    appearance: settings.appearance,
+    themeLight: settings.themeLight,
+    themeDark: settings.themeDark,
+    interfaceFont: settings.interfaceFont,
+    interfaceFontSize: settings.interfaceFontSize,
+    editorFont: settings.editorFont,
+    editorFontSize: settings.editorFontSize,
+    editorKeymap: settings.editorKeymap,
+    editorSoftWrap: settings.editorSoftWrap,
+    coloredMethods: settings.coloredMethods,
+    useNativeTitlebar: settings.useNativeTitlebar,
+    hideWindowControls: settings.hideWindowControls,
+    updateChannel: settings.updateChannel,
+    autoupdate: settings.autoupdate,
+    autoDownloadUpdates: settings.autoDownloadUpdates,
+    checkNotifications: settings.checkNotifications,
+    promptFeedback: settings.promptFeedback,
+  };
+}
+
+/** A license check, as the shared License tab's copy needs it */
+export function licenseStatusFromCheck(
+  check: LicenseCheckStatus | null | undefined,
+): SettingsLicenseStatus | null {
+  if (check == null) return null;
+  switch (check.status) {
+    case "active":
+      return { status: "active" };
+    case "trialing":
+      return { status: "trialing", trialEnd: check.data.end };
+    case "personal_use":
+      return { status: "personal_use" };
+    case "inactive":
+      return { status: "inactive" };
+    case "expired":
+      return {
+        status: "expired",
+        periodEnd: check.data.periodEnd,
+        changesUrl: check.data.changesUrl,
+      };
+    case "past_due":
+      return { status: "past_due", billingUrl: check.data.billingUrl };
+    case "error":
+      return { status: "error", message: check.data.message, code: check.data.code };
+  }
+}
+
+/** The fields of a theme the settings show */
+interface ThemeLike {
+  id: string;
+  label: string;
+  dark: boolean;
+}
+
+function themeOption({ id, label, dark }: ThemeLike): SettingsThemeOption {
+  return { id, label, dark };
+}
+
+/** The resolved themes, as the shared Theme tab shows them; null while they load */
+export function themesViewFromResolved(
+  data: { themes: ThemeLike[]; light: ThemeLike; dark: ThemeLike; active: ThemeLike } | undefined,
+  resolvedAppearance: "light" | "dark",
+): SettingsThemesView | null {
+  if (data == null) return null;
+  return {
+    themes: data.themes.map(themeOption),
+    light: themeOption(data.light),
+    dark: themeOption(data.dark),
+    active: themeOption(data.active),
+    resolvedAppearance,
+  };
+}
@@ -8,6 +8,7 @@ import { createRoot } from "react-dom/client";
 import { initGit } from "./init/git";
 import { initSync } from "./init/sync";
 import { initGlobalListeners } from "./lib/initGlobalListeners";
+import { initRequestVersionSnapshots } from "./lib/requestVersions";
 import { jotaiStore } from "./lib/jotai";
 import { router } from "./lib/router";

@@ -36,6 +37,7 @@ initGit();
 initSync();
 initModelStore(jotaiStore);
 initGlobalListeners();
+initRequestVersionSnapshots();
 await changeModelStoreWorkspace(null); // Load global models

 console.log("Creating React root");
@@ -48,7 +48,6 @@
    "focus-trap-react": "^12.0.3",
    "fuzzbunny": "^1.0.1",
    "graphql": "^17.0.2",
-    "hexy": "^0.4.0",
    "history": "^5.3.0",
    "jotai": "^2.18.0",
    "jotai-family": "^1.0.1",
@@ -6,6 +6,7 @@ import classNames from "classnames";
 import { Provider as JotaiProvider } from "jotai";
 import { LazyMotion, MotionConfig } from "motion/react";
 import { lazy, type ReactNode, Suspense } from "react";
+import { ClientEditorHost } from "../components/ClientEditorHost";
 import { GlobalHooks } from "../components/GlobalHooks";
 import RouteError from "../components/RouteError";
 import { useHotkeyContextValue } from "../hooks/useHotKey";
@@ -30,17 +31,19 @@ function RouteComponent() {
    <JotaiProvider store={jotaiStore}>
      <QueryClientProvider client={queryClient}>
        <Hotkeys>
-          <LazyMotion strict features={motionFeatures}>
-            <MotionConfig transition={{ duration: 0.1 }}>
-              <Suspense>
-                <Toasts />
-                <Dialogs />
-                <ContextMenus />
-              </Suspense>
-              <Layout />
-              <GlobalHooks />
-            </MotionConfig>
-          </LazyMotion>
+          <ClientEditorHost>
+            <LazyMotion strict features={motionFeatures}>
+              <MotionConfig transition={{ duration: 0.1 }}>
+                <Suspense>
+                  <Toasts />
+                  <Dialogs />
+                  <ContextMenus />
+                </Suspense>
+                <Layout />
+                <GlobalHooks />
+              </MotionConfig>
+            </LazyMotion>
+          </ClientEditorHost>
        </Hotkeys>
      </QueryClientProvider>
    </JotaiProvider>
@@ -0,0 +1,132 @@
+import { startCompletion } from "@codemirror/autocomplete";
+import { Compartment, EditorState, type Extension } from "@codemirror/state";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import type { Schema } from "@yaakapp-internal/query";
+import {
+  Dialog,
+  DialogFooter,
+  Input,
+  type InputHandle,
+  LazyCodeEditor,
+} from "@yaakapp-internal/ui";
+import { queryFilter } from "@yaakapp-internal/ui/editor";
+import { atom, useAtom, useSetAtom } from "jotai";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useRpcQuery } from "../hooks/useRpcQuery";
+import {
+  addCustomColumn,
+  customPath,
+  customPathProblem,
+  fieldReferenceChanges,
+} from "../lib/columns";
+import { loadSeenValues } from "../lib/searchBox";
+import { columnPrefsAtom } from "../lib/store";
+
+/** The Add Column dialog is open */
+export const addColumnDialogAtom = atom(false);
+
+const FORM_ID = "add-column";
+
+/** Keeps the field a reference to a field, `@header.x-cache`, whatever was typed or pasted */
+const asFieldReference = EditorState.transactionFilter.of((tr) => {
+  if (!tr.docChanged) return tr;
+  const changes = fieldReferenceChanges(tr.newDoc.toString());
+  return changes.length === 0 ? tr : [tr, { changes, sequential: true }];
+});
+
+/** Opens completion on the fields while the field is focused and empty */
+const completeWhenEmpty = [
+  ViewPlugin.define((view) => {
+    if (view.hasFocus && view.state.doc.length === 0) {
+      queueMicrotask(() => startCompletion(view));
+    }
+    return {};
+  }),
+  EditorView.updateListener.of((update) => {
+    if (update.focusChanged && update.view.hasFocus && update.state.doc.length === 0) {
+      startCompletion(update.view);
+    }
+  }),
+];
+
+/**
+ * Adds a column for a header or query parameter, named by a reference to its field as the search
+ * names it, `@header.x-request-id` or `@query.page`, completed from the fields and the names seen
+ */
+export function AddColumnDialog() {
+  const [open, setOpen] = useAtom(addColumnDialogAtom);
+  if (!open) return null;
+  return <AddColumnForm onClose={() => setOpen(false)} />;
+}
+
+function AddColumnForm({ onClose }: { onClose: () => void }) {
+  const [text, setText] = useState("");
+  const setPrefs = useSetAtom(columnPrefsAtom);
+  const handleRef = useRef<InputHandle | null>(null);
+  const schema = useRpcQuery("query_schema", {}, { staleTime: Infinity }).data?.schema;
+  // Only the fields a column can show: the maps of headers and query parameters. It goes in
+  // once the schema is read, through a compartment, as the search box's does.
+  const compartment = useRef(new Compartment());
+  const filter = useMemo<Extension>(() => {
+    if (schema == null) return [];
+    const maps: Schema = { ...schema, fields: schema.fields.filter((f) => f.map) };
+    return [
+      queryFilter({ schema: maps, loadValues: loadSeenValues, fieldsOnly: true }),
+      completeWhenEmpty,
+    ];
+  }, [schema]);
+  const extensions = useMemo(() => [asFieldReference, compartment.current.of(filter)], [filter]);
+  useEffect(() => {
+    handleRef.current?.dispatch({ effects: compartment.current.reconfigure(filter) });
+  }, [filter]);
+  const path = customPath(text);
+  const problem = customPathProblem(text);
+
+  const submit = () => {
+    if (path == null) return;
+    setPrefs((p) => addCustomColumn(p, path));
+    onClose();
+  };
+
+  return (
+    <Dialog open onClose={onClose} size="dynamic" title="Add Column" className="w-[26rem]">
+      <form
+        id={FORM_ID}
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <Input
+          renderEditor={(props) => <LazyCodeEditor {...props} />}
+          setRef={(h) => {
+            handleRef.current = h;
+          }}
+          label="Field"
+          autoFocus
+          className="font-mono text-xs"
+          stateKey={null}
+          language={null}
+          placeholder="@header.x-request-id"
+          defaultValue=""
+          onChange={setText}
+          validate={problem == null}
+          extensions={extensions}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.defaultPrevented) {
+              e.preventDefault();
+              submit();
+            }
+          }}
+        />
+        <div className="h-5 pt-1 text-xs text-danger">{problem}</div>
+      </form>
+      <DialogFooter
+        actions={[
+          { label: "Cancel", variant: "border", onClick: onClose },
+          { label: "Add", color: "primary", form: FORM_ID, disabled: path == null },
+        ]}
+      />
+    </Dialog>
+  );
+}
@@ -24,8 +24,8 @@ function loadIcon(path: string): Promise<string | null> {
  return promise;
 }

-/** An app's icon, read once per path for the whole session */
-export function AppIcon({ path, className }: { path: string; className?: string }) {
+/** An app's icon, read once per path for the whole session; `className` sets its size */
+export function AppIcon({ path, className = "size-4" }: { path: string; className?: string }) {
  const [url, setUrl] = useState(() => icons.get(path));
  useEffect(() => {
    if (icons.has(path)) {
@@ -42,8 +42,8 @@ export function AppIcon({ path, className }: { path: string; className?: string
  }, [path]);

  return url == null ? (
-    <span aria-hidden className={classNames(className, "inline-block w-4 h-4 shrink-0")} />
+    <span aria-hidden className={classNames(className, "inline-block shrink-0")} />
  ) : (
-    <img alt="" src={url} className={classNames(className, "w-4 h-4 shrink-0")} />
+    <img alt="" src={url} className={classNames(className, "shrink-0")} />
  );
 }
@@ -1,49 +1,119 @@
-import { Dropdown, type DropdownItem, IconButton } from "@yaakapp-internal/ui";
-import { useAtomValue } from "jotai";
-import { useRpcMutation } from "../hooks/useRpcMutation";
-import { flowTotalAtom } from "../lib/store";
+import {
+  Checkbox,
+  Dialog,
+  DialogFooter,
+  IconButton,
+  useFormattedHotkey,
+  useHotKey,
+} from "@yaakapp-internal/ui";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { type FormEvent, useCallback, useId, useState } from "react";
+import { clearFlowsAction, confirmClearFlowsAtom } from "../lib/clearFlows";
+import { clearFlowsAtom, flowTotalAtom, lockedAtom } from "../lib/store";
+import { useShowToast } from "../lib/toast";

-/** Deletes every flow, once confirmed in its menu, which its hotkey opens too */
+/**
+ * Clears every flow, from its button or hotkey, once confirmed in a dialog unless "Don't ask
+ * again" was checked there. The list empties at once; the flows are deleted in the background.
+ * Disabled with none to clear, or while captured traffic is locked.
+ */
 export function ClearFlowsButton() {
  const total = useAtomValue(flowTotalAtom);
-  const clear = useRpcMutation("clear_flows");
+  const locked = useAtomValue(lockedAtom);
+  const [confirm, setConfirm] = useAtom(confirmClearFlowsAtom);
+  const clearFlows = useSetAtom(clearFlowsAtom);
+  const showToast = useShowToast();
+  const [confirming, setConfirming] = useState(false);
+  const action = clearFlowsAction({ total, locked: locked != null, confirm });
+  const hotkey = useFormattedHotkey("flows_clear")?.join("");

-  const items: DropdownItem[] = [
-    {
-      type: "content",
-      label: (
-        <div className="px-1.5 py-1 max-w-[17rem]">
-          <div className="text-sm text-text">
-            {total === 1 ? "Clear 1 flow?" : `Clear all ${total} flows?`}
-          </div>
-          <div className="text-xs text-text-subtle mt-0.5">
-            {clear.error != null ? (
-              <span className="text-danger">{clear.error.message}</span>
-            ) : (
-              "They are deleted from disk with their bodies, for good."
-            )}
-          </div>
-        </div>
-      ),
-    },
-    { type: "separator" },
-    {
-      label: "Clear",
-      icon: "trash",
-      color: "danger",
-      onSelect: () => clear.mutate({}),
-    },
-  ];
+  const clear = useCallback(() => {
+    clearFlows().catch((err: unknown) => {
+      const message = (err as { message?: unknown } | null)?.message;
+      showToast({ message: typeof message === "string" ? message : String(err), color: "danger" });
+    });
+  }, [clearFlows, showToast]);
+
+  const start = useCallback(() => {
+    if (action === "confirm") setConfirming(true);
+    else if (action === "clear") clear();
+  }, [action, clear]);
+
+  // Bound even when disabled, so the key never falls through to the backend's clear unasked
+  useHotKey("flows_clear", start);

  return (
-    <Dropdown items={items} hotKeyAction="flows_clear">
+    <>
      <IconButton
        className="pointer-events-auto"
        icon="trash"
-        title="Clear flows"
+        title={
+          locked != null
+            ? "Clear flows (traffic is locked)"
+            : total === 0
+              ? "Clear flows (none yet)"
+              : hotkey == null
+                ? "Clear flows"
+                : `Clear flows ${hotkey}`
+        }
+        tooltip
        size="sm"
        iconColor="secondary"
+        disabled={action === "disabled"}
+        onClick={start}
      />
-    </Dropdown>
+      <Dialog
+        open={confirming}
+        onClose={() => setConfirming(false)}
+        size="sm"
+        title="Clear traffic?"
+      >
+        {confirming && (
+          <ConfirmClear
+            total={total}
+            onCancel={() => setConfirming(false)}
+            onClear={(dontAskAgain) => {
+              setConfirming(false);
+              if (dontAskAgain) setConfirm(false);
+              clear();
+            }}
+          />
+        )}
+      </Dialog>
+    </>
+  );
+}
+
+function ConfirmClear({
+  total,
+  onCancel,
+  onClear,
+}: {
+  total: number;
+  onCancel: () => void;
+  onClear: (dontAskAgain: boolean) => void;
+}) {
+  const formId = useId();
+  const [dontAskAgain, setDontAskAgain] = useState(false);
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onClear(dontAskAgain);
+  };
+  return (
+    <form id={formId} className="flex flex-col gap-3" onSubmit={handleSubmit}>
+      <p>
+        {total === 1
+          ? "1 flow will be removed."
+          : `${total.toLocaleString()} flows will be removed.`}
+      </p>
+      <Checkbox checked={dontAskAgain} title="Don't ask again" onChange={setDontAskAgain} />
+      <DialogFooter
+        inline
+        actions={[
+          { label: "Cancel", onClick: onCancel },
+          { label: "Clear", color: "danger", form: formId, autoFocus: true },
+        ]}
+      />
+    </form>
  );
 }
@@ -0,0 +1,171 @@
+import { Prec } from "@codemirror/state";
+import { type EditorView, keymap } from "@codemirror/view";
+import type { DecryptListEntry, SeenTargets } from "@yaakapp-internal/proxy-lib";
+import { CONTROL_TOOLTIP_DELAY, Icon, IconButton, Input, Tooltip } from "@yaakapp-internal/ui";
+import { filterAutocomplete } from "@yaakapp-internal/ui/editor";
+import classNames from "classnames";
+import { useMemo, useRef, useState } from "react";
+import { useDecryptList, useEditDecryptList } from "../hooks/useDecryptList";
+import { useRpcQuery } from "../hooks/useRpcQuery";
+import { decryptFilterOptions, entryLabel, normalizeEntry } from "../lib/decrypt";
+
+/**
+ * What HTTPS is decrypted: one row per entry, the user's in order and then the built-in
+ * exclusions, each removable, and an input that adds one, suggesting `host:`, `app:` and `!`,
+ * then the hosts and apps seen in the capture. Saves as it changes. Placed by Settings' Proxy
+ * tab.
+ */
+export function DecryptListEditor({ className }: { className?: string }) {
+  const list = useDecryptList();
+  const save = useEditDecryptList();
+  // Read when the input opens its suggestions, so new traffic shows without rebuilding it.
+  const seen = useRpcQuery("list_seen", {}, { staleTime: 0, refetchOnMount: "always" });
+  const seenRef = useRef<SeenTargets | undefined>(seen.data);
+  seenRef.current = seen.data;
+
+  // Each change replaces the whole list, so one waits for the last to land rather than undo it.
+  const remove = (entry: string) => {
+    if (save.isPending) return;
+    save.mutate({ add: [], remove: [entry] });
+  };
+
+  return (
+    <div className={classNames(className, "grid gap-2")}>
+      <EntryInput
+        seenRef={seenRef}
+        list={list}
+        disabled={save.isPending}
+        onAdd={(entry) => save.mutate({ add: [entry], remove: [] })}
+      />
+      <div className="rounded-md border border-border-subtle divide-y divide-border-subtle">
+        {list.length === 0 && (
+          <div className="px-3 py-2 text-sm text-text-subtle">Nothing decrypted</div>
+        )}
+        {list.map((e) => (
+          <EntryRow
+            key={e.entry}
+            entry={e}
+            disabled={save.isPending}
+            onRemove={() => remove(e.entry)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function EntryRow({
+  entry,
+  disabled,
+  onRemove,
+}: {
+  entry: DecryptListEntry;
+  disabled: boolean;
+  onRemove: () => void;
+}) {
+  const negated = entry.entry.startsWith("!");
+  return (
+    <div
+      className={classNames(
+        "group/entry flex items-center gap-2 h-xs pl-3 pr-1 text-sm",
+        entry.builtIn && "text-text-subtlest",
+      )}
+    >
+      <Tooltip wrap content={negated ? "Excluded" : "Decrypted"} delay={CONTROL_TOOLTIP_DELAY}>
+        <Icon
+          icon={negated ? "lock" : "lock_open"}
+          size="sm"
+          className={classNames("shrink-0", entry.builtIn ? "opacity-60" : "text-text-subtle")}
+        />
+      </Tooltip>
+      <span className={classNames("truncate", entry.entry !== "*" && "font-mono text-xs")}>
+        {entryLabel(entry.entry)}
+      </span>
+      {entry.builtIn && (
+        <Tooltip wrap content="Ships with Yaak Proxy" delay={CONTROL_TOOLTIP_DELAY}>
+          <span className="shrink-0 text-2xs rounded px-1 border border-border-subtle">
+            built-in
+          </span>
+        </Tooltip>
+      )}
+      <IconButton
+        size="xs"
+        icon="x"
+        iconColor="secondary"
+        title={`Remove ${entryLabel(entry.entry)}`}
+        tooltip
+        disabled={disabled}
+        className="ml-auto opacity-0 group-hover/entry:opacity-100 focus-visible:opacity-100"
+        onClick={onRemove}
+      />
+    </div>
+  );
+}
+
+/** The input that adds an entry on Enter, once the suggestions are closed or none is picked */
+function EntryInput({
+  seenRef,
+  list,
+  disabled,
+  onAdd,
+}: {
+  seenRef: React.RefObject<SeenTargets | undefined>;
+  list: DecryptListEntry[];
+  /** A change is being saved; Enter waits for it, keeping what was typed */
+  disabled: boolean;
+  onAdd: (entry: string) => void;
+}) {
+  const [error, setError] = useState<string | null>(null);
+  const onAddRef = useRef(onAdd);
+  onAddRef.current = onAdd;
+  const listRef = useRef(list);
+  listRef.current = list;
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+
+  const extensions = useMemo(() => {
+    const options = decryptFilterOptions(null);
+    // The suggestions read the capture as they open, not as the input was made.
+    for (const field of options.fields ?? []) {
+      field.values = () => {
+        const fresh = decryptFilterOptions(seenRef.current).fields ?? [];
+        const values = fresh.find((f) => f.name === field.name)?.values;
+        return Array.isArray(values) ? values : [];
+      };
+    }
+    const add = (view: EditorView) => {
+      const text = view.state.doc.toString();
+      if (text.trim() === "") return false;
+      if (disabledRef.current) return true;
+      const entry = normalizeEntry(text);
+      if (entry == null) {
+        setError("Not a host or app");
+        return true;
+      }
+      setError(null);
+      if (!listRef.current.some((e) => e.entry === entry)) onAddRef.current(entry);
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: "" } });
+      return true;
+    };
+    // Low, so Enter picks a suggestion while they are open.
+    return [filterAutocomplete(options), Prec.low(keymap.of([{ key: "Enter", run: add }]))];
+  }, [seenRef]);
+
+  return (
+    <Tooltip wrap content="Applies to new connections" delay={CONTROL_TOOLTIP_DELAY}>
+      <div className="grid gap-1">
+        <Input
+          label="Add entry"
+          hideLabel
+          size="sm"
+          stateKey={null}
+          language={null}
+          placeholder="Add host, app or *"
+          extensions={extensions}
+          onChange={() => setError(null)}
+        />
+        {error != null && <div className="text-xs text-danger">{error}</div>}
+      </div>
+    </Tooltip>
+  );
+}
@@ -1,8 +1,19 @@
-import { Button, Icon, LoadingIcon } from "@yaakapp-internal/ui";
+import {
+  Button,
+  CONTROL_TOOLTIP_DELAY,
+  Icon,
+  InlineCode,
+  LoadingIcon,
+  Tooltip,
+} from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import type { ReactNode } from "react";
+import { useDecryptList, useEditDecryptList } from "../hooks/useDecryptList";
 import { useRpcMutation } from "../hooks/useRpcMutation";
+import { everythingEdit } from "../lib/decrypt";
+import { decryptStep } from "../lib/firstRun";
+import { encryptingPercent } from "../lib/encrypting";
 import { proxyStateAtom } from "../lib/store";
 import { useCopyEnvironment, useProxySetup, useSystemProxySwitch } from "./ProxyStatus";

@@ -10,7 +21,7 @@ type StepState = "todo" | "next" | "wait" | "done" | "fail";

 /**
 * The list's empty state until traffic arrives: trust the certificate, turn on the system proxy,
- * then see traffic. Not dismissable and nothing remembered; the first flow replaces it. Copy
+ * choose what to decrypt, then see traffic. Not dismissable and nothing remembered; the first flow replaces it. Copy
 * environment beside it serves someone who wants one terminal proxied and nothing system-wide.
 */
 export function FirstRun() {
@@ -21,6 +32,8 @@ export function FirstRun() {
  const execute = useRpcMutation("execute_action");
  const retry = useRpcMutation("take_over");
  const copyEnvironment = useCopyEnvironment();
+  const decryptList = useDecryptList();
+  const saveDecryptList = useEditDecryptList();

  const running = proxyState?.state === "running";
  // Changed only by the process that owns the engine, so not from here while the CLI does.
@@ -46,16 +59,21 @@ export function FirstRun() {
        : trusted
          ? "next"
          : "todo";
+  const decrypt = decryptStep(decryptList, trusted);
+  const everything = decrypt.choice === "everything";
+  const setEverything = (on: boolean) => saveDecryptList.mutate(everythingEdit(on));
  const ready = trusted && (systemOn || !systemSupported);
-  const trafficState: StepState = !running && !otherOwner ? "fail" : ready ? "wait" : "todo";
+  const encrypting = !running && !otherOwner ? encryptingPercent(proxyState) : null;
+  const trafficState: StepState =
+    encrypting != null ? "wait" : !running && !otherOwner ? "fail" : ready ? "wait" : "todo";

  return (
    <div className="grid place-items-center h-full px-10 pb-16 pt-6">
      <div className="w-full max-w-[40rem]">
        <div className="text-xl font-semibold mb-1.5">Set up Yaak Proxy</div>
        <div className="text-text-subtle text-sm leading-relaxed mb-4">
-          Three steps, once. Afterwards every app on this Mac sends its traffic here, and HTTPS
-          reads as plain text.
+          {systemSupported ? "Four" : "Three"} steps, once. Then every app on this Mac sends its
+          traffic here.
        </div>
        <div className="rounded-lg border border-border-subtle bg-surface divide-y divide-border-subtle">
          <Step
@@ -79,7 +97,7 @@ export function FirstRun() {
                  color={trustState === "fail" ? "default" : "primary"}
                  onClick={() => trust.mutate({})}
                >
-                  {trustState === "fail" ? "Try again" : "Trust certificate"}
+                  {trustState === "fail" ? "Try Again" : "Trust Certificate"}
                </Button>
              ) : null
            }
@@ -104,7 +122,7 @@ export function FirstRun() {
                    color={systemState === "fail" ? "default" : "primary"}
                    onClick={() => setSystemProxy.mutate({ enabled: true })}
                  >
-                    {systemState === "fail" ? "Try again" : "Turn on"}
+                    {systemState === "fail" ? "Try Again" : "Turn On"}
                  </Button>
                ) : null
              }
@@ -112,10 +130,60 @@ export function FirstRun() {
          )}
          <Step
            n={systemSupported ? 3 : 2}
-            state={trafficState}
-            title={trafficState === "wait" ? "Waiting for traffic" : "See traffic"}
+            state={decrypt.state}
+            title="What to decrypt"
            description={
-              trafficState === "fail"
+              everything ? (
+                <Tooltip
+                  wrap
+                  content="Except the built-in exclusions"
+                  delay={CONTROL_TOOLTIP_DELAY}
+                >
+                  <span>Everything</span>
+                </Tooltip>
+              ) : (
+                <Tooltip wrap content="From a flow or the sidebar" delay={CONTROL_TOOLTIP_DELAY}>
+                  <span>Pick as they appear</span>
+                </Tooltip>
+              )
+            }
+            action={
+              everything ? (
+                <Button
+                  size="2xs"
+                  variant="border"
+                  isLoading={saveDecryptList.isPending}
+                  onClick={() => setEverything(false)}
+                >
+                  Pick As They Appear
+                </Button>
+              ) : (
+                <Button
+                  size="2xs"
+                  variant="border"
+                  color={decrypt.state === "next" ? "primary" : "default"}
+                  isLoading={saveDecryptList.isPending}
+                  onClick={() => setEverything(true)}
+                >
+                  Everything
+                </Button>
+              )
+            }
+          />
+          <Step
+            n={systemSupported ? 4 : 3}
+            state={trafficState}
+            title={
+              encrypting != null
+                ? `Encrypting stored traffic, ${encrypting}`
+                : trafficState === "wait"
+                  ? "Waiting for traffic"
+                  : "See traffic"
+            }
+            description={
+              encrypting != null
+                ? "Traffic captured before this version is being encrypted on disk. Recording starts when it's done."
+                : trafficState === "fail"
                ? (retry.error?.message ?? proxyState?.startError ?? "The proxy has not started.")
                : !recording
                  ? "Recording is paused, so traffic passes through without being stored."
@@ -139,7 +207,7 @@ export function FirstRun() {
                  color="primary"
                  onClick={() => execute.mutate({ scope: "global", action: "recording_toggle" })}
                >
-                  Resume recording
+                  Resume Recording
                </Button>
              ) : null
            }
@@ -154,9 +222,17 @@ export function FirstRun() {
            leftSlot={<Icon icon="square_terminal" size="sm" />}
            onClick={() => void copyEnvironment()}
          >
-            Copy environment
+            Copy Environment
          </Button>
        </div>
+        <div className="mt-2 text-sm text-text-subtle">
+          Working with an agent? <InlineCode>yaak mcp</InlineCode> gives it the proxy's flows and
+          actions.
+        </div>
+        <div className="mt-2 text-sm text-text-subtle">
+          Captured traffic is encrypted on disk with a key kept in your keychain, so macOS may ask
+          to let Yaak Proxy use it.
+        </div>
      </div>
    </div>
  );
@@ -0,0 +1,80 @@
+import { describe, expect, test, vi } from "vite-plus/test";
+import { flowPrettyView, shownViewMode } from "./FlowBodyViewer";
+
+// The package's index reaches for the window as it loads; the view rule is all this needs.
+vi.mock("@yaakapp-internal/ui", async () => {
+  const { prettyViewFor } = await vi.importActual<
+    typeof import("../../../packages/ui/src/components/http/BodyViewModeSwitch")
+  >("../../../packages/ui/src/components/http/BodyViewModeSwitch");
+  return { prettyViewFor, LARGE_BODY_BYTES: 2_000_000 };
+});
+
+const text = (mime: string, language: string | null, which: "request" | "response" = "response") =>
+  flowPrettyView({
+    which,
+    mime,
+    text: "x",
+    binary: false,
+    language: language as never,
+    hasForm: false,
+  });
+
+describe("flowPrettyView", () => {
+  test("names the formatted view per format, the same on both halves", () => {
+    for (const which of ["request", "response"] as const) {
+      expect(text("application/json", "json", which)).toBe("formatted");
+      expect(text("text/csv", "text", which)).toBe("table");
+      expect(text("image/svg+xml", "xml", which)).toBe("preview");
+    }
+    expect(text("text/plain", "text")).toBeNull();
+  });
+
+  test("HTML previews as a response and formats as a request", () => {
+    expect(text("text/html", "html", "response")).toBe("preview");
+    expect(text("text/html", "html", "request")).toBe("formatted");
+  });
+
+  test("multipart has parts whether or not it reads as text", () => {
+    const base = { which: "request" as const, mime: "multipart/form-data", language: null };
+    expect(flowPrettyView({ ...base, text: null, binary: false, hasForm: false })).toBe("parts");
+  });
+
+  test("a URL-encoded form's fields are its formatted view, where the tab has them", () => {
+    const base = {
+      which: "request" as const,
+      mime: "application/x-www-form-urlencoded",
+      text: "a=1",
+      binary: false,
+      language: "text" as const,
+    };
+    expect(flowPrettyView({ ...base, hasForm: true })).toBe("form");
+    expect(flowPrettyView({ ...base, hasForm: false })).toBeNull();
+  });
+
+  test("images, binary and undecodable bodies have one view", () => {
+    const base = { which: "response" as const, language: null, hasForm: false };
+    expect(flowPrettyView({ ...base, mime: "image/png", text: null, binary: true })).toBeNull();
+    expect(
+      flowPrettyView({ ...base, mime: "application/json", text: null, binary: true }),
+    ).toBeNull();
+    expect(
+      flowPrettyView({ ...base, mime: "application/octet-stream", text: null, binary: false }),
+    ).toBeNull();
+  });
+});
+
+describe("shownViewMode", () => {
+  test("follows the preference", () => {
+    expect(shownViewMode({ key: "a", large: false, preferred: "pretty", chosen: null })).toBe(
+      "pretty",
+    );
+    expect(shownViewMode({ key: "a", large: false, preferred: "raw", chosen: null })).toBe("raw");
+  });
+
+  test("a large body opens raw, and formats once asked, for that body alone", () => {
+    expect(shownViewMode({ key: "a", large: true, preferred: "pretty", chosen: null })).toBe("raw");
+    const chosen = { key: "a", mode: "pretty" as const };
+    expect(shownViewMode({ key: "a", large: true, preferred: "pretty", chosen })).toBe("pretty");
+    expect(shownViewMode({ key: "b", large: true, preferred: "pretty", chosen })).toBe("raw");
+  });
+});
@@ -2,52 +2,138 @@ import { useQuery } from "@tanstack/react-query";
 import { formatSize } from "@yaakapp-internal/lib/formatSize";
 import type { Flow, FlowBody } from "@yaakapp-internal/proxy-lib";
 import {
+  ACTIONS_BAR_CONTAINER,
+  ActionsBar,
  Banner,
+  BodyViewModeSwitch,
+  Button,
  CsvViewer,
+  HexdumpViewer,
+  Icon,
  ImageViewer,
+  LARGE_BODY_BYTES,
  languageFromContentType,
  LoadingIcon,
  MultipartViewer,
+  type PrettyView,
+  prettyViewFor,
+  type ResponseViewMode,
  SvgViewer,
  TextViewer,
  WebPageViewer,
 } from "@yaakapp-internal/ui";
 import type { CodeEditorProps } from "@yaakapp-internal/ui/editor";
+import classNames from "classnames";
+import { useAtom } from "jotai";
 import type { ReactNode } from "react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { bodyViewModeAtom } from "../lib/atoms";
 import {
-  base64ToBytes,
-  bytesToText,
+  bodyAsText,
+  bodyImageType,
  filterText,
  findHeader,
+  emptyBodyText,
+  flowBodyQueryOptions,
  formatText,
  mimeEssence,
 } from "../lib/body";
-import { rpc } from "../lib/rpc";
+import { useSaveFlowBody } from "../lib/flowActions";

 interface Props {
  flow: Flow;
  which: FlowBody;
-  pretty: boolean;
+  /** A URL-encoded body's fields, its formatted view, with the switch in the fields' own bar */
+  form?: (actions: ReactNode) => ReactNode;
+  /** Leaves saying the body was cut short to the tab, which says it its own way */
+  hideCutNote?: boolean;
 }

 export function useFlowBody(flow: Flow, which: FlowBody, enabled = true) {
-  return useQuery({
-    enabled,
-    queryKey: ["get_flow_body", flow.id, which, flow.updatedAt],
-    queryFn: async () => {
-      const res = await rpc("get_flow_body", { flowId: flow.id, which });
-      return {
-        bytes: base64ToBytes(res.data),
-        truncated: res.truncated,
-        storedSize: res.storedSize,
-      };
-    },
-  });
+  return useQuery({ ...flowBodyQueryOptions(flow, which), enabled });
 }

-export function FlowBodyViewer({ flow, which, pretty }: Props) {
+/** A mode chosen for one large body, which holds for it alone */
+interface ChosenViewMode {
+  key: string;
+  mode: ResponseViewMode;
+}
+
+/** The mode a body shows in: the preference, except raw for a large one until chosen for it */
+export function shownViewMode({
+  key,
+  large,
+  preferred,
+  chosen,
+}: {
+  key: string;
+  large: boolean;
+  preferred: ResponseViewMode;
+  chosen: ChosenViewMode | null;
+}): ResponseViewMode {
+  if (chosen?.key === key) return chosen.mode;
+  return large ? "raw" : preferred;
+}
+
+/**
+ * Formatted or raw, as last chosen, except that a body big enough to slow the card opens raw,
+ * and choosing for it holds for that body alone
+ */
+export function useBodyViewMode(
+  key: string,
+  large: boolean,
+): [ResponseViewMode, (mode: ResponseViewMode) => void] {
+  const [preferred, setPreferred] = useAtom(bodyViewModeAtom);
+  const [chosen, setChosen] = useState<ChosenViewMode | null>(null);
+  const mode = shownViewMode({ key, large, preferred, chosen });
+  const setMode = useCallback(
+    (next: ResponseViewMode) => {
+      if (large) {
+        setChosen({ key, mode: next });
+      } else {
+        setChosen(null);
+        setPreferred(next);
+      }
+    },
+    [key, large, setPreferred],
+  );
+  return [mode, setMode];
+}
+
+/**
+ * The formatted view a body has, or null when it has only the one: parts for multipart, the
+ * fields for a URL-encoded form, or else what the shared rule gives its text. Images and binary
+ * bodies have only their one view.
+ */
+export function flowPrettyView({
+  which,
+  mime,
+  text,
+  binary,
+  language,
+  hasForm,
+}: {
+  which: FlowBody;
+  mime: string;
+  text: string | null;
+  /** An image, or what failed to decode */
+  binary: boolean;
+  language: CodeEditorProps["language"] | null;
+  hasForm: boolean;
+}): PrettyView | null {
+  if (binary) return null;
+  if (mime.startsWith("multipart/")) return "parts";
+  if (text == null) return null;
+  if (hasForm && mime === "application/x-www-form-urlencoded") return "form";
+  return prettyViewFor({ mimeType: mime, language, previewHtml: which === "response" });
+}
+
+export function FlowBodyViewer({ flow, which, form, hideCutNote = false }: Props) {
  const body = useFlowBody(flow, which);
+  const [mode, setMode] = useBodyViewMode(
+    `${flow.id}.${which}`,
+    (body.data?.bytes.length ?? 0) > LARGE_BODY_BYTES,
+  );

  if (body.isPending) {
    return (
@@ -60,9 +146,9 @@ export function FlowBodyViewer({ flow, which, pretty }: Props) {
    return <Banner color="danger">{body.error.message}</Banner>;
  }

-  const { bytes, truncated, storedSize } = body.data;
-  if (bytes.length === 0) {
-    return <EmptyState>{which === "request" ? "No request body" : "Empty"}</EmptyState>;
+  const { bytes, truncated, storedSize, decodeError, note } = body.data;
+  if (bytes.length === 0 && decodeError == null) {
+    return <EmptyState>{emptyBodyText(which, note)}</EmptyState>;
  }

  const headers = which === "request" ? flow.requestHeaders : flow.responseHeaders;
@@ -70,13 +156,33 @@ export function FlowBodyViewer({ flow, which, pretty }: Props) {
  const mime = mimeEssence(contentType) ?? "";
  const wireSize = which === "request" ? flow.requestSize : flow.responseSize;
  const wireTruncated = which === "request" ? flow.requestTruncated : flow.responseTruncated;
+  // An image by its bytes or type, else text whatever the content type says, so a page sent with
+  // an odd one still reads: `viewerText`'s rule.
+  const imageType = decodeError == null ? bodyImageType(bytes, truncated, contentType) : null;
+  const text =
+    decodeError == null && imageType == null ? bodyAsText(bytes, truncated, contentType) : null;
+  const language = text == null ? null : languageFromContentType(contentType, text);
+  const prettyView = flowPrettyView({
+    which,
+    mime,
+    text,
+    binary: decodeError != null || imageType != null,
+    language,
+    hasForm: form != null,
+  });
+  // The one view a body without a formatted one has is its raw one
+  const pretty = prettyView != null && mode === "pretty";
+  const modeSwitch =
+    prettyView == null ? null : (
+      <BodyViewModeSwitch pretty={prettyView} value={mode} onChange={setMode} />
+    );

  let viewer: ReactNode;
-  if (mime.startsWith("image/svg")) {
-    viewer = <SvgViewer text={bytesToText(bytes, truncated) ?? ""} />;
-  } else if (mime.startsWith("image/")) {
-    viewer = <ImageBody bytes={bytes} mime={mime} />;
-  } else if (mime.startsWith("multipart/") && pretty) {
+  let ownsBar = false;
+  if (decodeError != null) {
+    // What failed to decode is as it was on the wire, compressed, so never text.
+    viewer = <BinaryBody flow={flow} which={which} bytes={bytes} />;
+  } else if (prettyView === "parts" && pretty) {
    const boundary = contentType?.match(/;\s*boundary="?([^";]+)"?/i)?.[1] ?? "unknown";
    viewer = (
      <MultipartViewer
@@ -86,32 +192,100 @@ export function FlowBodyViewer({ flow, which, pretty }: Props) {
        textViewerProps={{ formatText }}
      />
    );
-  } else if (/csv|tab-separated/.test(mime) && pretty) {
-    viewer = <CsvViewer text={bytesToText(bytes, truncated)} className="pb-2" />;
+  } else if (imageType != null) {
+    viewer = <ImageBody bytes={bytes} mime={imageType} />;
+  } else if (text == null) {
+    viewer = <BinaryBody flow={flow} which={which} bytes={bytes} />;
+  } else if (prettyView === "form" && pretty && form != null) {
+    ownsBar = true;
+    viewer = form(modeSwitch);
+  } else if (prettyView === "table" && pretty) {
+    viewer = <CsvViewer text={text} className="pb-2" />;
+  } else if (prettyView === "preview" && pretty) {
+    viewer = mime.startsWith("image/svg") ? (
+      <SvgViewer text={text} />
+    ) : (
+      <WebPageViewer html={text} baseUrl={flow.url} />
+    );
  } else {
-    const text = bytesToText(bytes, truncated);
-    const language = languageFromContentType(contentType, text);
-    if (text == null) {
-      viewer = <EmptyState>Binary body, {formatSize(bytes.length)}</EmptyState>;
-    } else if (language === "html" && pretty && which === "response") {
-      viewer = <WebPageViewer html={text} baseUrl={flow.url} />;
-    } else {
-      viewer = (
-        <FlowTextViewer flow={flow} which={which} text={text} language={language} pretty={pretty} />
-      );
-    }
+    ownsBar = true;
+    viewer = (
+      <FlowTextViewer
+        flow={flow}
+        which={which}
+        text={text}
+        language={language}
+        pretty={pretty}
+        modeSwitch={modeSwitch}
+      />
+    );
  }

-  if (!truncated) return viewer;
+  // The text viewer and the form draw the switch in their own bar, beside their own actions; the
+  // rest get a bar here. Each fills the tab content, so every bar has the same inset.
+  if (modeSwitch != null && !ownsBar) {
+    viewer = (
+      <div className={classNames(ACTIONS_BAR_CONTAINER, "h-full w-full")}>
+        {viewer}
+        <ActionsBar>{modeSwitch}</ActionsBar>
+      </div>
+    );
+  }
+
+  if ((!truncated || hideCutNote) && decodeError == null) return viewer;

  return (
-    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)] gap-2">
-      <Banner color="notice" className="text-sm">
-        {wireTruncated
-          ? `Showing the first ${formatSize(storedSize)} of ${formatSize(wireSize)}, the capture limit. The app received all of it.`
-          : `Showing the first ${formatSize(bytes.length)} of the decoded body, the capture limit. The app received all of it.`}
-      </Banner>
-      <div className="min-h-0">{viewer}</div>
+    <div className="h-full grid grid-rows-[auto_auto_minmax(0,1fr)]">
+      {decodeError != null && (
+        <Banner color="danger" className="text-sm mb-2">
+          {decodeError}. Showing the body as it was on the wire.
+        </Banner>
+      )}
+      {truncated && !hideCutNote && (
+        <Banner color="notice" className="text-sm mb-2">
+          {wireTruncated || decodeError != null
+            ? `Showing the first ${formatSize(storedSize)} of ${formatSize(wireSize)}, the capture limit. The app received all of it.`
+            : `Showing the first ${formatSize(bytes.length)} of the decoded body, the capture limit. The app received all of it.`}
+        </Banner>
+      )}
+      <div className="min-h-0 row-start-3">{viewer}</div>
+    </div>
+  );
+}
+
+/** Bytes shown in the hexdump; the rest are in the saved file */
+const HEXDUMP_LIMIT = 256 * 1024;
+
+/** A body that isn't text: a hexdump, and a way to save it */
+function BinaryBody({
+  flow,
+  which,
+  bytes,
+}: {
+  flow: Flow;
+  which: FlowBody;
+  bytes: Uint8Array<ArrayBuffer>;
+}) {
+  const saveBody = useSaveFlowBody();
+  const shown = useMemo(() => bytes.subarray(0, HEXDUMP_LIMIT), [bytes]);
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)] gap-1">
+      <div className="flex items-center justify-between gap-2 text-sm text-text-subtle">
+        <span>
+          Binary body, {formatSize(bytes.length)}
+          {shown.length < bytes.length && `, first ${formatSize(shown.length)} shown`}
+        </span>
+        <Button
+          size="2xs"
+          variant="border"
+          leftSlot={<Icon icon="download" size="xs" />}
+          onClick={() => saveBody(flow, which)}
+        >
+          Save to File
+        </Button>
+      </div>
+      <HexdumpViewer data={shown} className="-mr-2 bg-surface" />
    </div>
  );
 }
@@ -123,7 +297,16 @@ function FlowTextViewer({
  text,
  language,
  pretty,
-}: Props & { text: string; language: CodeEditorProps["language"] }) {
+  modeSwitch,
+}: {
+  flow: Flow;
+  which: FlowBody;
+  text: string;
+  language: CodeEditorProps["language"];
+  pretty: boolean;
+  /** Formatted or raw, in the viewer's bar after its filter; null for a body with one view */
+  modeSwitch: ReactNode;
+}) {
  const runFilter = useCallback(
    (expression: string) => filterText(flow.id, which, expression, language),
    [flow.id, which, language],
@@ -138,6 +321,8 @@ function FlowTextViewer({
      className="-mr-2 bg-surface"
      formatText={formatText}
      filterText={runFilter}
+      ownActionsBar
+      pinnedActions={modeSwitch}
    />
  );
 }
@@ -0,0 +1,333 @@
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import type { Flow, FlowBody } from "@yaakapp-internal/proxy-lib";
+import {
+  CONTROL_TOOLTIP_DELAY,
+  CountBadge,
+  Dropdown,
+  EmptyStateText,
+  type ExtraPaneTab,
+  FormUrlencodedEditor,
+  type HttpBodyResult,
+  HttpRequestPaneView,
+  HttpResponsePaneView,
+  Icon,
+  IconButton,
+  parseCookieHeaders,
+  ResponseCookies,
+  SplitLayout,
+  Tooltip,
+} from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue, useSetAtom, useStore } from "jotai";
+import { useCallback, useMemo } from "react";
+import { BODY_TYPE_FORM_URLENCODED } from "@yaakapp-internal/ui/httpTypes";
+import { placeTabsAtom } from "../lib/atoms";
+import { findHeader } from "../lib/body";
+import {
+  browserTabMemory,
+  defaultTabFor,
+  type FlowPane,
+  learnTab,
+  REQUEST_TAB_AUTH,
+  REQUEST_TAB_BODY,
+  REQUEST_TAB_COOKIES,
+  REQUEST_TAB_HEADERS,
+  REQUEST_TAB_PARAMS,
+  RESPONSE_TAB_BODY,
+  RESPONSE_TAB_COOKIES,
+  RESPONSE_TAB_HEADERS,
+  RESPONSE_TAB_INFO,
+  RESPONSE_TAB_MESSAGES,
+  RESPONSE_TAB_TIMELINE,
+} from "../lib/defaultTab";
+import { saveDialogFlowAtom, useFlowActions } from "../lib/flowActions";
+import {
+  type FlowBodyData,
+  flowBodyLoader,
+  flowCookiesView,
+  flowRequestToView,
+  flowResponseToView,
+} from "../lib/flowViews";
+import { messagesTabLabel } from "../lib/messages";
+import { goToPlace } from "../lib/navigation";
+import { FlowBodyViewer, useFlowBody } from "./FlowBodyViewer";
+import { FlowInfo } from "./FlowInfo";
+import { FlowRequestBody } from "./FlowRequestBody";
+import { FlowMessages } from "./FlowMessages";
+import { FlowTimeline } from "./FlowTimeline";
+import { ProxyEditorHost } from "./ProxyEditorHost";
+
+/**
+ * One card for a flow: the request half (its URL line and tabs), a hairline, and the response
+ * half (its status line and tabs). The halves sit perpendicular to the list: stacked when the
+ * list is beside the card, side by side when it is above.
+ */
+export function FlowCard({ flow, listBeside }: { flow: Flow; listBeside: boolean }) {
+  return (
+    <ProxyEditorHost>
+      <SplitLayout
+        storageKey={listBeside ? "proxy_card_stacked" : "proxy_card_side"}
+        layout={listBeside ? "vertical" : "horizontal"}
+        minHeightPx={120}
+        minWidthPx={240}
+        firstSlot={({ style }) => (
+          <div style={style}>
+            <FlowRequestHalf flow={flow} />
+          </div>
+        )}
+        secondSlot={({ style, orientation }) => (
+          <div style={style}>
+            <FlowResponseHalf
+              flow={flow}
+              className={orientation === "vertical" ? "border-t" : "border-l"}
+            />
+          </div>
+        )}
+      />
+    </ProxyEditorHost>
+  );
+}
+
+/**
+ * The tab a half opens on, and learning from the ones chosen by hand. The tab chosen is part of
+ * the window's place, so going back to it, or reloading, opens it again.
+ */
+function useShapeTab(pane: FlowPane, flow: Flow, available: string[]) {
+  const store = useStore();
+  const memory = browserTabMemory();
+  const activeTab = useAtomValue(placeTabsAtom)[pane];
+  // Read again for every flow, so a tab learned on one opens the next of its shape
+  const defaultTab = defaultTabFor(pane, flow, available, memory);
+  const onTabChange = useCallback(
+    (tab: string) => {
+      learnTab(pane, flow, tab, memory);
+      goToPlace(store, "update", { tabs: { ...store.get(placeTabsAtom), [pane]: tab } });
+    },
+    [pane, flow, memory, store],
+  );
+  return { activeTab, defaultTab, onTabChange };
+}
+
+/** A body read through the engine's body RPC, as the shared panes' loaders ask for it */
+function useLoadedBody(
+  flow: Flow,
+  which: FlowBody,
+  enabled = true,
+): HttpBodyResult<FlowBodyData | null> {
+  const size = which === "request" ? flow.requestSize : flow.responseSize;
+  const load = enabled && size > 0;
+  const body = useFlowBody(flow, which, load);
+  if (!load) return { data: null, isLoading: false, error: null };
+  return { data: body.data ?? undefined, isLoading: body.isLoading, error: body.error };
+}
+
+function FlowRequestHalf({ flow }: { flow: Flow }) {
+  const body = useLoadedBody(flow, "request");
+  const request = useMemo(() => flowRequestToView(flow, body.data ?? null), [flow, body.data]);
+  const loader = useMemo(
+    () =>
+      flowBodyLoader({
+        useBody: () => useLoadedBody(flow, "request"),
+        contentType: findHeader(flow.requestHeaders, "content-type"),
+      }),
+    [flow],
+  );
+  const cookies = useMemo(() => flowCookiesView(flow), [flow]);
+  const sentCount = useMemo(
+    () => parseCookieHeaders(cookies.cookieHeaders).sentCookies.length,
+    [cookies],
+  );
+  const extraTabs = useMemo<ExtraPaneTab[]>(
+    () => [
+      {
+        tab: {
+          value: REQUEST_TAB_COOKIES,
+          label: "Cookies",
+          rightSlot: <CountBadge count={sentCount} />,
+        },
+        content: <ResponseCookies response={cookies} side="sent" />,
+      },
+    ],
+    [cookies, sentCount],
+  );
+  const available = [
+    REQUEST_TAB_BODY,
+    REQUEST_TAB_PARAMS,
+    REQUEST_TAB_HEADERS,
+    ...(request.auth == null ? [] : [REQUEST_TAB_AUTH]),
+    REQUEST_TAB_COOKIES,
+  ];
+  const { activeTab, defaultTab, onTabChange } = useShapeTab("request", flow, available);
+
+  const forceUpdateKey = `${flow.updatedAt}.${body.data == null ? "" : "loaded"}`;
+
+  return (
+    <HttpRequestPaneView
+      // Padded below as the response half's tabs are, so their content, and the actions bar
+      // over it, sit the same distance from the card's edges
+      className="px-3 pb-3"
+      request={request}
+      fullHeight
+      forceUpdateKey={forceUpdateKey}
+      tabsStorageKey="proxy_request_tabs"
+      bodyLoader={loader}
+      extraTabs={extraTabs}
+      defaultTab={defaultTab}
+      activeTab={activeTab}
+      onTabChange={onTabChange}
+      urlLine={<UrlLine flow={flow} />}
+      renderBody={() => (
+        <FlowRequestBody
+          body={body}
+          // The response's viewer choice, with the form's fields as a URL-encoded body's
+          // formatted view, the switch in one bar with their bulk-view toggle
+          viewer={
+            <FlowBodyViewer
+              flow={flow}
+              which="request"
+              form={
+                request.bodyType === BODY_TYPE_FORM_URLENCODED
+                  ? (actions) => (
+                      <FormUrlencodedEditor
+                        readOnly
+                        requestId={request.id}
+                        form={request.body.form}
+                        forceUpdateKey={forceUpdateKey}
+                        actions={actions}
+                      />
+                    )
+                  : undefined
+              }
+              hideCutNote
+            />
+          }
+          requestSize={flow.requestSize}
+        />
+      )}
+    />
+  );
+}
+
+/** The method and URL, at the status line's height so the two header lines align */
+function UrlLine({ flow }: { flow: Flow }) {
+  return (
+    // The whole URL on hover, when it runs past the card
+    <Tooltip wrap onlyWhenTruncated content={flow.url} delay={CONTROL_TOOLTIP_DELAY}>
+      <div
+        className={classNames(
+          "flex items-center gap-2 min-h-[calc(var(--height-sm)+0.25rem)] -mb-1.5",
+          "font-mono text-sm whitespace-nowrap overflow-x-auto hide-scrollbars",
+        )}
+      >
+        <span className="text-text-subtle shrink-0">{flow.method}</span>
+        <span className="text-text select-text cursor-text">{flow.url}</span>
+      </div>
+    </Tooltip>
+  );
+}
+
+function FlowResponseHalf({ flow, className }: { flow: Flow; className: string }) {
+  // A stream's body is its messages, read by the Messages tab; reading it whole again on every
+  // message would only hold copies of it
+  const loadBody = flow.streamKind == null;
+  const body = useLoadedBody(flow, "response", loadBody);
+  const response = useMemo(() => flowResponseToView(flow, body.data ?? null), [flow, body.data]);
+  const loader = useMemo(
+    () =>
+      flowBodyLoader({
+        useBody: () => useLoadedBody(flow, "response", loadBody),
+        contentType: findHeader(flow.responseHeaders, "content-type"),
+      }),
+    [flow, loadBody],
+  );
+  const openSave = useSetAtom(saveDialogFlowAtom);
+  const flowActions = useFlowActions();
+  const messagesLabel = messagesTabLabel(flow);
+
+  const extraTabs = useMemo<ExtraPaneTab[]>(
+    () => [
+      {
+        tab: { value: RESPONSE_TAB_TIMELINE, label: "Timeline" },
+        content: <FlowTimeline flow={flow} />,
+      },
+      { tab: { value: RESPONSE_TAB_INFO, label: "Info" }, content: <FlowInfo flow={flow} /> },
+      ...(messagesLabel == null
+        ? []
+        : [
+            {
+              tab: {
+                value: RESPONSE_TAB_MESSAGES,
+                label: messagesLabel,
+                rightSlot: (
+                  <CountBadge
+                    count={flow.messageCount}
+                    color="info"
+                    showZero
+                    className="tabular-nums"
+                  />
+                ),
+              },
+              content: <FlowMessages flow={flow} />,
+            },
+          ]),
+    ],
+    [flow, messagesLabel],
+  );
+  const available = [
+    RESPONSE_TAB_BODY,
+    RESPONSE_TAB_HEADERS,
+    RESPONSE_TAB_COOKIES,
+    RESPONSE_TAB_TIMELINE,
+    RESPONSE_TAB_INFO,
+    ...(messagesLabel == null ? [] : [RESPONSE_TAB_MESSAGES]),
+  ];
+  const { activeTab, defaultTab, onTabChange } = useShapeTab("response", flow, available);
+  const saved = flow.savedRequestId != null;
+
+  return (
+    <HttpResponsePaneView
+      bare
+      requestShownApart
+      className={classNames(className, "border-border-subtle")}
+      response={response}
+      body={loader}
+      requestBody={null}
+      emptyState={<EmptyStateText>Waiting for a response</EmptyStateText>}
+      tabsStorageKey="proxy_response_tabs"
+      activeTabKey={flow.id}
+      defaultTab={defaultTab}
+      activeTab={activeTab}
+      onTabChange={onTabChange}
+      extraTabs={extraTabs}
+      renderBodyViewer={() => <FlowBodyViewer flow={flow} which="response" />}
+      statusLineCenter={
+        flow.responseTruncated ? (
+          <span
+            className={classNames(
+              "justify-self-end flex items-center gap-1.5 h-5 px-2.5 ml-3 rounded-full",
+              "border border-notice/50 text-notice font-sans text-xs",
+            )}
+          >
+            <Icon icon="scissors" size="xs" />
+            {body.data == null ? "Body cut" : `First ${formatSize(body.data.storedSize)} kept`}
+          </span>
+        ) : undefined
+      }
+      statusLineRight={
+        <div className="flex items-center gap-0.5 m-0.5">
+          <IconButton
+            size="sm"
+            icon="bookmark"
+            iconColor={saved ? "primary" : "secondary"}
+            title={saved ? "Saved to Yaak" : "Save to Yaak"}
+            tooltip
+            onClick={() => openSave(flow)}
+          />
+          <Dropdown items={flowActions(flow).slice(2)}>
+            <IconButton size="sm" icon="ellipsis" iconColor="secondary" title="Actions" tooltip />
+          </Dropdown>
+        </div>
+      }
+    />
+  );
+}
@@ -1,45 +1,22 @@
-import { formatSize } from "@yaakapp-internal/lib/formatSize";
-import type { Flow } from "@yaakapp-internal/proxy-lib";
-import {
-  Banner,
-  Button,
-  CountBadge,
-  Dropdown,
-  type DropdownItem,
-  formatMillis,
-  HStack,
-  HttpStatusTagRaw,
-  Icon,
-  IconButton,
-  SizeTag,
-  type TabButtonRenderProps,
-  type TabItem,
-  TabContent,
-  Tabs,
-} from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import type { CSSProperties } from "react";
-import { useMemo, useState } from "react";
 import { selectedFlowAtom } from "../lib/atoms";
-import { findHeader, mimeEssence } from "../lib/body";
-import { saveDialogFlowAtom, useFlowActions } from "../lib/flowActions";
-import { statusReason } from "../lib/statusReason";
-import { EmptyState, FlowBodyViewer, useFlowBody } from "./FlowBodyViewer";
-import { FlowHeaders, FlowQuery, queryParams } from "./FlowHeaders";
-
-const TAB_RESPONSE = "response";
-const TAB_REQUEST = "request";
-const TAB_HEADERS = "headers";
-const TAB_QUERY = "query";
+import { EmptyState } from "./FlowBodyViewer";
+import { FlowCard } from "./FlowCard";
+import { NotDecrypted } from "./NotDecrypted";

+/**
+ * The detail pane: the selected flow's card, or what the pane holds before one is selected. The
+ * split's gutter separates it from the list; side by side it sits a little under the header.
+ */
 export function FlowDetail({ style, sideBySide }: { style?: CSSProperties; sideBySide: boolean }) {
  const flow = useAtomValue(selectedFlowAtom);

  return (
    <div
      style={style}
-      className={classNames("min-h-0 min-w-0 pb-2", sideBySide ? "pr-2 pt-2" : "px-2")}
+      className={classNames("min-h-0 min-w-0 pb-2", sideBySide ? "pr-2 pt-3" : "px-2")}
    >
      <div
        className={classNames(
@@ -55,257 +32,19 @@ export function FlowDetail({ style, sideBySide }: { style?: CSSProperties; sideB
              <span>Pause or resume recording</span>
              <Keys keys={["⌘", "R"]} />
              <span>Clear flows</span>
-              <Keys keys={["⌘", "K"]} />
+              <Keys keys={["⌘", "⇧", "K"]} />
            </div>
          </EmptyState>
+        ) : flow.tunnelled ? (
+          <NotDecrypted flow={flow} />
        ) : (
-          <FlowPane flow={flow} />
+          <FlowCard flow={flow} listBeside={sideBySide} />
        )}
      </div>
    </div>
  );
 }

-function FlowPane({ flow }: { flow: Flow }) {
-  const [pretty, setPretty] = useState(true);
-  const responseBody = useFlowBody(flow, "response", flow.responseTruncated);
-  // Failed or cancelled before any response; after the headers, the body was cut short mid-way.
-  const noResponse = (flow.error != null || flow.cancelled) && flow.status == null;
-  const mime = mimeEssence(findHeader(flow.responseHeaders, "content-type"));
-  const queryCount = useMemo(() => queryParams(flow.url).length, [flow.url]);
-  const openSave = useSetAtom(saveDialogFlowAtom);
-  const flowActions = useFlowActions();
-
-  const tabs = useMemo<TabItem[]>(
-    () => [
-      {
-        value: TAB_RESPONSE,
-        renderButton: ({ buttonProps, isActive }) => (
-          <ViewModeButton
-            buttonProps={buttonProps}
-            isActive={isActive}
-            pretty={pretty}
-            onChangePretty={setPretty}
-            prettyLabel={mime === "text/html" ? "Preview" : "Response"}
-            allowRaw={!mime?.startsWith("image/")}
-          />
-        ),
-      },
-      {
-        value: TAB_REQUEST,
-        label: "Request",
-        rightSlot: flow.requestSize > 0 ? <CountBadge count={true} /> : null,
-      },
-      {
-        value: TAB_HEADERS,
-        label: "Headers",
-        rightSlot: (
-          <CountBadge
-            count={flow.requestHeaders.length}
-            count2={flow.responseHeaders.length}
-            showZero
-          />
-        ),
-      },
-      {
-        value: TAB_QUERY,
-        label: "Query",
-        rightSlot: <CountBadge count={queryCount} showZero />,
-      },
-    ],
-    [
-      pretty,
-      mime,
-      flow.requestSize,
-      flow.requestHeaders.length,
-      flow.responseHeaders.length,
-      queryCount,
-    ],
-  );
-
-  return (
-    <div className="h-full w-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1">
-      <div
-        className={classNames(
-          "grid grid-cols-[auto_minmax(4rem,1fr)_auto] items-center h-sm -mb-1.5",
-          "cursor-default select-none whitespace-nowrap w-full px-3",
-          "overflow-x-auto font-mono text-sm text-text-subtle hide-scrollbars",
-        )}
-      >
-        <HStack space={2} className="w-full shrink-0">
-          {flow.cancelled && flow.status == null ? (
-            <span>Cancelled</span>
-          ) : (
-            <HttpStatusTagRaw
-              showReason
-              status={flow.status ?? 0}
-              statusReason={flow.status == null ? null : statusReason(flow.status)}
-            />
-          )}
-          {flow.elapsedMs != null && (
-            <>
-              <span>&bull;</span>
-              <span
-                title={
-                  flow.elapsedHeadersMs == null
-                    ? undefined
-                    : `HEADERS: ${formatMillis(flow.elapsedHeadersMs)}\nTOTAL: ${formatMillis(flow.elapsedMs)}`
-                }
-              >
-                {formatMillis(flow.elapsedMs)}
-              </span>
-            </>
-          )}
-          {!noResponse && (
-            <>
-              <span>&bull;</span>
-              <SizeTag contentLength={flow.responseSize} />
-            </>
-          )}
-        </HStack>
-        {flow.responseTruncated ? (
-          <span
-            className={classNames(
-              "justify-self-end flex items-center gap-1.5 h-5 px-2.5 ml-3 rounded-full",
-              "border border-notice/50 text-notice font-sans text-xs",
-            )}
-          >
-            <Icon icon="scissors" size="xs" />
-            {responseBody.data == null
-              ? "Body cut"
-              : `First ${formatSize(responseBody.data.storedSize)} kept`}
-          </span>
-        ) : (
-          <span />
-        )}
-        <HStack space={1} className="font-sans ml-3">
-          <Button
-            size="2xs"
-            variant="border"
-            color={flow.savedRequestId == null ? "default" : "primary"}
-            title={flow.savedRequestId == null ? undefined : "Saved to Yaak. Click to save again."}
-            leftSlot={<Icon icon="bookmark" size="xs" />}
-            onClick={() => openSave(flow)}
-          >
-            {flow.savedRequestId == null ? "Save to Yaak" : "Saved"}
-          </Button>
-          <Dropdown items={flowActions(flow).slice(2)}>
-            <IconButton size="xs" icon="ellipsis" iconColor="secondary" title="Copy and export" />
-          </Dropdown>
-        </HStack>
-      </div>
-
-      <div className="overflow-hidden flex flex-col min-h-0">
-        {flow.error != null && (
-          <Banner color="danger" className="mx-3 mt-1 shrink-0 font-mono text-sm">
-            {flow.error}
-          </Banner>
-        )}
-        {flow.cancelled && (
-          <Banner color="secondary" className="mx-3 mt-1 shrink-0 text-sm">
-            {flow.status == null
-              ? "The app cancelled the request before a response came back."
-              : "The app cancelled the request before the response finished."}
-          </Banner>
-        )}
-        <Tabs
-          tabs={tabs}
-          label="Flow"
-          className="ml-3 mr-3 mb-3 min-h-0 flex-1"
-          tabListClassName="mt-0.5 -mb-1.5"
-        >
-          <TabContent value={TAB_RESPONSE}>
-            {noResponse ? (
-              <EmptyState>
-                <div className="text-text-subtle mb-1">
-                  {flow.cancelled ? "Cancelled" : "No response"}
-                </div>
-                <div className="text-xs">
-                  {flow.cancelled
-                    ? "The app cancelled the request before a response came back."
-                    : "The request never got a response."}{" "}
-                  The Request tab has what the app sent.
-                </div>
-              </EmptyState>
-            ) : (
-              <FlowBodyViewer flow={flow} which="response" pretty={pretty} />
-            )}
-          </TabContent>
-          <TabContent value={TAB_REQUEST}>
-            <FlowBodyViewer flow={flow} which="request" pretty />
-          </TabContent>
-          <TabContent value={TAB_HEADERS}>
-            <FlowHeaders flow={flow} />
-          </TabContent>
-          <TabContent value={TAB_QUERY}>
-            <FlowQuery flow={flow} />
-          </TabContent>
-        </Tabs>
-      </div>
-    </div>
-  );
-}
-
-interface ViewModeButtonProps {
-  buttonProps: TabButtonRenderProps["buttonProps"];
-  isActive: boolean;
-  pretty: boolean;
-  onChangePretty: (pretty: boolean) => void;
-  prettyLabel: string;
-  allowRaw: boolean;
-}
-
-/** The client's Response tab: a click on the active tab opens its view menu */
-function ViewModeButton({
-  buttonProps,
-  isActive,
-  pretty,
-  onChangePretty,
-  prettyLabel,
-  allowRaw,
-}: ViewModeButtonProps) {
-  const showPretty = pretty || !allowRaw;
-  const items: DropdownItem[] = [
-    {
-      label: prettyLabel,
-      leftSlot: <CheckMark visible={showPretty} />,
-      onSelect: () => onChangePretty(true),
-    },
-    {
-      label: `${prettyLabel} (Raw)`,
-      hidden: !allowRaw,
-      leftSlot: <CheckMark visible={!showPretty} />,
-      onSelect: () => onChangePretty(false),
-    },
-  ];
-
-  return (
-    <Dropdown items={items}>
-      <Button
-        {...buttonProps}
-        onClick={(e) => {
-          if (isActive) return;
-          e.preventDefault();
-          buttonProps.onClick?.(e);
-        }}
-        rightSlot={
-          <Icon
-            size="sm"
-            icon="chevron_down"
-            className={classNames("ml-1", isActive ? "text-text-subtle" : "text-text-subtlest")}
-          />
-        }
-      >
-        {showPretty ? prettyLabel : "Raw"}
-      </Button>
-    </Dropdown>
-  );
-}
-
-function CheckMark({ visible }: { visible: boolean }) {
-  return <Icon icon={visible ? "check" : "empty"} size="sm" />;
-}
-
 function Keys({ keys }: { keys: string[] }) {
  return (
    <span className="flex gap-1 justify-end">
@@ -1,109 +0,0 @@
-import { formatSize } from "@yaakapp-internal/lib/formatSize";
-import type { Flow } from "@yaakapp-internal/proxy-lib";
-import {
-  DetailsBanner,
-  formatMillis,
-  HeadersTable,
-  KeyValueRow,
-  KeyValueRows,
-} from "@yaakapp-internal/ui";
-import { useMemo } from "react";
-import { EmptyState } from "./FlowBodyViewer";
-
-const startedFormat = new Intl.DateTimeFormat("en-US", {
-  month: "short",
-  day: "numeric",
-  year: "numeric",
-  hour: "numeric",
-  minute: "2-digit",
-  second: "2-digit",
-  fractionalSecondDigits: 3,
-  timeZoneName: "short",
-});
-
-const bytesFormat = new Intl.NumberFormat("en-US");
-
-export function FlowHeaders({ flow }: { flow: Flow }) {
-  const versions =
-    flow.upstreamHttpVersion == null
-      ? `${flow.clientHttpVersion} from the app`
-      : `${flow.clientHttpVersion} from the app, ${flow.upstreamHttpVersion} to the server`;
-
-  return (
-    <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
-      <DetailsBanner defaultOpen storageKey="flow.info" summary={<h2>Info</h2>}>
-        <KeyValueRows>
-          <KeyValueRow label="Started">
-            {startedFormat.format(new Date(`${flow.startedAt}Z`))}
-          </KeyValueRow>
-          <KeyValueRow label="URL">{flow.url}</KeyValueRow>
-          <KeyValueRow label="Remote Address">{flow.remoteAddr ?? <Missing />}</KeyValueRow>
-          <KeyValueRow label="Version">{versions}</KeyValueRow>
-          <KeyValueRow label="Timing">
-            {flow.elapsedMs == null ? (
-              <Missing />
-            ) : flow.elapsedHeadersMs == null ? (
-              `${formatMillis(flow.elapsedMs)} in all`
-            ) : (
-              `${formatMillis(flow.elapsedMs)} in all, headers after ${formatMillis(flow.elapsedHeadersMs)}`
-            )}
-          </KeyValueRow>
-          <KeyValueRow label="Size">
-            <span>
-              {formatSize(flow.requestSize)} sent, {formatSize(flow.responseSize)} received{" "}
-              <span className="text-text-subtlest">
-                ({bytesFormat.format(flow.responseSize)} B)
-              </span>
-            </span>
-          </KeyValueRow>
-        </KeyValueRows>
-      </DetailsBanner>
-      <HeadersTable
-        title="Request Headers"
-        headers={flow.requestHeaders}
-        labelColor="primary"
-        storageKey="flow.request_headers"
-      />
-      <HeadersTable
-        defaultOpen
-        title="Response Headers"
-        headers={flow.responseHeaders}
-        labelColor="info"
-        storageKey="flow.response_headers"
-      />
-    </div>
-  );
-}
-
-export function FlowQuery({ flow }: { flow: Flow }) {
-  const params = useMemo(() => queryParams(flow.url), [flow.url]);
-
-  if (params.length === 0) {
-    return <EmptyState>No query parameters</EmptyState>;
-  }
-
-  return (
-    <div className="overflow-auto h-full pb-4">
-      <KeyValueRows>
-        {params.map(([name, value], i) => (
-          // oxlint-disable-next-line react/no-array-index-key -- a name can repeat
-          <KeyValueRow key={i} label={name} labelColor="primary">
-            {value}
-          </KeyValueRow>
-        ))}
-      </KeyValueRows>
-    </div>
-  );
-}
-
-export function queryParams(url: string): [string, string][] {
-  try {
-    return [...new URL(url).searchParams.entries()];
-  } catch {
-    return [];
-  }
-}
-
-function Missing() {
-  return <span className="text-text-subtlest">--</span>;
-}
@@ -0,0 +1,125 @@
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import type { Flow } from "@yaakapp-internal/proxy-lib";
+import { DetailsBanner, formatMillis, KeyValueRow, KeyValueRows } from "@yaakapp-internal/ui";
+import { format } from "date-fns";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { utcTimestamp } from "../lib/flowViews";
+import { folderOf } from "../lib/search";
+import { AppIcon } from "./AppIcon";
+
+/**
+ * Where a flow came from and how it travelled: in a proxy you didn't send the request, so the
+ * connection on each leg, the app and its process, timing, sizes and the flow's record are part
+ * of the answer.
+ */
+export function FlowInfo({ flow }: { flow: Flow }) {
+  const folder = folderOf(flow);
+  const clientPort = portOf(flow.clientAddr);
+
+  return (
+    <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
+      <Section title="Connection">
+        {[
+          row("remote", "Remote Address", flow.remoteAddr, { copy: true }),
+          row("client_version", "Client Version", flow.clientHttpVersion),
+          row("server_version", "Server Version", flow.upstreamHttpVersion),
+          row("tls", "TLS", flow.upstreamTlsVersion),
+          row("cipher", "Cipher", flow.upstreamTlsCipher),
+          row("client_port", "Client Port", clientPort),
+        ]}
+      </Section>
+      <Section title="App">
+        {[
+          row(
+            "app",
+            "Name",
+            flow.clientName == null ? null : (
+              <span className="flex items-center gap-1.5">
+                {flow.clientPath != null && <AppIcon path={flow.clientPath} className="size-5" />}
+                {flow.clientName}
+                {folder != null && <span className="text-text-subtlest">{folder}</span>}
+              </span>
+            ),
+          ),
+          flow.clientBundleId != null
+            ? row("bundle", "Bundle ID", flow.clientBundleId, { copy: true })
+            : row("path", "Path", flow.clientPath, { copy: true }),
+          row("pid", "PID", flow.clientPid == null ? null : `${flow.clientPid}`),
+          row("cwd", "Directory", flow.clientCwd, { copy: true }),
+        ]}
+      </Section>
+      <Section title="Timing">
+        {[
+          row(
+            "started",
+            "Started",
+            format(utcTimestamp(flow.startedAt), "MMM d, yyyy, h:mm:ss.SSS a"),
+          ),
+          row("headers", "Headers", ms(flow.elapsedHeadersMs)),
+          row("total", "Total", ms(flow.elapsedMs)),
+        ]}
+      </Section>
+      <Section title="Size">
+        {[
+          row("request_size", "Request", formatSize(flow.requestSize)),
+          row("response_size", "Response", formatSize(flow.responseSize)),
+        ]}
+      </Section>
+      <Section title="Record">
+        {[
+          row("number", "Number", `#${flow.number}`, { copy: true }),
+          row("id", "ID", flow.id, { copy: true }),
+          row("saved", "Saved As", flow.savedRequestId, { copy: true }),
+        ]}
+      </Section>
+    </div>
+  );
+}
+
+/** A row as `KeyValueRows` takes it */
+type Row = ReactElement<HTMLAttributes<HTMLTableColElement>>;
+
+function Section({ title, children }: { title: string; children: (Row | null)[] }) {
+  const rows = children.filter((r): r is Row => r != null);
+  if (rows.length === 0) return null;
+  return (
+    <DetailsBanner defaultOpen summary={<h2>{title}</h2>}>
+      <KeyValueRows>{rows}</KeyValueRows>
+    </DetailsBanner>
+  );
+}
+
+/** A row, or nothing when there's no value for it */
+function row(
+  key: string,
+  label: string,
+  value: ReactNode | null | undefined,
+  opts: { copy?: boolean } = {},
+): Row | null {
+  if (value == null || value === "") return null;
+  return (
+    <KeyValueRow
+      key={key}
+      labelColor="secondary"
+      label={label}
+      enableCopy={opts.copy}
+      copy={copyText}
+    >
+      {value}
+    </KeyValueRow>
+  );
+}
+
+function ms(value: number | null): string | null {
+  return value == null ? null : formatMillis(value);
+}
+
+/** The port of `127.0.0.1:54321` or `[::1]:54321` */
+export function portOf(addr: string | null | undefined): string | null {
+  const port = addr?.match(/:(\d+)$/)?.[1];
+  return port ?? null;
+}
+
+function copyText(text: string) {
+  navigator.clipboard.writeText(text).catch(console.error);
+}
@@ -0,0 +1,116 @@
+import { EmptyStateText, Hotkey, Icon, InlineCode } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue, useStore } from "jotai";
+import { useEffect, useState } from "react";
+import { appliedFilterAtom } from "../lib/atoms";
+import { applyFilter } from "../lib/navigation";
+import { rpc } from "../lib/rpc";
+import { activeQuery, widerQueries } from "../lib/query";
+import { hideSystemAtom, pausedAtAtom, proxyStateAtom, searchWindowAtom } from "../lib/store";
+
+/** Nothing to list: no flows yet, recording paused, or a query nothing matches */
+export function FlowListEmpty() {
+  const text = useAtomValue(appliedFilterAtom);
+  const search = useAtomValue(searchWindowAtom);
+  const proxyState = useAtomValue(proxyStateAtom);
+  if (search?.loading) return null;
+  if (text.trim() !== "") return <NoResults text={text} />;
+
+  const other = proxyState?.otherOwner ?? null;
+  const port = proxyState?.port ?? other?.proxyPort ?? null;
+  const running = proxyState?.state === "running" || other != null;
+  const recording = proxyState?.recording !== false;
+  return (
+    <EmptyStateText wrapperClassName="p-1.5" className="not-italic flex-col gap-1 text-center px-6">
+      <div className="text-text text-sm">{recording ? "No flows yet" : "Recording is paused"}</div>
+      <div className="text-sm text-text-subtle max-w-[26rem]">
+        {!running
+          ? "The proxy is not running. Retry from the menu by the state."
+          : !recording
+            ? "Traffic passes through without being stored."
+            : `Recording on port ${port ?? "--"}. Flows appear as apps send requests.`}
+      </div>
+    </EmptyStateText>
+  );
+}
+
+/**
+ * The list's last row while recording is paused, where the next flow would appear: since when,
+ * and that nothing is stored.
+ */
+export function PausedRow({ style }: { style?: React.CSSProperties }) {
+  const pausedAt = useAtomValue(pausedAtAtom);
+  return (
+    <div
+      style={style}
+      className={classNames(
+        "absolute left-1.5 right-1.5 flex items-center gap-2 h-xs px-3 mt-1",
+        "rounded-md border border-dashed border-border-subtle text-text-subtle text-sm",
+      )}
+    >
+      <Icon icon="circle_pause" size="sm" className="text-text-subtlest" />
+      <span className="truncate">
+        {pausedAt == null ? "Paused." : `Paused at ${timeOf(pausedAt)}.`} Traffic passes through
+        without being stored.
+      </span>
+      <Hotkey action="recording_toggle" variant="text" className="ml-auto" />
+    </div>
+  );
+}
+
+/**
+ * A query nothing matches: wider ones that do, each the query with one term left out, as Yaak's
+ * sidebar answers, with how many each would match.
+ */
+function NoResults({ text }: { text: string }) {
+  const hideSystem = useAtomValue(hideSystemAtom);
+  const store = useStore();
+  const setText = (wider: string) => applyFilter(store, wider);
+  const [wider, setWider] = useState<{ text: string; count: number }[]>([]);
+
+  useEffect(() => {
+    let current = true;
+    const candidates = widerQueries(text);
+    void Promise.all(
+      candidates.map(async (candidate) => {
+        const query = activeQuery(candidate, hideSystem);
+        const res = await rpc("list_flows", { ...query, limit: 0 });
+        return { text: candidate, count: query == null ? res.total : (res.matching ?? res.total) };
+      }),
+    )
+      .then((found) => {
+        if (current) setWider(found.filter((f) => f.count > 0).slice(0, 3));
+      })
+      .catch(() => {
+        if (current) setWider([]);
+      });
+    return () => {
+      current = false;
+    };
+  }, [text, hideSystem]);
+
+  return (
+    <EmptyStateText
+      wrapperClassName="p-1.5 !h-auto"
+      className="not-italic !h-auto py-3 px-4 text-sm text-text-subtle"
+    >
+      <div className="text-center leading-relaxed">
+        No flows match.
+        {wider.length > 0 && " Found matches for "}
+        {wider.map((w, i) => (
+          <span key={w.text}>
+            {i > 0 && (i === wider.length - 1 ? ", or " : ", ")}
+            <button type="button" className="hover:underline" onClick={() => setText(w.text)}>
+              <InlineCode>{w.text === "" ? "all traffic" : w.text}</InlineCode>
+            </button>{" "}
+            ({w.count.toLocaleString()})
+          </span>
+        ))}
+      </div>
+    </EmptyStateText>
+  );
+}
+
+function timeOf(ms: number): string {
+  return new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
@@ -0,0 +1,541 @@
+import {
+  DndContext,
+  type DragStartEvent,
+  PointerSensor,
+  useDraggable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { FlowSortKey } from "@yaakapp-internal/proxy-lib";
+import {
+  ContextMenu,
+  Dropdown,
+  type DropdownItem,
+  Icon,
+  IconButton,
+  ResizeHandle,
+} from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue, useSetAtom } from "jotai";
+import {
+  memo,
+  type MouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  addSortKey,
+  allColumns,
+  type Column,
+  type ColumnDef,
+  type ColumnId,
+  type ColumnPrefs,
+  type CustomColumnId,
+  canHide,
+  dropBoundary,
+  hideOtherColumns,
+  isCustomColumn,
+  moveColumn,
+  moveColumnBy,
+  removeCustomColumn,
+  resetOrder,
+  resetWidth,
+  resetWidths,
+  resizeColumn,
+  toggleColumn,
+  unavailableColumns,
+} from "../lib/columns";
+import { columnPrefsAtom, hasAppsAtom } from "../lib/store";
+import { addColumnDialogAtom } from "./AddColumnDialog";
+
+/** Pixels a press on a label moves before it drags the column rather than sorting by it */
+const DRAG_DISTANCE = 4;
+/** How near the list's side edge, in pixels, a dragged column scrolls the list that way */
+const EDGE = 40;
+/** The most the list scrolls sideways a frame, at the very edge */
+const EDGE_SPEED = 18;
+
+interface Props {
+  columns: Column[];
+  template: string;
+  /** The rows' width, as CSS, so the header scrolls sideways with them */
+  width: string;
+  prefs: ColumnPrefs;
+  sort: FlowSortKey[];
+  /** A click on a label, or with `add`, an Option-click */
+  onSort: (column: ColumnId, add: boolean) => void;
+  /** Sets the sort from the menus; empty goes back to arrival order */
+  onSetSort: (sort: FlowSortKey[]) => void;
+  onResetSort: () => void;
+  /** The rows' scrolling element, which a column dragged to its edge scrolls sideways */
+  scrollElement: () => HTMLElement | null;
+  /** A column's drag, for the list to show: its ghost, and the columns making room for it */
+  onColumnDrag: (event: ColumnDragEvent) => void;
+}
+
+/**
+ * A column's drag: its start, the pointer's moves (`x`, across the window), the boundary it
+ * would drop at when that changes (`to`, null where it would stay), and its end, dropped there
+ * or put back
+ */
+export type ColumnDragEvent =
+  | { type: "start"; id: ColumnId; x: number }
+  | { type: "move"; x: number }
+  | { type: "target"; to: number | null }
+  | { type: "end"; dropped: boolean };
+
+/**
+ * The list's only control surface: a click on a label sorts by it alone, a second reverses it
+ * and a third goes back to arrival order; Option-click adds it to the sort as a further key.
+ * Dragging a label moves its column, and Escape puts it back. Dragging the edge after a label
+ * resizes its column and a double-click on it resets it. A right-click on a label opens the
+ * column's menu; the picker sits in the empty corner on hover.
+ */
+export const FlowListHeader = memo(function FlowListHeader({
+  columns,
+  template,
+  width,
+  prefs,
+  sort,
+  onSort,
+  onSetSort: setSort,
+  onResetSort,
+  scrollElement,
+  onColumnDrag,
+}: Props) {
+  const setPrefs = useSetAtom(columnPrefsAtom);
+  const unavailable = unavailableColumns(useAtomValue(hasAppsAtom));
+  const openAddColumn = useSetAtom(addColumnDialogAtom);
+  const [menu, setMenu] = useState<{ x: number; y: number; column: ColumnDef | null } | null>(null);
+  // Widths when a drag began, so each move sets the width from where it started.
+  const startWidth = useRef(0);
+  const { sensors, dndHandlers, gridRef, onPointerDownCapture } = useColumnDrag({
+    columns,
+    scrollElement,
+    onColumnDrag,
+    onDrop: (id, to) => setPrefs((p) => moveColumn(p, id, to, unavailable)),
+  });
+
+  // Taking out the sort's only key goes back to arrival order, as Reset Sort does
+  const removeColumn = (id: CustomColumnId) => {
+    if (sort.length > 0 && sort.every((k) => k.column === id)) onResetSort();
+    setPrefs((p) => removeCustomColumn(p, id));
+  };
+
+  const pickerItems: DropdownItem[] = [
+    {
+      type: "content",
+      label: <div className="px-1.5 pt-1 text-xs text-text-subtlest">Columns</div>,
+    },
+    ...allColumns(prefs).map((c): DropdownItem => {
+      const shown = prefs.visible[c.id] ?? c.defaultVisible;
+      return {
+        label: c.label,
+        keepOpenOnSelect: true,
+        disabled: shown && !canHide(prefs, c.id, unavailable),
+        leftSlot: shown ? (
+          <Icon icon="check" size="sm" />
+        ) : (
+          <span aria-hidden className="inline-block w-4 h-4" />
+        ),
+        onSelect: () => setPrefs((p) => toggleColumn(p, c.id, unavailable)),
+        ...(isCustomColumn(c.id)
+          ? {
+              submenuTrigger: "button" as const,
+              submenu: [
+                {
+                  label: "Remove Column",
+                  icon: "trash" as const,
+                  color: "danger" as const,
+                  onSelect: () => removeColumn(c.id as CustomColumnId),
+                },
+              ],
+            }
+          : {}),
+      };
+    }),
+    { label: "Add Column…", icon: "plus", onSelect: () => openAddColumn(true) },
+    { type: "separator" },
+    { label: "Reset Sort", disabled: sort.length === 0, onSelect: onResetSort },
+    { label: "Reset Column Widths", onSelect: () => setPrefs((p) => resetWidths(p)) },
+    {
+      label: "Reset Column Order",
+      disabled: prefs.order.length === 0,
+      onSelect: () => setPrefs((p) => resetOrder(p)),
+    },
+  ];
+
+  const columnItems = (c: ColumnDef): DropdownItem[] => {
+    const sortBy = (descending: boolean) => setSort([{ column: c.id, descending }]);
+    const addTo = (descending: boolean) => setSort(addSortKey(sort, c.id, descending));
+    const at = columns.findIndex((col) => col.id === c.id);
+    return [
+      { label: "Sort Ascending", onSelect: () => sortBy(false) },
+      { label: "Sort Descending", onSelect: () => sortBy(true) },
+      { label: "Add to Sort Ascending", onSelect: () => addTo(false) },
+      { label: "Add to Sort Descending", onSelect: () => addTo(true) },
+      { label: "Clear Sorting", disabled: sort.length === 0, onSelect: onResetSort },
+      { type: "separator" },
+      {
+        label: "Move Left",
+        disabled: at <= 0,
+        onSelect: () => setPrefs((p) => moveColumnBy(p, c.id, -1, unavailable)),
+      },
+      {
+        label: "Move Right",
+        disabled: at === -1 || at >= columns.length - 1,
+        onSelect: () => setPrefs((p) => moveColumnBy(p, c.id, 1, unavailable)),
+      },
+      { type: "separator" },
+      {
+        label: "Hide Column",
+        disabled: !canHide(prefs, c.id, unavailable),
+        onSelect: () => setPrefs((p) => toggleColumn(p, c.id, unavailable)),
+      },
+      {
+        label: "Hide Other Columns",
+        disabled: columns.length <= 1,
+        onSelect: () => setPrefs((p) => hideOtherColumns(p, c.id)),
+      },
+      ...(isCustomColumn(c.id)
+        ? [
+            {
+              label: "Remove Column",
+              color: "danger" as const,
+              onSelect: () => removeColumn(c.id as CustomColumnId),
+            },
+          ]
+        : []),
+      { type: "separator" },
+      { label: "Reset Column Widths", onSelect: () => setPrefs((p) => resetWidths(p)) },
+    ];
+  };
+
+  // A right-click on a label is for its column; anywhere else in the header, the picker.
+  const openMenu = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      const el = (e.target as HTMLElement).closest<HTMLElement>("[data-column]");
+      const id = el?.dataset.column as ColumnId | undefined;
+      const column = columns.find((c) => c.id === id) ?? null;
+      setMenu({ x: e.clientX, y: e.clientY, column });
+    },
+    [columns],
+  );
+
+  return (
+    // The same margins and padding as the rows, so each label sits over its cells.
+    <div style={{ width, minWidth: "100%" }} className="px-1.5">
+      {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- a right-click opens the column's menu */}
+      <div
+        ref={gridRef}
+        data-flow-header
+        onPointerDownCapture={onPointerDownCapture}
+        onContextMenu={openMenu}
+        style={{ gridTemplateColumns: template }}
+        className={classNames(
+          "group/header grid items-center h-xs px-1.5 select-none",
+          "text-xs text-text-subtlest border-b border-border-subtle",
+        )}
+      >
+        <span className="flex items-center justify-center">
+          <Dropdown items={pickerItems}>
+            <IconButton
+              size="xs"
+              icon="settings_2"
+              title="Columns"
+              tooltip
+              iconColor="secondary"
+              className="opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100 !h-5 !w-5"
+            />
+          </Dropdown>
+        </span>
+        <DndContext sensors={sensors} autoScroll={false} {...dndHandlers}>
+          {columns.map((c) => (
+            <HeaderCell
+              key={c.id}
+              column={c}
+              sort={sort}
+              onSort={onSort}
+              onResizeStart={() => {
+                startWidth.current = c.current;
+              }}
+              onResizeMove={(dx) => setPrefs((p) => resizeColumn(p, c.id, startWidth.current + dx))}
+              onResetWidth={() => setPrefs((p) => resetWidth(p, c.id))}
+            />
+          ))}
+        </DndContext>
+        <ContextMenu
+          triggerPosition={menu}
+          items={menu == null ? [] : menu.column == null ? pickerItems : columnItems(menu.column)}
+          onClose={() => setMenu(null)}
+        />
+      </div>
+    </div>
+  );
+});
+
+interface HeaderCellProps {
+  column: Column;
+  sort: FlowSortKey[];
+  onSort: (column: ColumnId, add: boolean) => void;
+  onResizeStart: () => void;
+  /** How far the edge moved since the resize began */
+  onResizeMove: (dx: number) => void;
+  onResetWidth: () => void;
+}
+
+function HeaderCell({
+  column: c,
+  sort,
+  onSort,
+  onResizeStart,
+  onResizeMove,
+  onResetWidth,
+}: HeaderCellProps) {
+  // The label drags the column; the resize handle beside it is outside it, so it still resizes.
+  const { listeners, setNodeRef } = useDraggable({ id: c.id });
+  const sorted = sort.some((k) => k.column === c.id);
+  return (
+    <span data-column={c.id} className="relative h-full flex items-center min-w-0 px-1.5">
+      <button
+        ref={setNodeRef}
+        type="button"
+        {...listeners}
+        // A press that moves drags instead; dnd-kit swallows the click that ends a drag.
+        onClick={(e) => onSort(c.id, e.altKey)}
+        // No tooltip: the header sits under the search field, and a tooltip here covered it
+        aria-label={`Sort by ${c.label}`}
+        className={classNames(
+          "flex items-center gap-0.5 min-w-0 w-full h-full whitespace-nowrap",
+          "hover:text-text-subtle",
+          c.align === "right" && "justify-end",
+          sorted && "text-text-subtle",
+        )}
+      >
+        <ColumnLabel column={c} sort={sort} />
+      </button>
+      {/* On the column's right edge, the boundary with the next, resizing this one */}
+      <ResizeHandle
+        side="right"
+        justify="center"
+        className="absolute top-0 translate-x-1/2"
+        onResizeStart={onResizeStart}
+        onResizeMove={(e) => onResizeMove(e.x - e.xStart)}
+        onReset={onResetWidth}
+      />
+    </span>
+  );
+}
+
+/** A column's name, after its sort direction and, sorted by several, its place in the sort */
+function ColumnLabel({ column: c, sort }: { column: Column; sort: FlowSortKey[] }) {
+  const at = sort.findIndex((k) => k.column === c.id);
+  const key = sort[at];
+  return (
+    <>
+      {key != null && (
+        <Icon
+          icon="chevron_down"
+          size="xs"
+          className={classNames("shrink-0", !key.descending && "rotate-180")}
+        />
+      )}
+      {key != null && sort.length > 1 && (
+        <span className="shrink-0 -ml-0.5 text-2xs tabular-nums">{at + 1}</span>
+      )}
+      <span className="truncate">{c.id === "app" ? "" : c.label}</span>
+    </>
+  );
+}
+
+/**
+ * Dragging a column's label: where it would drop, the boundary between the labels nearest the
+ * pointer as they were laid out when the drag began, and the list scrolling sideways while the
+ * pointer is near its edge. The list shows the drag; the columns only change order on the drop,
+ * so the rows lay out once.
+ */
+function useColumnDrag({
+  columns,
+  scrollElement,
+  onColumnDrag,
+  onDrop,
+}: {
+  columns: Column[];
+  scrollElement: () => HTMLElement | null;
+  onColumnDrag: (event: ColumnDragEvent) => void;
+  /** Moves the column to the boundary `to` between those shown */
+  onDrop: (id: ColumnId, to: number) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: DRAG_DISTANCE } }),
+  );
+  const gridRef = useRef<HTMLDivElement>(null);
+  // Live while dragging, read each frame
+  const state = useRef<{
+    /** The column dragged, and its place among those shown */
+    id: ColumnId;
+    from: number;
+    /** The labels' edges when the drag began, from the header's left, as the columns slide */
+    cells: { left: number; right: number }[];
+    /** The columns shown when it began, which the edges and `from` describe */
+    shown: string;
+    /** The pointer, across the window */
+    x: number;
+    /** The boundary it would move to, null where it would stay */
+    to: number | null;
+    /** The pointer the ghost was last moved to */
+    ghostX: number;
+    frame: number;
+  } | null>(null);
+  const latest = useRef({ columns, scrollElement, onColumnDrag, onDrop });
+  useLayoutEffect(() => {
+    latest.current = { columns, scrollElement, onColumnDrag, onDrop };
+  });
+
+  /** Ends the drag, dropped or put back */
+  const stop = useCallback((dropped: boolean) => {
+    const s = state.current;
+    state.current = null;
+    if (s == null) return null;
+    cancelAnimationFrame(s.frame);
+    latest.current.onColumnDrag({ type: "end", dropped });
+    return s;
+  }, []);
+
+  const onDragStart = useCallback((e: DragStartEvent) => {
+    const grid = gridRef.current;
+    const from = latest.current.columns.findIndex((c) => c.id === e.active.id);
+    if (grid == null || from === -1) return;
+    const id = e.active.id as ColumnId;
+    const x = pointer.current;
+    // First, as it ends the last drag's columns sliding home, so the edges read below are where
+    // the columns are laid out, not where they were sliding
+    latest.current.onColumnDrag({ type: "start", id, x });
+    const gridLeft = grid.getBoundingClientRect().left;
+    const cells = Array.from(grid.querySelectorAll<HTMLElement>(":scope > [data-column]")).map(
+      (el) => {
+        const box = el.getBoundingClientRect();
+        return { left: box.left - gridLeft, right: box.right - gridLeft };
+      },
+    );
+    const shown = shownKey(latest.current.columns);
+    state.current = { id, from, cells, shown, x, to: null, ghostX: x, frame: 0 };
+    target(state.current);
+
+    const tick = () => {
+      const s = state.current;
+      if (s == null) return;
+      // Near an edge, the list scrolls that way, faster the nearer; the header follows it.
+      const list = latest.current.scrollElement();
+      if (list != null) {
+        const { left, right } = list.getBoundingClientRect();
+        const near =
+          s.x < left + EDGE ? s.x - left - EDGE : s.x > right - EDGE ? s.x - right + EDGE : 0;
+        if (near !== 0) {
+          const speed = Math.min(1, Math.abs(near) / EDGE) * EDGE_SPEED;
+          list.scrollLeft += Math.sign(near) * Math.max(1, speed);
+        }
+      }
+      target(s);
+      if (s.x !== s.ghostX) {
+        s.ghostX = s.x;
+        latest.current.onColumnDrag({ type: "move", x: s.x });
+      }
+      s.frame = requestAnimationFrame(tick);
+    };
+    state.current.frame = requestAnimationFrame(tick);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- `target` reads only refs
+  }, []);
+
+  /** Drops the column where the pointer is, once; a second call finds no drag */
+  const drop = useCallback(() => {
+    // Where the pointer is now, as a release can come before the next frame reads it
+    if (state.current != null) target(state.current);
+    // The list lets go of the drag and the order changes in the same task, so nothing jumps.
+    const s = stop(true);
+    if (s?.to != null) latest.current.onDrop(s.id, s.to);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- `target` reads only refs
+  }, [stop]);
+  const cancel = useCallback(() => {
+    stop(false);
+  }, [stop]);
+
+  // Columns shown or hidden under a drag, as App is when the first flow with an app arrives,
+  // leave its edges and target describing columns that are gone; it is put back instead.
+  const shown = shownKey(columns);
+  useEffect(() => {
+    if (state.current != null && state.current.shown !== shown) cancel();
+  }, [shown, cancel]);
+
+  // The pointer from a press on the header until its release, read before dnd-kit sees it.
+  // dnd-kit starts a drag on the move that crosses `DRAG_DISTANCE` and reports moves and the
+  // release only once it has rendered the drag, so a release right after a move would drop
+  // where the pointer was a frame before, or not at all. The release drops it here instead.
+  const pointer = useRef(0);
+  const track = useCallback((e: PointerEvent) => {
+    pointer.current = e.clientX;
+    if (state.current != null) state.current.x = e.clientX;
+  }, []);
+  const unlisten = useRef<(() => void) | null>(null);
+  const onPointerDownCapture = useCallback(
+    (e: ReactPointerEvent) => {
+      unlisten.current?.();
+      pointer.current = e.clientX;
+      const up = (e: PointerEvent) => {
+        unlisten.current?.();
+        track(e);
+        drop();
+      };
+      const lost = () => {
+        unlisten.current?.();
+        cancel();
+      };
+      window.addEventListener("pointermove", track, true);
+      window.addEventListener("pointerup", up, true);
+      window.addEventListener("pointercancel", lost, true);
+      unlisten.current = () => {
+        unlisten.current = null;
+        window.removeEventListener("pointermove", track, true);
+        window.removeEventListener("pointerup", up, true);
+        window.removeEventListener("pointercancel", lost, true);
+      };
+    },
+    [track, drop, cancel],
+  );
+
+  // A drag never outlives the header
+  useEffect(
+    () => () => {
+      unlisten.current?.();
+      cancel();
+    },
+    [cancel],
+  );
+
+  /** Sets where the drag would drop, telling the list when that changes */
+  function target(s: NonNullable<typeof state.current>) {
+    const gridLeft = gridRef.current?.getBoundingClientRect().left ?? 0;
+    const cells = s.cells.map((c) => ({ left: gridLeft + c.left, right: gridLeft + c.right }));
+    const to = dropBoundary(s.x, cells, s.from);
+    if (to === s.to) return;
+    s.to = to;
+    latest.current.onColumnDrag({ type: "target", to });
+  }
+
+  return {
+    sensors,
+    gridRef,
+    onPointerDownCapture,
+    dndHandlers: { onDragStart, onDragEnd: drop, onDragCancel: cancel },
+  };
+}
+
+/** Which columns show, in order, to tell when that changes */
+function shownKey(columns: Column[]): string {
+  return columns.map((c) => c.id).join(" ");
+}
@@ -0,0 +1,131 @@
+import type { Flow } from "@yaakapp-internal/proxy-lib";
+import {
+  type EventStreamColumns,
+  EventStreamViewer,
+  HStack,
+  type StreamEvent,
+  type StreamPayloadView,
+} from "@yaakapp-internal/ui";
+import { useCallback, useMemo } from "react";
+import { useFlowMessages, useMessageSource } from "../hooks/useFlowMessages";
+import { base64ToBytes } from "../lib/body";
+import { grpcStatusText, messageToStreamEvent, streamIsOpen } from "../lib/messages";
+
+const WEBSOCKET_COLUMNS: EventStreamColumns = {
+  direction: true,
+  kind: "Type",
+  preview: "Message",
+  size: true,
+  time: true,
+};
+const SSE_COLUMNS: EventStreamColumns = {
+  kind: "Event",
+  kindWidth: "9.5rem",
+  preview: "Data",
+  size: true,
+  time: true,
+};
+const GRPC_COLUMNS: EventStreamColumns = {
+  direction: true,
+  kind: "Type",
+  preview: "Message",
+  size: true,
+  time: true,
+};
+
+/**
+ * A streaming flow's messages: a WebSocket's frames, an event stream's events, a gRPC call's
+ * messages and status, following new ones while the stream is open. The selected message's
+ * payload opens below as text or a hexdump; a gRPC message's also decoded, with its schema or
+ * without one.
+ */
+export function FlowMessages({ flow }: { flow: Flow }) {
+  const source = useMessageSource();
+  const { messages, loading, error } = useFlowMessages(flow.id, source, flow.messageCount);
+  const events = useMemo(() => messages.map(messageToStreamEvent), [messages]);
+  const kind = flow.streamKind;
+  const grpc = kind === "grpc" || kind === "grpc_web";
+  const columns = kind === "sse" ? SSE_COLUMNS : grpc ? GRPC_COLUMNS : WEBSOCKET_COLUMNS;
+  const noun = kind === "sse" ? "Event" : "Message";
+  const catchUp = useMemo(
+    () => ({
+      label: (count: number) => `${count} new ${noun.toLowerCase()}${count === 1 ? "" : "s"}`,
+    }),
+    [noun],
+  );
+
+  const loadPayload = useCallback(
+    async (event: StreamEvent) => {
+      const res = await source.payload(flow.id, Number(event.key));
+      return { bytes: base64ToBytes(res.data) };
+    },
+    [flow.id, source],
+  );
+
+  const payloadViews = useCallback(
+    (event: StreamEvent): StreamPayloadView[] | null => {
+      if (!grpc || event.direction === "info") return null;
+      const decode = (schemaless: boolean) => async () => {
+        const decoded = await source.decodeGrpc(flow.id, Number(event.key), schemaless);
+        const note = [
+          decoded.messageType == null ? null : `Decoded as ${decoded.messageType}`,
+          decoded.note,
+        ]
+          .filter(Boolean)
+          .join(". ");
+        return { text: decoded.json, language: "json" as const, note: note || null };
+      };
+      return [
+        { value: "decoded", label: "Decoded", type: "text", load: decode(false) },
+        { value: "schemaless", label: "Schemaless", type: "text", load: decode(true) },
+        { value: "raw", label: "Raw bytes", type: "hexdump" },
+      ];
+    },
+    [flow.id, grpc, source],
+  );
+
+  const open = streamIsOpen(flow);
+  const count = Math.max(flow.messageCount, messages.length);
+  const header = (
+    <HStack space={2} className="pl-2 mb-1 h-xs font-mono text-xs text-text-subtle">
+      {kind === "websocket" && (
+        <>
+          {open ? (
+            <span className="text-success">CONNECTED</span>
+          ) : flow.error != null ? (
+            <span className="text-danger">ERROR</span>
+          ) : (
+            <span className="text-text-subtle">CLOSED</span>
+          )}
+          <span>&bull;</span>
+        </>
+      )}
+      <span>
+        {count} {count === 1 ? noun : `${noun}s`}
+      </span>
+      {grpc && flow.grpcStatus != null && (
+        <>
+          <span>&bull;</span>
+          <span className={flow.grpcStatus === 0 ? "text-success" : "text-danger"}>
+            {grpcStatusText(flow.grpcStatus, flow.grpcMessage)}
+          </span>
+        </>
+      )}
+    </HStack>
+  );
+
+  return (
+    <EventStreamViewer
+      events={events}
+      header={header}
+      error={error ?? (open ? null : flow.error)}
+      isLoading={loading && events.length === 0}
+      emptyMessage={open ? `Waiting for the first ${noun.toLowerCase()}` : `No ${noun}s`}
+      splitLayoutStorageKey="proxy_flow_messages"
+      columns={columns}
+      loadPayload={loadPayload}
+      payloadViews={payloadViews}
+      catchUp={catchUp}
+    />
+  );
+}
@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test, vi } from "vite-plus/test";
+import type { FlowBodyData } from "../lib/flowViews";
+import { FlowRequestBody } from "./FlowRequestBody";
+
+// The package's index reaches for the window as it loads; these three are all this renders.
+vi.mock("@yaakapp-internal/ui", () => ({
+  Banner: ({ children, color }: { children: ReactNode; color?: string }) => (
+    <div data-banner={color}>{children}</div>
+  ),
+  EmptyStateText: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  LoadingIcon: () => <span>LOADING</span>,
+  CONTROL_TOOLTIP_DELAY: 0,
+  Tooltip: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+const data = (truncated = false): FlowBodyData => ({
+  bytes: new TextEncoder().encode('{"a":1}'),
+  truncated,
+  storedSize: 7,
+});
+
+function render(body: Parameters<typeof FlowRequestBody>[0]["body"]) {
+  return renderToStaticMarkup(
+    <FlowRequestBody body={body} viewer={<div>EDITOR</div>} requestSize={2048} />,
+  );
+}
+
+describe("FlowRequestBody", () => {
+  test("a body that failed to load says why, not that there is none", () => {
+    const html = render({ data: undefined, isLoading: false, error: new Error("Key unavailable") });
+    expect(html).toContain('data-banner="danger"');
+    expect(html).toContain("Key unavailable");
+    expect(html).not.toContain("EDITOR");
+  });
+
+  test("shows it is loading while the body is read", () => {
+    const html = render({ data: undefined, isLoading: true, error: null });
+    expect(html).not.toContain("EDITOR");
+    expect(html).toContain("LOADING");
+  });
+
+  test("the viewer once loaded", () => {
+    expect(render({ data: data(), isLoading: false, error: null })).toContain("EDITOR");
+  });
+
+  test("a cut body says how much was kept", () => {
+    const html = render({ data: data(true), isLoading: false, error: null });
+    expect(html).toContain("EDITOR");
+    expect(html).toContain('data-banner="notice"');
+    expect(html).toContain("kept");
+  });
+});
@@ -0,0 +1,56 @@
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import {
+  Banner,
+  CONTROL_TOOLTIP_DELAY,
+  EmptyStateText,
+  LoadingIcon,
+  Tooltip,
+} from "@yaakapp-internal/ui";
+import type { HttpBodyResult } from "@yaakapp-internal/ui/httpTypes";
+import type { ReactNode } from "react";
+import type { FlowBodyData } from "../lib/flowViews";
+
+interface Props {
+  /** The request body as the engine's body RPC returned it */
+  body: HttpBodyResult<FlowBodyData | null>;
+  /** The body in the viewer for its type, formatted or raw */
+  viewer: ReactNode;
+  /** Bytes of the request body on the wire */
+  requestSize: number;
+}
+
+/**
+ * The request half's Body tab: the body in its viewer, or why it isn't there yet. A body that
+ * failed to load says why, as the response's viewer does, rather than reading as no body.
+ */
+export function FlowRequestBody({ body, viewer, requestSize }: Props) {
+  if (body.error != null) {
+    return (
+      <Banner color="danger" className="text-sm">
+        {body.error.message}
+      </Banner>
+    );
+  }
+  if (body.isLoading) {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+  if (body.data?.truncated) {
+    return (
+      <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+        <Banner color="notice" className="text-sm mb-2">
+          <Tooltip wrap content="The app sent all of it" delay={CONTROL_TOOLTIP_DELAY}>
+            <span>
+              First {formatSize(body.data.storedSize)} of {formatSize(requestSize)} kept
+            </span>
+          </Tooltip>
+        </Banner>
+        <div className="min-h-0">{viewer}</div>
+      </div>
+    );
+  }
+  return viewer;
+}
@@ -0,0 +1,71 @@
+import type { Flow } from "@yaakapp-internal/proxy-lib";
+import {
+  CONTROL_TOOLTIP_DELAY,
+  EventViewer,
+  EventViewerRow,
+  formatMillis,
+  Icon,
+  type IconProps,
+  Tooltip,
+} from "@yaakapp-internal/ui";
+import { useMemo } from "react";
+import { type FlowPhase, flowPhases, type PhaseKind } from "../lib/phases";
+
+const ICONS: Record<PhaseKind, { icon: IconProps["icon"]; color: IconProps["color"] }> = {
+  start: { icon: "send_horizontal", color: "secondary" },
+  step: { icon: "arrow_right", color: "secondary" },
+  end: { icon: "check", color: "success" },
+  error: { icon: "alert_triangle", color: "danger" },
+  cancelled: { icon: "circle_off", color: "secondary" },
+};
+
+/** Yaak's event list with the flow's phases as rows, each saying how long it took */
+export function FlowTimeline({ flow }: { flow: Flow }) {
+  const phases = useMemo(() => flowPhases(flow), [flow]);
+  return (
+    <EventViewer<FlowPhase>
+      events={phases}
+      getEventKey={(p) => p.key}
+      splitLayoutStorageKey="proxy_flow_timeline"
+      enableKeyboardNav={false}
+      emptyMessage="No timings recorded"
+      renderRow={({ event, isActive, onClick }) => {
+        const { icon, color } = ICONS[event.kind];
+        return (
+          <EventViewerRow
+            isActive={isActive}
+            onClick={onClick}
+            icon={<Icon icon={icon} color={color} size="sm" />}
+            content={
+              event.detail == null ? (
+                <span>{event.label}</span>
+              ) : (
+                <Tooltip
+                  wrap
+                  content={event.detail}
+                  delay={CONTROL_TOOLTIP_DELAY}
+                >
+                  <span>
+                    {event.label}
+                    <span className="text-text-subtlest">{` ${event.detail}`}</span>
+                  </span>
+                </Tooltip>
+              )
+            }
+            columns="auto minmax(0,1fr) 6rem 6rem"
+            cells={{
+              trailing: [
+                <span key="took" className="tabular-nums">
+                  {event.kind === "start" ? "" : `+${formatMillis(event.tookMs)}`}
+                </span>,
+                <span key="at" className="tabular-nums opacity-50">
+                  {formatMillis(event.atMs)}
+                </span>,
+              ],
+            }}
+          />
+        );
+      }}
+    />
+  );
+}
@@ -0,0 +1,63 @@
+import type { ProxyLock } from "@yaakapp-internal/proxy-lib";
+import { Button, Icon, LoadingIcon } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useRpcMutation } from "../hooks/useRpcMutation";
+import { encryptingPercent } from "../lib/encrypting";
+import { lockedLine } from "../lib/locked";
+import { proxyStateAtom } from "../lib/store";
+import { getOsType } from "../lib/tauri";
+
+/**
+ * Over the list and the detail pane while captured traffic can't be read: its key is
+ * unavailable, or traffic from before encryption is being encrypted. Retry reads the key again
+ * and opens it.
+ */
+export function LockedState({ lock }: { lock: ProxyLock }) {
+  const proxyState = useAtomValue(proxyStateAtom);
+  const retry = useRpcMutation("take_over");
+  const encrypting = encryptingPercent(proxyState);
+
+  return (
+    <div className="grid place-items-center h-full px-10 pb-16">
+      <div className="flex flex-col items-center text-center gap-2 max-w-[28rem]">
+        {encrypting != null ? (
+          <LoadingIcon size="lg" className="text-text-subtle mb-1" />
+        ) : (
+          <Icon icon="lock" size="lg" className="text-text-subtle mb-1" />
+        )}
+        <div className="text-lg font-semibold whitespace-nowrap">
+          {encrypting != null ? (
+            <>
+              Encrypting stored traffic,{" "}
+              {/* Sized for "100%" and right-aligned, so the centred line never changes width as
+                  the number ticks: a changing width re-rasterizes every glyph at a new
+                  sub-pixel offset, and the line shakes */}
+              <span className="inline-block w-[4.5ch] text-right tabular-nums">{encrypting}</span>
+            </>
+          ) : (
+            "Traffic is locked"
+          )}
+        </div>
+        <div className="text-sm text-text-subtle">
+          {encrypting != null
+            ? "Earlier traffic shows here once it's encrypted."
+            : lockedLine(lock, getOsType())}
+        </div>
+        {encrypting == null && (
+          <Button
+            size="xs"
+            variant="border"
+            className="mt-2"
+            isLoading={retry.isPending}
+            onClick={() => retry.mutate({})}
+          >
+            Retry
+          </Button>
+        )}
+        {encrypting == null && retry.error != null && (
+          <div className="text-xs text-danger">{retry.error.message}</div>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,97 @@
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import type { Flow } from "@yaakapp-internal/proxy-lib";
+import { Button, CONTROL_TOOLTIP_DELAY, formatMillis, Icon, Tooltip } from "@yaakapp-internal/ui";
+import { useDecryptList, useEditDecryptList } from "../hooks/useDecryptList";
+import { type DecryptSubject, detailActions, listEdit, setDecrypted } from "../lib/decrypt";
+import { sidebarPath } from "../lib/search";
+import { EmptyState } from "./FlowBodyViewer";
+
+/**
+ * The detail of HTTPS passed through undecrypted: its sizes and time, and buttons that add its
+ * host or its app to the decrypt list, from the next connection on.
+ */
+export function NotDecrypted({ flow }: { flow: Flow }) {
+  const list = useDecryptList();
+  const save = useEditDecryptList();
+  const host = sidebarPath(flow.url).split("/")[0] ?? flow.url;
+  const hostSubject: DecryptSubject = { kind: "host", host };
+  const appSubject: DecryptSubject | null =
+    flow.clientName == null
+      ? null
+      : { kind: "app", name: flow.clientName, bundleId: flow.clientBundleId };
+  const app = flow.clientName;
+  const actions = detailActions(
+    list,
+    host,
+    app == null ? null : { name: app, bundleId: flow.clientBundleId },
+  );
+  const open = flow.elapsedMs == null && flow.error == null;
+
+  const decrypt = (subject: DecryptSubject) =>
+    save.mutate(listEdit(list, setDecrypted(list, [subject], true)));
+
+  const facts = [
+    `${formatSize(Number(flow.requestSize))} sent`,
+    `${formatSize(Number(flow.responseSize))} received`,
+    open ? "open" : flow.elapsedMs == null ? null : formatMillis(flow.elapsedMs),
+  ].filter((f) => f != null);
+
+  return (
+    <EmptyState>
+      <div className="grid justify-items-center gap-2">
+        <div className="flex items-center gap-1.5 text-text-subtle">
+          <Icon icon="lock" size="sm" />
+          Not decrypted
+        </div>
+        <div className="font-mono text-xs">{facts.join(" · ")}</div>
+        {flow.error != null && <div className="text-danger">{flow.error}</div>}
+        {actions.listed ? (
+          <Tooltip
+            wrap
+            content="Still tunnelled? The app may pin its certificate"
+            delay={CONTROL_TOOLTIP_DELAY}
+          >
+            <div>Decrypting new connections</div>
+          </Tooltip>
+        ) : actions.blocked != null ? (
+          <Tooltip
+            wrap
+            content="Remove it from the decrypt list to decrypt"
+            delay={CONTROL_TOOLTIP_DELAY}
+          >
+            <div>
+              Excluded by <span className="font-mono text-xs">{actions.blocked}</span>
+            </div>
+          </Tooltip>
+        ) : (
+          <div className="flex gap-2 mt-1">
+            {actions.host && (
+              <Button
+                size="xs"
+                variant="border"
+                title={`Decrypt new connections to ${host}`}
+                tooltip
+                disabled={save.isPending}
+                onClick={() => decrypt(hostSubject)}
+              >
+                Decrypt Host
+              </Button>
+            )}
+            {actions.app && appSubject != null && (
+              <Button
+                size="xs"
+                variant="border"
+                title={`Decrypt new connections from ${app}`}
+                tooltip
+                disabled={save.isPending}
+                onClick={() => decrypt(appSubject)}
+              >
+                Decrypt App
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </EmptyState>
+  );
+}
@@ -0,0 +1,35 @@
+import {
+  type EditorHost,
+  EditorHostProvider,
+  MultipartViewer,
+  type MultipartViewerProps,
+  TextViewer,
+  type TextViewerProps,
+} from "@yaakapp-internal/ui";
+import { type ReactNode, useMemo } from "react";
+import { formatText as engineFormatText } from "../lib/body";
+
+/**
+ * Gives the shared panes the proxy's formatting. Everything else keeps the shared defaults:
+ * plain editors with no templating, state kept for the session, no dialogs.
+ */
+export function ProxyEditorHost({
+  children,
+  formatText = engineFormatText,
+}: {
+  children: ReactNode;
+  /** Pretty-prints a body; the engine's formatter unless replaced */
+  formatText?: TextViewerProps["formatText"];
+}) {
+  // Components made once per formatter, so viewers aren't remounted on every render
+  const host = useMemo<Partial<EditorHost>>(
+    () => ({
+      TextViewer: (props: TextViewerProps) => <TextViewer formatText={formatText} {...props} />,
+      MultipartViewer: (props: MultipartViewerProps) => (
+        <MultipartViewer textViewerProps={{ formatText }} {...props} />
+      ),
+    }),
+    [formatText],
+  );
+  return <EditorHostProvider value={host}>{children}</EditorHostProvider>;
+}