Add configurable gRPC and WebSocket message size limit (#487)

2026-07-01 10:31:41 +02:00 · 2026-06-30 09:14:41 -07:00
parent d1e6f8fb33
commit bbdfbcb9ca
34 changed files with 1669 additions and 1014 deletions
@@ -10,14 +10,17 @@ import { HStack, Icon, InlineCode } from "@yaakapp-internal/ui";
 import { useCallback } from "react";
 import { openFolderSettings } from "../commands/openFolderSettings";
 import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
+import { useAuthDropdownOptions } from "../hooks/useAuthTab";
 import { useHttpAuthenticationConfig } from "../hooks/useHttpAuthenticationConfig";
 import { useInheritedAuthentication } from "../hooks/useInheritedAuthentication";
 import { useRenderTemplate } from "../hooks/useRenderTemplate";
 import { resolvedModelName } from "../lib/resolvedModelName";
+import { Button } from "./core/Button";
 import { Dropdown, type DropdownItem } from "./core/Dropdown";
 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";
@@ -35,7 +38,8 @@ export function HttpAuthenticationEditor({ model }: Props) {
  );

  const handleChange = useCallback(
-    async (authentication: Record<string, unknown>) => await patchModel(model, { authentication }),
+    async (authentication: Record<string, unknown>) =>
+      await patchModel(model, { authentication }),
    [model],
  );

@@ -47,7 +51,8 @@ export function HttpAuthenticationEditor({ model }: Props) {
    return (
      <EmptyStateText>
        <p>
-          Auth plugin not found for <InlineCode>{model.authenticationType}</InlineCode>
+          Auth plugin not found for{" "}
+          <InlineCode>{model.authenticationType}</InlineCode>
        </p>
      </EmptyStateText>
    );
@@ -56,11 +61,20 @@ export function HttpAuthenticationEditor({ model }: Props) {
  if (inheritedAuth == null) {
    if (model.model === "workspace" || model.model === "folder") {
      return (
-        <EmptyStateText className="flex-col gap-1">
-          <p>
-            Apply auth to all requests in <strong>{resolvedModelName(model)}</strong>
-          </p>
-          <Link href="https://yaak.app/docs/using-yaak/request-inheritance">Documentation</Link>
+        <EmptyStateText className="flex-col gap-3">
+          <div className="not-italic flex flex-col items-center gap-3 text-center">
+            <p className="max-w-md text-sm text-text-subtle">
+              Choose an auth method to apply it to all requests in{" "}
+              <strong className="font-semibold text-text-subtle">
+                {resolvedModelName(model)}
+              </strong>
+              .
+            </p>
+            <AuthenticationTypeDropdown model={model} />
+            <Link href="https://yaak.app/docs/using-yaak/request-inheritance">
+              Documentation
+            </Link>
+          </div>
        </EmptyStateText>
      );
    }
@@ -83,7 +97,8 @@ export function HttpAuthenticationEditor({ model }: Props) {
            type="submit"
            className="underline hover:text-text"
            onClick={() => {
-              if (inheritedAuth.model === "folder") openFolderSettings(inheritedAuth.id, "auth");
+              if (inheritedAuth.model === "folder")
+                openFolderSettings(inheritedAuth.id, "auth");
              else openWorkspaceSettings("auth");
            }}
          >
@@ -103,7 +118,8 @@ export function HttpAuthenticationEditor({ model }: Props) {
            hideLabel
            name="enabled"
            value={
-              model.authentication.disabled === false || model.authentication.disabled == null
+              model.authentication.disabled === false ||
+              model.authentication.disabled == null
                ? "__TRUE__"
                : model.authentication.disabled === true
                  ? "__FALSE__"
@@ -151,7 +167,9 @@ export function HttpAuthenticationEditor({ model }: Props) {
              className="w-full"
              stateKey={`auth.${model.id}.dynamic`}
              value={model.authentication.disabled}
-              onChange={(v) => handleChange({ ...model.authentication, disabled: v })}
+              onChange={(v) =>
+                handleChange({ ...model.authentication, disabled: v })
+              }
            />
          </div>
        )}
@@ -169,6 +187,33 @@ export function HttpAuthenticationEditor({ model }: Props) {
  );
 }

+function AuthenticationTypeDropdown({ model }: Props) {
+  const options = useAuthDropdownOptions(model);
+
+  if (options == null) return null;
+
+  return (
+    <RadioDropdown
+      items={options.items}
+      itemsAfter={options.itemsAfter}
+      itemsBefore={options.itemsBefore}
+      value={options.value}
+      onChange={options.onChange}
+    >
+      <Button
+        color="secondary"
+        variant="border"
+        size="sm"
+        rightSlot={
+          <Icon icon="chevron_down" size="sm" className="text-text-subtle" />
+        }
+      >
+        Select Auth
+      </Button>
+    </RadioDropdown>
+  );
+}
+
 function AuthenticationDisabledInput({
  value,
  onChange,
@@ -198,7 +243,11 @@ function AuthenticationDisabledInput({
      rightSlot={
        <div className="px-1 flex items-center">
          <div className="rounded-full bg-surface-highlight text-xs px-1.5 py-0.5 text-text-subtle whitespace-nowrap">
-            {rendered.isPending ? "loading" : rendered.data ? "enabled" : "disabled"}
+            {rendered.isPending
+              ? "loading"
+              : rendered.data
+                ? "enabled"
+                : "disabled"}
          </div>
        </div>
      }
@@ -13,6 +13,7 @@ import {
  modelSupportsSetting,
  type RequestSettingDefinition,
  SETTING_FOLLOW_REDIRECTS,
+  SETTING_REQUEST_MESSAGE_SIZE,
  SETTING_REQUEST_TIMEOUT,
  SETTING_SEND_COOKIES,
  SETTING_STORE_COOKIES,
@@ -22,21 +23,44 @@ import { Checkbox } from "./core/Checkbox";
 import { PlainInput } from "./core/PlainInput";
 import {
  SettingOverrideRow,
+  SettingRow,
  SettingRowBoolean,
-  SettingRowNumber,
  SettingsList,
  SettingsSection,
 } from "./core/SettingRow";

+const BYTES_PER_MB = 1024 * 1024;
+const MAX_REQUEST_MESSAGE_SIZE_BYTES = 2_147_483_647;
+const MAX_MESSAGE_SIZE_MB = MAX_REQUEST_MESSAGE_SIZE_BYTES / BYTES_PER_MB;
+
 interface Props {
  showSectionTitles?: boolean;
  model: ModelWithSettings;
 }

-type ModelWithSettings = Workspace | Folder | HttpRequest | WebsocketRequest | GrpcRequest;
+type ModelWithSettings =
+  | Workspace
+  | Folder
+  | HttpRequest
+  | WebsocketRequest
+  | GrpcRequest;
 type ModelWithHttpSettings = Workspace | Folder | HttpRequest;
-type ModelWithTlsSettings = Workspace | Folder | HttpRequest | WebsocketRequest | GrpcRequest;
-type ModelWithCookieSettings = Workspace | Folder | HttpRequest | WebsocketRequest;
+type ModelWithTlsSettings =
+  | Workspace
+  | Folder
+  | HttpRequest
+  | WebsocketRequest
+  | GrpcRequest;
+type ModelWithCookieSettings =
+  | Workspace
+  | Folder
+  | HttpRequest
+  | WebsocketRequest;
+type ModelWithMessageSizeSettings =
+  | Workspace
+  | Folder
+  | WebsocketRequest
+  | GrpcRequest;
 type BooleanSetting = boolean | InheritedBoolSetting;
 type IntegerSetting = number | InheritedIntSetting;
 type CookieSettingsPatch = {
@@ -50,12 +74,19 @@ type HttpSettingsPatch = {
 type TlsSettingsPatch = {
  settingValidateCertificates?: ModelWithTlsSettings["settingValidateCertificates"];
 };
+type MessageSizeSettingsPatch = {
+  settingRequestMessageSize?: ModelWithMessageSizeSettings["settingRequestMessageSize"];
+};

-export function ModelSettingsEditor({ model, showSectionTitles = false }: Props) {
+export function ModelSettingsEditor({
+  model,
+  showSectionTitles = false,
+}: Props) {
  const ancestors = useModelAncestors(model);
  const supportsHttpSettings = modelSupportsHttpSettings(model);
  const supportsCookieSettings = modelSupportsCookieSettings(model);
  const supportsTlsSettings = modelSupportsTlsSettings(model);
+  const supportsMessageSizeSettings = modelSupportsMessageSizeSettings(model);

  return (
    <SettingsList className="space-y-8">
@@ -77,6 +108,22 @@ export function ModelSettingsEditor({ model, showSectionTitles = false }: Props)
              }
            />
          )}
+          {supportsMessageSizeSettings && (
+            <MessageSizeSettingRow
+              settingDefinition={SETTING_REQUEST_MESSAGE_SIZE}
+              setting={model.settingRequestMessageSize}
+              inheritedValue={resolveInheritedValue(
+                ancestors,
+                SETTING_REQUEST_MESSAGE_SIZE.modelKey,
+                model.settingRequestMessageSize,
+              )}
+              onChange={(settingRequestMessageSize) =>
+                patchMessageSizeSettings(model, {
+                  settingRequestMessageSize,
+                })
+              }
+            />
+          )}
          <BooleanSettingRow
            settingDefinition={SETTING_VALIDATE_CERTIFICATES}
            setting={model.settingValidateCertificates}
@@ -110,7 +157,9 @@ export function ModelSettingsEditor({ model, showSectionTitles = false }: Props)
        </SettingsSection>
      )}
      {supportsCookieSettings && (
-        <SettingsSection title={supportsTlsSettings || showSectionTitles ? "Cookies" : null}>
+        <SettingsSection
+          title={supportsTlsSettings || showSectionTitles ? "Cookies" : null}
+        >
          <BooleanSettingRow
            settingDefinition={SETTING_SEND_COOKIES}
            setting={model.settingSendCookies}
@@ -158,46 +207,103 @@ export function countOverriddenSettings(model: ModelWithSettings) {
    settings.push(model.settingFollowRedirects, model.settingRequestTimeout);
  }

-  return settings.filter((setting) => isInheritedSetting(setting) && setting.enabled === true)
-    .length;
+  if (modelSupportsMessageSizeSettings(model)) {
+    settings.push(model.settingRequestMessageSize);
+  }
+
+  return settings.filter(
+    (setting) => isInheritedSetting(setting) && setting.enabled === true,
+  ).length;
 }

-function patchCookieSettings(model: ModelWithCookieSettings, patch: Partial<CookieSettingsPatch>) {
-  if (model.model === "workspace") return patchModel(model, patch as Partial<Workspace>);
-  if (model.model === "folder") return patchModel(model, patch as Partial<Folder>);
-  if (model.model === "http_request") return patchModel(model, patch as Partial<HttpRequest>);
-  if (model.model === "websocket_request")
-    return patchModel(model, patch as Partial<WebsocketRequest>);
-  throw new Error("Unsupported cookie settings model");
+function patchCookieSettings(
+  model: ModelWithCookieSettings,
+  patch: Partial<CookieSettingsPatch>,
+) {
+  switch (model.model) {
+    case "workspace":
+      return patchModel(model, patch as Partial<Workspace>);
+    case "folder":
+      return patchModel(model, patch as Partial<Folder>);
+    case "http_request":
+      return patchModel(model, patch as Partial<HttpRequest>);
+    case "websocket_request":
+      return patchModel(model, patch as Partial<WebsocketRequest>);
+  }
 }

-function patchHttpSettings(model: ModelWithHttpSettings, patch: Partial<HttpSettingsPatch>) {
-  if (model.model === "workspace") return patchModel(model, patch as Partial<Workspace>);
-  if (model.model === "folder") return patchModel(model, patch as Partial<Folder>);
-  return patchModel(model, patch as Partial<HttpRequest>);
+function patchHttpSettings(
+  model: ModelWithHttpSettings,
+  patch: Partial<HttpSettingsPatch>,
+) {
+  switch (model.model) {
+    case "workspace":
+      return patchModel(model, patch as Partial<Workspace>);
+    case "folder":
+      return patchModel(model, patch as Partial<Folder>);
+    case "http_request":
+      return patchModel(model, patch as Partial<HttpRequest>);
+  }
 }

-function patchTlsSettings(model: ModelWithTlsSettings, patch: Partial<TlsSettingsPatch>) {
-  if (model.model === "workspace") return patchModel(model, patch as Partial<Workspace>);
-  if (model.model === "folder") return patchModel(model, patch as Partial<Folder>);
-  if (model.model === "http_request") return patchModel(model, patch as Partial<HttpRequest>);
-  if (model.model === "websocket_request")
-    return patchModel(model, patch as Partial<WebsocketRequest>);
-  return patchModel(model, patch as Partial<GrpcRequest>);
+function patchTlsSettings(
+  model: ModelWithTlsSettings,
+  patch: Partial<TlsSettingsPatch>,
+) {
+  switch (model.model) {
+    case "workspace":
+      return patchModel(model, patch as Partial<Workspace>);
+    case "folder":
+      return patchModel(model, patch as Partial<Folder>);
+    case "http_request":
+      return patchModel(model, patch as Partial<HttpRequest>);
+    case "websocket_request":
+      return patchModel(model, patch as Partial<WebsocketRequest>);
+    case "grpc_request":
+      return patchModel(model, patch as Partial<GrpcRequest>);
+  }
 }

-function modelSupportsHttpSettings(model: ModelWithSettings): model is ModelWithHttpSettings {
+function patchMessageSizeSettings(
+  model: ModelWithMessageSizeSettings,
+  patch: Partial<MessageSizeSettingsPatch>,
+) {
+  switch (model.model) {
+    case "workspace":
+      return patchModel(model, patch as Partial<Workspace>);
+    case "folder":
+      return patchModel(model, patch as Partial<Folder>);
+    case "websocket_request":
+      return patchModel(model, patch as Partial<WebsocketRequest>);
+    case "grpc_request":
+      return patchModel(model, patch as Partial<GrpcRequest>);
+  }
+}
+
+function modelSupportsHttpSettings(
+  model: ModelWithSettings,
+): model is ModelWithHttpSettings {
  return modelSupportsSetting(model, SETTING_REQUEST_TIMEOUT);
 }

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

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

+function modelSupportsMessageSizeSettings(
+  model: ModelWithSettings,
+): model is ModelWithMessageSizeSettings {
+  return modelSupportsSetting(model, SETTING_REQUEST_MESSAGE_SIZE);
+}
+
 function BooleanSettingRow({
  inheritedValue,
  setting,
@@ -211,7 +317,11 @@ function BooleanSettingRow({
 }) {
  const inherited = isInheritedSetting(setting);
  const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+  const value = inherited
+    ? overridden
+      ? setting.value
+      : inheritedValue
+    : setting;

  if (!inherited) {
    return (
@@ -255,19 +365,28 @@ function IntegerSettingRow({
 }) {
  const inherited = isInheritedSetting(setting);
  const overridden = inherited ? setting.enabled === true : false;
-  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+  const value = inherited
+    ? overridden
+      ? setting.value
+      : inheritedValue
+    : setting;

  if (!inherited) {
    return (
-      <SettingRowNumber
-        name={settingDefinition.modelKey}
+      <SettingRow
        title={settingDefinition.title}
        description={settingDefinition.description}
-        value={value}
-        placeholder={`${settingDefinition.defaultValue}`}
-        validate={(value) => value === "" || Number.parseInt(value, 10) >= 0}
-        onChange={(value) => onChange(value)}
-      />
+      >
+        <NumberUnitInput
+          name={settingDefinition.modelKey}
+          label={settingDefinition.title}
+          unit="ms"
+          value={`${value}`}
+          placeholder={`${settingDefinition.defaultValue}`}
+          validate={isValidInteger}
+          onChange={(value) => onChange(parseInteger(value))}
+        />
+      </SettingRow>
    );
  }

@@ -278,21 +397,18 @@ function IntegerSettingRow({
      overridden={overridden}
      onResetOverride={() => onChange({ ...setting, enabled: false })}
    >
-      <PlainInput
-        hideLabel
+      <NumberUnitInput
        name={settingDefinition.modelKey}
        label={settingDefinition.title}
-        size="sm"
-        type="number"
+        unit="ms"
+        value={`${value}`}
        placeholder={`${settingDefinition.defaultValue}`}
-        defaultValue={`${value}`}
-        containerClassName="!w-48"
-        validate={(value) => value === "" || Number.parseInt(value, 10) >= 0}
+        validate={isValidInteger}
        onChange={(value) =>
          onChange({
            ...setting,
            enabled: true,
-            value: Number.parseInt(value, 10) || 0,
+            value: parseInteger(value),
          })
        }
      />
@@ -300,6 +416,141 @@ function IntegerSettingRow({
  );
 }

+function MessageSizeSettingRow({
+  inheritedValue,
+  setting,
+  settingDefinition,
+  onChange,
+}: {
+  inheritedValue: number;
+  setting: IntegerSetting;
+  settingDefinition: RequestSettingDefinition<"settingRequestMessageSize">;
+  onChange: (setting: IntegerSetting) => void;
+}) {
+  const inherited = isInheritedSetting(setting);
+  const overridden = inherited ? setting.enabled === true : false;
+  const value = inherited
+    ? overridden
+      ? setting.value
+      : inheritedValue
+    : setting;
+  const displayValue = formatMegabytes(value);
+  const placeholder = formatMegabytes(settingDefinition.defaultValue);
+
+  if (!inherited) {
+    return (
+      <SettingRow
+        title={settingDefinition.title}
+        description={settingDefinition.description}
+      >
+        <MessageSizeInput
+          name={settingDefinition.modelKey}
+          label={settingDefinition.title}
+          value={displayValue}
+          placeholder={placeholder}
+          onChange={(value) => onChange(parseMegabytes(value))}
+        />
+      </SettingRow>
+    );
+  }
+
+  return (
+    <SettingOverrideRow
+      title={settingDefinition.title}
+      description={settingDefinition.description}
+      overridden={overridden}
+      onResetOverride={() => onChange({ ...setting, enabled: false })}
+    >
+      <MessageSizeInput
+        name={settingDefinition.modelKey}
+        label={settingDefinition.title}
+        value={displayValue}
+        placeholder={placeholder}
+        onChange={(value) =>
+          onChange({
+            ...setting,
+            enabled: true,
+            value: parseMegabytes(value),
+          })
+        }
+      />
+    </SettingOverrideRow>
+  );
+}
+
+function MessageSizeInput({
+  label,
+  name,
+  onChange,
+  placeholder,
+  value,
+}: {
+  label: string;
+  name: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  value: string;
+}) {
+  return (
+    <NumberUnitInput
+      name={name}
+      label={label}
+      unit="MB"
+      value={value}
+      inputMode="decimal"
+      step="any"
+      placeholder={placeholder}
+      validate={isValidMegabytes}
+      onChange={onChange}
+    />
+  );
+}
+
+function NumberUnitInput({
+  inputMode,
+  label,
+  name,
+  onChange,
+  placeholder,
+  step,
+  unit,
+  validate,
+  value,
+}: {
+  inputMode?: "decimal" | "numeric";
+  label: string;
+  name: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  step?: number | "any";
+  unit: string;
+  validate: (value: string) => boolean;
+  value: string;
+}) {
+  return (
+    <PlainInput
+      hideLabel
+      name={name}
+      label={label}
+      size="sm"
+      type="number"
+      inputMode={inputMode}
+      step={step}
+      placeholder={placeholder}
+      defaultValue={value}
+      className="[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      containerClassName="!w-48"
+      validate={validate}
+      rightSlot={
+        <span className="flex self-stretch items-center border-l border-border-subtle px-2 text-xs font-medium text-text-subtle">
+          {unit}
+        </span>
+      }
+      onChange={onChange}
+    />
+  );
+}
+
 function isInheritedSetting<T>(
  setting: T | { enabled?: boolean; value: T },
 ): setting is { enabled?: boolean; value: T } {
@@ -308,7 +559,7 @@ function isInheritedSetting<T>(

 function resolveInheritedValue(
  ancestors: (Folder | Workspace)[],
-  key: "settingRequestTimeout",
+  key: "settingRequestTimeout" | "settingRequestMessageSize",
  fallback: IntegerSetting,
 ): number;
 function resolveInheritedValue(
@@ -338,10 +589,46 @@ function resolveInheritedValue(
 type WorkspaceSettings = Pick<
  Workspace,
  | "settingFollowRedirects"
+  | "settingRequestMessageSize"
  | "settingRequestTimeout"
  | "settingSendCookies"
  | "settingStoreCookies"
  | "settingValidateCertificates"
 >;

-type BooleanWorkspaceSettingKey = Exclude<keyof WorkspaceSettings, "settingRequestTimeout">;
+type BooleanWorkspaceSettingKey = Exclude<
+  keyof WorkspaceSettings,
+  "settingRequestTimeout" | "settingRequestMessageSize"
+>;
+
+function formatMegabytes(bytes: number) {
+  const megabytes = bytes / BYTES_PER_MB;
+  return Number.isInteger(megabytes)
+    ? `${megabytes}`
+    : megabytes.toFixed(3).replace(/\.?0+$/, "");
+}
+
+function parseMegabytes(value: string) {
+  const megabytes = Number(value);
+  return Number.isFinite(megabytes) ? Math.round(megabytes * BYTES_PER_MB) : 0;
+}
+
+function parseInteger(value: string) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? Math.trunc(parsed) : 0;
+}
+
+function isValidInteger(value: string) {
+  const parsed = Number(value);
+  return value === "" || (Number.isInteger(parsed) && parsed >= 0);
+}
+
+function isValidMegabytes(value: string) {
+  if (value === "") return true;
+  const megabytes = Number(value);
+  return (
+    Number.isFinite(megabytes) &&
+    megabytes >= 0 &&
+    megabytes <= MAX_MESSAGE_SIZE_MB
+  );
+}
@@ -2,22 +2,14 @@ import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
 import { Heading, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
-import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
 import { useCheckForUpdates } from "../../hooks/useCheckForUpdates";
 import { appInfo } from "../../lib/appInfo";
-import {
-  SETTING_FOLLOW_REDIRECTS,
-  SETTING_REQUEST_TIMEOUT,
-  SETTING_SEND_COOKIES,
-  SETTING_STORE_COOKIES,
-  SETTING_VALIDATE_CERTIFICATES,
-} from "../../lib/requestSettings";
 import { revealInFinderText } from "../../lib/reveal";
 import { CargoFeature } from "../CargoFeature";
+import { DismissibleBanner } from "../core/DismissibleBanner";
 import { IconButton } from "../core/IconButton";
 import {
  ModelSettingRowBoolean,
-  ModelSettingRowNumber,
  ModelSettingSelectControl,
  SettingValue,
  SettingRow,
@@ -27,20 +19,26 @@ import {
  SettingsSection,
 } from "../core/SettingRow";

+const WORKSPACE_SETTINGS_MOVED_AT = "2026-06-30";
+
 export function SettingsGeneral() {
-  const workspace = useAtomValue(activeWorkspaceAtom);
  const settings = useAtomValue(settingsAtom);
  const checkForUpdates = useCheckForUpdates();

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

+  const showWorkspaceSettingsMovedBanner =
+    settings.createdAt.slice(0, 10) < WORKSPACE_SETTINGS_MOVED_AT;
+
  return (
    <VStack space={1.5} className="mb-4">
      <div className="mb-4">
        <Heading>General</Heading>
-        <p className="text-text-subtle">Configure general settings for update behavior and more.</p>
+        <p className="text-text-subtle">
+          Configure general settings for update behavior and more.
+        </p>
      </div>
      <SettingsList className="space-y-8">
        <CargoFeature feature="updater">
@@ -76,7 +74,9 @@ export function SettingsGeneral() {
              description="Choose whether updates are installed automatically or manually."
              name="autoupdate"
              value={settings.autoupdate ? "auto" : "manual"}
-              onChange={(v) => patchModel(settings, { autoupdate: v === "auto" })}
+              onChange={(v) =>
+                patchModel(settings, { autoupdate: v === "auto" })
+              }
              options={[
                { label: "Automatic", value: "auto" },
                { label: "Manual", value: "manual" },
@@ -108,54 +108,19 @@ export function SettingsGeneral() {
          </SettingsSection>
        </CargoFeature>

-        <SettingsSection
-          title={
-            <>
-              Workspace{" "}
-              <span className="inline-block bg-surface-highlight px-2 py-0.5 rounded text">
-                {workspace.name}
-              </span>
-            </>
-          }
-        >
-          <ModelSettingRowNumber
-            model={workspace}
-            modelKey={SETTING_REQUEST_TIMEOUT.modelKey}
-            title={SETTING_REQUEST_TIMEOUT.title}
-            description={SETTING_REQUEST_TIMEOUT.description}
-            placeholder={`${SETTING_REQUEST_TIMEOUT.defaultValue}`}
-            required
-            validate={(value) => Number.parseInt(value, 10) >= 0}
-          />
-
-          <ModelSettingRowBoolean
-            model={workspace}
-            modelKey={SETTING_VALIDATE_CERTIFICATES.modelKey}
-            title={SETTING_VALIDATE_CERTIFICATES.title}
-            description={SETTING_VALIDATE_CERTIFICATES.description}
-          />
-
-          <ModelSettingRowBoolean
-            model={workspace}
-            modelKey={SETTING_FOLLOW_REDIRECTS.modelKey}
-            title={SETTING_FOLLOW_REDIRECTS.title}
-            description={SETTING_FOLLOW_REDIRECTS.description}
-          />
-
-          <ModelSettingRowBoolean
-            model={workspace}
-            modelKey={SETTING_SEND_COOKIES.modelKey}
-            title={SETTING_SEND_COOKIES.title}
-            description={SETTING_SEND_COOKIES.description}
-          />
-
-          <ModelSettingRowBoolean
-            model={workspace}
-            modelKey={SETTING_STORE_COOKIES.modelKey}
-            title={SETTING_STORE_COOKIES.title}
-            description={SETTING_STORE_COOKIES.description}
-          />
-        </SettingsSection>
+        {showWorkspaceSettingsMovedBanner && (
+          <DismissibleBanner
+            id="workspace-settings-moved-2026-06-30"
+            color="info"
+            className="p-4 max-w-xl mx-auto"
+          >
+            <p>
+              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.">
@@ -105,10 +105,18 @@ function WebsocketEventRow({
    : "";

  const iconColor =
-    messageType === "close" || messageType === "open" ? "secondary" : isServer ? "info" : "primary";
+    messageType === "error"
+      ? "warning"
+      : messageType === "close" || messageType === "open"
+        ? "secondary"
+        : isServer
+          ? "info"
+          : "primary";

  const icon =
-    messageType === "close" || messageType === "open"
+    messageType === "error"
+      ? "alert_triangle"
+      : messageType === "close" || messageType === "open"
      ? "info"
      : isServer
        ? "arrow_big_down_dash"
@@ -119,6 +127,8 @@ function WebsocketEventRow({
      "Disconnected from server"
    ) : messageType === "open" ? (
      "Connected to server"
+    ) : messageType === "error" ? (
+      <span className="text-warning">{message}</span>
    ) : message === "" ? (
      <em className="italic text-text-subtlest">No content</em>
    ) : (
@@ -170,7 +180,9 @@ function WebsocketEventDetail({
      ? "Connection Closed"
      : event.messageType === "open"
        ? "Connection Open"
-        : `Message ${event.isServer ? "Received" : "Sent"}`;
+        : event.messageType === "error"
+          ? "WebSocket Error"
+          : `Message ${event.isServer ? "Received" : "Sent"}`;

  const actions: EventDetailAction[] =
    message !== ""
@@ -112,7 +112,9 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
              onCreateNewWorkspace={hide}
              onChange={({ filePath }) => patchModel(workspaceMeta, { settingSyncDir: filePath })}
            />
-            <WorkspaceEncryptionSetting layout="settings" size="xs" />
+            <div className="mt-4">
+              <WorkspaceEncryptionSetting layout="settings" size="xs" />
+            </div>
          </SettingsSection>
          <ModelSettingsEditor model={workspace} showSectionTitles />
        </SettingsList>
@@ -1,6 +1,6 @@
 import { HStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import type { FocusEvent, HTMLAttributes, ReactNode } from "react";
+import type { FocusEvent, InputHTMLAttributes, ReactNode } from "react";
 import {
  forwardRef,
  useCallback,
@@ -28,10 +28,9 @@ export type PlainInputProps = Omit<
  | "extraExtensions"
  | "forcedEnvironmentId"
 > &
-  Pick<HTMLAttributes<HTMLInputElement>, "onKeyDownCapture"> & {
-    onFocusRaw?: HTMLAttributes<HTMLInputElement>["onFocus"];
+  Pick<InputHTMLAttributes<HTMLInputElement>, "inputMode" | "onKeyDownCapture" | "step"> & {
+    onFocusRaw?: InputHTMLAttributes<HTMLInputElement>["onFocus"];
    type?: "text" | "password" | "number";
-    step?: number;
    hideObscureToggle?: boolean;
    labelRightSlot?: ReactNode;
  };
@@ -52,6 +51,7 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
    labelClassName,
    labelPosition = "top",
    labelRightSlot,
+    inputMode,
    leftSlot,
    name,
    onBlur,
@@ -64,6 +64,7 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
    required,
    rightSlot,
    size = "md",
+    step,
    tint,
    type = "text",
    validate,
@@ -204,12 +205,14 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
            autoComplete="off"
            autoCapitalize="off"
            autoCorrect="off"
+            inputMode={inputMode}
            onChange={(e) => handleChange(e.target.value)}
            onPaste={(e) => onPaste?.(e.clipboardData.getData("Text"))}
            className={classNames(commonClassName, "h-full disabled:opacity-disabled")}
            onFocus={handleFocus}
            onBlur={handleBlur}
            required={required}
+            step={step}
            placeholder={placeholder}
            onKeyDownCapture={onKeyDownCapture}
          />
@@ -5,6 +5,7 @@ import { useMemo } from "react";
 import { openFolderSettings } from "../commands/openFolderSettings";
 import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
 import { IconTooltip } from "../components/core/IconTooltip";
+import type { RadioDropdownProps } from "../components/core/RadioDropdown";
 import type { TabItem } from "../components/core/Tabs/Tabs";
 import { capitalize } from "../lib/capitalize";
 import { showConfirm } from "../lib/confirm";
@@ -14,156 +15,192 @@ import type { AuthenticatedModel } from "./useInheritedAuthentication";
 import { useInheritedAuthentication } from "./useInheritedAuthentication";
 import { useModelAncestors } from "./useModelAncestors";

-export function useAuthTab<T extends string>(tabValue: T, model: AuthenticatedModel | null) {
+export function useAuthTab<T extends string>(
+  tabValue: T,
+  model: AuthenticatedModel | null,
+) {
+  const options = useAuthDropdownOptions(model);
+
+  return useMemo<TabItem[]>(() => {
+    if (model == null || options == null) return [];
+
+    const tab: TabItem = {
+      value: tabValue,
+      label: "Auth",
+      options,
+    };
+
+    return [tab];
+  }, [model, options, tabValue]);
+}
+
+export function useAuthDropdownOptions(
+  model: AuthenticatedModel | null,
+): Omit<RadioDropdownProps, "children"> | null {
  const authentication = useHttpAuthenticationSummaries();
  const inheritedAuth = useInheritedAuthentication(model);
  const ancestors = useModelAncestors(model);
  const parentModel = ancestors[0] ?? null;

-  return useMemo<TabItem[]>(() => {
-    if (model == null) return [];
+  return useMemo(() => {
+    if (model == null) return null;

-    const tab: TabItem = {
-      value: tabValue,
-      label: "Auth",
-      options: {
-        value: model.authenticationType,
-        items: [
-          ...authentication.map((a) => ({
-            label: a.label || "UNKNOWN",
-            shortLabel: a.shortLabel,
-            value: a.name,
-          })),
-          { type: "separator" },
-          {
-            label: "Inherit from Parent",
-            shortLabel:
-              inheritedAuth != null && inheritedAuth.authenticationType !== "none" ? (
-                <HStack space={1.5}>
-                  {authentication.find((a) => a.name === inheritedAuth.authenticationType)
-                    ?.shortLabel ?? "UNKNOWN"}
-                  <IconTooltip
-                    icon="zap_off"
-                    iconSize="xs"
-                    content="Authentication was inherited from an ancestor"
-                  />
-                </HStack>
-              ) : (
-                "Auth"
-              ),
-            value: null,
-          },
-          { label: "No Auth", shortLabel: "No Auth", value: "none" },
-        ],
-        itemsAfter: (() => {
-          const actions: (
-            | { type: "separator"; label: string }
-            | { label: string; leftSlot: React.ReactNode; onSelect: () => Promise<void> }
-          )[] = [];
-
-          // Promote: move auth from current model up to parent
-          if (
-            parentModel &&
-            model.authenticationType &&
-            model.authenticationType !== "none" &&
-            (parentModel.authenticationType == null || parentModel.authenticationType === "none")
-          ) {
-            actions.push(
-              { type: "separator", label: "Actions" },
-              {
-                label: `Promote to ${capitalize(parentModel.model)}`,
-                leftSlot: (
-                  <Icon
-                    icon={parentModel.model === "workspace" ? "corner_right_up" : "folder_up"}
-                  />
-                ),
-                onSelect: async () => {
-                  const confirmed = await showConfirm({
-                    id: "promote-auth-confirm",
-                    title: "Promote Authentication",
-                    confirmText: "Promote",
-                    description: (
-                      <>
-                        Move authentication config to{" "}
-                        <InlineCode>{resolvedModelName(parentModel)}</InlineCode>?
-                      </>
-                    ),
-                  });
-                  if (confirmed) {
-                    await patchModel(model, { authentication: {}, authenticationType: null });
-                    await patchModel(parentModel, {
-                      authentication: model.authentication,
-                      authenticationType: model.authenticationType,
-                    });
-
-                    if (parentModel.model === "folder") {
-                      openFolderSettings(parentModel.id, "auth");
-                    } else {
-                      openWorkspaceSettings("auth");
-                    }
-                  }
-                },
-              },
-            );
-          }
-
-          // Copy from ancestor: copy auth config down to current model
-          const ancestorWithAuth = ancestors.find(
-            (a) => a.authenticationType != null && a.authenticationType !== "none",
-          );
-          if (ancestorWithAuth) {
-            if (actions.length === 0) {
-              actions.push({ type: "separator", label: "Actions" });
+    return {
+      value: model.authenticationType,
+      items: [
+        ...authentication.map((a) => ({
+          label: a.label || "UNKNOWN",
+          shortLabel: a.shortLabel,
+          value: a.name,
+        })),
+        { type: "separator" },
+        {
+          label: "Inherit from Parent",
+          shortLabel:
+            inheritedAuth != null &&
+            inheritedAuth.authenticationType !== "none" ? (
+              <HStack space={1.5}>
+                {authentication.find(
+                  (a) => a.name === inheritedAuth.authenticationType,
+                )?.shortLabel ?? "UNKNOWN"}
+                <IconTooltip
+                  icon="zap_off"
+                  iconSize="xs"
+                  content="Authentication was inherited from an ancestor"
+                />
+              </HStack>
+            ) : (
+              "Auth"
+            ),
+          value: null,
+        },
+        { label: "No Auth", shortLabel: "No Auth", value: "none" },
+      ],
+      itemsAfter: (() => {
+        const actions: (
+          | { type: "separator"; label: string }
+          | {
+              label: string;
+              leftSlot: React.ReactNode;
+              onSelect: () => Promise<void>;
            }
-            actions.push({
-              label: `Copy from ${modelTypeLabel(ancestorWithAuth)}`,
+        )[] = [];
+
+        // Promote: move auth from current model up to parent
+        if (
+          parentModel &&
+          model.authenticationType &&
+          model.authenticationType !== "none" &&
+          (parentModel.authenticationType == null ||
+            parentModel.authenticationType === "none")
+        ) {
+          actions.push(
+            { type: "separator", label: "Actions" },
+            {
+              label: `Promote to ${capitalize(parentModel.model)}`,
              leftSlot: (
                <Icon
                  icon={
-                    ancestorWithAuth.model === "workspace" ? "corner_right_down" : "folder_down"
+                    parentModel.model === "workspace"
+                      ? "corner_right_up"
+                      : "folder_up"
                  }
                />
              ),
              onSelect: async () => {
                const confirmed = await showConfirm({
-                  id: "copy-auth-confirm",
-                  title: "Copy Authentication",
-                  confirmText: "Copy",
+                  id: "promote-auth-confirm",
+                  title: "Promote Authentication",
+                  confirmText: "Promote",
                  description: (
                    <>
-                      Copy{" "}
-                      {authentication.find((a) => a.name === ancestorWithAuth.authenticationType)
-                        ?.label ?? "authentication"}{" "}
-                      config from <InlineCode>{resolvedModelName(ancestorWithAuth)}</InlineCode>?
-                      This will override the current authentication but will not affect the{" "}
-                      {modelTypeLabel(ancestorWithAuth).toLowerCase()}.
+                      Move authentication config to{" "}
+                      <InlineCode>{resolvedModelName(parentModel)}</InlineCode>?
                    </>
                  ),
                });
                if (confirmed) {
                  await patchModel(model, {
-                    authentication: { ...ancestorWithAuth.authentication },
-                    authenticationType: ancestorWithAuth.authenticationType,
+                    authentication: {},
+                    authenticationType: null,
                  });
+                  await patchModel(parentModel, {
+                    authentication: model.authentication,
+                    authenticationType: model.authenticationType,
+                  });
+
+                  if (parentModel.model === "folder") {
+                    openFolderSettings(parentModel.id, "auth");
+                  } else {
+                    openWorkspaceSettings("auth");
+                  }
                }
              },
-            });
-          }
+            },
+          );
+        }

-          return actions.length > 0 ? actions : undefined;
-        })(),
-        onChange: async (authenticationType) => {
-          let authentication: Folder["authentication"] = model.authentication;
-          if (model.authenticationType !== authenticationType) {
-            authentication = {
-              // Reset auth if changing types
-            };
+        // Copy from ancestor: copy auth config down to current model
+        const ancestorWithAuth = ancestors.find(
+          (a) =>
+            a.authenticationType != null && a.authenticationType !== "none",
+        );
+        if (ancestorWithAuth) {
+          if (actions.length === 0) {
+            actions.push({ type: "separator", label: "Actions" });
          }
-          await patchModel(model, { authentication, authenticationType });
-        },
+          actions.push({
+            label: `Copy from ${modelTypeLabel(ancestorWithAuth)}`,
+            leftSlot: (
+              <Icon
+                icon={
+                  ancestorWithAuth.model === "workspace"
+                    ? "corner_right_down"
+                    : "folder_down"
+                }
+              />
+            ),
+            onSelect: async () => {
+              const confirmed = await showConfirm({
+                id: "copy-auth-confirm",
+                title: "Copy Authentication",
+                confirmText: "Copy",
+                description: (
+                  <>
+                    Copy{" "}
+                    {authentication.find(
+                      (a) => a.name === ancestorWithAuth.authenticationType,
+                    )?.label ?? "authentication"}{" "}
+                    config from{" "}
+                    <InlineCode>
+                      {resolvedModelName(ancestorWithAuth)}
+                    </InlineCode>
+                    ? This will override the current authentication but will not
+                    affect the {modelTypeLabel(ancestorWithAuth).toLowerCase()}.
+                  </>
+                ),
+              });
+              if (confirmed) {
+                await patchModel(model, {
+                  authentication: { ...ancestorWithAuth.authentication },
+                  authenticationType: ancestorWithAuth.authenticationType,
+                });
+              }
+            },
+          });
+        }
+
+        return actions.length > 0 ? actions : undefined;
+      })(),
+      onChange: async (authenticationType) => {
+        let authentication: Folder["authentication"] = model.authentication;
+        if (model.authenticationType !== authenticationType) {
+          authentication = {
+            // Reset auth if changing types
+          };
+        }
+        await patchModel(model, { authentication, authenticationType });
      },
    };
-
-    return [tab];
-  }, [authentication, inheritedAuth, model, parentModel, tabValue, ancestors]);
+  }, [authentication, inheritedAuth, model, parentModel, ancestors]);
 }
@@ -5,6 +5,7 @@ type ModelType = AnyModel["model"];
 type WorkspaceRequestSettings = Pick<
  Workspace,
  | "settingFollowRedirects"
+  | "settingRequestMessageSize"
  | "settingRequestTimeout"
  | "settingSendCookies"
  | "settingStoreCookies"
@@ -17,7 +18,9 @@ type ModelTypeWithSetting<K extends RequestSettingKey> = {
  [M in ModelType]: K extends keyof ModelForType<M> ? M : never;
 }[ModelType];

-export type RequestSettingDefinition<K extends RequestSettingKey = RequestSettingKey> = {
+export type RequestSettingDefinition<
+  K extends RequestSettingKey = RequestSettingKey,
+> = {
  defaultValue: WorkspaceRequestSettings[K];
  description: string;
  modelKey: K;
@@ -41,11 +44,26 @@ export const SETTING_REQUEST_TIMEOUT = defineRequestSetting({
  title: "Request Timeout",
 });

+export const SETTING_REQUEST_MESSAGE_SIZE = defineRequestSetting({
+  defaultValue: 64 * 1024 * 1024,
+  description:
+    "Maximum gRPC or WebSocket message size in MB. Set to 0 to disable.",
+  modelKey: "settingRequestMessageSize",
+  models: ["workspace", "folder", "websocket_request", "grpc_request"],
+  title: "Message Size Limit",
+});
+
 export const SETTING_VALIDATE_CERTIFICATES = defineRequestSetting({
  defaultValue: true,
  description: "When disabled, skip validation of server certificates.",
  modelKey: "settingValidateCertificates",
-  models: ["workspace", "folder", "http_request", "websocket_request", "grpc_request"],
+  models: [
+    "workspace",
+    "folder",
+    "http_request",
+    "websocket_request",
+    "grpc_request",
+  ],
  title: "Validate TLS certificates",
 });

@@ -59,7 +77,8 @@ export const SETTING_FOLLOW_REDIRECTS = defineRequestSetting({

 export const SETTING_SEND_COOKIES = defineRequestSetting({
  defaultValue: true,
-  description: "Attach matching cookies from the active cookie jar to outgoing requests.",
+  description:
+    "Attach matching cookies from the active cookie jar to outgoing requests.",
  modelKey: "settingSendCookies",
  models: ["workspace", "folder", "http_request", "websocket_request"],
  title: "Automatically send cookies",
@@ -67,7 +86,8 @@ export const SETTING_SEND_COOKIES = defineRequestSetting({

 export const SETTING_STORE_COOKIES = defineRequestSetting({
  defaultValue: true,
-  description: "Save cookies from Set-Cookie response headers to the active cookie jar.",
+  description:
+    "Save cookies from Set-Cookie response headers to the active cookie jar.",
  modelKey: "settingStoreCookies",
  models: ["workspace", "folder", "http_request", "websocket_request"],
  title: "Automatically store cookies",
@@ -102,11 +102,11 @@
    "postcss-nesting": "^13.0.2",
    "rollup": "^4.60.3",
    "tailwindcss": "^3.4.17",
-    "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.20",
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.2.1",
    "vite-plugin-static-copy": "^3.3.0",
    "vite-plugin-svgr": "^4.5.0",
    "vite-plugin-top-level-await": "^1.5.0",
    "vite-plugin-wasm": "^3.5.0",
-    "vite-plus": "^0.1.24"
+    "vite-plus": "^0.2.1"
  }
 }
@@ -39,6 +39,7 @@ export default defineConfig(async () => {
      }),
    ],
    build: {
+      target: "esnext",
      sourcemap: true,
      outDir: "../../dist/apps/yaak-client",
      emptyOutDir: true,
@@ -31,7 +31,7 @@
    "@vitejs/plugin-react": "^6.0.1",
    "babel-plugin-react-compiler": "^1.0.0",
    "typescript": "^5.8.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.20",
-    "vite-plus": "^0.1.24"
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.2.1",
+    "vite-plus": "^0.2.1"
  }
 }