diff --git a/apps/yaak-client/components/HttpAuthenticationEditor.tsx b/apps/yaak-client/components/HttpAuthenticationEditor.tsx
index 0da989bcc..159ceb16b 100644
--- a/apps/yaak-client/components/HttpAuthenticationEditor.tsx
+++ b/apps/yaak-client/components/HttpAuthenticationEditor.tsx
@@ -6,7 +6,7 @@ import type {
   Workspace,
 } from "@yaakapp-internal/models";
 import { patchModel } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode } from "@yaakapp-internal/ui";
+import { HStack, Icon, InlineCode, SegmentedControl } from "@yaakapp-internal/ui";
 import { useCallback } from "react";
 import { openFolderSettings } from "../commands/openFolderSettings";
 import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
@@ -21,7 +21,6 @@ import { IconButton } from "./core/IconButton";
 import { Input, type InputProps } from "./core/Input";
 import { Link } from "./core/Link";
 import { RadioDropdown } from "./core/RadioDropdown";
-import { SegmentedControl } from "./core/SegmentedControl";
 import { DynamicForm } from "./DynamicForm";
 import { EmptyStateText } from "./EmptyStateText";
 
diff --git a/apps/yaak-client/components/ImportDataDialog.tsx b/apps/yaak-client/components/ImportDataDialog.tsx
index 43e698e06..50d1f6e9e 100644
--- a/apps/yaak-client/components/ImportDataDialog.tsx
+++ b/apps/yaak-client/components/ImportDataDialog.tsx
@@ -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 {
diff --git a/apps/yaak-client/components/MarkdownEditor.tsx b/apps/yaak-client/components/MarkdownEditor.tsx
index be31570f2..80f540c55 100644
--- a/apps/yaak-client/components/MarkdownEditor.tsx
+++ b/apps/yaak-client/components/MarkdownEditor.tsx
@@ -1,8 +1,8 @@
+import { SegmentedControl } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useRef, useState } from "react";
 import type { EditorProps } from "./core/Editor/Editor";
 import { Editor } from "./core/Editor/LazyEditor";
-import { SegmentedControl } from "./core/SegmentedControl";
 import { Markdown } from "./Markdown";
 
 type ViewMode = "edit" | "preview";
diff --git a/apps/yaak-client/components/Settings/SettingsAgents.tsx b/apps/yaak-client/components/Settings/SettingsAgents.tsx
index 4ba04091c..bdc0f629f 100644
--- a/apps/yaak-client/components/Settings/SettingsAgents.tsx
+++ b/apps/yaak-client/components/Settings/SettingsAgents.tsx
@@ -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,
diff --git a/apps/yaak-proxy/components/FlowBodyViewer.test.tsx b/apps/yaak-proxy/components/FlowBodyViewer.test.tsx
new file mode 100644
index 000000000..f7b9f63da
--- /dev/null
+++ b/apps/yaak-proxy/components/FlowBodyViewer.test.tsx
@@ -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");
+  });
+});
diff --git a/apps/yaak-proxy/components/FlowBodyViewer.tsx b/apps/yaak-proxy/components/FlowBodyViewer.tsx
index e63850af9..656eb3673 100644
--- a/apps/yaak-proxy/components/FlowBodyViewer.tsx
+++ b/apps/yaak-proxy/components/FlowBodyViewer.tsx
@@ -2,22 +2,32 @@ 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, useMemo, useState } from "react";
+import { bodyViewModeAtom } from "../lib/atoms";
 import {
   bodyAsText,
   bodyImageType,
@@ -33,15 +43,97 @@ import { useSaveFlowBody } from "../lib/flowActions";
 interface Props {
   flow: Flow;
   which: FlowBody;
-  pretty: boolean;
+  /** A URL-encoded body's fields, shown as its formatted view */
+  form?: 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({ ...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 (
@@ -69,12 +161,28 @@ export function FlowBodyViewer({ flow, which, pretty }: Props) {
   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;
+  let textViewer = 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 (mime.startsWith("multipart/") && pretty) {
+  } else if (prettyView === "parts" && pretty) {
     const boundary = contentType?.match(/;\s*boundary="?([^";]+)"?/i)?.[1] ?? "unknown";
     viewer = (
       <MultipartViewer
@@ -88,22 +196,41 @@ export function FlowBodyViewer({ flow, which, pretty }: Props) {
     viewer = <ImageBody bytes={bytes} mime={imageType} />;
   } else if (text == null) {
     viewer = <BinaryBody flow={flow} which={which} bytes={bytes} />;
-  } else if (mime.startsWith("image/svg")) {
-    viewer = <SvgViewer text={text} />;
-  } else if (/csv|tab-separated/.test(mime) && pretty) {
+  } else if (prettyView === "form" && pretty) {
+    viewer = form;
+  } 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 language = languageFromContentType(contentType, text);
-    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} />
-      );
-    }
+    textViewer = true;
+    viewer = (
+      <FlowTextViewer
+        flow={flow}
+        which={which}
+        text={text}
+        language={language}
+        pretty={pretty}
+        modeSwitch={modeSwitch}
+      />
+    );
   }
 
-  if (!truncated && decodeError == null) return viewer;
+  // The text viewer draws the switch in its own bar, beside its filter; the rest get a bar here
+  if (modeSwitch != null && !textViewer) {
+    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_auto_minmax(0,1fr)]">
@@ -168,7 +295,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],
@@ -183,6 +319,8 @@ function FlowTextViewer({
       className="-mr-2 bg-surface"
       formatText={formatText}
       filterText={runFilter}
+      ownActionsBar
+      pinnedActions={modeSwitch}
     />
   );
 }
diff --git a/apps/yaak-proxy/components/FlowCard.tsx b/apps/yaak-proxy/components/FlowCard.tsx
index 6fd906c9c..78abde9bd 100644
--- a/apps/yaak-proxy/components/FlowCard.tsx
+++ b/apps/yaak-proxy/components/FlowCard.tsx
@@ -13,14 +13,13 @@ import {
   IconButton,
   parseCookieHeaders,
   ResponseCookies,
-  type ResponseViewMode,
   SplitLayout,
   Tooltip,
 } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import { useSetAtom } from "jotai";
-import { useCallback, useMemo, useState } from "react";
-import { BODY_TYPE_BINARY } from "@yaakapp-internal/ui/httpTypes";
+import { useCallback, useMemo } from "react";
+import { BODY_TYPE_FORM_URLENCODED } from "@yaakapp-internal/ui/httpTypes";
 import { findHeader } from "../lib/body";
 import {
   browserTabMemory,
@@ -166,12 +165,15 @@ function FlowRequestHalf({ flow }: { flow: Flow }) {
       renderBody={(editor) => (
         <FlowRequestBody
           body={body}
-          editor={editor}
-          // The proxy's own viewer, with its hexdump and save, rather than a size alone
-          binaryViewer={
-            request.bodyType === BODY_TYPE_BINARY ? (
-              <FlowBodyViewer flow={flow} which="request" pretty />
-            ) : null
+          // The response's viewer choice, with the form's fields as a URL-encoded body's
+          // formatted view
+          viewer={
+            <FlowBodyViewer
+              flow={flow}
+              which="request"
+              form={request.bodyType === BODY_TYPE_FORM_URLENCODED ? editor : undefined}
+              hideCutNote
+            />
           }
           requestSize={flow.requestSize}
         />
@@ -199,7 +201,6 @@ function UrlLine({ flow }: { flow: Flow }) {
 }
 
 function FlowResponseHalf({ flow, className }: { flow: Flow; className: string }) {
-  const [viewMode, setViewMode] = useState<ResponseViewMode>("pretty");
   // 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;
@@ -268,16 +269,12 @@ function FlowResponseHalf({ flow, className }: { flow: Flow; className: string }
       body={loader}
       requestBody={null}
       emptyState={<EmptyStateText>Waiting for a response</EmptyStateText>}
-      viewMode={viewMode}
-      onViewModeChange={setViewMode}
       tabsStorageKey="proxy_response_tabs"
       activeTabKey={flow.id}
       defaultTab={defaultTab}
       onTabChange={onTabChange}
       extraTabs={extraTabs}
-      renderBodyViewer={() => (
-        <FlowBodyViewer flow={flow} which="response" pretty={viewMode === "pretty"} />
-      )}
+      renderBodyViewer={() => <FlowBodyViewer flow={flow} which="response" />}
       statusLineCenter={
         flow.responseTruncated ? (
           <span
diff --git a/apps/yaak-proxy/components/FlowRequestBody.test.tsx b/apps/yaak-proxy/components/FlowRequestBody.test.tsx
index b6d4f3a5d..cc4b54f44 100644
--- a/apps/yaak-proxy/components/FlowRequestBody.test.tsx
+++ b/apps/yaak-proxy/components/FlowRequestBody.test.tsx
@@ -21,17 +21,9 @@ const data = (truncated = false): FlowBodyData => ({
   storedSize: 7,
 });
 
-function render(
-  body: Parameters<typeof FlowRequestBody>[0]["body"],
-  binaryViewer: string | null = null,
-) {
+function render(body: Parameters<typeof FlowRequestBody>[0]["body"]) {
   return renderToStaticMarkup(
-    <FlowRequestBody
-      body={body}
-      editor={<div>EDITOR</div>}
-      binaryViewer={binaryViewer == null ? null : <div>{binaryViewer}</div>}
-      requestSize={2048}
-    />,
+    <FlowRequestBody body={body} viewer={<div>EDITOR</div>} requestSize={2048} />,
   );
 }
 
@@ -49,9 +41,8 @@ describe("FlowRequestBody", () => {
     expect(html).toContain("LOADING");
   });
 
-  test("the editor once loaded, the proxy's viewer for a binary body", () => {
+  test("the viewer once loaded", () => {
     expect(render({ data: data(), isLoading: false, error: null })).toContain("EDITOR");
-    expect(render({ data: data(), isLoading: false, error: null }, "HEXDUMP")).toContain("HEXDUMP");
   });
 
   test("a cut body says how much was kept", () => {
diff --git a/apps/yaak-proxy/components/FlowRequestBody.tsx b/apps/yaak-proxy/components/FlowRequestBody.tsx
index 162a0adcd..11d6cf69d 100644
--- a/apps/yaak-proxy/components/FlowRequestBody.tsx
+++ b/apps/yaak-proxy/components/FlowRequestBody.tsx
@@ -13,19 +13,17 @@ import type { FlowBodyData } from "../lib/flowViews";
 interface Props {
   /** The request body as the engine's body RPC returned it */
   body: HttpBodyResult<FlowBodyData | null>;
-  /** The shared editor for the body's type */
-  editor: ReactNode;
-  /** The proxy's own viewer, for a body that isn't text; null for one that is */
-  binaryViewer: ReactNode | 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 editor, or why it isn't there yet. A body that
+ * 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, editor, binaryViewer, requestSize }: Props) {
+export function FlowRequestBody({ body, viewer, requestSize }: Props) {
   if (body.error != null) {
     return (
       <Banner color="danger" className="text-sm">
@@ -40,7 +38,6 @@ export function FlowRequestBody({ body, editor, binaryViewer, requestSize }: Pro
       </EmptyStateText>
     );
   }
-  if (binaryViewer != null) return binaryViewer;
   if (body.data?.truncated) {
     return (
       <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
@@ -51,9 +48,9 @@ export function FlowRequestBody({ body, editor, binaryViewer, requestSize }: Pro
             </span>
           </Tooltip>
         </Banner>
-        <div className="min-h-0">{editor}</div>
+        <div className="min-h-0">{viewer}</div>
       </div>
     );
   }
-  return editor;
+  return viewer;
 }
diff --git a/apps/yaak-proxy/harness/fixtures.ts b/apps/yaak-proxy/harness/fixtures.ts
index 7368f528c..0bca85476 100644
--- a/apps/yaak-proxy/harness/fixtures.ts
+++ b/apps/yaak-proxy/harness/fixtures.ts
@@ -75,6 +75,27 @@ const graphqlRequest = JSON.stringify({
   operationName: "GetViewer",
 });
 const formRequest = "grant_type=client_credentials&client_id=yaak-proxy&scope=read+write";
+const csvResponse = [
+  "id,email,plan,created_at",
+  "1,ada@example.com,pro,2026-10-01",
+  "2,grace@example.com,team,2026-10-14",
+  "3,linus@example.com,free,2026-11-02",
+].join("\n");
+const multipartBoundary = "yaakBoundary7MA4YWxk";
+const multipartRequest = [
+  `--${multipartBoundary}`,
+  'Content-Disposition: form-data; name="title"',
+  "",
+  "Quarterly report",
+  `--${multipartBoundary}`,
+  'Content-Disposition: form-data; name="meta"; filename="meta.json"',
+  "Content-Type: application/json",
+  "",
+  '{"pages":12,"draft":false}',
+  `--${multipartBoundary}--`,
+  "",
+].join("\r\n");
+const textResponse = "Uploaded 2 parts";
 const htmlResponse =
   "<!doctype html><html><body style='font-family:sans-serif'><h1>Signed in</h1><p>You can close this window.</p></body></html>";
 // A 24x24 PNG gradient
@@ -198,6 +219,41 @@ export const fixtures: FlowFixture[] = [
     requestBody: body(graphqlRequest),
     responseBody: body('{"data":{"viewer":{"login":"yaak"}}}'),
   },
+  {
+    label: "CSV GET",
+    flow: {
+      ...base,
+      id: "fl_csv",
+      url: "https://api.example.com/users/export.csv",
+      contentType: "text/csv",
+      requestHeaders: [{ name: "Accept", value: "text/csv" }],
+      responseHeaders: [{ name: "Content-Type", value: "text/csv; charset=utf-8" }],
+      responseSize: csvResponse.length,
+    },
+    requestBody: body(""),
+    responseBody: body(csvResponse),
+  },
+  {
+    label: "Multipart POST",
+    flow: {
+      ...base,
+      id: "fl_multipart",
+      method: "POST",
+      url: "https://api.example.com/reports",
+      contentType: "text/plain",
+      requestHeaders: [
+        {
+          name: "Content-Type",
+          value: `multipart/form-data; boundary=${multipartBoundary}`,
+        },
+      ],
+      responseHeaders: [{ name: "Content-Type", value: "text/plain; charset=utf-8" }],
+      requestSize: multipartRequest.length,
+      responseSize: textResponse.length,
+    },
+    requestBody: body(multipartRequest),
+    responseBody: body(textResponse),
+  },
   {
     label: "gRPC call",
     flow: {
diff --git a/apps/yaak-proxy/lib/atoms.ts b/apps/yaak-proxy/lib/atoms.ts
index 291ddef95..e68132615 100644
--- a/apps/yaak-proxy/lib/atoms.ts
+++ b/apps/yaak-proxy/lib/atoms.ts
@@ -1,5 +1,5 @@
 import type { Flow } from "@yaakapp-internal/proxy-lib";
-import type { SplitLayoutLayout } from "@yaakapp-internal/ui";
+import type { ResponseViewMode, SplitLayoutLayout } from "@yaakapp-internal/ui";
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 
@@ -22,3 +22,11 @@ export const helperDialogOpenAtom = atom(false);
 
 /** Stacked by default; the header's toggle switches to side by side */
 export const flowLayoutAtom = atomWithStorage<SplitLayoutLayout>("flow_layout", "vertical");
+
+/** Bodies show formatted or raw, one choice for both halves of every flow */
+export const bodyViewModeAtom = atomWithStorage<ResponseViewMode>(
+  "body_view_mode",
+  "pretty",
+  undefined,
+  { getOnInit: true },
+);
diff --git a/packages/ui/src/components/ActionsBar.tsx b/packages/ui/src/components/ActionsBar.tsx
new file mode 100644
index 000000000..891d18395
--- /dev/null
+++ b/packages/ui/src/components/ActionsBar.tsx
@@ -0,0 +1,36 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+/** For the positioned element an `ActionsBar` sits in: hovering it brings the bar's actions in */
+export const ACTIONS_BAR_CONTAINER = "relative group/actions";
+
+/** Set on an action's outermost element to keep it in view, as a control that shows state does */
+export const PINNED_ACTION = { "data-pinned": true } as const;
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * A row of actions over the bottom-right corner of the content in an `ACTIONS_BAR_CONTAINER`:
+ * small bordered buttons on the surface colour, so they read over text. Each fades in while the
+ * container is hovered or the action has focus, unless it carries `PINNED_ACTION`. The row lets
+ * clicks through to the content between its actions.
+ */
+export function ActionsBar({ children, className }: Props) {
+  return (
+    <div
+      className={classNames(
+        className,
+        "absolute bottom-2 left-0 right-0 z-10 flex items-center justify-end gap-1",
+        "pointer-events-none",
+        "*:pointer-events-auto *:bg-surface *:shadow *:transition-opacity *:transform-gpu",
+        "[&>:not([data-pinned])]:opacity-0",
+        "group-hover/actions:*:opacity-100! *:focus-within:opacity-100! *:hover:opacity-100!",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/FormatAction.test.tsx b/packages/ui/src/components/FormatAction.test.tsx
new file mode 100644
index 000000000..c58ff4c11
--- /dev/null
+++ b/packages/ui/src/components/FormatAction.test.tsx
@@ -0,0 +1,62 @@
+import { EditorState } from "@codemirror/state";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test, vi } from "vite-plus/test";
+import { FormatAction, type FormattableEditor, formatEditor } from "./FormatAction";
+
+/** An editor as far as formatting reaches into one, recording its changes and blurs */
+function fakeEditor(text: string) {
+  const changes: string[] = [];
+  const blur = vi.fn();
+  let state = EditorState.create({ doc: text });
+  const editor: FormattableEditor & { changes: string[]; blur: typeof blur } = {
+    get state() {
+      return state;
+    },
+    dispatch: ((spec: { changes: { from: number; to: number; insert: string } }) => {
+      state = state.update(spec).state;
+      changes.push(state.doc.toString());
+    }) as FormattableEditor["dispatch"],
+    contentDOM: { blur } as unknown as HTMLElement,
+    changes,
+    blur,
+  };
+  return editor;
+}
+
+describe("formatEditor", () => {
+  test("replaces the document with its formatted version and blurs", async () => {
+    const editor = fakeEditor('{"a":1}');
+    await formatEditor(editor, async (t) => JSON.stringify(JSON.parse(t), null, 2));
+    expect(editor.state.doc.toString()).toBe('{\n  "a": 1\n}');
+    expect(editor.changes).toHaveLength(1);
+    expect(editor.blur).toHaveBeenCalledOnce();
+  });
+
+  test("leaves a document that is already formatted alone", async () => {
+    const editor = fakeEditor("same");
+    await formatEditor(editor, async (t) => t);
+    expect(editor.changes).toHaveLength(0);
+  });
+
+  test("drops a result for text that changed while it was formatting", async () => {
+    const editor = fakeEditor("before");
+    await formatEditor(editor, async () => {
+      editor.dispatch({ changes: { from: 0, to: 6, insert: "typed" } });
+      return "formatted";
+    });
+    expect(editor.state.doc.toString()).toBe("typed");
+  });
+});
+
+describe("FormatAction", () => {
+  test("is offered for an editable editor only", () => {
+    const editor = { current: null };
+    const format = async (t: string) => t;
+    expect(renderToStaticMarkup(<FormatAction editor={editor} format={format} />)).toContain(
+      "Reformat contents",
+    );
+    expect(renderToStaticMarkup(<FormatAction editor={editor} format={format} readOnly />)).toBe(
+      "",
+    );
+  });
+});
diff --git a/packages/ui/src/components/FormatAction.tsx b/packages/ui/src/components/FormatAction.tsx
new file mode 100644
index 000000000..b79f44498
--- /dev/null
+++ b/packages/ui/src/components/FormatAction.tsx
@@ -0,0 +1,49 @@
+import type { EditorView } from "@codemirror/view";
+import type { RefObject } from "react";
+import { IconButton } from "./IconButton";
+
+/** What reformatting needs of an editor; the `EditorView` an editor's `setRef` hands over has it */
+export type FormattableEditor = Pick<EditorView, "state" | "dispatch" | "contentDOM">;
+
+/**
+ * Replaces the editor's document with `format`'s version of it, and blurs it, since the cursor
+ * resets anyway. The change goes through the editor's own `onChange`, as typing does.
+ */
+export async function formatEditor(
+  editor: FormattableEditor,
+  format: (text: string) => Promise<string>,
+): Promise<void> {
+  const before = editor.state.doc.toString();
+  const formatted = await format(before);
+  // Typed into while formatting: the result is out of date
+  if (editor.state.doc.toString() !== before) return;
+  if (formatted === before) return;
+  editor.dispatch({ changes: { from: 0, to: editor.state.doc.length, insert: formatted } });
+  editor.contentDOM.blur();
+}
+
+interface Props {
+  /** The editor to reformat, as its `setRef` set it */
+  editor: RefObject<FormattableEditor | null>;
+  format: (text: string) => Promise<string>;
+  /** A read-only editor can't be reformatted, so offers nothing */
+  readOnly?: boolean;
+}
+
+/** Reformats an editable editor's contents, for an `ActionsBar` */
+export function FormatAction({ editor, format, readOnly }: Props) {
+  if (readOnly) return null;
+  return (
+    <IconButton
+      showConfirm
+      size="sm"
+      title="Reformat contents"
+      icon="magic_wand"
+      variant="border"
+      onClick={async () => {
+        if (editor.current == null) return;
+        await formatEditor(editor.current, format);
+      }}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/core/SegmentedControl.tsx b/packages/ui/src/components/SegmentedControl.tsx
similarity index 73%
rename from apps/yaak-client/components/core/SegmentedControl.tsx
rename to packages/ui/src/components/SegmentedControl.tsx
index b2ab147f5..74092c9f2 100644
--- a/apps/yaak-client/components/core/SegmentedControl.tsx
+++ b/packages/ui/src/components/SegmentedControl.tsx
@@ -1,19 +1,33 @@
-import type { IconProps } from "@yaakapp-internal/ui";
-import { HStack, useStateWithDeps, IconTooltip, Label } from "@yaakapp-internal/ui";
+import { generateId } from "@yaakapp-internal/lib/generateId";
 import classNames from "classnames";
 import { type ReactNode, useRef } from "react";
-import { Button } from "./Button";
+import { useStateWithDeps } from "../hooks/useStateWithDeps";
+import { Button, CONTROL_TOOLTIP_DELAY } from "./Button";
+import type { IconProps } from "./Icon";
 import { IconButton, type IconButtonProps } from "./IconButton";
-import { generateId } from "@yaakapp-internal/lib/generateId";
+import { IconTooltip } from "./IconTooltip";
+import { Label } from "./Label";
+import { HStack } from "./Stacks";
+import { Tooltip } from "./Tooltip";
 
-interface Props<T extends string> {
-  options: { value: T; label: string; icon?: IconProps["icon"] }[];
+export interface SegmentedControlOption<T extends string> {
+  value: T;
+  label: string;
+  icon?: IconProps["icon"];
+  /** Shown on hover over a text option, leaving its label as its name */
+  tooltip?: string;
+}
+
+export interface SegmentedControlProps<T extends string> {
+  options: SegmentedControlOption<T>[];
   onChange: (value: T) => void;
   value: T;
   name: string;
   size?: IconButtonProps["size"];
   label: string;
   className?: string;
+  /** Replaces the full width the control takes by default */
+  containerClassName?: string;
   hideLabel?: boolean;
   labelClassName?: string;
   help?: ReactNode;
@@ -29,7 +43,8 @@ export function SegmentedControl<T extends string>({
   labelClassName,
   help,
   className,
-}: Props<T>) {
+  containerClassName = "w-full",
+}: SegmentedControlProps<T>) {
   const [selectedValue, setSelectedValue] = useStateWithDeps<T>(value, [value]);
   const containerRef = useRef<HTMLDivElement>(null);
   const id = useRef(`input-${generateId()}`);
@@ -38,8 +53,13 @@ export function SegmentedControl<T extends string>({
   const inlineHelp =
     hideLabel && help ? <IconTooltip tabIndex={-1} content={help} iconSize="xs" /> : null;
 
+  const focusOption = (index: number) => {
+    const option = containerRef.current?.querySelectorAll<HTMLElement>('[role="radio"]')[index];
+    option?.focus();
+  };
+
   return (
-    <div className="w-full grid">
+    <div className={classNames(containerClassName, "grid")}>
       <Label
         htmlFor={id.current}
         help={hideLabel ? undefined : help}
@@ -67,16 +87,14 @@ export function SegmentedControl<T extends string>({
             if (options[newIndex]) {
               setSelectedValue(options[newIndex].value);
             }
-            const child = containerRef.current?.children[newIndex] as HTMLButtonElement;
-            child.focus();
+            focusOption(newIndex);
           } else if (e.key === "ArrowLeft") {
             e.preventDefault();
             const newIndex = Math.abs((selectedIndex - 1) % options.length);
             if (options[newIndex]) {
               setSelectedValue(options[newIndex].value);
             }
-            const child = containerRef.current?.children[newIndex] as HTMLButtonElement;
-            child.focus();
+            focusOption(newIndex);
           }
         }}
       >
@@ -85,7 +103,7 @@ export function SegmentedControl<T extends string>({
           const isActive = value === o.value;
           const rightSlot = i === options.length - 1 ? inlineHelp : null;
           if (o.icon == null) {
-            return (
+            const button = (
               <Button
                 key={o.label}
                 aria-checked={isActive}
@@ -104,6 +122,13 @@ export function SegmentedControl<T extends string>({
                 {o.label}
               </Button>
             );
+            return o.tooltip == null ? (
+              button
+            ) : (
+              <Tooltip key={o.label} wrap content={o.tooltip} delay={CONTROL_TOOLTIP_DELAY}>
+                {button}
+              </Tooltip>
+            );
           } else {
             return (
               <IconButton
diff --git a/packages/ui/src/components/http/BodyViewModeSwitch.test.tsx b/packages/ui/src/components/http/BodyViewModeSwitch.test.tsx
new file mode 100644
index 000000000..ffdb05693
--- /dev/null
+++ b/packages/ui/src/components/http/BodyViewModeSwitch.test.tsx
@@ -0,0 +1,75 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test } from "vite-plus/test";
+import { ActionsBar } from "../ActionsBar";
+import { IconButton } from "../IconButton";
+import { BodyViewModeSwitch, prettyViewFor, viewModeLabels } from "./BodyViewModeSwitch";
+
+describe("prettyViewFor", () => {
+  test("names the formatted view for each format", () => {
+    const cases: [string | null, string | null, boolean, string | null][] = [
+      ["application/json", "json", false, "formatted"],
+      ["application/xml", "xml", false, "formatted"],
+      ["text/html", "html", false, "formatted"],
+      ["text/html", "html", true, "preview"],
+      ["text/csv", "text", false, "table"],
+      ["text/tab-separated-values", "text", false, "table"],
+      ["multipart/form-data", null, false, "parts"],
+      ["image/svg+xml", "xml", false, "preview"],
+    ];
+    for (const [mimeType, language, previewHtml, expected] of cases) {
+      expect(prettyViewFor({ mimeType, language, previewHtml }), `${mimeType}`).toBe(expected);
+    }
+  });
+
+  test("a body with one view has no switch", () => {
+    expect(prettyViewFor({ mimeType: "text/plain", language: "text" })).toBeNull();
+    expect(prettyViewFor({ mimeType: null, language: "text" })).toBeNull();
+    expect(prettyViewFor({ mimeType: "application/javascript", language: "javascript" })).toBe(
+      null,
+    );
+  });
+
+  test("a body's text decides over a missing content type", () => {
+    expect(prettyViewFor({ mimeType: null, language: "json" })).toBe("formatted");
+  });
+});
+
+describe("BodyViewModeSwitch", () => {
+  test("its first state is named for the format, its second is Raw", () => {
+    expect(viewModeLabels("formatted")).toEqual(["Pretty", "Raw"]);
+    expect(viewModeLabels("table")).toEqual(["Table", "Raw"]);
+    expect(viewModeLabels("parts")).toEqual(["Parts", "Raw"]);
+    expect(viewModeLabels("preview")).toEqual(["Preview", "Raw"]);
+    expect(viewModeLabels("form")).toEqual(["Form", "Raw"]);
+  });
+
+  test("marks the chosen state, and stays in view in an actions bar", () => {
+    const pretty = renderToStaticMarkup(
+      <BodyViewModeSwitch pretty="table" value="pretty" onChange={() => {}} />,
+    );
+    expect(pretty).toContain("data-pinned");
+    expect(pretty).toMatch(/aria-checked="true"[^>]*>.*?Table/);
+    expect(pretty).toMatch(/aria-checked="false"[^>]*>.*?Raw/);
+
+    const raw = renderToStaticMarkup(
+      <BodyViewModeSwitch pretty="table" value="raw" onChange={() => {}} />,
+    );
+    expect(raw).toMatch(/aria-checked="false"[^>]*>.*?Table/);
+    expect(raw).toMatch(/aria-checked="true"[^>]*>.*?Raw/);
+  });
+});
+
+describe("ActionsBar", () => {
+  test("fades its actions in on hover, except a pinned one", () => {
+    const markup = renderToStaticMarkup(
+      <ActionsBar>
+        <IconButton icon="filter" title="Filter" />
+        <BodyViewModeSwitch pretty="formatted" value="pretty" onChange={() => {}} />
+      </ActionsBar>,
+    );
+    expect(markup).toContain("[&amp;&gt;:not([data-pinned])]:opacity-0");
+    expect(markup).toContain("group-hover/actions:*:opacity-100!");
+    expect(markup).toContain('title="Filter"');
+    expect(markup).toContain("data-pinned");
+  });
+});
diff --git a/packages/ui/src/components/http/BodyViewModeSwitch.tsx b/packages/ui/src/components/http/BodyViewModeSwitch.tsx
new file mode 100644
index 000000000..e256b33d6
--- /dev/null
+++ b/packages/ui/src/components/http/BodyViewModeSwitch.tsx
@@ -0,0 +1,77 @@
+import { PINNED_ACTION } from "../ActionsBar";
+import { SegmentedControl } from "../SegmentedControl";
+import type { ResponseViewMode } from "./ResponseBodyViewer";
+
+/** What a body's formatted view shows, which names it in the switch */
+export type PrettyView = "formatted" | "table" | "parts" | "preview" | "form";
+
+const PRETTY_OPTIONS: Record<PrettyView, { label: string; tooltip: string }> = {
+  formatted: { label: "Pretty", tooltip: "Formatted" },
+  table: { label: "Table", tooltip: "As a table" },
+  parts: { label: "Parts", tooltip: "Split into parts" },
+  preview: { label: "Preview", tooltip: "Rendered" },
+  form: { label: "Form", tooltip: "As fields" },
+};
+
+const RAW_OPTION = { label: "Raw", tooltip: "As received" };
+
+/** The switch's labels for a body whose formatted view is `pretty`, its first state first */
+export function viewModeLabels(pretty: PrettyView): [string, string] {
+  return [PRETTY_OPTIONS[pretty].label, RAW_OPTION.label];
+}
+
+/**
+ * The formatted view a text body has, or null when it has only the one view: a table for CSV,
+ * parts for multipart, a rendering for SVG (and HTML, where `previewHtml`), and formatted text
+ * for JSON, XML and HTML.
+ */
+export function prettyViewFor({
+  mimeType,
+  language,
+  previewHtml = false,
+}: {
+  /** The media type, without parameters */
+  mimeType: string | null;
+  /** The language the text viewer would show the body in */
+  language: string | null | undefined;
+  /** HTML renders as a page, rather than formatted text */
+  previewHtml?: boolean;
+}): PrettyView | null {
+  const mime = mimeType?.toLowerCase() ?? "";
+  if (mime.startsWith("multipart/")) return "parts";
+  if (/csv|tab-separated/.test(mime)) return "table";
+  if (mime.startsWith("image/svg")) return "preview";
+  if (language === "html") return previewHtml ? "preview" : "formatted";
+  if (language === "json" || language === "xml") return "formatted";
+  return null;
+}
+
+interface Props {
+  /** The body's formatted view, named in the first state */
+  pretty: PrettyView;
+  value: ResponseViewMode;
+  onChange: (value: ResponseViewMode) => void;
+}
+
+/** Shows a body formatted for its type, or raw as received; for an `ActionsBar`, always in view */
+export function BodyViewModeSwitch({ pretty, value, onChange }: Props) {
+  const prettyOption = PRETTY_OPTIONS[pretty];
+  return (
+    <div {...PINNED_ACTION} className="rounded-md">
+      <SegmentedControl<ResponseViewMode>
+        name="body_view_mode"
+        label="View"
+        hideLabel
+        size="2xs"
+        value={value}
+        onChange={onChange}
+        containerClassName="w-auto"
+        className="p-0.5! gap-0.5! rounded-md! bg-surface! border border-border-subtle"
+        options={[
+          { value: "pretty", ...prettyOption },
+          { value: "raw", ...RAW_OPTION },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/http/ConfirmLargeResponse.tsx b/packages/ui/src/components/http/ConfirmLargeResponse.tsx
index 7e3e3afe6..1e1463c55 100644
--- a/packages/ui/src/components/http/ConfirmLargeResponse.tsx
+++ b/packages/ui/src/components/http/ConfirmLargeResponse.tsx
@@ -24,7 +24,8 @@ interface Props {
   renderCopyButton?: (getText: () => Promise<string | null>) => ReactNode;
 }
 
-const LARGE_BYTES = 2 * 1000 * 1000;
+/** Bytes above which a body is held back until asked for, and opens raw once shown */
+export const LARGE_BODY_BYTES = 2 * 1000 * 1000;
 
 /** Holds back a body big enough to slow the window down, until asked to show it */
 export function ConfirmLargeResponse({
@@ -40,14 +41,14 @@ export function ConfirmLargeResponse({
   const [showLargeResponse, toggleShowLargeResponse] = useToggle();
   const isProbablyText = useMemo(() => isProbablyTextContentType(contentType), [contentType]);
 
-  const isLarge = (contentLength ?? 0) > LARGE_BYTES;
+  const isLarge = (contentLength ?? 0) > LARGE_BODY_BYTES;
   if (!showLargeResponse && isLarge) {
     return (
       <Banner color="primary" className="flex flex-col gap-3">
         <p>
           Showing {noun} over{" "}
           <InlineCode>
-            <SizeTag contentLength={LARGE_BYTES} />
+            <SizeTag contentLength={LARGE_BODY_BYTES} />
           </InlineCode>{" "}
           may impact performance
         </p>
diff --git a/packages/ui/src/components/http/HttpResponsePaneView.tsx b/packages/ui/src/components/http/HttpResponsePaneView.tsx
index 7d0d10537..11b8e2aa5 100644
--- a/packages/ui/src/components/http/HttpResponsePaneView.tsx
+++ b/packages/ui/src/components/http/HttpResponsePaneView.tsx
@@ -43,8 +43,12 @@ export interface HttpResponsePaneViewProps {
   className?: string;
   /** Shown before there's a response */
   emptyState: ReactNode;
-  viewMode: ResponseViewMode;
-  onViewModeChange: (viewMode: ResponseViewMode) => void;
+  viewMode?: ResponseViewMode;
+  /**
+   * Offers the raw view in the Response tab's menu. Left out where the body tab has a view-mode
+   * switch of its own, as the proxy's does
+   */
+  onViewModeChange?: (viewMode: ResponseViewMode) => void;
   /** Where the tab order and the active tab are remembered */
   tabsStorageKey?: string;
   /** Remembers the active tab per request or flow */
@@ -95,7 +99,7 @@ export function HttpResponsePaneView({
   style,
   className,
   emptyState,
-  viewMode,
+  viewMode = "pretty",
   onViewModeChange,
   tabsStorageKey = "http_response_tabs",
   activeTabKey,
@@ -165,21 +169,23 @@ export function HttpResponsePaneView({
       ? cookieCounts.received
       : cookieCounts.sent + cookieCounts.received;
     return [
-      {
-        value: RESPONSE_TAB_BODY,
-        empty: dimEmptyTabs && noBody,
-        options: {
-          value: viewMode,
-          onChange: (v) => onViewModeChange(v === "raw" ? "raw" : "pretty"),
-          items: [
-            { label: "Response", value: "pretty" },
-            ...(mimeType?.startsWith("image")
-              ? []
-              : [{ label: "Response (Raw)", shortLabel: "Raw", value: "raw" }]),
-          ],
-          itemsAfter: itemsAfter.length > 0 ? itemsAfter : undefined,
-        },
-      },
+      onViewModeChange == null && itemsAfter.length === 0
+        ? { value: RESPONSE_TAB_BODY, label: "Response", empty: dimEmptyTabs && noBody }
+        : {
+            value: RESPONSE_TAB_BODY,
+            empty: dimEmptyTabs && noBody,
+            options: {
+              value: viewMode,
+              onChange: (v: string | null) => onViewModeChange?.(v === "raw" ? "raw" : "pretty"),
+              items: [
+                { label: "Response", value: "pretty" },
+                ...(onViewModeChange == null || mimeType?.startsWith("image")
+                  ? []
+                  : [{ label: "Response (Raw)", shortLabel: "Raw", value: "raw" }]),
+              ],
+              itemsAfter: itemsAfter.length > 0 ? itemsAfter : undefined,
+            },
+          },
       ...(requestShownApart
         ? []
         : [
diff --git a/packages/ui/src/components/viewers/TextViewer.tsx b/packages/ui/src/components/viewers/TextViewer.tsx
index 854a15566..1f699ea1b 100644
--- a/packages/ui/src/components/viewers/TextViewer.tsx
+++ b/packages/ui/src/components/viewers/TextViewer.tsx
@@ -1,9 +1,11 @@
 import type { Extension } from "@codemirror/state";
 import { useQuery } from "@tanstack/react-query";
+import classNames from "classnames";
 import type { ReactNode } from "react";
 import { Children, useCallback, useMemo, useState } from "react";
 import { type TextFilterApi, useTextFilter } from "../../hooks/useTextFilter";
 import { docFingerprint } from "../../lib/docFingerprint";
+import { ACTIONS_BAR_CONTAINER, ActionsBar } from "../ActionsBar";
 import type { CodeEditorProps } from "../editor/CodeEditor";
 import { jsonBreadcrumbExtension } from "../editor/json/breadcrumbExtension";
 import type { JsonPathSegment } from "../editor/json/jsonPath";
@@ -20,6 +22,13 @@ export interface TextViewerProps {
   pretty?: boolean;
   className?: string;
   footerActions?: ReactNode;
+  /** Last of the actions and kept while filtering, like a view-mode switch */
+  pinnedActions?: ReactNode;
+  /**
+   * Draws the actions in an `ActionsBar` over the viewer rather than in the editor's own row.
+   * Only the proxy's body tabs set it for now; once every site has moved it goes away
+   */
+  ownActionsBar?: boolean;
   extensions?: Extension[];
   /** Pretty-prints the text when `pretty` is set */
   formatText?: (text: string, language: CodeEditorProps["language"]) => Promise<string>;
@@ -42,6 +51,8 @@ export function TextViewer({
   pretty,
   className,
   footerActions,
+  pinnedActions,
+  ownActionsBar = false,
   extensions,
   formatText,
   filterText,
@@ -121,8 +132,9 @@ export function TextViewer({
 
   const actions = useMemo<ReactNode[]>(() => {
     const nodes: ReactNode[] = isSearching ? [] : Children.toArray(footerActions);
+    const pinned = Children.toArray(pinnedActions);
 
-    if (!canFilter) return nodes;
+    if (!canFilter) return [...nodes, ...pinned];
 
     if (isSearching) {
       nodes.push(
@@ -173,10 +185,11 @@ export function TextViewer({
       );
     }
 
-    return nodes;
+    return [...nodes, ...pinned];
   }, [
     canFilter,
     footerActions,
+    pinnedActions,
     filter,
     filterResult.isPending,
     filterResult.isFetching,
@@ -221,16 +234,19 @@ export function TextViewer({
   }
 
   return (
-    <div className="relative h-full w-full">
+    <div
+      className={classNames("h-full w-full", ownActionsBar ? ACTIONS_BAR_CONTAINER : "relative")}
+    >
       {renderEditor({
         readOnly: true,
         className,
         defaultValue: body,
         language,
-        actions,
+        actions: ownActionsBar ? undefined : actions,
         extensions: extraExtensions,
         stateKey,
       })}
+      {ownActionsBar && actions.length > 0 && <ActionsBar>{actions}</ActionsBar>}
       {showBreadcrumbs && (
         <div className="absolute top-0 right-3 max-w-[70%] pointer-events-none">
           <ResponseBreadcrumbBar
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index a004464d3..7c46383fc 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,3 +1,4 @@
+export { ACTIONS_BAR_CONTAINER, ActionsBar, PINNED_ACTION } from "./components/ActionsBar";
 export type { BannerProps } from "./components/Banner";
 export { Banner } from "./components/Banner";
 export type { ButtonProps } from "./components/Button";
@@ -60,7 +61,13 @@ export type {
 export { eventDeltas, formatEventDelta, formatEventTime } from "./components/events/streamEvents";
 export type { ExternalLinkProps } from "./components/ExternalLink";
 export { ExternalLink } from "./components/ExternalLink";
-export { ConfirmLargeResponse } from "./components/http/ConfirmLargeResponse";
+export type { PrettyView } from "./components/http/BodyViewModeSwitch";
+export {
+  BodyViewModeSwitch,
+  prettyViewFor,
+  viewModeLabels,
+} from "./components/http/BodyViewModeSwitch";
+export { ConfirmLargeResponse, LARGE_BODY_BYTES } from "./components/http/ConfirmLargeResponse";
 export { FormMultipartEditor } from "./components/http/FormMultipartEditor";
 export { FormUrlencodedEditor } from "./components/http/FormUrlencodedEditor";
 export { HeadersEditor } from "./components/http/HeadersEditor";
@@ -125,6 +132,8 @@ export type { SelectProps } from "./components/Select";
 export { Select } from "./components/Select";
 export type { ErrorBoundaryProps } from "./components/ErrorBoundary";
 export { ErrorBoundary } from "./components/ErrorBoundary";
+export type { FormattableEditor } from "./components/FormatAction";
+export { FormatAction, formatEditor } from "./components/FormatAction";
 export { FormattedError } from "./components/FormattedError";
 export { HeaderSize } from "./components/HeaderSize";
 export type { HeadersTableProps } from "./components/HeadersTable";
@@ -147,6 +156,8 @@ export { Overlay } from "./components/Overlay";
 export type { PlainInputProps } from "./components/PlainInput";
 export { PlainInput } from "./components/PlainInput";
 export { Portal } from "./components/Portal";
+export type { SegmentedControlOption, SegmentedControlProps } from "./components/SegmentedControl";
+export { SegmentedControl } from "./components/SegmentedControl";
 export type { SeparatorAction } from "./components/Separator";
 export { Separator } from "./components/Separator";
 export type { SettingRowBaseProps, SettingSnippetLanguage } from "./components/settings/SettingRow";